diff --git a/web/src/components/Home/Sidebar/index.tsx b/web/src/components/Home/Sidebar/index.tsx
index 63b935c..0d79fdc 100644
--- a/web/src/components/Home/Sidebar/index.tsx
+++ b/web/src/components/Home/Sidebar/index.tsx
@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import { barItems } from "../tabs";
+import { useBarItems } from "../tabs";
 
 export interface ISidebarProps {
   activeTab: string;
@@ -7,6 +7,8 @@ export interface ISidebarProps {
 }
 
 const Sidebar: FC<ISidebarProps> = ({ activeTab, onChangeTab }) => {
+  const barItems = useBarItems();
+
   return (
     <div className="hidden sm:flex flex-col gap-2 items-stretch min-w-80 w-80 p-5 pt-18 min-h-screen select-none bg-white/65 dark:bg-black/65 shadow-lg shadow-gray-300 dark:shadow-gray-700">
       {barItems.map((item) => (
diff --git a/web/src/components/Home/TopBar/index.tsx b/web/src/components/Home/TopBar/index.tsx
index 95fd8c8..faee526 100644
--- a/web/src/components/Home/TopBar/index.tsx
+++ b/web/src/components/Home/TopBar/index.tsx
@@ -1,5 +1,5 @@
 import { type FC } from "react";
-import { barItems } from "../tabs";
+import { useBarItems } from "../tabs";
 
 export interface ITopBarProps {
   activeTab: string;
@@ -7,6 +7,8 @@ export interface ITopBarProps {
 }
 
 const TopBar: FC<ITopBarProps> = ({ activeTab, onChangeTab }) => {
+  const barItems = useBarItems();
+
   return (
     <div className="sm:hidden flex w-full overflow-x-auto sm:overflow-x-visible max-w-full min-w-full sm:justify-center sm:space-x-4 no-scrollbar shadow-md shadow-gray-300 dark:shadow-gray-700 dark:bg-black/70 bg-white/70 pt-14">
       {barItems.map((item) => (
diff --git a/web/src/components/Home/tabs.tsx b/web/src/components/Home/tabs.tsx
index 344345a..cab17e4 100644
--- a/web/src/components/Home/tabs.tsx
+++ b/web/src/components/Home/tabs.tsx
@@ -1,19 +1,37 @@
-import { Home, Settings2, User } from "lucide-react";
+import { useAuth } from "@/store/auth";
+import { Blocks, Home, Settings2, User } from "lucide-react";
 
-export const barItems = [
-  {
-    icon: <Home />,
-    title: "Home",
-    tab: "home",
-  },
-  {
-    icon: <User />,
-    title: "Personal Info",
-    tab: "personal-info",
-  },
-  {
-    icon: <Settings2 />,
-    title: "Data & Personalization",
-    tab: "data-personalization",
-  },
-];
+export const useBarItems = () => {
+  const profile = useAuth((state) => state.profile);
+
+  if (!profile) {
+    return [];
+  }
+
+  return [
+    {
+      icon: <Home />,
+      title: "Home",
+      tab: "home",
+    },
+    {
+      icon: <User />,
+      title: "Personal Info",
+      tab: "personal-info",
+    },
+    {
+      icon: <Settings2 />,
+      title: "Data & Personalization",
+      tab: "data-personalization",
+    },
+    ...(profile.isAdmin
+      ? [
+          {
+            icon: <Blocks />,
+            title: "API Services",
+            tab: "api-services",
+          },
+        ]
+      : []),
+  ];
+};