diff --git a/package.json b/package.json
index cfbb908..8f0eabe 100644
--- a/package.json
+++ b/package.json
@@ -52,8 +52,8 @@
     "postcss": "8.4.18",
     "prettier": "2.7.1",
     "tailwindcss": "3.2.1",
-    "typescript": "4.8.4",
     "type-fest": "3.1.0",
+    "typescript": "4.8.4",
     "vite": "3.1.8",
     "vite-tsconfig-paths": "3.5.2"
   }
diff --git a/src/components/atoms/sidebar-item.astro b/src/components/atoms/sidebar-item.astro
index 97d82f1..a74a9f1 100644
--- a/src/components/atoms/sidebar-item.astro
+++ b/src/components/atoms/sidebar-item.astro
@@ -14,10 +14,10 @@ const { icon, active } = Astro.props;
 <button
   type="button"
   class:list={[
-    `inline-flex justify-center items-center h-10 w-10 rounded-lg transition hover:bg-primary-600`,
-    active && 'bg-primary-600',
+    'inline-flex justify-center items-center h-10 w-10 rounded-lg transition',
+    active && 'bg-primary-600 text-white',
+    !active && 'bg-white text-gray-400 hover:bg-primary-600 hover:text-white',
   ]}
 >
-  <Icon client:load name={icon} size={20} color={active ? 'white' : 'gray'} />
-  <slot />
+  <Icon client:load name={icon} size={20} />
 </button>
diff --git a/src/components/organisms/sidebar.astro b/src/components/organisms/sidebar.astro
index 611c83d..16259a8 100644
--- a/src/components/organisms/sidebar.astro
+++ b/src/components/organisms/sidebar.astro
@@ -1,3 +1,11 @@
-<nav class="flex flex-col w-max p-2 rounded-lg gap-2 bg-white shadow-md">
+---
+export interface Props {
+  className: string;
+}
+
+const { className } = Astro.props;
+---
+
+<nav class:list={['flex flex-col w-max h-fit p-2 rounded-lg gap-2 bg-white shadow-md', className]}>
   <slot />
 </nav>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 81779c1..788fccb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import SidebarItem from '@/atoms/sidebar-item.astro';
 import Sidebar from '@/organisms/sidebar.astro';
 import ExperienceSection from '@/sections/experience-section.astro';
 import FavoritesSection from '@/sections/favorites-section.astro';
@@ -21,8 +22,8 @@ import data from '../data';
     <meta name="description" content={data.seo.description} />
   </head>
   <body class="flex justify-center bg-gray-50">
-    <div class="flex gap-8 w-full max-w-6xl px-4 py-6 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
-      <main class="w-full space-y-6 lg:space-y-8">
+    <div class="flex gap-8 w-full max-w-6xl px-2 py-3 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
+      <main class="w-full space-y-4 sm:space-y-6 lg:space-y-8">
         <MainSection {...data.main} />
         {data.skills && <SkillsSection {...data.skills} />}
         {data.experience && <ExperienceSection {...data.experience} />}
@@ -30,7 +31,14 @@ import data from '../data';
         {data.testimonials && <TestimonialsSection {...data.testimonials} />}
         {data.favorites && <FavoritesSection {...data.favorites} />}
       </main>
-      <Sidebar class="hidden lg:block" />
+      <Sidebar className="hidden lg:flex">
+        <SidebarItem icon="fa6-solid:user" />
+        {data.skills && <SidebarItem icon="fa6-solid:bars-progress" />}
+        {data.experience && <SidebarItem icon="fa6-solid:suitcase" />}
+        {data.portfolio && <SidebarItem icon="fa6-solid:rocket" />}
+        {data.testimonials && <SidebarItem icon="fa6-solid:comment" />}
+        {data.favorites && <SidebarItem icon="fa6-solid:star" />}
+      </Sidebar>
     </div>
   </body>
 </html>
