diff --git a/client/src/components/navigation/Dropdown/dropdown.scss b/client/src/components/navigation/Dropdown/dropdown.scss
new file mode 100644
index 0000000000000000000000000000000000000000..62f76a1a0ff6b612923a31a876641ab49bc649df
--- /dev/null
+++ b/client/src/components/navigation/Dropdown/dropdown.scss
@@ -0,0 +1,41 @@
+@use 'styles/settings.scss'as s;
+
+.dropdown-container {
+    position: relative;
+    cursor: pointer;
+    padding-bottom: 5px;
+
+    &.open {
+        .dropdown {
+            opacity: 1;
+            transform: translateY(100%);
+            visibility: visible;
+        }
+    }
+
+    .dropdown {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        transform: translateY(75%);
+        background: s.$white;
+        z-index: 2000;
+        max-width: 200px;
+        border-radius: 5px;
+        box-shadow: 0 0 5px rgba(s.$black, 0.05);
+        visibility: hidden;
+        opacity: 0;
+
+
+        .dropdown-item {
+            padding: 10px 20px;
+            display: block;
+            color: s.$body-color;
+            border-radius: 5px;
+
+            &:hover {
+                box-shadow: 0 0 10px rgba(s.$black, 0.1);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/client/src/components/navigation/Dropdown/index.tsx b/client/src/components/navigation/Dropdown/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..76b48000c487fabb78cb1ef601a3cd256e4ffe3d
--- /dev/null
+++ b/client/src/components/navigation/Dropdown/index.tsx
@@ -0,0 +1,31 @@
+import { ReactNode, useState } from 'react';
+import { Link } from 'react-router-dom';
+import './dropdown.scss';
+
+interface DropDownItem {
+    label: string;
+    route: string;
+}
+
+interface Props {
+    children: ReactNode;
+    items: DropDownItem[]
+}
+
+export default function Dropdown({ children, items }: Props) {
+    const [isOpen, setOpen] = useState(false);
+    return (
+        <div className={'dropdown-container' + (isOpen ? ' open' : '')} onClick={() => setOpen(state => !state)}>
+            {children}
+            <div className="dropdown">
+                {
+                    items.map((item) => (
+                        <Link className="dropdown-item" to={item.route}>
+                            {item.label}
+                        </Link>
+                    ))
+                }
+            </div>
+        </div>
+    );
+}
\ 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 f0640cbbec93c7f455083934f6b7e0eb7e5f52ae..d3e5d303ba12a734b80ca0a56fef385775f3a407 100644
--- a/client/src/components/navigation/Tabs/tabs.scss
+++ b/client/src/components/navigation/Tabs/tabs.scss
@@ -5,6 +5,7 @@
     justify-content: space-between;
     background: rgba(s.$white, 0.25);
     border-radius: 15px;
+    margin-top: 30px;
     position: relative;
 
     .tab {
diff --git a/client/src/components/ui/DetailBox/detail-box.scss b/client/src/components/ui/DetailBox/detail-box.scss
index 1720801acbf0c5f66cd1b5dc93fab442bb3aa190..9481c29f2b1ece641f20e58e37fbfff23d89598b 100644
--- a/client/src/components/ui/DetailBox/detail-box.scss
+++ b/client/src/components/ui/DetailBox/detail-box.scss
@@ -34,11 +34,8 @@
             }
 
             @include mx.breakpoint(medium) {
-                width: 64px;
-                height: 64px;
-
                 .icon {
-                    font-size: 32px;
+                    font-size: 28px;
                 }
             }
         }
diff --git a/client/src/pages/Teams/TeamsStats/index.tsx b/client/src/pages/Teams/TeamsStats/index.tsx
index 91285b4575a9f06df1a1a59d2a6805a3a17238ec..246ac6b06b70e6676d599642c99a27f7012762b8 100644
--- a/client/src/pages/Teams/TeamsStats/index.tsx
+++ b/client/src/pages/Teams/TeamsStats/index.tsx
@@ -1,9 +1,18 @@
+import Dropdown from 'components/navigation/Dropdown';
 import './teams-stats.scss';
 
 export default function TeamsStats() {
     return (
         <section className="teams-stats-section">
             <div className="content-container">
+                <Dropdown items={[{ label: "Last month", route: "lastmonth" }]}>
+                    <div className="filter-label">
+                        <span className="material-icons icon">
+                            expand_more
+                        </span>
+                        Last week
+                        </div>
+                </Dropdown>
                 test
             </div>
         </section>