diff --git a/src/App.scss b/src/App.scss
index db1f12f..48bcd7d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,6 +1,10 @@
 @use 'tailwindcss' as *;
 @use '@fontsource/roboto' as *;
 
+$backgroundColor: #131313;
+
 body {
   font-family: 'Roboto', sans-serif;
+  background-color: $backgroundColor;
+  color: white;
 }
diff --git a/src/App.tsx b/src/App.tsx
index dc65681..2a2b01a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,9 +7,11 @@ export default function App () {
   return (
     <HashRouter>
       <Sidebar />
-      <Routes>
-        <Route path='/' element={<Home />} />
-      </Routes>
+      <main style={{ marginLeft: '15rem' }}>
+        <Routes>
+          <Route path='/' element={<Home />} />
+        </Routes>
+      </main>
     </HashRouter>
   )
 }
diff --git a/src/componets/Sidebar.css b/src/componets/Sidebar.css
index c8c2d5a..5b7303d 100644
--- a/src/componets/Sidebar.css
+++ b/src/componets/Sidebar.css
@@ -1,7 +1,7 @@
 @import 'tailwindcss';
 
 .sidebar {
-  @apply w-60 h-screen bg-[#191919] flex flex-col;
+  @apply fixed top-0 left-0 w-60 h-screen bg-[#191919] flex flex-col;
 }
 
 .logo {