diff --git a/docs/python/python_operators.md b/docs/python/python_operators.md
index 1c4f47fe..5fe1e30c 100644
--- a/docs/python/python_operators.md
+++ b/docs/python/python_operators.md
@@ -20,7 +20,6 @@ tags:
 
 In Python, **operators** are special symbols used to perform operations on variables and values. Python supports a wide variety of operators categorized based on their functionality.
 
-
 ## Arithmetic Operators
 
 Used to perform basic mathematical operations:
diff --git a/src/components/ui/NavbarFirebaseAuthGithub.tsx b/src/components/ui/NavbarFirebaseAuthGithub.tsx
index 1ea216eb..dbb474f7 100644
--- a/src/components/ui/NavbarFirebaseAuthGithub.tsx
+++ b/src/components/ui/NavbarFirebaseAuthGithub.tsx
@@ -8,6 +8,24 @@ const NavbarFirebaseAuthGithub: React.FC = () => {
     if (container && !container.hasChildNodes()) {
       const root = ReactDOM.createRoot(container);
       root.render(<FirebaseAuthGithub />);
+
+      // Force visibility on mobile after rendering
+      const ensureVisibility = () => {
+        const navbarItem = container.closest('.navbar__item');
+        if (navbarItem) {
+          navbarItem.style.display = 'block';
+          navbarItem.style.visibility = 'visible';
+          navbarItem.style.opacity = '1';
+        }
+        container.style.display = 'block';
+        container.style.visibility = 'visible';
+        container.style.opacity = '1';
+      };
+
+      // Ensure visibility immediately and after a short delay
+      ensureVisibility();
+      setTimeout(ensureVisibility, 100);
+      setTimeout(ensureVisibility, 500);
     }
   }, []);
   return null;
diff --git a/src/css/custom.css b/src/css/custom.css
index d3aea09f..4189b095 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -125,7 +125,7 @@ textarea {
 }
 
 
