diff --git a/gallery.css b/gallery.css
index 0c25041..8beaee7 100644
--- a/gallery.css
+++ b/gallery.css
@@ -1,6 +1,4 @@
 /* Gallery-specific styles */
-
-/* Base container adjustments */
 .gallery {
     background-color: black;
     padding-top: max(60px, env(safe-area-inset-top));
@@ -13,85 +11,10 @@
     overflow: auto;
 }
 
-/* Header bar optimizations */
-.header-bar {
-    position: fixed;
-    top: max(20px, env(safe-area-inset-top));
-    left: 0;
-    width: 100%;
-    padding: 0;
-    background: transparent;
-    z-index: 100;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 130px; /* Add space between elements */
-}
-
-/* Style for COSMOS text to match back button */
-.header-bar p {
-    margin: 0;
-    background-color: #E7B5A6;
-    padding: 12px 24px; /* Match back button padding */
-    border-radius: 8px; /* Match back button border-radius */
-    height: 44px;
-    min-height: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box; /* Include padding in height calculation */
-}
-
-/* Back button mobile optimizations */
-.back-btn {
-    position: fixed;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 100;
-    background-color: #E7B5A6;
-    padding: 12px 24px;
-    min-height: 44px;
-    border-radius: 8px;
-}
-
-/* Gallery grid mobile optimizations */
-.nft-gallery {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr); /* Default to 3 columns on mobile */
-    gap: 20px;
-    overflow-y: auto;
-    padding: 20px;
-    margin-bottom: max(20px, env(safe-area-inset-bottom));
-    height: auto;
-    max-height: calc(100vh - 160px);
-    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
-}
-
-.nft-gallery::-webkit-scrollbar {
-    display: none;
-}
-
-/* Improved touch targets for gallery items */
-.nft-gallery img {
-    width: 100%;
-    aspect-ratio:initial;
-    object-fit: cover;
-    display: block; /* Remove any inline spacing */
-    cursor: pointer;
-    border-radius: 8px;
-    touch-action: manipulation; /* Optimize for touch */
-    /* min-height: 44px; */
-}
-
-.nft-gallery img:hover {
-    transform: scale(1.05);
-}
-
+/* Toggle switch container */
 .toggle-switch {
-    margin: 0; /* Remove margin */
-    width: 60px;
-    height: 34px;
+    width: 46px;
+    height: 28px;
     position: relative;
     display: flex;
     align-items: center;
@@ -104,23 +27,24 @@
 .slider {
     position: absolute;
     cursor: pointer;
-    top: 5px; /* Center vertically */
+    top: 0;
     left: 0;
     right: 0;
-    height: 34px; /* Reduce height to match design */
-    background-color: #E7B5A6;
+    bottom: 0;
+    background-color: transparent;
+    border: 2px solid white;
     transition: .4s;
-    border-radius: 34px;
-    min-height: unset; /* Remove min-height */
+    border-radius: 28px;
+    height: 28px;
 }
 
 .slider:before {
     position: absolute;
     content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    top: 4px; /* Center the circle vertically */
+    height: 20px;
+    width: 20px;
+    left: 2px;
+    top: 2px;
     background-color: white;
     transition: .4s;
     border-radius: 50%;
@@ -128,12 +52,46 @@
 
 input:checked + .slider {
     background-color: #D83F31;
+    border-color: #D83F31;
 }
 
 input:checked + .slider:before {
-    transform: translateX(26px);
+    transform: translateX(18px);
+}
+
+/* Gallery grid styling */
+.nft-gallery {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    overflow-y: auto;
+    padding: 20px;
+    margin-bottom: max(20px, env(safe-area-inset-bottom));
+    height: auto;
+    max-height: calc(100vh - 160px);
+    -webkit-overflow-scrolling: touch;
 }
 
+.nft-gallery::-webkit-scrollbar {
+    display: none;
+}
+
+/* Gallery items */
+.nft-gallery img {
+    width: 100%;
+    aspect-ratio: initial;
+    object-fit: cover;
+    display: block;
+    cursor: pointer;
+    border-radius: 8px;
+    touch-action: manipulation;
+}
+
+.nft-gallery img:hover {
+    transform: scale(1.05);
+}
+
+/* Full screen image view */
 .full-screen-image {
     display: none;
     position: fixed;
@@ -157,14 +115,10 @@ input:checked + .slider:before {
 @media (max-width: 390px) {
     /* iPhone 15 and similar */
     .nft-gallery {
-        grid-template-columns: 3fr; /* Single column for smaller devices */
+        grid-template-columns: 3fr;
         gap: 16px;
         padding: 0 12px;
     }
-   
-    .header-bar {
-        font-size: 0.9em; /* Slightly smaller text for compact screens */
-    }
 }
 
 @media (min-width: 391px) and (max-width: 428px) {
@@ -178,7 +132,7 @@ input:checked + .slider:before {
 /* Portrait orientation optimizations */
 @media (orientation: portrait) {
     .nft-gallery {
-        height: calc(100dvh - 180px); /* More space for header/footer in portrait */
+        height: calc(100dvh - 180px);
     }
 }
 
@@ -189,11 +143,3 @@ input:checked + .slider:before {
         height: calc(100dvh - 120px);
     }
 }
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-    .header-bar {
-        background: rgba(0, 0, 0, 0.9);
-        backdrop-filter: blur(10px);
-    }
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 7e3393d..3293066 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,8 @@
 </head>
 <body>
     <div class="container">
-        <div class="auction-time">
+        <!-- Updated header class to match gallery page -->
+        <div class="header-bar">
             <div class="week-selector">
                 <select id="weekSelect">
                     <!-- Changed value attributes to strings for consistency with gallery.html -->
@@ -24,9 +25,10 @@
                     <option value="7">Week - 7</option> -->
                 </select>
             </div>
-            <p>COSMOS Auctions</p>
+            <p>COSMOS</p>
             <p><span id="timeRemaining"></span></p>
         </div>
+        <!-- Added margin-top to account for fixed header -->
         <div id="bidsContainer">
             <table id="bidsTable">
                 <thead>
@@ -53,8 +55,10 @@
                 <p>No auctions have started for this period.</p>
             </div>
         </div>
-        <button class="connect-wallet-btn" id="connectWalletBtn">Connect</button>
-        <button class="gallery-btn" id="galleryBtn" onclick="location.href='gallery.html'">Gallery</button>
+        <div class="button-container">
+            <button class="connect-wallet-btn" id="connectWalletBtn">Connect</button>
+            <button class="gallery-btn" id="galleryBtn" onclick="location.href='gallery.html'">Gallery</button>
+        </div>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index becd1ed..16677a3 100644
--- a/styles.css
+++ b/styles.css
@@ -50,17 +50,42 @@ th {
 }
 
 .auction-time, .header-bar {
-    font-size: 1.2em; /* Standardize font size */
-    text-align: center;
+    position: fixed;
+    top: max(20px, env(safe-area-inset-top));
+    left: 50%;
+    transform: translateX(-50%);
+    width: calc(100% - 40px);
+    max-width: 600px;
     background-color: #E7B5A6;
-    color: white;
-    border-radius: 5px;
-    padding: 5px 10px; /* Standardize padding */
-    margin-bottom: 10px; /* Standardize margin */
-    height: 40px; /* Fixed height for consistency */
+    padding: 8px 20px;
+    border-radius: 8px;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.gallery-btn, .back-btn {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
+    background-color: #E7B5A6;
+    padding: 12px 24px;
+    height: 44px;
+    border-radius: 8px;
     display: flex;
     align-items: center;
-    justify-content: space-between; /* Space elements across the bar */
+    justify-content: center;
+    box-sizing: border-box;
+    margin: 0; /* Override default button margin */
+    transition: background-color 0.3s;
+}
+
+.gallery-btn:hover, .back-btn:hover {
+    background-color: #D8A495;
 }
 
 .header-bar p {
@@ -122,15 +147,15 @@ button:hover {
 }
 
 .week-selector select {
-    padding: 12px 24px;
-    background-color: #E7B5A6;
+    background-color: transparent;
     color: white;
-    border: none;
-    border-radius: 8px;
-    font-size: 1em;
+    border: 2px solid white;
+    border-radius: 6px;
+    font-size: 0.9em;
     appearance: none;
-    height: 44px; /* Match exact height */
-    box-sizing: border-box;
+    padding: 4px 12px;
+    height: 28px;
+    cursor: pointer;
 }
 
 .week-selector select::after {
@@ -154,6 +179,24 @@ button:hover {
     background-color: #D8A495;
 }
 
+.container > div:first-of-type:not(.auction-time),
+.nft-gallery {
+    margin-top: 84px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+    .auction-time, .header-bar {
+        width: calc(100% - 24px);
+        padding: 8px 12px;
+    }
+
+    .gallery-btn, .back-btn {
+        padding: 8px 16px;
+        height: 36px;
+    }
+}
+
 @media (max-width: 600px) {
     .container, .gallery {
         padding: 5px;