diff --git a/client/src/components/navigation/Tabs/index.tsx b/client/src/components/navigation/Tabs/index.tsx
index 4bd5c38b3639b868cf7b67fc6e704388c75bbb35..6b4ff2243091a1f641a098889002b0a28027b430 100644
--- a/client/src/components/navigation/Tabs/index.tsx
+++ b/client/src/components/navigation/Tabs/index.tsx
@@ -1,14 +1,23 @@
+import { NavLink } from 'react-router-dom';
 import './tabs.scss';
 
 interface Tab {
     route: string,
-    label: string    
+    label: string
 }
 
 interface Props {
-    tabs: [Tab, Tab]
+    tabs: Tab[]
 }
 
-export default function Tabs({tabs}: Props) {
-
+export default function Tabs({ tabs }: Props) {
+    return (
+        <nav className="tabs-container">
+            {tabs.map((tab) => (
+                <NavLink key={tab.route} className="tab" exact activeClassName="active" to={tab.route}>
+                    {tab.label}
+                </NavLink>
+            ))}
+        </nav>
+    );
 }
\ No newline at end of file
diff --git a/client/src/components/navigation/Tabs/tabs.scss b/client/src/components/navigation/Tabs/tabs.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..2733f69c4b1673d7db55d64b4a38a793aec69bcc 100644
--- a/client/src/components/navigation/Tabs/tabs.scss
+++ b/client/src/components/navigation/Tabs/tabs.scss
@@ -0,0 +1,41 @@
+@use 'styles/settings.scss'as s;
+
+.tabs-container {
+    display: flex;
+    justify-content: space-between;
+    background: rgba(s.$white, 0.25);
+
+    .tab {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: calc(50% - 20px);
+        height: 50px;
+        color: s.$body-color;
+        font-weight: s.$weight-semi-bold;
+        font-size: 14px;
+        position: relative;
+
+        &:before {
+            content: ' ';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translate(-50%, 50%) scaleX(0);
+            height: 5px;
+            width: 30px;
+            background: s.$primary;
+            border-radius: 3px;
+            transition: s.$transition;
+        }
+
+        &.active {
+            font-weight: s.$weight-bold;
+            font-size: 16px;
+
+            &:before {
+                transform: translate(-50%, 50%) scaleX(1);
+            }
+        }
+    }
+}
diff --git a/client/src/components/ui/DetailBox/detail-box.scss b/client/src/components/ui/DetailBox/detail-box.scss
index b81468bc89bc8eacea6f9d0e5e87fe56823213e2..1720801acbf0c5f66cd1b5dc93fab442bb3aa190 100644
--- a/client/src/components/ui/DetailBox/detail-box.scss
+++ b/client/src/components/ui/DetailBox/detail-box.scss
@@ -57,5 +57,4 @@
             font-size: 14px;
         }
     }
-
-}
\ No newline at end of file
+}
diff --git a/client/src/components/ui/DetailGrid/detail-grid.scss b/client/src/components/ui/DetailGrid/detail-grid.scss
index b7fdf016c2ce973671defd4aa7c92d91b9faeb4a..07a53db5e40184d79e4c9694d09578d41e706531 100644
--- a/client/src/components/ui/DetailGrid/detail-grid.scss
+++ b/client/src/components/ui/DetailGrid/detail-grid.scss
@@ -18,4 +18,4 @@
             width: calc(20% - 32px);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/client/src/components/ui/DetailGrid/index.tsx b/client/src/components/ui/DetailGrid/index.tsx
index 8ad3e4c9da2c21f202c2a029b04b8067ab3bf16d..86fb2ba2677f45e8bcfa0233dd32a4bd32b69585 100644
--- a/client/src/components/ui/DetailGrid/index.tsx
+++ b/client/src/components/ui/DetailGrid/index.tsx
@@ -11,7 +11,7 @@ export default function DetailGrid({ details }: Props) {
         <div className="detail-grid">
             {
                 details.map((detail) => (
-                    <div className="box-container">
+                    <div key={detail.title} className="box-container">
                         <DetailBox {...detail} />
                     </div>
                 ))
diff --git a/client/src/pages/AppWrapper.tsx b/client/src/pages/AppWrapper.tsx
index 5d685567704b472ff835bd000e89a3e68d59ef27..993e3ff307e9f2cc8590da7d772920524b729d8f 100644
--- a/client/src/pages/AppWrapper.tsx
+++ b/client/src/pages/AppWrapper.tsx
@@ -21,7 +21,7 @@ export default function AppWrapper() {
                 <ProtectedRoute path="/projects" component={Projects} />
                 <ProtectedRoute path="/stats" component={Stats} />
                 <ProtectedRoute path="/teams/:uuid/edit" component={TeamsEdit} />
-                <ProtectedRoute path="/teams" exact component={Teams} />
+                <ProtectedRoute path={["/teams", "/teams/:tab"]} exact component={Teams} />
                 <ProtectedRoute path="/settings" component={Settings} />
             </Suspense>
         </Header>
diff --git a/client/src/pages/Teams/index.tsx b/client/src/pages/Teams/index.tsx
index 541eebf4918e76897af0ad4bf7134887b35330bd..e07ecd596eb851da14fe6cd621f349abf3357f85 100644
--- a/client/src/pages/Teams/index.tsx
+++ b/client/src/pages/Teams/index.tsx
@@ -2,6 +2,12 @@ import './teams.scss';
 import Page from 'components/ui/Page';
 import DetailGrid from 'components/ui/DetailGrid';
 import ButtonLink from 'components/navigation/ButtonLink';
+import Tabs from 'components/navigation/Tabs';
+import { useParams } from 'react-router';
+
+interface Params {
+    tab: string
+}
 
 export default function Teams() {
     const teamDetails = [{
@@ -12,15 +18,30 @@ export default function Teams() {
         icon: 'folder',
         title: 'Projects',
         number: 3
-    }]
+    }];
+
+    const tabs = [{
+        route: '/teams',
+        label: 'Members',
+    }, {
+        route: '/teams/stats',
+        label: 'Stats'
+    }];
+
+    const {tab} = useParams<Params>();
+
+
     return (
         <Page className="teams-page">
             <div className="content-container">
                 <h1 className="underlined">Teams</h1>
                 <DetailGrid details={teamDetails} />
                 <ButtonLink href="/teams/uuid/edit" routing={true} className="expanded">
-                     Edit
+                    Edit
                 </ButtonLink>
+                <Tabs tabs={tabs} />
+                {!tab && (<h2>Members</h2>)}
+                {tab === "stats" && (<h2>Stats</h2>)}
             </div>
         </Page>
     )
diff --git a/client/src/pages/Teams/teams.scss b/client/src/pages/Teams/teams.scss
index aba69c31b3d97786d0d106719cf10e53c593ac8c..58fe23ea88b26dbe1096f3da33f119365d6d0c9a 100644
--- a/client/src/pages/Teams/teams.scss
+++ b/client/src/pages/Teams/teams.scss
@@ -2,4 +2,4 @@
     .button {
         margin: 25px 0;
     }
-}
\ No newline at end of file
+}