-@media screen and (min-width: 997px) {
+@media screen and (min-width: 1057px) {
   .nav-emoji {
     display: none;
   }
@@ -137,6 +137,224 @@ textarea {
   }
 }
 
+/* Icon-only navbar design for tablets and smaller screens */
+@media (max-width: 1200px) {
+  /* Right navbar container with proper spacing */
+  .navbar .navbar__inner .navbar__items.navbar__items--right {
+    display: flex !important;
+    align-items: center;
+    gap: 20px;
+    margin: auto auto;
+    flex-shrink: 0;
+    height: 100%;
+    padding: 8px 0;
+  }
+
+  /* Make all right navbar items visible with consistent layout */
+  .navbar .navbar__inner .navbar__items.navbar__items--right .navbar__item {
+    display: flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    margin: 0 !important;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* GitHub auth button - improved styling */
+  #firebase-auth-github-navbar button {
+    width: 30x !important;
+    height: 45px !important;
+    padding: 5px !important;
+     padding-left:10px !important;
+    font-size: 0 !important; 
+    /* Hide text */
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    border-radius: 12px !important;
+    background-color: #24292e !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    cursor: pointer !important;
+  }
+
+  #firebase-auth-github-navbar button:hover {
+    background-color: #1a1e22 !important;
+    transform: translateY(-3px) !important;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
+    border-color: rgba(255, 255, 255, 0.2) !important;
+  }
+
+  #firebase-auth-github-navbar button svg {
+    width: 24px !important;
+    height: 24px !important;
+    color: white !important;
+    flex-shrink: 0 !important;
+  }
+
+  /* Search button - consistent styling */
+  .DocSearch-Button {
+    width: 48px !important;
+    height: 48px !important;
+    padding: 12px !important;
+    border-radius: 10px !important;
+    margin: 0 !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    background-color: var(--ifm-color-emphasis-200) !important;
+    border: 1px solid var(--ifm-color-emphasis-300) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    cursor: pointer !important;
+  }
+
+  .DocSearch-Button:hover {
+    background-color: var(--ifm-color-emphasis-300) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
+    border-color: var(--ifm-color-emphasis-400) !important;
+  }
+
+  .DocSearch-Button-Placeholder,
+  .DocSearch-Button-Keys {
+    display: none !important;
+  }
+
+  .DocSearch-Search-Icon {
+    width: 24px !important;
+    height: 24px !important;
+    margin: 0 !important;
+    color: var(--ifm-color-emphasis-800) !important;
+    flex-shrink: 0 !important;
+  }
+
+  /* Theme toggle - improved styling */
+  .colorModeToggle {
+    display: flex !important;
+    width: 52px !important;
+    height: 52px !important;
+    padding: 14px !important;
+    border-radius: 12px !important;
+    margin: 0 !important;
+    background-color: var(--ifm-color-emphasis-200) !important;
+    border: 1px solid var(--ifm-color-emphasis-300) !important;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    justify-content: center !important;
+    align-items: center !important;
+    cursor: pointer !important;
+  }
+
+  .colorModeToggle:hover {
+    background-color: var(--ifm-color-emphasis-300) !important;
+    transform: translateY(-3px) !important;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
+    border-color: var(--ifm-color-emphasis-400) !important;
+  }
+
+  .colorModeToggle svg {
+    width: 24px !important;
+    height: 24px !important;
+    color: var(--ifm-color-emphasis-800) !important;
+    flex-shrink: 0 !important;
+  }
+
+  /* Dark theme adjustments for mobile icons */
+  [data-theme='dark'] .DocSearch-Button {
+    background-color: var(--dark-bg-tertiary) !important;
+    border-color: var(--dark-border) !important;
+  }
+
+  [data-theme='dark'] .DocSearch-Button:hover {
+    background-color: var(--dark-card-hover-bg) !important;
+  }
+
+  [data-theme='dark'] .DocSearch-Search-Icon {
+    color: var(--dark-text-secondary) !important;
+  }
+
+  [data-theme='dark'] .colorModeToggle {
+    background-color: var(--dark-bg-tertiary) !important;
+    border-color: var(--dark-border) !important;
+  }
+
+  [data-theme='dark'] .colorModeToggle:hover {
+    background-color: var(--dark-card-hover-bg) !important;
+  }
+
+  [data-theme='dark'] .colorModeToggle svg {
+    color: var(--dark-text-secondary) !important;
+  }
+}
+
+/* Tablet and medium screen adjustments */
+@media (max-width: 996px) {
+  .navbar .navbar__inner .navbar__items.navbar__items--right {
+    gap: 18px !important;
+    margin-right: 60px !important;
+  }
+}
+
+/* Mobile screen adjustments */
+@media (max-width: 768px) {
+  .navbar .navbar__inner .navbar__items.navbar__items--right {
+    gap: 16px !important;
+    margin:  auto  auto;
+  }
+}
+
+@media (max-width: 480px) {
+  /* Compact but comfortable spacing for small screens */
+  .navbar .navbar__inner .navbar__items.navbar__items--right {
+    gap: 14px !important;
+    margin: auto auto;
+  }
+
+  /* Comfortable button size for small screens */
+  #firebase-auth-github-navbar button,
+  .DocSearch-Button,
+  .colorModeToggle {
+    width: 44px !important;
+    height: 44px !important;
+    padding: 10px !important;
+    border-radius: 10px !important;
+  }
+
+  #firebase-auth-github-navbar button svg,
+  .DocSearch-Search-Icon,
+  .colorModeToggle svg {
+    width: 20px !important;
+    height: 20px !important;
+  }
+}
+
+@media (max-width: 360px) {
+  /* Minimal but usable spacing for very small screens */
+  .navbar .navbar__inner .navbar__items.navbar__items--right {
+    gap: 12px !important;
+    margin: auto auto ;
+  }
+
+  /* Minimum usable button size */
+  #firebase-auth-github-navbar button,
+  .DocSearch-Button,
+  .colorModeToggle {
+    width: 40px !important;
+    height: 40px !important;
+    padding: 8px !important;
+    border-radius: 8px !important;
+  }
+
+  #firebase-auth-github-navbar button svg,
+  .DocSearch-Search-Icon,
+  .colorModeToggle svg {
+    width: 18px !important;
+    height: 18px !important;
+  }
+}
+
 .dropdown_grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -961,3 +1179,47 @@ html {
   color: inherit !important;
 }
 
