diff --git a/pages/base.html b/pages/base.html
index 2efd162..74f95cb 100644
--- a/pages/base.html
+++ b/pages/base.html
@@ -1,62 +1,60 @@
 {{ define "base" }}
 
+
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dela</title>
+    <title>dela</title>
     <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
-    <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
     <style>
-        html * {
-            font-family: "Roboto", sans-serif !important;
-        }
-        body {
-            background-color: #f8f9fa;
-        }
-        header {
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        }
+       html * {
+        font-family: "Roboto" !important;
+        src: url("/static/fonts/Roboto-Regular.ttf");
+       }
     </style>
 </head>
 
 <body class="w-100 h-100">
-    <header class="p-3 text-bg-warning-emphasis">
-        <div class="container">
-            <div class="d-flex flex-wrap align-items-center justify-content-between">
-                <a href="/" class="d-flex align-items-center text-white text-decoration-none">
-                    <img width="64" height="64" src="/static/images/android-chrome-192x192.png" alt="Dela">
-                </a>
+  <header class="p-3 text-bg-primary">
+    <div class="container">
+      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
+          <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
+            <img width="64" height="64" src="/static/images/android-chrome-192x192.png" alt="Dela">
+          </a>
+        </a>
 
-                <nav class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
-                    <a href="/" class="nav-link px-2 text-white">Main</a>
-                    <a href="/about" class="nav-link px-2 text-white">About</a>
-                </nav>
+        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
+          <li><a href="/" class="nav-link px-2 text-white">Main</a></li>
+          <li><a href="/about" class="nav-link px-2 text-white">About</a></li>
+        </ul>
 
-                <div class="d-flex align-items-center">
-                    <button id="theme-switch-btn" class="btn btn-secondary me-2" onclick="toggleTheme();">
-                        <img id="theme-svg" src="/static/images/brightness-high.svg" alt="Change theme">
-                    </button>
-                    <div id="bar-auth" class="d-flex">
-                        <a href="/login" class="btn btn-outline-light me-2">Login</a>
-                        <a href="/register" class="btn btn-warning">Sign-up</a>
-                    </div>
-                </div>
-            </div>
+        <div class="text-end p-3">
+          <button id="theme-switch-btn" class="btn btn-secondary" onclick="toggleTheme();">
+            <img id="theme-svg" src="/static/images/brightness-high.svg" alt="Change theme">
+          </button>
         </div>
-    </header>
-    
-    <!-- Content -->
-    <main class="container mt-4">
-        {{ template "content" . }}
-    </main>
-</body>
+        <div class="text-end" id="bar-auth">
+          <a href="/login" class="btn btn-outline-light me-2">Login</a>
+          <a href="/register" class="btn btn-warning">Sign-up</a>
+        </div>
+        </div>
+      </div>
+    </div>
+  </header>
+  
+  <!-- Content -->
+  {{ template "content" . }}
 
+</body>
 </html>
 
+
 <script src="/scripts/auth.js"></script>
 <script src="/scripts/api.js"></script>
 <script>
diff --git a/pages/index.html b/pages/index.html
index b9f11e1..520794d 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -2,65 +2,67 @@
 
 {{ define "content" }}
 
+
 <!-- Main -->
-<main class="container mt-4">
+<main>
+
   <div class="d-flex flex-wrap">
     <!-- Sidebar -->
-    <aside id="sidebar" class="col-md-3 col-lg-2 border-end shadow-lg flex-shrink-1 p-3 d-flex flex-column align-items-stretch bg-light">
+    <div id="sidebar" class="col border-right shadow-lg flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary">
       <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
-        <img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg" alt="Logo">
+        <img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg">
         <span class="fs-5 fw-semibold">Categories</span>
       </a>
-
+  
       <div class="list-group list-group-flush border-bottom scrollarea">
-        {{ range .Groups }}
+      {{ range .Groups  }}
           <a href="/group/{{.ID}}" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
             <div class="d-flex w-100 align-items-center justify-content-between">
               <strong class="mb-1">{{ .Name }}</strong>
               <small>{{ .TimeCreated }}</small>
             </div>
             {{ if not .Removable }}
-              <div class="col-10 mb-1 small text-muted">Not removable</div>
+              <div class="col-10 mb-1 small">Not removable</div>
             {{ end }}
           </a>
-        {{ end }}
+      {{ end }}
       </div>
-
-      <div class="input-group mb-3 mt-3">
-        <input type="text" name="newCategory" aria-label="Category Name" aria-describedby="button-new-category" class="form-control" id="new-category-input" placeholder="Category Name">
-        <button id="button-new-category" onclick="createNewCategory();" class="btn btn-primary">Create</button>
+  
+  
+      <div class="input-group mb-3 py-md-5">
+        <input type="text" name="newCategory"aria-label="Category Name" aria-describedby="button-new-category" class="form-control" id="new-category-input" placeholder="Category Name">
+        <button id="button-new-category" onclick="createNewCategory();" class="btn btn-primary">Create</button >
       </div>
-    </aside>
-
+    </div>
+  
     <!-- Groups -->
-    <div class="col-md-9 col-lg-10 p-4">
-      <h2 class="mb-4">Available Categories</h2>
-      <div class="list-group">
-        {{ range .Groups }}
-          <div class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
-            <a href="/group/{{.ID}}" class="d-flex gap-3 w-100">
-              <img src="/static/images/box-arrow-up-right.svg" alt="Go to this category" width="32" height="32">
-              <div class="d-flex gap-2 w-100 justify-content-between">
-                <div>
-                  <h6 class="mb-0">{{ .Name }}</h6>
-                  <p class="mb-0 opacity-75">Jump here</p>
-                </div>
-                <small class="opacity-50 text-nowrap">{{ .TimeCreated }}</small>
+    <div class="d-flex flex-column flex-grow-1 flex-md-row p-4 gap-4 py-md-5">
+    <div class="list-group flex-grow-1">
+      {{ range .Groups }}
+        <div class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+          <a href="/group/{{.ID}}" class="list-group-item list-group-item-action d-flex gap-3 py-3">
+            <img src="/static/images/box-arrow-up-right.svg" alt="Go to this category" width="32" height="32">
+            <div class="d-flex gap-2 w-100 justify-content-between">
+              <div>
+                <h6 class="mb-0">{{ .Name }}</h6>
+                <p class="mb-0 opacity-75">Jump here</p>
               </div>
-            </a>
-            {{ if .Removable }}
-              <div class="small">
-                <button class="btn btn-danger" onclick="deleteCategoryRefresh('{{.ID}}')">
-                  <img src="/static/images/trash3-fill.svg" alt="Remove category" width="20">
-                </button>
-              </div>
-            {{ end }}
+              <small class="opacity-50 text-nowrap">{{ .TimeCreated }}</small>
+            </div>
+          </a>
+          {{ if .Removable }}
+          <div class="small">
+            <button class="btn btn-danger" onclick="deleteCategoryRefresh('{{.ID}}')">
+              <img src="/static/images/trash3-fill.svg" alt="Remove category">
+            </button>
           </div>
-        {{ end }}
-      </div>
+          {{ end }}
+        </div>
+      {{ end }}
+    </div>
     </div>
   </div>
-</main>
+  </main>  
 
 
 <script>
