diff --git a/web-app/css/styles.css b/web-app/css/styles.css
index 0b92acf..3fb0972 100644
--- a/web-app/css/styles.css
+++ b/web-app/css/styles.css
@@ -428,12 +428,19 @@ body.sidebar-active .sidebar-dock {
   padding-top: 16px;
   border-top: 1px solid var(--border);
 }
+.sidebar-main-controls{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
 
 .sidebar-controls {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
+  justify-content: space-around;
 }
 
 .sidebar-controls .sound-toggle,
@@ -5378,6 +5385,8 @@ button:focus-visible,
     padding: 4rem 0;
     text-align: center;
     background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
+}
+
 .btn-explore,
 .btn-secondary-hero,
 .btn-random-project,
@@ -6359,6 +6368,15 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer span {
 
 body.sidebar-collapsed .sidebar-dock .sidebar-footer button {
   justify-content: center !important;
+  padding-top:8px ;
+  padding-bottom:8px ;
+}
+
+body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 /* Main content shift for expanded sidebar */
diff --git a/web-app/index.html b/web-app/index.html
index 11dfbf7..464e380 100644
--- a/web-app/index.html
+++ b/web-app/index.html
@@ -191,8 +191,8 @@
             tabindex="-1"
           >
             <span class="sidebar-icon"
-              ><svg data-lucide="gamepad-2"></svg
-            ></span>
+              ><svg data-lucide="gamepad-2"></svg>
+            </span>
             <span class="sidebar-label">Games Arcade</span>
           </button>
           <button
@@ -240,22 +240,24 @@
 
       <div class="sidebar-footer">
         <div class="sidebar-controls">
-          <button
+          <div class="sidebar-main-controls">
+            <button
             aria-label="Mute sound"
             class="sound-toggle"
             id="sidebarSoundToggle"
             type="button"
-          >
+            >
             <i class="fas fa-volume-up" aria-hidden="true"></i>
           </button>
           <button
-            aria-label="Switch to light mode"
-            class="theme-toggle"
-            id="sidebarThemeToggle"
-            type="button"
+          aria-label="Switch to light mode"
+          class="theme-toggle"
+          id="sidebarThemeToggle"
+          type="button"
           >
-            <i class="fas fa-sun" aria-hidden="true"></i>
-          </button>
+          <i class="fas fa-sun" aria-hidden="true"></i>
+        </button>
+      </div>
           <button
             aria-label="Toggle Sidebar"
             class="collapse-sidebar-btn"