diff --git a/src/components/atoms/section-card.astro b/src/components/atoms/section-card.astro
index 70a2f88..d79a884 100644
--- a/src/components/atoms/section-card.astro
+++ b/src/components/atoms/section-card.astro
@@ -4,4 +4,4 @@ export interface Props extends astroHTML.JSX.HTMLAttributes {}
 const { props } = Astro;
 ---
 
-<div {...props} class:list={['p-8 bg-white rounded-2xl shadow-lg', props.class]}><slot /></div>
+<div {...props} class:list={['p-8 bg-white rounded-2xl shadow-md', props.class]}><slot /></div>
diff --git a/src/components/organisms/sidebar.astro b/src/components/organisms/sidebar.astro
new file mode 100644
index 0000000..82f23df
--- /dev/null
+++ b/src/components/organisms/sidebar.astro
@@ -0,0 +1,7 @@
+---
+export interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { props } = Astro;
+---
+
+<nav class:list={['w-14 min-w-[56px] h-72 rounded-lg bg-white shadow-md', props.class]}></nav>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c9340bc..81779c1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import Sidebar from '@/organisms/sidebar.astro';
 import ExperienceSection from '@/sections/experience-section.astro';
 import FavoritesSection from '@/sections/favorites-section.astro';
 import MainSection from '@/sections/main-section.astro';
@@ -19,14 +20,17 @@ import data from '../data';
     <title>{data.seo.title}</title>
     <meta name="description" content={data.seo.description} />
   </head>
-  <body class="bg-gray-50">
-    <main>
-      <MainSection {...data.main} />
-      {data.skills && <SkillsSection {...data.skills} />}
-      {data.experience && <ExperienceSection {...data.experience} />}
-      {data.portfolio && <PortfolioSection {...data.portfolio} />}
-      {data.testimonials && <TestimonialsSection {...data.testimonials} />}
-      {data.favorites && <FavoritesSection {...data.favorites} />}
-    </main>
+  <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">
+        <MainSection {...data.main} />
+        {data.skills && <SkillsSection {...data.skills} />}
+        {data.experience && <ExperienceSection {...data.experience} />}
+        {data.portfolio && <PortfolioSection {...data.portfolio} />}
+        {data.testimonials && <TestimonialsSection {...data.testimonials} />}
+        {data.favorites && <FavoritesSection {...data.favorites} />}
+      </main>
+      <Sidebar class="hidden lg:block" />
+    </div>
   </body>
 </html>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 3169883..45e41b3 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -11,6 +11,11 @@ module.exports = {
       primary: colors.indigo,
       gray: colors.gray,
     },
+    extend: {
+      spacing: {
+        22: '5.5rem',
+      },
+    },
   },
   plugins: [],
 };
diff --git a/tsconfig.json b/tsconfig.json
index 5f7bd2f..a0c9bfc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,6 +33,7 @@
     "baseUrl": ".",
     "paths": {
       "@/atoms/*": ["src/components/atoms/*"],
+      "@/organisms/*": ["src/components/organisms/*"],
       "@/sections/*": ["src/components/sections/*"],
       "@/assets/*": ["src/assets/*"],
       "@/types/*": ["src/types/*"]
