diff --git a/frontend/app/studio/page.tsx b/frontend/app/studio/page.tsx
index eeff4863e..647c304cb 100644
--- a/frontend/app/studio/page.tsx
+++ b/frontend/app/studio/page.tsx
@@ -24,12 +24,14 @@ const Studio = (): JSX.Element => {
       label: "Manage my brains",
       isSelected: selectedTab === "Manage my brains",
       onClick: () => setSelectedTab("Manage my brains"),
+      iconName: "edit",
     },
     {
       label: "Analytics - Coming soon",
       isSelected: selectedTab === "Analytics",
       onClick: () => setSelectedTab("Analytics"),
       disabled: true,
+      iconName: "graph",
     },
   ];
 
diff --git a/frontend/app/user/page.tsx b/frontend/app/user/page.tsx
index 1930d60f5..07364eb11 100644
--- a/frontend/app/user/page.tsx
+++ b/frontend/app/user/page.tsx
@@ -44,16 +44,19 @@ const UserPage = (): JSX.Element => {
       label: "Settings",
       isSelected: selectedTab === "Settings",
       onClick: () => setSelectedTab("Settings"),
+      iconName: "settings",
     },
     {
       label: "Brains Usage",
       isSelected: selectedTab === "Brains Usage",
       onClick: () => setSelectedTab("Brains Usage"),
+      iconName: "graph",
     },
     {
       label: "Plan",
       isSelected: selectedTab === "Plan",
       onClick: () => setSelectedTab("Plan"),
+      iconName: "star",
     },
   ];
 
diff --git a/frontend/lib/components/PageHeader/PageHeader.module.scss b/frontend/lib/components/PageHeader/PageHeader.module.scss
index 590271266..60f932378 100644
--- a/frontend/lib/components/PageHeader/PageHeader.module.scss
+++ b/frontend/lib/components/PageHeader/PageHeader.module.scss
@@ -1,4 +1,5 @@
 @use "@/styles/Colors.module.scss";
+@use "@/styles/ScreenSizes.module.scss";
 @use "@/styles/Spacings.module.scss";
 @use "@/styles/Typography.module.scss";
 
@@ -21,10 +22,15 @@
       visibility: visible;
       padding-left: Spacings.$spacing07;
     }
+
+    @media (max-width: ScreenSizes.$small) {
+      display: none;
+    }
   }
 
   .buttons_wrapper {
     display: flex;
     gap: Spacings.$spacing03;
+    align-self: flex-end;
   }
 }
diff --git a/frontend/lib/components/ui/Icon/Icon.module.scss b/frontend/lib/components/ui/Icon/Icon.module.scss
index 197ddcb42..543c84bc8 100644
--- a/frontend/lib/components/ui/Icon/Icon.module.scss
+++ b/frontend/lib/components/ui/Icon/Icon.module.scss
@@ -33,6 +33,10 @@
   color: Colors.$dark-grey;
 }
 
+.grey {
+  color: Colors.$normal-grey;
+}
+
 .primary {
   color: Colors.$primary;
 }
diff --git a/frontend/lib/components/ui/Tabs/Tabs.module.scss b/frontend/lib/components/ui/Tabs/Tabs.module.scss
index 098777670..760d048e2 100644
--- a/frontend/lib/components/ui/Tabs/Tabs.module.scss
+++ b/frontend/lib/components/ui/Tabs/Tabs.module.scss
@@ -1,5 +1,6 @@
 @use "@/styles/Colors.module.scss";
 @use "@/styles/Radius.module.scss";
+@use "@/styles/ScreenSizes.module.scss";
 @use "@/styles/Spacings.module.scss";
 
 .tabs_container {
@@ -15,6 +16,7 @@
     padding-block: Spacings.$spacing03;
     cursor: pointer;
     box-sizing: border-box;
+    gap: Spacings.$spacing03;
 
     &.selected {
       border-bottom-color: Colors.$primary;
@@ -30,5 +32,11 @@
       pointer-events: none;
       color: Colors.$normal-grey;
     }
+
+    @media (max-width: ScreenSizes.$small) {
+      .label {
+        display: none;
+      }
+    }
   }
 }
diff --git a/frontend/lib/components/ui/Tabs/Tabs.tsx b/frontend/lib/components/ui/Tabs/Tabs.tsx
index 51b5fa8b4..6b89e4a31 100644
--- a/frontend/lib/components/ui/Tabs/Tabs.tsx
+++ b/frontend/lib/components/ui/Tabs/Tabs.tsx
@@ -2,6 +2,8 @@ import { Tab } from "@/lib/types/Tab";
 
 import styles from "./Tabs.module.scss";
 
+import { Icon } from "../Icon/Icon";
+
 type TabsProps = {
   tabList: Tab[];
 };
@@ -19,7 +21,12 @@ export const Tabs = ({ tabList }: TabsProps): JSX.Element => {
           key={index}
           onClick={tab.onClick}
         >
-          <span>{tab.label}</span>
+          <Icon
+            name={tab.iconName}
+            size="normal"
+            color={tab.isSelected ? "primary" : tab.disabled ? "grey" : "black"}
+          />
+          <span className={styles.label}>{tab.label}</span>
         </div>
       ))}
     </div>
diff --git a/frontend/lib/types/Colors.ts b/frontend/lib/types/Colors.ts
index c8313abf2..25b75d01c 100644
--- a/frontend/lib/types/Colors.ts
+++ b/frontend/lib/types/Colors.ts
@@ -1,6 +1,7 @@
 export type Color =
   | "black"
   | "dark-grey"
+  | "grey"
   | "primary"
   | "gold"
   | "accent"
diff --git a/frontend/lib/types/Tab.ts b/frontend/lib/types/Tab.ts
index a18b81b07..565be6fed 100644
--- a/frontend/lib/types/Tab.ts
+++ b/frontend/lib/types/Tab.ts
@@ -1,6 +1,9 @@
+import { iconList } from "../helpers/iconList";
+
 export interface Tab {
   label: string;
   isSelected: boolean;
   disabled?: boolean;
+  iconName: keyof typeof iconList;
   onClick: () => void;
 }