+/* ===== REMOVE THEME TOGGLE FROM MOBILE SIDEBAR ===== */
+@media (max-width: 1200px) {
+  /* Aggressively hide theme toggle in mobile sidebar */
+  .navbar-sidebar__brand button:not(.navbar-sidebar__close):not([class*="close"]),
+  .navbar-sidebar__brand .colorModeToggle,
+  .navbar-sidebar .colorModeToggle,
+  .navbar-sidebar__brand button[class*="colorModeToggle"],
+  .navbar-sidebar button[class*="colorModeToggle"],
+  .navbar-sidebar__brand .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
+  .navbar-sidebar .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
+  .navbar-sidebar__brand [class*="toggle_"]:not(.navbar-sidebar__close),
+  .navbar-sidebar [class*="toggle_"]:not(.navbar-sidebar__close),
+  .navbar-sidebar__brand button[aria-label*="mode"],
+  .navbar-sidebar button[aria-label*="mode"],
+  .navbar-sidebar__brand button[aria-label*="theme"],
+  .navbar-sidebar button[aria-label*="theme"],
+  .navbar-sidebar__brand button[aria-label*="Switch"],
+  .navbar-sidebar button[aria-label*="Switch"] {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    left: -9999px !important;
+    pointer-events: none !important;
+  }
+
+  /* Ensure close button is always visible */
+  .navbar-sidebar__brand .navbar-sidebar__close,
+  .navbar-sidebar__brand button[class*="close"],
+  .navbar-sidebar__brand .clean-btn.navbar-sidebar__close {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    position: static !important;
+    left: auto !important;
+    pointer-events: auto !important;
+  }
+}
+
diff --git a/static/remove-mobile-theme-toggle.js b/static/remove-mobile-theme-toggle.js
new file mode 100644
index 00000000..e74f2b42
--- /dev/null
+++ b/static/remove-mobile-theme-toggle.js
@@ -0,0 +1,129 @@
+// Remove theme toggle from mobile sidebar
+(function() {
+  'use strict';
+
+  function removeMobileThemeToggle() {
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', removeMobileThemeToggle);
+      return;
+    }
+
+    // Function to remove theme toggle from mobile sidebar
+    function hideThemeToggle() {
+      let found = false;
+
+      // First, try to find the navbar sidebar brand container
+      const sidebarBrand = document.querySelector('.navbar-sidebar__brand');
+      if (sidebarBrand) {
+        console.log('🔍 Found sidebar brand container:', sidebarBrand);
+
+        // Look for all buttons in the sidebar brand
+        const buttons = sidebarBrand.querySelectorAll('button');
+        buttons.forEach((button, index) => {
+          console.log(`🔍 Button ${index}:`, button);
+          console.log('  - Classes:', button.className);
+          console.log('  - Aria-label:', button.getAttribute('aria-label'));
+          console.log('  - Has SVG:', !!button.querySelector('svg'));
+
+          // Check if this button contains theme-related content
+          const ariaLabel = button.getAttribute('aria-label') || '';
+          const hasThemeIcon = button.querySelector('svg') &&
+                              (ariaLabel.toLowerCase().includes('mode') ||
+                               ariaLabel.toLowerCase().includes('theme') ||
+                               ariaLabel.toLowerCase().includes('dark') ||
+                               ariaLabel.toLowerCase().includes('light'));
+
+          // Also check if it's NOT the close button
+          const isCloseButton = ariaLabel.toLowerCase().includes('close') ||
+                               ariaLabel.toLowerCase().includes('navigation') ||
+                               button.classList.contains('navbar-sidebar__close');
+
+          if (hasThemeIcon && !isCloseButton) {
+            console.log('🎯 Found theme toggle button, removing:', button);
+            button.remove(); // Completely remove the element
+            found = true;
+          } else if (!isCloseButton && button.querySelector('svg')) {
+            // If it's not the close button but has an SVG, it might be the theme toggle
+            console.log('🤔 Potential theme toggle (removing to be safe):', button);
+            button.remove();
+            found = true;
+          }
+        });
+      }
+
+      // Fallback: Look for any button with theme-related aria-labels in the sidebar
+      const sidebar = document.querySelector('.navbar-sidebar');
+      if (sidebar) {
+        const themeButtons = sidebar.querySelectorAll('button[aria-label*="mode"], button[aria-label*="theme"], button[aria-label*="dark"], button[aria-label*="light"]');
+        themeButtons.forEach(button => {
+          if (!button.classList.contains('navbar-sidebar__close')) {
+            console.log('🎯 Found theme button via fallback, removing:', button);
+            button.remove();
+            found = true;
+          }
+        });
+      }
+
+      return found;
+    }
+    
+    // Try to hide immediately and repeatedly
+    hideThemeToggle();
+
+    // Also try after short delays in case components load later
+    setTimeout(hideThemeToggle, 50);
+    setTimeout(hideThemeToggle, 100);
+    setTimeout(hideThemeToggle, 200);
+    setTimeout(hideThemeToggle, 500);
+    setTimeout(hideThemeToggle, 1000);
+    setTimeout(hideThemeToggle, 2000);
+
+    // Set up an interval to check every 500ms for the first 10 seconds
+    let attempts = 0;
+    const maxAttempts = 20; // 10 seconds
+    const interval = setInterval(() => {
+      attempts++;
+      const found = hideThemeToggle();
+      if (found || attempts >= maxAttempts) {
+        clearInterval(interval);
+        if (found) {
+          console.log('✅ Successfully removed theme toggle from mobile sidebar');
+        }
+      }
+    }, 500);
+    
+    // Set up a mutation observer to catch dynamically added elements
+    const observer = new MutationObserver(function(mutations) {
+      let shouldCheck = false;
+      mutations.forEach(function(mutation) {
+        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+          // Check if any added nodes contain sidebar elements
+          mutation.addedNodes.forEach(function(node) {
+            if (node.nodeType === 1) { // Element node
+              if (node.classList?.contains('navbar-sidebar') || 
+                  node.querySelector?.('.navbar-sidebar')) {
+                shouldCheck = true;
+              }
+            }
+          });
+        }
+      });
+      
+      if (shouldCheck) {
+        setTimeout(hideThemeToggle, 50);
+      }
+    });
+    
+    // Start observing
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    
+    console.log('🚀 Mobile theme toggle remover initialized');
+  }
+  
+  // Initialize
+  removeMobileThemeToggle();
+})();