diff --git a/apps/web/Components/Layout/Navigation.jsx b/apps/web/Components/Layout/Navigation.jsx
index 3f975ea..e78732d 100644
--- a/apps/web/Components/Layout/Navigation.jsx
+++ b/apps/web/Components/Layout/Navigation.jsx
@@ -8,15 +8,17 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   gap: 10px;
-  height: 40px;
+  height: 46px;
   justify-content: space-around;
   position: fixed;
   width: 100%;
+  border-top: 1px solid rgba(5, 5, 5, 0.06);
 `;
 
 const TabButton = styled.button`
-  background: rgba(240, 240, 240);
-  border-radius: 6px;
+  background: ${({ active }) => (active ? 'var(--color-primary)' : 'white')};
+  color: ${({ active }) => (active ? 'white' : 'black')};
+  border-radius: 2px 2px 0 0;
   border: none;
   cursor: pointer;
   height: 100%;
@@ -24,12 +26,12 @@ const TabButton = styled.button`
 `;
 
 export function NavigationBar() {
-  const { setCurrentTab, tabsList } = useContext(NavigationContext);
+  const { currentTab, setCurrentTab, tabsList } = useContext(NavigationContext);
 
   return (
     <Container>
       {tabsList.map(({ key, title }) => (
-        <TabButton key={key} onClick={() => setCurrentTab(key)}>
+        <TabButton key={key} active={key === currentTab} onClick={() => setCurrentTab(key)}>
           {title}
         </TabButton>
       ))}
diff --git a/apps/web/Components/Layout/index.jsx b/apps/web/Components/Layout/index.jsx
index 4c2138f..3001ee9 100644
--- a/apps/web/Components/Layout/index.jsx
+++ b/apps/web/Components/Layout/index.jsx
@@ -10,7 +10,7 @@ const Main = styled.main`
   margin: 8px 0;
 
   ${max('laptop')} {
-    margin-bottom: 40px; // height of the navigation bar
+    margin-bottom: calc(46px + 8px); // height of the navigation bar
   }
 
   ${min('desktop-xl')} {