diff --git a/.github/assets/js/shortcut-key.js b/.github/assets/js/shortcut-key.js
new file mode 100644
index 00000000..75bdc7a1
--- /dev/null
+++ b/.github/assets/js/shortcut-key.js
@@ -0,0 +1,29 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // Platform detection is now handled by platform-utils.js
+  /**
+   * Dynamically loads a stylesheet into the document's head.
+   *
+   * Creates a <link> element with the specified URL, sets attributes necessary for secure loading,
+   * and appends it to the document's head. If the stylesheet fails to load, an error is logged
+   * to the console.
+   *
+   * @param {string} href - The URL of the stylesheet to be loaded.
+   * @returns {HTMLLinkElement} The created and appended link element.
+   */
+  
+  function loadStylesheet(href) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    link.crossOrigin = 'anonymous';
+    link.onerror = () => console.error(`Failed to load stylesheet: ${href}`);
+    document.head.appendChild(link);
+    return link;
+  }
+
+  const FA_VERSION = '6.7.2';  // Extract version to a constant for easier updates
+  
+  loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/solid.css`);
+  loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/brands.css`);
+  loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/fontawesome.css`);
+}); 
\ No newline at end of file
diff --git a/News.md b/News.md
index 74e77698..2eb4193c 100644
--- a/News.md
+++ b/News.md
@@ -13,7 +13,7 @@
         <a href="https://ammodo-science.webflow.io/researches/vatsal-sanjay" style="display: flex; align-items: center; text-decoration: none; color: #cf4900; font-size: 1em; font-weight: 500;"><i class="fa-solid fa-arrow-up-right-from-square" style="margin-right: 8px; font-size: 1.2em;"></i>Read More</a>
       </div>
     </div>
-    <div style="font-size: 0.75em; color: #666; margin-top: 5px; font-style: italic;">
+    <div style="font-size: 0.75em; color: var(--color-text); opacity: 0.7; margin-top: 5px; font-style: italic;">
       Image credit: J. Heitman, B. J. Howlett, P. W. Crous, E. H. Stukenbrock, T. Y. James & N. A. R. Gow, The fungal kingdom, John Wiley & Sons (2020)
     </div>
   </div>
diff --git a/README.md b/README.md
index 01de94a7..2feb8c61 100644
--- a/README.md
+++ b/README.md
@@ -33,12 +33,13 @@ A static website for the Computational Multiphase Physics Laboratory, built with
 │   │   ├── research.css      # Research page styles with dark mode support
 │   │   ├── teaching.css      # Teaching page styles with dark mode support
 │   │   ├── team.css          # Team page styles with dark mode support
-│   │   ├── styles.css        # Global styles with light/dark theme variables
+│   │   ├── styles.css        # Global styles with light/dark theme variables (optimized)
 │   │   └── command-palette.css # Command palette styles (⌘K)
 │   ├── js                    # JavaScript files
 │   │   ├── main.js          # Main JavaScript
 │   │   ├── command-data.js  # Command palette data and functionality
-│   │   ├── shortcut-key.js  # Platform detection for shortcuts
+│   │   ├── platform-utils.js # Platform detection and UI utilities
+│   │   ├── shortcut-key.js  # Keyboard shortcut handling
 │   │   └── search_db.json   # Generated search database (used by command palette)
 │   ├── favicon              # Favicon files
 │   └── img                  # Image assets
@@ -467,4 +468,65 @@ To submit a PR:
 3. Test changes locally
 4. Create a PR using the template
 5. Link any related issues
-6. Wait for review
\ No newline at end of file
+6. Wait for review
+
+### Code Style
+
+#### General
+- Use 2-space indentation across all files
+- Follow DRY principles: reuse components, variables, and styles
+- Add comments for complex logic, but keep code self-documenting
+
+#### HTML/Markdown
+- Use semantic HTML elements
+- Follow BEM naming convention for CSS classes (e.g., `s-header__nav-list`)
+- Keep content files in markdown format where possible
+
+#### CSS
+- Use CSS variables for colors and typography (defined in `:root`)
+- Use responsive breakpoints at 1700px, 1300px, 900px, 768px, 500px
+- Use `rem` units for font sizes and spacing
+- Follow mobile-first approach for media queries
+- Leverage CSS custom properties for theme switching
+- Organize media queries by breakpoint for better maintainability
+- Use standardized variable naming for consistent styling
+
+#### JavaScript
+- Use ES6+ features (arrow functions, const/let, template literals)
+- Always include 'use strict' mode
+- Use async/await for asynchronous operations
+- Implement error handling with try/catch blocks
+- Use camelCase for variable and function names
+- Prefer event delegation for multiple similar elements
+
+#### Images
+- Optimize images for web (compress to reduce file size)
+- Follow naming convention: `[name]-[descriptor].[extension]`
+- Include alt text for all images
+
+### CSS Architecture
+
+The website's CSS has been optimized for better performance and maintainability:
+
+1. **Variable System**
+   - Color variables for both light and dark themes
+   - Typography variables for consistent font sizing
+   - Spacing variables for layout consistency
+   - Shadow and transition presets for unified effects
+
+2. **Consolidated Media Queries**
+   - Queries organized by breakpoint rather than by component
+   - Shared breakpoints at 1700px, 1300px, 1200px, 900px, 768px, and 500px
+   - Mobile-first approach throughout
+
+3. **Optimized Dark Theme Support**
+   - CSS variables for seamless theme switching
+   - Fallback values for older browsers
+   - Theme-specific accent colors and contrasts
+   - Consistent text and background colors across components
+
+4. **Performance Improvements**
+   - Reduced redundant selectors
+   - Consolidated duplicate styles
+   - Optimized transitions and animations
+   - Simplified box shadows for better rendering
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 92e8742f..04400de6 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -92,6 +92,8 @@
   <script defer src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
   <script defer src="/assets/js/main.js"></script>
   <script defer src="/assets/js/command-data.js"></script>
+  <script defer src="/assets/js/platform-utils.js"></script>
+  <script defer src="/assets/js/shortcut-key.js"></script>
 
   <script>
     document.documentElement.classList.remove('no-js');
@@ -135,25 +137,22 @@
   <script>
     // Check if we're on localhost
     if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-      // Load only specific Font Awesome icons for local development
-      var icons = ['github', 'search', 'arrow-up-right-from-square', 'bluesky', 'youtube', 'arrow-up'];
-      var link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = 'https://use.fontawesome.com/releases/v6.7.2/css/solid.css';
-      link.crossOrigin = 'anonymous';
-      document.head.appendChild(link);
-      
-      var link2 = document.createElement('link');
-      link2.rel = 'stylesheet';
-      link2.href = 'https://use.fontawesome.com/releases/v6.7.2/css/brands.css';
-      link2.crossOrigin = 'anonymous';
-      document.head.appendChild(link2);
+      // Load Font Awesome stylesheets with improved error handling and version extraction
+      function loadStylesheet(href) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.crossOrigin = 'anonymous';
+        link.onerror = () => console.error(`Failed to load stylesheet: ${href}`);
+        document.head.appendChild(link);
+        return link;
+      }
+
+      const FA_VERSION = '6.7.2';  // Extract version to a constant for easier updates
       
-      var link3 = document.createElement('link');
-      link3.rel = 'stylesheet';
-      link3.href = 'https://use.fontawesome.com/releases/v6.7.2/css/fontawesome.css';
-      link3.crossOrigin = 'anonymous';
-      document.head.appendChild(link3);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/solid.css`);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/brands.css`);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/fontawesome.css`);
     } else {
       // Use Kit for production with defer
       var script = document.createElement('script');
diff --git a/_layouts/research.html b/_layouts/research.html
index 7451a993..43db79a8 100644
--- a/_layouts/research.html
+++ b/_layouts/research.html
@@ -61,15 +61,27 @@
       cursor: pointer;
       transition: background-color 0.2s ease;
       text-decoration: none;
-      color: inherit;
+      color: #333333;
+    }
+    [data-theme="dark"] tags span, [data-theme="dark"] tags a.tag-link {
+      background-color: #2a2a30;
+      color: #ffffff;
+      border: 1px solid rgba(111, 161, 255, 0.3);
     }
     tags span:hover, tags a.tag-link:hover {
       background-color: #e0e0e0;
     }
+    [data-theme="dark"] tags span:hover, [data-theme="dark"] tags a.tag-link:hover {
+      background-color: #3a3a40;
+    }
     tags span.active, tags a.tag-link.active {
       background-color: #007bff;
       color: white;
     }
+    [data-theme="dark"] tags span.active, [data-theme="dark"] tags a.tag-link.active {
+      background-color: #4d8dff;
+      color: white;
+    }
     /* Style for filter notification */
     .filter-note {
       margin: 1rem 0;
@@ -152,6 +164,7 @@
   <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
   <script defer src="/assets/js/main.js"></script>
+  <script defer src="/assets/js/platform-utils.js"></script>
   <script defer src="/assets/js/command-data.js"></script>  
   <script>
     document.documentElement.classList.remove('no-js');
@@ -195,25 +208,22 @@
   <script>
     // Check if we're on localhost
     if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-      // Load only specific Font Awesome icons for local development
-      var icons = ['github', 'search', 'arrow-up-right-from-square', 'bluesky', 'youtube', 'arrow-up'];
-      var link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = 'https://use.fontawesome.com/releases/v6.7.2/css/solid.css';
-      link.crossOrigin = 'anonymous';
-      document.head.appendChild(link);
-      
-      var link2 = document.createElement('link');
-      link2.rel = 'stylesheet';
-      link2.href = 'https://use.fontawesome.com/releases/v6.7.2/css/brands.css';
-      link2.crossOrigin = 'anonymous';
-      document.head.appendChild(link2);
+      // Load Font Awesome stylesheets with improved error handling and version extraction
+      function loadStylesheet(href) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.crossOrigin = 'anonymous';
+        link.onerror = () => console.error(`Failed to load stylesheet: ${href}`);
+        document.head.appendChild(link);
+        return link;
+      }
+
+      const FA_VERSION = '6.7.2';  // Extract version to a constant for easier updates
       
-      var link3 = document.createElement('link');
-      link3.rel = 'stylesheet';
-      link3.href = 'https://use.fontawesome.com/releases/v6.7.2/css/fontawesome.css';
-      link3.crossOrigin = 'anonymous';
-      document.head.appendChild(link3);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/solid.css`);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/brands.css`);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/fontawesome.css`);
     } else {
       // Use Kit for production with defer
       var script = document.createElement('script');
@@ -516,7 +526,12 @@ <h3>Contents</h3>
         const updateMatchingTags = (tagText, shouldHighlight) => {
           document.querySelectorAll('tags span').forEach(tag => {
             if (tag.textContent === tagText) {
-              tag.classList.toggle('active', shouldHighlight);
+              // First remove any active class
+              tag.classList.remove('active');
+              // Then add it back if needed
+              if (shouldHighlight) {
+                tag.classList.add('active');
+              }
             }
           });
         };
@@ -529,7 +544,8 @@ <h3>Contents</h3>
             // If clicking the active tag, deactivate it
             if (activeTag === tagText) {
               activeTag = null;
-              updateMatchingTags(tagText, false);
+              // Remove active class from all tags
+              allTags.forEach(t => t.classList.remove('active'));
               paperContainers.forEach(container => {
                 container.classList.remove('hidden');
               });
@@ -539,7 +555,9 @@ <h3>Contents</h3>
 
             // Update active tag
             activeTag = tagText;
+            // Remove active class from all tags
             allTags.forEach(t => t.classList.remove('active'));
+            // Add active class to matching tags
             updateMatchingTags(tagText, true);
 
             // Update URL
diff --git a/_layouts/teaching-course.html b/_layouts/teaching-course.html
index 335ba6d6..f4653736 100644
--- a/_layouts/teaching-course.html
+++ b/_layouts/teaching-course.html
@@ -81,6 +81,7 @@
   <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
   <script defer src="/assets/js/main.js"></script>
+  <script defer src="/assets/js/platform-utils.js"></script>
   <script defer src="/assets/js/command-data.js"></script>
 
   <!-- Theme toggle functionality -->
@@ -137,25 +138,22 @@
   <script>
     // Check if we're on localhost
     if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-      // Load only specific Font Awesome icons for local development
-      var icons = ['github', 'search', 'arrow-up-right-from-square', 'bluesky', 'youtube', 'arrow-up', 'calendar-days', 'location-dot', 'clock'];
-      var link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = 'https://use.fontawesome.com/releases/v6.7.2/css/solid.css';
-      link.crossOrigin = 'anonymous';
-      document.head.appendChild(link);
-      
-      var link2 = document.createElement('link');
-      link2.rel = 'stylesheet';
-      link2.href = 'https://use.fontawesome.com/releases/v6.7.2/css/brands.css';
-      link2.crossOrigin = 'anonymous';
-      document.head.appendChild(link2);
+      // Load Font Awesome stylesheets with improved error handling and version extraction
+      function loadStylesheet(href) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.crossOrigin = 'anonymous';
+        link.onerror = () => console.error(`Failed to load stylesheet: ${href}`);
+        document.head.appendChild(link);
+        return link;
+      }
+
+      const FA_VERSION = '6.7.2';  // Extract version to a constant for easier updates
       
-      var link3 = document.createElement('link');
-      link3.rel = 'stylesheet';
-      link3.href = 'https://use.fontawesome.com/releases/v6.7.2/css/fontawesome.css';
-      link3.crossOrigin = 'anonymous';
-      document.head.appendChild(link3);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/solid.css`);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/brands.css`);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/fontawesome.css`);
     } else {
       // Use Kit for production with defer
       var script = document.createElement('script');
diff --git a/_layouts/teaching.html b/_layouts/teaching.html
index a5597ff5..51f00b89 100644
--- a/_layouts/teaching.html
+++ b/_layouts/teaching.html
@@ -81,6 +81,7 @@
   <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
   <script defer src="/assets/js/main.js"></script>
+  <script defer src="/assets/js/platform-utils.js"></script>
   <script defer src="/assets/js/command-data.js"></script>
 
   <!-- Theme toggle functionality -->
@@ -127,37 +128,25 @@
   <!-- Command palette (implementation in assets/js/command-palette.js) -->
   <script defer src="/assets/js/command-palette.js"></script>
 
-
-
-
-  </script>
-
-  <script>
-    document.documentElement.classList.remove('no-js');
-    document.documentElement.classList.add('js');
-  </script>
   <script>
     // Check if we're on localhost
     if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-      // Load only specific Font Awesome icons for local development
-      var icons = ['github', 'search', 'arrow-up-right-from-square', 'bluesky', 'youtube', 'arrow-up', 'calendar-days', 'location-dot', 'clock'];
-      var link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = 'https://use.fontawesome.com/releases/v6.7.2/css/solid.css';
-      link.crossOrigin = 'anonymous';
-      document.head.appendChild(link);
-      
-      var link2 = document.createElement('link');
-      link2.rel = 'stylesheet';
-      link2.href = 'https://use.fontawesome.com/releases/v6.7.2/css/brands.css';
-      link2.crossOrigin = 'anonymous';
-      document.head.appendChild(link2);
+      // Load Font Awesome stylesheets with improved error handling and version extraction
+      function loadStylesheet(href) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.crossOrigin = 'anonymous';
+        link.onerror = () => console.error(`Failed to load stylesheet: ${href}`);
+        document.head.appendChild(link);
+        return link;
+      }
+
+      const FA_VERSION = '6.7.2';  // Extract version to a constant for easier updates
       
-      var link3 = document.createElement('link');
-      link3.rel = 'stylesheet';
-      link3.href = 'https://use.fontawesome.com/releases/v6.7.2/css/fontawesome.css';
-      link3.crossOrigin = 'anonymous';
-      document.head.appendChild(link3);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/solid.css`);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/brands.css`);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/fontawesome.css`);
     } else {
       // Use Kit for production with defer
       var script = document.createElement('script');
@@ -177,33 +166,8 @@
   <!-- Command Palette Button Handler -->
   <script>
     document.addEventListener('DOMContentLoaded', function() {
-      // Set platform-specific shortcut text visibility
-      const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-      
-      // Show/hide the appropriate shortcut text based on platform
-      const defaultText = document.querySelector('.default-theme-text');
-      const macText = document.querySelector('.mac-theme-text');
-      
-      if (defaultText && macText) {
-        if (isMac) {
-          defaultText.style.display = 'none';
-          macText.style.display = 'inline-block';
-        } else {
-          defaultText.style.display = 'inline-block';
-          macText.style.display = 'none';
-        }
-      }
-      
-      // Add click handler for command palette button
-      const commandButton = document.getElementById('command-palette-btn');
-      if (commandButton) {
-        commandButton.addEventListener('click', function(e) {
-          e.preventDefault();
-          if (typeof window.openCommandPalette === 'function') {
-            window.openCommandPalette();
-          }
-        });
-      }
+      // Platform detection is now handled by platform-utils.js
+      // Update the displayed shortcut text is now handled by platform-utils.js
     });
   </script>
 
diff --git a/_layouts/team.html b/_layouts/team.html
index d69cbdd4..2e1ed270 100644
--- a/_layouts/team.html
+++ b/_layouts/team.html
@@ -111,6 +111,7 @@
   <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
   <script defer src="/assets/js/main.js"></script>
+  <script defer src="/assets/js/platform-utils.js"></script>
   <script defer src="/assets/js/command-data.js"></script>
 
   <script>
@@ -155,25 +156,22 @@
   <script>
     // Check if we're on localhost
     if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-      // Load only specific Font Awesome icons for local development
-      var icons = ['github', 'search', 'arrow-up-right-from-square', 'bluesky', 'youtube', 'arrow-up', 'calendar-days', 'location-dot', 'clock'];
-      var link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = 'https://use.fontawesome.com/releases/v6.7.2/css/solid.css';
-      link.crossOrigin = 'anonymous';
-      document.head.appendChild(link);
-      
-      var link2 = document.createElement('link');
-      link2.rel = 'stylesheet';
-      link2.href = 'https://use.fontawesome.com/releases/v6.7.2/css/brands.css';
-      link2.crossOrigin = 'anonymous';
-      document.head.appendChild(link2);
+      // Load Font Awesome stylesheets with improved error handling and version extraction
+      function loadStylesheet(href) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.crossOrigin = 'anonymous';
+        link.onerror = () => console.error(`Failed to load stylesheet: ${href}`);
+        document.head.appendChild(link);
+        return link;
+      }
+
+      const FA_VERSION = '6.7.2';  // Extract version to a constant for easier updates
       
-      var link3 = document.createElement('link');
-      link3.rel = 'stylesheet';
-      link3.href = 'https://use.fontawesome.com/releases/v6.7.2/css/fontawesome.css';
-      link3.crossOrigin = 'anonymous';
-      document.head.appendChild(link3);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/solid.css`);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/brands.css`);
+      loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/fontawesome.css`);
     } else {
       // Use Kit for production with defer
       var script = document.createElement('script');
@@ -195,49 +193,9 @@
     window.addEventListener('load', function() {
       const commandPaletteButton = document.getElementById('command-palette-button');
       if (commandPaletteButton) {
-        // Set the appropriate shortcut hint based on platform
-        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-        const shortcutHint = document.getElementById('command-palette-shortcut');
-        if (shortcutHint) {
-          shortcutHint.textContent = isMac ? '⌘K' : 'Ctrl+K';
-        }
-
-        // Add click event listener to the command palette button
-        commandPaletteButton.addEventListener('click', function() {
-          console.log('Command palette button clicked');
-          if (typeof window.openCommandPalette === 'function') {
-            window.openCommandPalette();
-          } else {
-            // Fallback to simple command palette
-            const simpleCommandPalette = document.querySelector('.simple-command-palette');
-            if (simpleCommandPalette) {
-              simpleCommandPalette.classList.add('visible');
-              const input = simpleCommandPalette.querySelector('input');
-              if (input) input.focus();
-            }
-          }
-        });
+        // Platform detection is now handled by platform-utils.js
+        // Update the displayed shortcut text is now handled by platform-utils.js
       }
-
-      // Add keyboard shortcut listener
-      document.addEventListener('keydown', function(e) {
-        // Check for Ctrl+K or Cmd+K (Mac)
-        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
-          e.preventDefault();
-          console.log('Command palette keyboard shortcut detected');
-          if (typeof window.openCommandPalette === 'function') {
-            window.openCommandPalette();
-          } else {
-            // Fallback to simple command palette
-            const simpleCommandPalette = document.querySelector('.simple-command-palette');
-            if (simpleCommandPalette) {
-              simpleCommandPalette.classList.add('visible');
-              const input = simpleCommandPalette.querySelector('input');
-              if (input) input.focus();
-            }
-          }
-        }
-      });
     });
   </script>
 
diff --git a/assets/css/command-palette.css b/assets/css/command-palette.css
index 6f5e7ace..29d5c92a 100644
--- a/assets/css/command-palette.css
+++ b/assets/css/command-palette.css
@@ -26,7 +26,8 @@
   transform: translateX(-50%);
   width: 640px;
   max-width: 90vw;
-  background-color: #f9f5fb;
+  background-color: #2d1e30; /* Always use dark purple background */
+  color: #fff; /* Always use white text */
   border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
   overflow: hidden;
@@ -38,25 +39,25 @@
   width: 100%;
   padding: 16px 18px;
   border: none;
-  border-bottom: 2px solid rgba(104, 35, 109, 0.3);
+  border-bottom: 2px solid rgba(104, 35, 109, 0.5);
   font-size: 16px;
   outline: none;
-  background-color: #fff;
+  background-color: #3a2a3d; /* Always use dark purple input */
   transition: all 0.3s ease;
-  color: #333;
+  color: #fff; /* Always use white text */
   font-weight: 500;
 }
 
 #command-palette-input:focus {
-  border-bottom-color: #68236D;
-  background-color: #fff;
+  border-bottom-color: rgba(104, 35, 109, 0.8);
+  background-color: #3a2a3d; /* Keep dark background on focus */
 }
 
 .command-palette-results {
   max-height: 60vh;
   overflow-y: auto;
   padding: 0 4px;
-  background-color: #f9f5fb;
+  background-color: #2d1e30; /* Always use dark purple background */
 }
 
 .command-palette-section {
@@ -67,7 +68,7 @@
   padding: 6px 16px;
   font-size: 12px;
   font-weight: bold;
-  color: #68236D;
+  color: #d4a5db; /* Always use light purple for section titles */
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -85,23 +86,23 @@
   border-radius: 8px;
   transition: all 0.2s ease;
   margin: 2px 4px;
-  color: #333;
+  color: #f0f0f0; /* Always use white text */
 }
 
 .command-palette-command:hover, .command-palette-command.selected {
-  background-color: rgba(104, 35, 109, 0.15);
+  background-color: rgba(104, 35, 109, 0.3); /* Darker hover state */
 }
 
 .command-palette-command.selected {
   outline: 2px solid rgba(104, 35, 109, 0.3);
   position: relative;
-  background-color: rgba(104, 35, 109, 0.1);
+  background-color: rgba(104, 35, 109, 0.25); /* Darker selected state */
 }
 
 .command-palette-icon {
   flex: 0 0 24px;
   margin-right: 14px;
-  color: #68236D;
+  color: #d4a5db; /* Always use light purple for icons */
 }
 
 .command-palette-title {
@@ -110,16 +111,16 @@
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
-  color: #333;
+  color: #f0f0f0; /* Always use white text */
 }
 
 .command-palette-shortcut {
   flex: 0 0 auto;
   padding: 3px 8px;
   border-radius: 4px;
-  background-color: rgba(104, 35, 109, 0.15);
+  background-color: rgba(104, 35, 109, 0.3); /* Darker background */
   font-size: 12px;
-  color: #68236D;
+  color: #f0f0f0; /* Always use white text */
   font-weight: 600;
 }
 
@@ -128,7 +129,7 @@
   margin-top: 6px;
   margin-left: 38px;
   font-size: 13px;
-  color: #555;
+  color: #ccc; /* Always use light gray for excerpts */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -146,7 +147,7 @@
 .command-palette-no-results {
   padding: 20px;
   text-align: center;
-  color: #666;
+  color: #ccc; /* Always use light gray for no results */
   font-style: italic;
 }
 
@@ -243,95 +244,14 @@
   }
 }
 
-/* Dark mode styling */
-@media (prefers-color-scheme: dark) {
-  .simple-command-palette-modal {
-    background-color: #2d1e30;
-    color: #fff;
-    border-color: rgba(104, 35, 109, 0.3);
-  }
-  
-  #command-palette-input {
-    background-color: #3a2a3d;
-    color: #fff;
-    border-bottom-color: rgba(104, 35, 109, 0.5);
-  }
-  
-  #command-palette-input:focus {
-    border-bottom-color: rgba(104, 35, 109, 0.8);
-    background-color: #3a2a3d;
-  }
-  
-  .command-palette-results {
-    background-color: #2d1e30;
-  }
-  
-  .command-palette-section-title {
-    color: #d4a5db;
-  }
-  
-  .command-palette-command {
-    color: #f0f0f0;
-  }
-  
-  .command-palette-command:hover, .command-palette-command.selected {
-    background-color: rgba(104, 35, 109, 0.3);
-  }
-  
-  .command-palette-command.selected {
-    background-color: rgba(104, 35, 109, 0.25);
-  }
-  
-  .command-palette-icon {
-    color: #d4a5db;
-  }
-  
-  .command-palette-title {
-    color: #f0f0f0;
-  }
-  
-  .command-palette-shortcut {
-    background-color: rgba(104, 35, 109, 0.3);
-    color: #f0f0f0;
-  }
-  
-  .command-palette-excerpt {
-    color: #ccc;
-  }
-  
-  .command-palette-section:has(.command-palette-section-title:contains("Search Results")) {
-    border-top-color: rgba(104, 35, 109, 0.3);
-  }
-  
-  .command-palette-no-results {
-    color: #ccc;
-  }
+/* Original Dark mode styling has been moved to the base styles above.
+   These styles have been applied directly to make the command palette
+   consistently use the dark purple theme across all browsers. */
 
-  /* Dark mode for the command-k-style button */
-  .command-k-style-btn {
-    background: rgba(255, 255, 255, 0.1);
-    color: #f0f0f0;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-  }
-  
-  .command-k-style-btn:hover {
-    background: rgba(255, 255, 255, 0.15);
-  }
-  
-  .command-k-style-btn:focus,
-  .command-k-style-btn.focused {
-    outline: 2px solid rgba(212, 165, 219, 0.6);
-  }
-  
-  .command-k-style-btn .search-icon {
-    color: #000000;
-  }
-  
-  .command-k-style-btn .default-theme-text,
-  .command-k-style-btn .mac-theme-text {
-    color: #000000;
-  }
-}
+/* Dark mode styles for command-k button that we aren't using in the main palette */
+/* Dark mode styles for command-k button that we aren't using in the main palette */
+
+/* Command palette footer styles are defined below */
 
 /* Custom styles for the shortcut help modal */
 .shortcut-help-overlay {
@@ -447,8 +367,8 @@
   justify-content: center;
   align-items: center;
   padding: 12px;
-  background-color: rgba(104, 35, 109, 0.06);
-  border-top: 1px solid rgba(104, 35, 109, 0.15);
+  background-color: rgba(104, 35, 109, 0.1);
+  border-top: 1px solid rgba(104, 35, 109, 0.3);
   gap: 16px;
   flex-wrap: wrap;
 }
@@ -456,7 +376,7 @@
 .command-palette-footer-item {
   display: flex;
   align-items: center;
-  color: #555;
+  color: #ddd;
   font-size: 13px;
 }
 
@@ -467,10 +387,10 @@
   min-width: 22px;
   height: 22px;
   padding: 0 5px;
-  background-color: rgba(104, 35, 109, 0.15);
-  border: 1px solid rgba(104, 35, 109, 0.3);
+  background-color: rgba(104, 35, 109, 0.25);
+  border: 1px solid rgba(104, 35, 109, 0.4);
   border-radius: 4px;
-  color: #68236D;
+  color: #f0f0f0;
   margin: 0 3px;
   font-size: 12px;
   line-height: 1;
@@ -479,19 +399,4 @@
   font-weight: 600;
 }
 
-@media (prefers-color-scheme: dark) {
-  .command-palette-footer {
-    background-color: rgba(104, 35, 109, 0.1);
-    border-top-color: rgba(104, 35, 109, 0.3);
-  }
-  
-  .command-palette-footer-item {
-    color: #ddd;
-  }
-  
-  .command-palette-footer kbd {
-    background-color: rgba(104, 35, 109, 0.25);
-    border-color: rgba(104, 35, 109, 0.4);
-    color: #f0f0f0;
-  }
-} 
\ No newline at end of file
+/* Footer dark styling is now applied to all color schemes above */ 
\ No newline at end of file
diff --git a/assets/css/research.css b/assets/css/research.css
index e4d8033d..844b0917 100644
--- a/assets/css/research.css
+++ b/assets/css/research.css
@@ -637,6 +637,30 @@
   border: 1px solid rgba(120, 170, 255, 0.3);
 }
 
+/* Fix for top filter tags in dark theme */
+[data-theme="dark"] tags span, 
+[data-theme="dark"] tags a.tag-link {
+  background: rgba(40, 44, 52, 0.8) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(111, 161, 255, 0.4) !important;
+}
+
+[data-theme="dark"] tags span:hover, 
+[data-theme="dark"] tags a.tag-link:hover {
+  background: rgba(76, 110, 245, 0.5) !important;
+  border-color: rgba(111, 161, 255, 0.6) !important;
+}
+
+/* Fix for active tags in dark theme */
+[data-theme="dark"] tags span.active, 
+[data-theme="dark"] tags a.tag-link.active {
+  background: rgba(76, 110, 245, 0.8) !important;
+  color: #ffffff !important;
+  border-color: rgba(111, 161, 255, 0.8) !important;
+  transform: scale(1.1);
+  box-shadow: 0 2px 5px rgba(111, 161, 255, 0.5) !important;
+}
+
 /* First tag - brightest background */
 .research-content tags span:nth-of-type(1) {
   background: rgba(147, 51, 234, 0.15);
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 9365a0b6..dd611cff 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,14 +1,16 @@
 /* Base Styles */
 :root {
+  /* Core colors */
   --color-primary: #0056b3;
   --color-secondary: #2b2b2b;
   --color-text: #333333;
   --color-background: #ffffff;
-  --font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arial', sans-serif;
-  --color-primary-hover: #004494;
   --color-link: #0056b3;
   --color-link-hover: #004494;
   
+  /* Core fonts */
+  --font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arial', sans-serif;
+  
   /* Heading styling */
   --h2-gradient-start: #2b65c6;
   --h2-gradient-end: #0e4594;
@@ -23,15 +25,34 @@
   --nav-item-hover-bg: rgba(255, 255, 255, 0.35);
   --nav-item-shadow: rgba(0, 0, 0, 0.1);
   --nav-item-hover-shadow: rgba(0, 0, 0, 0.15);
+  
+  /* Icon colors */
+  --icon-color: #ffffff;
+  
+  /* Box shadow presets */
+  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
+  --shadow-lg: 0 4px 30px rgba(0, 0, 0, 0.2);
+  
+  /* Transition presets */
+  --transition-fast: all 0.2s ease;
+  --transition-medium: all 0.3s ease;
+  
+  /* Spacing system */
+  --space-xs: 0.5rem;
+  --space-sm: 1rem;
+  --space-md: 2rem;
+  --space-lg: 4rem;
+  --space-xl: 8rem;
 }
 
 /* Dark theme variables */
 [data-theme="dark"] {
+  /* Core colors */
   --color-text: #e0e0e0;
   --color-background: #121212;
   --color-primary: #4c8dff;
   --color-secondary: #a0a0a0;
-  --color-primary-hover: #6fa1ff;
   --color-link: #4c8dff;
   --color-link-hover: #6fa1ff;
   
@@ -49,8 +70,17 @@
   --nav-item-hover-bg: rgba(40, 40, 40, 0.8);
   --nav-item-shadow: rgba(0, 0, 0, 0.3);
   --nav-item-hover-shadow: rgba(0, 0, 0, 0.4);
+  
+  /* Icon color */
+  --icon-color: #ffffff;
+  
+  /* Box shadow presets */
+  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 4px 30px rgba(0, 0, 0, 0.4);
 }
 
+/* Base element styles */
 html {
   font-size: 62.5%;
   box-sizing: border-box;
@@ -70,32 +100,142 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Make icons white in dark mode */
-[data-theme="dark"] .s-header__nav i,
-[data-theme="dark"] .s-header__nav-list i,
-[data-theme="dark"] .fa-brands,
-[data-theme="dark"] .fa-solid,
-[data-theme="dark"] .ai,
-[data-theme="dark"] .s-footer i,
-[data-theme="dark"] .site-footer i,
-[data-theme="dark"] .footer-left i,
-[data-theme="dark"] .footer-right i {
+/* Make icons use theme colors */
+.s-footer i,
+.site-footer i,
+.footer-left i,
+.footer-right i,
+.fa-solid:not(.s-header__nav-list .fa-solid),
+.fa-brands:not(.s-header__nav-list .fa-brands),
+.ai:not(.s-header__nav-list .ai):not(.team-member .ai) {
+  color: var(--icon-color);
+  font-size: 1.5em;
+  transition: transform 0.3s ease, color 0.3s ease;
+}
+
+/* Header icons in command palette retain their natural colors */
+.s-header__nav i,
+.s-header__nav-list i {
+  /* Use their natural colors */
+  font-size: 1.5em;
+  transition: transform 0.3s ease, color 0.3s ease;
+}
+
+/* Ensure social media icons are white in dark theme */
+[data-theme="dark"] .fa-brands.fa-github,
+[data-theme="dark"] .team-member .fa-brands.fa-github,
+[data-theme="dark"] .fa-brands.fa-linkedin,
+[data-theme="dark"] .team-member .fa-brands.fa-linkedin,
+[data-theme="dark"] .fa-brands.fa-x-twitter,
+[data-theme="dark"] .team-member .fa-brands.fa-x-twitter,
+[data-theme="dark"] .fa-brands.fa-bluesky,
+[data-theme="dark"] .team-member .fa-brands.fa-bluesky,
+[data-theme="dark"] .fa-brands.fa-wikipedia-w,
+[data-theme="dark"] .team-member .fa-brands.fa-wikipedia-w {
+  color: #ffffff !important;
+}
+
+/* Apply exceptions for colored icons */
+.s-header__nav-list .fa-bluesky,
+.team-member .fa-bluesky {
+  color: #0085ff !important;
+}
+
+.footer-right .fa-bluesky {
   color: white !important;
 }
 
+.s-header__nav-list .fa-linkedin,
+.team-member .fa-linkedin,
+.footer-right .fa-linkedin {
+  color: #0077b5 !important;
+  font-size: 1.7em;
+}
+
+.s-header__nav-list .fa-x-twitter,
+.team-member .fa-x-twitter {
+  color: #000000 !important;
+}
+
+.footer-right .fa-x-twitter {
+  color: white !important;
+}
+
+.s-header__nav-list .fa-wikipedia-w,
+.team-member .fa-wikipedia-w,
+.footer-right .fa-wikipedia-w {
+  color: #000000 !important;
+  font-size: 1.4em;
+}
+
+[data-theme="dark"] .s-header__nav-list .fa-x-twitter,
+[data-theme="dark"] .team-member .fa-x-twitter,
+[data-theme="dark"] .footer-right .fa-x-twitter,
+[data-theme="dark"] .s-header__nav-list .fa-wikipedia-w,
+[data-theme="dark"] .team-member .fa-wikipedia-w,
+[data-theme="dark"] .footer-right .fa-wikipedia-w {
+  color: #ffffff !important;
+}
+
+/* Hover effects for social media icons */
+.s-header__nav-list i:hover,
+.team-member i:hover,
+.footer-right i:hover {
+  transform: translateY(-2px);
+  opacity: 0.9;
+}
+
+/* Ensure consistent sizing in navigation */
+.s-header__nav-list li[style="background: none;"] a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+}
+
+/* Footer social icons specific styles */
+.footer-right i {
+  font-size: 1.6em;
+}
+
+.footer-right .fa-linkedin {
+  font-size: 1.8em;
+}
+
+/* Mobile adjustments */
+@media screen and (max-width: 768px) {
+  .footer-right i {
+    font-size: 1.5em;
+  }
+  
+  .footer-right .fa-linkedin {
+    font-size: 1.7em;
+  }
+  
+  .s-header__nav-list i {
+    font-size: 1.4em;
+  }
+  
+  .s-header__nav-list .fa-linkedin {
+    font-size: 1.6em;
+  }
+}
+
 /* Theme-aware content styling */
-[data-theme="dark"] #about-content a,
-[data-theme="dark"] #news-content a,
-[data-theme="dark"] .teaching-content a,
-[data-theme="dark"] .s-teaching a {
-  color: #78AAFF;
+#about-content a,
+#news-content a,
+.teaching-content a,
+.s-teaching a {
+  color: var(--color-link);
   text-decoration: none;
 }
 
-[data-theme="dark"] #about-content h1,
-[data-theme="dark"] #about-content h3,
-[data-theme="dark"] #news-content h1,
-[data-theme="dark"] #news-content h3 {
+#about-content h1,
+#about-content h3,
+#news-content h1,
+#news-content h3 {
   color: var(--color-text);
 }
 
@@ -184,7 +324,6 @@ h2 {
   position: relative;
   font-size: 2.2rem;
   font-weight: 600;
-  color: var(--color-text);
   padding-bottom: 0.5rem;
   margin: 1.5rem 0 1rem;
   background: linear-gradient(to right, var(--h2-gradient-start), var(--h2-gradient-end));
@@ -206,16 +345,6 @@ h2::after {
   background: linear-gradient(to right, var(--h2-border-color), transparent);
 }
 
-/* Enhanced h2 styling for dark theme */
-[data-theme="dark"] h2 {
-  background: linear-gradient(to right, var(--h2-gradient-start), var(--h2-gradient-end));
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  text-shadow: 0 1px 2px rgba(74, 125, 255, 0.5);
-  filter: drop-shadow(0 0 2px rgba(120, 170, 255, 0.3));
-}
-
 /* Fix h3 headings in dark mode */
 [data-theme="dark"] h3 {
   color: #e0e0e0 !important;
@@ -250,19 +379,10 @@ img.youtube-stats-dark {
   box-sizing: border-box;
 }
 
-@media screen and (max-width: 768px) {
-  img.youtube-stats-light,
-  img.youtube-stats-dark {
-    max-width: 100%;
-    height: auto !important;
-    width: 100% !important;
-  }
-}
-
 /* Fix box shadows and borders in dark mode */
 [data-theme="dark"] .featured-paper,
 [data-theme="dark"] .s-about__grid {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
+  box-shadow: var(--shadow-lg) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
 }
 
@@ -312,7 +432,7 @@ img.youtube-stats-dark {
   align-items: center;
   padding: 0 3rem;
   box-shadow: 0 4px 16px var(--header-shadow);
-  transition: background 0.3s ease, box-shadow 0.3s ease;
+  transition: var(--transition-medium);
 }
 
 .s-header__logo {
@@ -385,15 +505,15 @@ img.youtube-stats-dark {
 }
 
 .s-header__nav-list a {
-  color: #1a1a1a;
+  color: var(--nav-item-color);
   text-decoration: none;
   font-size: 1.6rem;
-  transition: all 0.3s ease;
+  transition: var(--transition-medium);
   padding: 0.8rem 1.6rem;
   border-radius: 5px;
-  background: rgba(255, 255, 255, 0.25);
+  background: var(--nav-item-bg);
   backdrop-filter: blur(8px);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
   display: flex;
   align-items: center;
   height: 40px;
@@ -402,10 +522,10 @@ img.youtube-stats-dark {
 .s-header__nav-list a:hover {
   background: var(--nav-item-hover-bg);
   transform: translateY(-2px);
-  box-shadow: 0 4px 15px var(--nav-item-hover-shadow);
+  box-shadow: var(--shadow-md);
 }
 
-/* Special styling for the Bluesky icon */
+/* Special styling for icons in navigation */
 .s-header__nav-list li[style="background: none;"] a {
   display: flex;
   align-items: center;
@@ -419,22 +539,22 @@ img.youtube-stats-dark {
   position: absolute;
   top: 2rem;
   right: 2rem;
-  color: #000000;
+  color: var(--nav-item-color);
   text-decoration: none;
   font-size: 1.6rem;
-  transition: all 0.3s ease;
+  transition: var(--transition-medium);
   padding: 0.8rem 1.6rem;
   border-radius: 5px;
-  background: rgba(255, 255, 255, 0.25);
+  background: var(--nav-item-bg);
   backdrop-filter: blur(8px);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
   margin-left: 0.8rem;
 }
 
 .s-header__nav-close-btn:hover {
-  background: rgba(255, 255, 255, 0.35);
+  background: var(--nav-item-hover-bg);
   transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-md);
 }
 
 /* Theme toggle button */
@@ -447,36 +567,15 @@ img.youtube-stats-dark {
   cursor: pointer;
   border-radius: 50%;
   background: var(--nav-item-bg);
-  box-shadow: 0 2px 10px var(--nav-item-shadow);
-  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-medium);
   position: relative;
 }
 
-/* Special styling for dark theme text and icons */
-[data-theme="dark"] .s-header__nav-list a,
-[data-theme="dark"] .s-header__nav-list a i,
-[data-theme="dark"] .command-k-style-btn,
-[data-theme="dark"] .command-k-style-btn span,
-[data-theme="dark"] .command-k-style-btn i,
-[data-theme="dark"] .s-header__menu-text,
-[data-theme="dark"] .s-header__menu-icon,
-[data-theme="dark"] .s-header__menu-icon::before,
-[data-theme="dark"] .s-header__menu-icon::after {
-  color: #ffffff;
-}
-
-[data-theme="dark"] .fa-bluesky {
-  color: #0085ff !important;
-}
-
-[data-theme="dark"] .theme-toggle-icon {
-  stroke: #ffffff;
-}
-
 .theme-toggle:hover {
   background: var(--nav-item-hover-bg);
   transform: translateY(-2px);
-  box-shadow: 0 4px 15px var(--nav-item-hover-shadow);
+  box-shadow: var(--shadow-md);
 }
 
 .theme-toggle-icon {
@@ -506,18 +605,26 @@ img.youtube-stats-dark {
   transform: rotate(0);
 }
 
-/* Dark mode styling for browsers that support media queries */
-@media (prefers-color-scheme: dark) {
-  /* Dark mode for the navigation close button */
-  .s-header__nav-close-btn {
-    background: rgba(255, 255, 255, 0.1);
-    color: #000000; /* Keep text black in dark mode too to match command palette */
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-  }
-  
-  .s-header__nav-close-btn:hover {
-    background: rgba(255, 255, 255, 0.15);
-  }
+/* Ensure consistent height and alignment for all header items including icons */
+.s-header__nav-list li[style="background: none;"] {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.s-header__nav-list li[style="background: none;"] a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+}
+
+/* Ensure the Bluesky icon is centered */
+.s-header__nav-list .fa-bluesky {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* Intro Section */
@@ -551,7 +658,6 @@ img.youtube-stats-dark {
   background-image: url('../../featured/GraphicalAbstract_v7_FrontOnly-darkTheme.jpg');
   opacity: 0.42;
   filter: brightness(0.85) contrast(1.15);
-  backdrop-filter: blur(8px);
 }
 
 .s-intro__content {
@@ -563,7 +669,7 @@ img.youtube-stats-dark {
   backdrop-filter: blur(12px);
   padding: 4rem;
   border-radius: 10px;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-lg);
 }
 
 [data-theme="dark"] .s-intro__content {
@@ -572,31 +678,6 @@ img.youtube-stats-dark {
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* Social icons styling - matching title gradient in dark mode */
-[data-theme="dark"] .ai-orcid {
-  color: #ff8888 !important; /* Match left side of gradient (red) */
-}
-
-[data-theme="dark"] .fa-github {
-  color: #9077ff !important; /* Match middle of gradient (purple/blue mix) */
-}
-
-[data-theme="dark"] .ai-google-scholar {
-  color: #546cff !important; /* Match right side of gradient (blue) */
-}
-
-/* Make Google Scholar icon white in command palette dark theme */
-[data-theme="dark"] .cmdk-item .ai-google-scholar,
-[data-theme="dark"] [cmdk-item] .ai-google-scholar,
-[data-theme="dark"] [data-cmdk-item] .ai-google-scholar,
-[data-theme="dark"] .cmdk-list .ai-google-scholar,
-[data-theme="dark"] [role="dialog"] .ai-google-scholar,
-[data-theme="dark"] #command-modal .ai-google-scholar,
-[data-theme="dark"] .command-palette-icon .ai-google-scholar,
-[data-theme="dark"] .command-palette-command .ai-google-scholar {
-  color: white !important;
-}
-
 .s-intro__pretitle {
   font-size: 2.4rem;
   margin-bottom: 2rem;
@@ -671,14 +752,14 @@ img.youtube-stats-dark {
   text-decoration: none;
   border-radius: 25px;
   font-size: 0.9em;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  transition: var(--transition-medium);
+  box-shadow: var(--shadow-sm);
   backdrop-filter: blur(5px);
 }
 
 .s-intro__subtitle a.smoothscroll:hover {
   background-color: rgba(3, 102, 214, 1);
-  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  box-shadow: var(--shadow-md);
   transform: translateY(-2px);
 }
 
@@ -708,14 +789,6 @@ img.youtube-stats-dark {
   color: #e0e0e0;
 }
 
-[data-theme="dark"] .s-intro__caption a {
-  color: #6fa1ff;
-}
-
-[data-theme="dark"] .s-intro__caption a:hover {
-  color: #8bb5ff;
-}
-
 .s-intro__caption p {
   margin: 0;
   line-height: 1.6;
@@ -733,6 +806,14 @@ img.youtube-stats-dark {
   text-decoration: none;
 }
 
+[data-theme="dark"] .s-intro__caption a {
+  color: #6fa1ff;
+}
+
+[data-theme="dark"] .s-intro__caption a:hover {
+  color: #8bb5ff;
+}
+
 /* Make sure the Learn More button is visible */
 .s-intro__more {
   margin-top: 2rem;
@@ -747,7 +828,7 @@ img.youtube-stats-dark {
   border-radius: 5px;
   font-size: 1.8rem;
   font-weight: 600;
-  transition: all 0.3s ease;
+  transition: var(--transition-medium);
   border: 1px solid rgba(255, 255, 255, 0.4);
   backdrop-filter: blur(4px);
 }
@@ -755,13 +836,13 @@ img.youtube-stats-dark {
 .s-intro__more-btn:hover {
   background: rgba(255, 255, 255, 0.4);
   transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 /* About Section */
 .s-about {
   padding: 10rem 2rem;
-  background: white;
+  background: var(--color-background);
   min-height: 100vh;
   display: flex;
   align-items: flex-start;
@@ -781,18 +862,11 @@ img.youtube-stats-dark {
   backdrop-filter: blur(8px);
   border-radius: 15px;
   justify-content: space-between;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-lg);
   padding: 3rem;
   overflow: hidden;
 }
 
-@media (max-width: 900px) {
-  .s-about__grid {
-    flex-direction: column;
-    gap: 3rem;
-  }
-}
-
 .s-about__left {
   display: flex;
   flex-direction: column;
@@ -800,12 +874,6 @@ img.youtube-stats-dark {
   width: 60%;
 }
 
-@media (max-width: 900px) {
-  .s-about__left {
-    width: 100%;
-  }
-}
-
 .s-about__right {
   display: flex;
   flex-direction: column;
@@ -813,12 +881,6 @@ img.youtube-stats-dark {
   width: 42%;
 }
 
-@media (max-width: 900px) {
-  .s-about__right {
-    width: 100%;
-  }
-}
-
 .s-about__social {
   display: flex;
   flex-direction: column;
@@ -843,11 +905,6 @@ img.youtube-stats-dark {
   margin-bottom: 0.5rem;
 }
 
-[data-theme="dark"] .s-about__social-header {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  color: #ffffff;
-}
-
 .s-about__social-header img {
   width: 24px;
   height: 24px;
@@ -861,25 +918,16 @@ img.youtube-stats-dark {
 }
 
 .s-about__social-header a {
-  color: #4c6ef5;
+  color: var(--color-link);
   text-decoration: none;
   transition: color 0.3s ease;
 }
 
 .s-about__social-header a:hover {
-  color: #364fc7;
+  color: var(--color-link-hover);
   text-decoration: none;
 }
 
-.s-about__social bsky-embed {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 2rem;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
 /* News content padding to match About section */
 #news-content {
   padding: 1.5rem 2rem;
@@ -896,37 +944,6 @@ img.youtube-stats-dark {
   scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
 }
 
-/* Force all content inside bsky-embed to fit */
-.s-about__social bsky-embed * {
-  max-width: 100%;
-  box-sizing: border-box;
-  word-wrap: break-word;
-}
-
-/* Ensure images don't overflow */
-.s-about__social bsky-embed img {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Custom scrollbar for Bluesky feed */
-.s-about__social bsky-embed::-webkit-scrollbar {
-  width: 6px;
-}
-
-.s-about__social bsky-embed::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.s-about__social bsky-embed::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-}
-
-.s-about__social bsky-embed::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
 .text-pretitle {
   font-size: 1.8rem;
   color: var(--color-primary);
@@ -1000,13 +1017,13 @@ img.youtube-stats-dark {
 }
 
 .s-about__desc a {
-  color: #4c6ef5;
+  color: var(--color-link);
   text-decoration: none;
   transition: color 0.3s ease;
 }
 
 .s-about__desc a:hover {
-  color: #364fc7;
+  color: var(--color-link-hover);
   text-decoration: none;
 }
 
@@ -1095,7 +1112,24 @@ img.youtube-stats-dark {
   }
 }
 
-/* Responsive Design */
+/* Responsive Design - Consolidated Media Queries */
+@media screen and (max-width: 1700px) {
+  .team-grid {
+    grid-template-columns: repeat(3, 400px);
+  }
+}
+
+@media screen and (max-width: 1300px) {
+  .team-grid {
+    grid-template-columns: repeat(2, 400px);
+  }
+  
+  .s-about__grid {
+    grid-template-columns: minmax(350px, 1.2fr) minmax(400px, 1fr);
+    gap: 2rem;
+  }
+}
+
 @media screen and (max-width: 1200px) {
   .s-about__grid {
     grid-template-columns: minmax(400px, 1.2fr) minmax(450px, 1fr);
@@ -1105,12 +1139,56 @@ img.youtube-stats-dark {
   .footer-right {
     padding-right: 90px;
   }
+  
+  .footer-logo {
+    height: 45px;
+  }
+  
+  .pof-logo {
+    height: 50px;
+  }
+  
+  .footer-left, .footer-right {
+    gap: 1.5rem;
+  }
 }
 
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 900px) {
+  .team-grid {
+    grid-template-columns: repeat(1, 400px);
+  }
+  
   .s-about__grid {
-    grid-template-columns: minmax(350px, 1.2fr) minmax(400px, 1fr);
-    gap: 2rem;
+    flex-direction: column;
+    gap: 3rem;
+  }
+  
+  .s-about__left {
+    width: 100%;
+  }
+  
+  .s-about__right {
+    width: 100%;
+  }
+  
+  .footer-logo {
+    height: 35px;
+  }
+  
+  .pof-logo {
+    height: 40px;
+  }
+  
+  .footer-left, .footer-right {
+    gap: 1rem;
+  }
+  
+  .footer-right {
+    padding-right: 80px;
+  }
+  
+  .footer-right i {
+    font-size: 2em !important;
   }
 }
 
@@ -1259,17 +1337,168 @@ img.youtube-stats-dark {
   .s-header__nav-list li:first-child {
     margin-right: 4rem;
   }
-}
-
-/* Team Section */
-.s-team {
-  padding: 10rem 2rem;
-  background: var(--color-background);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+  
+  .site-footer {
+    flex-direction: column;
+    gap: 2rem;
+    text-align: center;
+    padding: 2rem 1rem;
+  }
+    
+  .footer-left, .footer-center, .footer-right {
+    justify-content: center;
+    width: 100%;
+    flex-wrap: wrap;
+    margin: 0;
+    padding-right: 0;
+  }
+
+  .footer-right a:last-child {
+    margin-right: 0;
+  }
+    
+  .footer-logo {
+    height: 30px;
+  }
+    
+  .pof-logo {
+    height: 35px;
+  }
+    
+  .footer-center {
+    order: -1;
+  }
+    
+  .footer-right {
+    gap: 1.5rem;
+  }
+    
+  .footer-right i {
+    font-size: 1.75em !important;
+  }
+    
+  .edit-link {
+    width: 100%;
+    justify-content: center;
+    margin-top: 1rem;
+    color: white;
+  }
+  
+  .s-research {
+    padding: 10rem 0 6rem;
+  }
+
+  .research-content {
+    padding: 2rem;
+  }
+
+  .research-content h1 {
+    font-size: 3rem;
+  }
+
+  .research-content h2 {
+    font-size: 2.4rem;
+  }
+
+  .research-content h3 {
+    font-size: 1.6rem;
+  }
+
+  .research-content h4 {
+    font-size: 1.5rem;
+  }
+
+  .research-content ul li {
+    font-size: 1.4rem;
+  }
+  
+  .s-join {
+    padding: 10rem 0 6rem;
+  }
+
+  .join-content {
+    padding: 2rem;
+  }
+
+  .join-content h1 {
+    font-size: 3rem;
+  }
+
+  .position-section h2 {
+    font-size: 2.2rem;
+  }
+
+  .position-section h3 {
+    font-size: 1.6rem;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .team-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .team-member,
+  .member-image {
+    width: 100%;
+  }
+  
+  .member-image {
+    height: auto;
+    padding-bottom: 0;
+  }
+  
+  .member-image img {
+    width: 100%;
+    max-width: 250px;
+    height: auto;
+    aspect-ratio: 1/1;
+  }
+  
+  .featured-paper {
+    min-width: 400px;
+  }
+    
+  .featured-papers {
+    gap: 1.5rem;
+  }
+}
+
+/* Mobile image adaptations for YouTube stats */
+@media screen and (max-width: 768px) {
+  img.youtube-stats-light,
+  img.youtube-stats-dark {
+    max-width: 100%;
+    height: auto !important;
+    width: 100% !important;
+  }
+}
+
+/* Ensure all nav links have consistent height */
+.s-header__nav-list a {
+  color: var(--nav-item-color);
+  text-decoration: none;
+  font-size: 1.6rem;
+  transition: var(--transition-medium);
+  padding: 0.8rem 1.6rem;
+  border-radius: 5px;
+  background: var(--nav-item-bg);
+  backdrop-filter: blur(8px);
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  align-items: center;
+  height: 40px;
+}
+
+/* Team Section */
+.s-team {
+  padding: var(--space-xl) var(--space-md);
+  background: var(--color-background);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 
 .s-team__desc {
   width: 100%;
@@ -1304,6 +1533,10 @@ img.youtube-stats-dark {
   transition: transform 0.3s ease;
 }
 
+.team-member:hover {
+  transform: translateY(-5px);
+}
+
 /* Center the name */
 .team-member h2 {
   text-align: center;
@@ -1320,6 +1553,11 @@ img.youtube-stats-dark {
 .team-member img {
   display: block;
   margin: 0 auto 1rem;
+  width: 250px;
+  height: 250px;
+  object-fit: cover;
+  transform: translateZ(0);
+  will-change: transform;
 }
 
 /* Center "Joint with" text (it's a paragraph with a single link) */
@@ -1351,54 +1589,6 @@ img.youtube-stats-dark {
   text-align: justify;
 }
 
-/* Responsive breakpoints */
-@media screen and (max-width: 1700px) {
-  .team-grid {
-    grid-template-columns: repeat(3, 400px);
-  }
-}
-
-@media screen and (max-width: 1300px) {
-  .team-grid {
-    grid-template-columns: repeat(2, 400px);
-  }
-}
-
-@media screen and (max-width: 900px) {
-  .team-grid {
-    grid-template-columns: 400px;
-  }
-}
-
-@media screen and (max-width: 500px) {
-  .team-grid {
-    grid-template-columns: 1fr;
-  }
-
-
-  
-  .team-member {
-    width: 100%;
-  }
-  
-  .team-member img {
-    width: 100%;
-    height: auto;
-  }
-}
-
-.member-image {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 1rem;
-  background-color: #f8f9fa;
-  min-height: 250px;
-  overflow: hidden;
-  content-visibility: auto;
-  contain: layout paint;
-}
-
 /* Dark theme text color fixes for team section */
 [data-theme="dark"] .team-member p,
 [data-theme="dark"] .team-member strong,
@@ -1430,14 +1620,20 @@ img.youtube-stats-dark {
 
 [data-theme="dark"] .team-member {
   background: rgba(30, 30, 38, 0.7);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-lg);
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* Make GitHub and Bluesky icons white in dark theme */
-[data-theme="dark"] .fa-github,
-[data-theme="dark"] .fa-bluesky {
-  color: white !important;
+.member-image {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1rem;
+  background-color: #f8f9fa;
+  min-height: 250px;
+  overflow: hidden;
+  content-visibility: auto;
+  contain: layout paint;
 }
 
 .member-image::before {
@@ -1469,38 +1665,6 @@ img.youtube-stats-dark {
   filter: blur(0);
 }
 
-/* Loading animation */
-.member-image::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 50%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(0, 86, 179, 0.1),
-    transparent
-  );
-  animation: loading 1.5s infinite;
-  contain: paint;
-}
-
-@keyframes loading {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 200%;
-  }
-}
-
-/* Hide loading animation when image is loaded */
-.member-image.loaded::after {
-  display: none;
-}
-
 .member-content {
   padding: 0 2rem;
 }
@@ -1517,63 +1681,9 @@ img.youtube-stats-dark {
   margin: 0 0 0.8rem;
   font-weight: 700;
   letter-spacing: -0.02em;
-  transition: color 0.3s ease;
-}
-
-/* Removed hover effect and transitions to prevent blurriness */
-.member-content h2 {
   transition: none;
 }
 
-.member-content h2:hover {
-  /* Disable any hover effects */
-  color: inherit;
-  filter: none;
-  transform: none;
-}
-
-/* Responsive breakpoints */
-@media screen and (max-width: 1700px) {
-  .team-grid {
-    grid-template-columns: repeat(3, 400px);
-  }
-}
-
-@media screen and (max-width: 1300px) {
-  .team-grid {
-    grid-template-columns: repeat(2, 400px);
-  }
-}
-
-@media screen and (max-width: 900px) {
-  .team-grid {
-    grid-template-columns: 400px;
-  }
-}
-
-@media screen and (max-width: 500px) {
-  .team-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .team-member,
-  .member-image {
-    width: 100%;
-  }
-  
-  .member-image {
-    height: auto;
-    padding-bottom: 0;
-  }
-  
-  .member-image img {
-    width: 100%;
-    max-width: 250px;
-    height: auto;
-    aspect-ratio: 1/1;
-  }
-}
-
 .member-content ul {
   list-style: none;
   padding: 0;
@@ -1595,13 +1705,13 @@ img.youtube-stats-dark {
 }
 
 .member-content a {
-  color: #4c6ef5;
+  color: var(--color-link);
   text-decoration: none;
   transition: color 0.3s ease;
 }
 
 .member-content a:hover {
-  color: #364fc7;
+  color: var(--color-link-hover);
   text-decoration: none;
 }
 
@@ -1619,7 +1729,7 @@ img.youtube-stats-dark {
   font-weight: 500;
   font-size: 1.2rem;
   text-decoration: none !important;
-  transition: all 0.3s ease;
+  transition: var(--transition-medium);
 }
 
 .cv-button:hover {
@@ -1628,1043 +1738,778 @@ img.youtube-stats-dark {
   box-shadow: 0 2px 6px rgba(76, 110, 245, 0.15);
 }
 
-/* Research Section
---------------------------------------------- */
-.s-research {
-    padding: 12rem 0 8rem;
-    background-color: white;
-    color: var(--color-text);
+.team-section {
+  margin-bottom: 4rem;
+  width: 100%;
+  max-width: 1600px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.s-research .row {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 2rem;
+.team-section h1 {
+  font-size: 2.4rem;
+  margin-bottom: 2rem;
+  color: var(--color-text);
+  text-align: center;
 }
 
-.s-research .column {
-    width: 100%;
+/* Featured Section */
+.s-featured {
+  padding: 0 var(--space-md);
+  background: var(--color-background);
+  display: flex;
+  align-items: flex-start;
 }
 
-.research-content {
-    background: rgba(255, 255, 255, 0.25);
-    backdrop-filter: blur(8px);
-    padding: 4rem;
-    border-radius: 10px;
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+.s-featured__content {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
-.research-content h1 {
-    font-size: 3.6rem;
-    margin-bottom: 4rem;
-    color: #2b2b2b;
-    text-align: center;
+.s-featured__grid {
+  display: flex;
+  justify-content: center;
+  width: 100%;
 }
 
-.research-content h2 {
-    font-size: 2.8rem;
-    margin: 4rem 0 2rem;
-    color: #4c6ef5;
-    border-bottom: 2px solid rgba(76, 110, 245, 0.2);
-    padding-bottom: 1rem;
+.s-featured__left {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
-.research-content h3 {
-    font-size: 1.8rem;
-    margin: 2rem 0 1rem;
-    color: #2b2b2b;
-    font-weight: 500;
+.s-featured__header {
+  text-align: center;
+  margin-bottom: 4rem;
 }
 
-.research-content h4 {
-    font-size: 1.6rem;
-    margin: 2rem 0 1rem;
-    color: #4c6ef5;
-    font-weight: 600;
-    font-style: italic;
+.s-featured__header .text-pretitle {
+  font-size: 3.6rem;
+  color: var(--color-primary);
+  margin-bottom: 1.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 500;
 }
 
-.research-content ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+.s-featured__header .text-display-title {
+  font-size: 3.6rem;
+  color: var(--color-text);
+  margin: 0;
+  font-weight: 700;
 }
 
-.research-content ul li {
-    margin-bottom: 1rem;
-    font-size: 1.5rem;
-    line-height: 1.6;
+.featured-papers {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+  overflow-x: auto;
+  padding: 1rem 0;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
 }
 
-.research-content h4 + ul {
-    margin-left: 2rem;
-    border-left: 3px solid rgba(76, 110, 245, 0.2);
-    padding-left: 1rem;
+/* Hide scrollbar but keep functionality */
+.featured-papers::-webkit-scrollbar {
+  display: none;
 }
 
-.research-content h4 + ul li {
-    color: #666;
+.featured-paper {
+  flex: 0 0 auto;
+  width: calc(50% - 1rem);
+  min-width: 600px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+  padding: 2rem;
+  transition: transform 0.3s ease;
+  box-shadow: var(--shadow-md);
+  scroll-snap-align: start;
 }
 
-.research-content ul li p {
-    margin: 0.5rem 0;
+.featured-paper:hover {
+  transform: translateY(-5px);
 }
 
-.research-content ul li:first-child p {
-    margin-top: 0;
+.featured-paper h3 {
+  font-size: 2rem;
+  margin: 0 0 1rem;
+  color: var(--color-primary);
 }
 
-.research-content img {
-    margin-right: 0.5rem;
-    vertical-align: middle;
+/* Style tags */
+.featured-paper tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 1rem 0;
 }
 
-.research-content a {
-    color: #4c6ef5;
-    text-decoration: none;
-    transition: color 0.3s ease;
+.featured-paper tags span {
+  display: inline-block;
+  padding: 0.4rem 0.8rem;
+  background: rgba(76, 110, 245, 0.15);
+  color: #4c6ef5;
+  border-radius: 4px;
+  font-size: 1.4rem;
+  cursor: pointer;
+  transition: var(--transition-medium);
+  text-decoration: none;
+  border: 1px solid rgba(76, 110, 245, 0.2);
 }
 
-.research-content a:hover {
-    color: #364fc7;
-    text-decoration: none;
+[data-theme="dark"] .featured-paper tags span {
+  background: rgba(40, 44, 52, 0.8) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(111, 161, 255, 0.4) !important;
 }
 
-/* Responsive adjustments */
-@media screen and (max-width: 768px) {
-    .s-research {
-        padding: 10rem 0 6rem;
-    }
-
-    .research-content {
-        padding: 2rem;
-    }
-
-    .research-content h1 {
-        font-size: 3rem;
-    }
-
-    .research-content h2 {
-        font-size: 2.4rem;
-    }
-
-    .research-content h3 {
-        font-size: 1.6rem;
-    }
-
-    .research-content h4 {
-        font-size: 1.5rem;
-    }
-
-    .research-content ul li {
-        font-size: 1.4rem;
-    }
+.featured-paper tags span:hover {
+  background: rgba(76, 110, 245, 0.25);
+  transform: translateY(-2px);
+  border-color: rgba(76, 110, 245, 0.3);
 }
 
-/* Markdown Content Styles */
-.markdown-content strong,
-.markdown-content b {
-    font-weight: 700;
-    color: #2b2b2b;
+[data-theme="dark"] .featured-paper tags span:hover {
+  background: rgba(76, 110, 245, 0.5) !important;
+  border-color: rgba(111, 161, 255, 0.6) !important;
 }
 
-.markdown-content em,
-.markdown-content i {
-    font-style: italic;
+.featured-paper iframe {
+  width: 100%;
+  border-radius: 8px;
+  margin: 1rem 0;
+  box-shadow: var(--shadow-sm);
 }
 
-.markdown-content code {
-    font-family: monospace;
-    background: rgba(0, 0, 0, 0.05);
-    padding: 0.2rem 0.4rem;
-    border-radius: 3px;
-    font-size: 0.9em;
+/* Hide year headers */
+.featured-paper h2 {
+  display: none;
 }
 
-.markdown-content pre code {
-    display: block;
-    padding: 1rem;
-    overflow-x: auto;
+/* Footer */
+.site-footer {
+    background-color: #333;
+    color: white;
+    padding: 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    bottom: 0;
+    width: 100%;
 }
 
-.markdown-content blockquote {
-    border-left: 4px solid #4c6ef5;
-    margin: 1.5rem 0;
-    padding-left: 1rem;
-    color: #666;
+.footer-left, .footer-center, .footer-right {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
 }
 
-.markdown-content hr {
-    border: none;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    margin: 2rem 0;
+.footer-left {
+    flex: 0 1 auto;
 }
 
-/* Add to existing styles.css where other image rules exist */
-.team-member img {
-  width: 250px;
-  height: 250px;
-  object-fit: cover;
-  transform: translateZ(0);
-  will-change: transform;
+.footer-center {
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    flex: 0 1 auto;
+    margin: 0 2rem;
 }
 
-@media screen and (max-width: 768px) {
-  .team-member img {
-    width: 100%;
-    height: auto;
-  }
+.footer-right {
+    flex: 0 1 auto;
+    justify-content: flex-end;
+    margin-right: 0;
+    gap: 2rem;
+    padding-right: 100px;
 }
 
-.team-section {
-  margin-bottom: 4rem;
-  width: 100%;
-  max-width: 1600px;
-  margin-left: auto;
-  margin-right: auto;
+.footer-right a:last-child {
+    margin-right: -15px;
 }
 
-.team-section h1 {
-  font-size: 2.4rem;
-  margin-bottom: 2rem;
-  color: var(--color-1);
-  text-align: center;
+.copyright-text {
+    font-size: 1em;
+    margin: 0;
+    opacity: 0.9;
+    line-height: 1.5;
+    white-space: nowrap;
 }
 
-.team-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 400px);
-  gap: 2rem;
-  margin-bottom: 2rem;
-  justify-content: center;
+.edit-link {
+    color: white;
+    text-decoration: none;
+    font-size: 0.9em;
+    padding: 0.5em 1em;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    transition: var(--transition-medium);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
 }
 
-.team-member {
-  width: 400px;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  border-radius: 10px;
-  padding: 2rem;
-  text-align: justify;
-  transition: transform 0.3s ease;
+.edit-link:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.4);
+    transform: translateY(-1px);
 }
 
-.team-member:hover {
-  transform: translateY(-5px);
+.edit-link i {
+    font-size: 1.1em;
 }
 
-/* Responsive breakpoints for team grid */
-@media screen and (max-width: 1700px) {
-  .team-grid {
-    grid-template-columns: repeat(3, 400px);
-  }
+.footer-logo {
+    height: 55px;
+    width: auto;
+    filter: brightness(0) invert(1);
+    transition: opacity 0.3s ease;
 }
 
-@media screen and (max-width: 1300px) {
-  .team-grid {
-    grid-template-columns: repeat(2, 400px);
-  }
+.pof-logo {
+    height: 60px;
 }
 
-@media screen and (max-width: 900px) {
-  .team-grid {
-    grid-template-columns: repeat(1, 400px);
-  }
+.footer-logo:hover {
+    opacity: 0.8;
 }
 
-@media screen and (max-width: 500px) {
-  .team-grid {
-    grid-template-columns: 1fr;
-  }
-
-
-  
-  .team-member {
-    width: 100%;
-  }
+.footer-left a, .footer-right a {
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    color: white;
 }
 
-/* Badge/Shield Styles */
-.s-about__desc img[src*="img.shields.io"] {
-  height: 24px;
-  margin: 5px 8px;
-  transform: scale(1.1);
-  vertical-align: middle;
-  transition: transform 0.3s ease;
-}
-
-.s-about__desc a {
-  display: inline-block;
-  padding: 2px;
-  transition: transform 0.3s ease;
+.footer-left a:hover, .footer-right a:hover {
+    transform: translateY(-2px);
+    opacity: 0.8;
 }
 
-.s-about__desc a:hover {
-  color: #364fc7;
+/* Go to top button */
+.ss-go-top {
+  display: none;
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  z-index: 100;
+  padding: 15px;
+  background: rgba(255, 255, 255, 0.2);
+  color: #333;
   text-decoration: none;
-  transform: translateY(-2px);
-}
-
-.s-about__desc a:hover img[src*="img.shields.io"] {
-  transform: scale(1.15);
+  border-radius: 50%;
+  transition: var(--transition-medium);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-.s-about__desc strong,
-.s-about__desc b {
-  font-weight: 700;
-  color: #4c6ef5;
-  padding: 0.1em 0.2em;
-  background: linear-gradient(120deg, rgba(76, 110, 245, 0.1) 0%, rgba(76, 110, 245, 0.05) 100%);
-  border-radius: 3px;
-  transition: all 0.3s ease;
+.ss-go-top:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-md);
 }
 
-.s-about__desc strong:hover,
-.s-about__desc b:hover {
-  background: linear-gradient(120deg, rgba(76, 110, 245, 0.15) 0%, rgba(76, 110, 245, 0.08) 100%);
+.ss-go-top i {
+  font-size: 1.5em;
+  color: #333;
+  display: block;
 }
 
-/* Code block styling for contact info */
-.s-about__desc code.copyable {
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 0.95em;
-  background: rgba(76, 110, 245, 0.05);
-  padding: 0.4em 0.8em;
-  border-radius: 4px;
-  border: 1px solid rgba(76, 110, 245, 0.1);
-  color: #4c6ef5;
-  margin: 0;
-  display: inline-block;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  user-select: all;
-  text-decoration: none;
-  pointer-events: auto;
+.link-is-visible {
+  display: block;
 }
 
-.s-about__desc code.copyable:link,
-.s-about__desc code.copyable:visited,
-.s-about__desc code.copyable:hover,
-.s-about__desc code.copyable:active {
-  text-decoration: none;
-  color: #4c6ef5;
+/* Research Section */
+.s-research {
+  padding: 12rem 0 8rem;
+  background-color: var(--color-background);
+  color: var(--color-text);
 }
 
-.s-about__desc code.copyable::before {
-  content: "Click to copy";
-  position: absolute;
-  top: -30px;
-  left: 50%;
-  transform: translateX(-50%) translateY(10px);
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  pointer-events: none;
+.s-research .row {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
 }
 
-.s-about__desc code.copyable::after {
-  content: "";
-  position: absolute;
-  top: -10px;
-  left: 50%;
-  transform: translateX(-50%) translateY(10px);
-  border: 5px solid transparent;
-  border-top-color: rgba(0, 0, 0, 0.8);
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.2s ease;
-  pointer-events: none;
+.s-research .column {
+  width: 100%;
 }
 
-.s-about__desc code.copyable:hover::before,
-.s-about__desc code.copyable:hover::after {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(-50%) translateY(0);
+.research-content {
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(8px);
+  padding: 4rem;
+  border-radius: 10px;
+  box-shadow: var(--shadow-lg);
 }
 
-.s-about__desc code.copyable.copied::before {
-  content: "Copied!";
-  background: #4c6ef5;
+[data-theme="dark"] .research-content {
+  background: rgba(30, 30, 30, 0.4);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
 }
 
-.s-about__desc code.copyable.copied::after {
-  border-top-color: #4c6ef5;
+.research-content h1 {
+  font-size: 3.6rem;
+  margin-bottom: 4rem;
+  color: var(--color-text);
+  text-align: center;
 }
 
-.s-about__desc code.copyable:hover {
-  background: rgba(76, 110, 245, 0.1);
-  border-color: rgba(76, 110, 245, 0.2);
+.research-content h2 {
+  font-size: 2.8rem;
+  margin: 4rem 0 2rem;
+  color: var(--color-primary);
+  border-bottom: 2px solid rgba(76, 110, 245, 0.2);
+  padding-bottom: 1rem;
 }
 
-.s-about__desc code.copyable:active {
-  background: rgba(76, 110, 245, 0.15);
-  transform: scale(0.98);
+.research-content h3 {
+  font-size: 1.8rem;
+  margin: 2rem 0 1rem;
+  color: var(--color-text);
+  font-weight: 500;
 }
 
-/* Email wrapper styles */
-.email-wrapper {
-  margin: 1em 0;
+.research-content h4 {
+  font-size: 1.6rem;
+  margin: 2rem 0 1rem;
+  color: var(--color-primary);
+  font-weight: 600;
+  font-style: italic;
 }
 
-.email-wrapper pre {
+.research-content ul {
+  list-style: none;
   margin: 0;
   padding: 0;
-  background: none;
-}
-
-.email-wrapper code.copyable {
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 0.95em;
-  background: rgba(76, 110, 245, 0.05);
-  padding: 0.4em 0.8em;
-  border-radius: 4px;
-  border: 1px solid rgba(76, 110, 245, 0.1);
-  color: #4c6ef5;
-  display: inline-block;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  user-select: all;
-}
-
-.email-wrapper code.copyable::before {
-  content: "Click to copy";
-  position: absolute;
-  top: -30px;
-  left: 50%;
-  transform: translateX(-50%) translateY(10px);
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  pointer-events: none;
-}
-
-.email-wrapper code.copyable::after {
-  content: "";
-  position: absolute;
-  top: -10px;
-  left: 50%;
-  transform: translateX(-50%) translateY(10px);
-  border: 5px solid transparent;
-  border-top-color: rgba(0, 0, 0, 0.8);
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.2s ease;
-  pointer-events: none;
-}
-
-.email-wrapper code.copyable:hover::before,
-.email-wrapper code.copyable:hover::after {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(-50%) translateY(0);
-}
-
-.email-wrapper code.copyable.copied::before {
-  content: "Copied!";
-  background: #4c6ef5;
-}
-
-.email-wrapper code.copyable.copied::after {
-  border-top-color: #4c6ef5;
-}
-
-.email-wrapper code.copyable:hover {
-  background: rgba(76, 110, 245, 0.1);
-  border-color: rgba(76, 110, 245, 0.2);
-}
-
-.email-wrapper code.copyable:active {
-  background: rgba(76, 110, 245, 0.15);
-  transform: scale(0.98);
-}
-
-/* Email container styles */
-.email-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: rgba(76, 110, 245, 0.05);
-    border: 1px solid rgba(76, 110, 245, 0.1);
-    border-radius: 6px;
-    padding: 0.8em 1em;
-    margin: 1em 0;
-    transition: all 0.3s ease;
-}
-
-.email-container:hover {
-    background: rgba(76, 110, 245, 0.08);
-    border-color: rgba(76, 110, 245, 0.2);
-}
-
-.email-text {
-    font-family: 'Consolas', 'Monaco', monospace;
-    color: #4c6ef5;
-    font-size: 0.95em;
-    user-select: all;
-}
-
-.copy-btn {
-    background: transparent;
-    border: none;
-    color: #4c6ef5;
-    cursor: pointer;
-    padding: 0.6em;
-    border-radius: 4px;
-    transition: all 0.2s ease;
-    opacity: 0.7;
-    font-size: 1.1em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 36px;
-}
-
-.copy-btn:hover {
-    opacity: 1;
-    background: rgba(76, 110, 245, 0.1);
-}
-
-.copy-btn:active {
-    transform: scale(0.95);
-}
-
-.copy-btn.copied {
-    background: #4c6ef5;
-    color: white;
-    opacity: 1;
-}
-
-.copy-btn i {
-    pointer-events: none;
 }
 
-/* Footer Styles */
-.site-footer {
-    background-color: #333;
-    color: white;
-    padding: 2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    bottom: 0;
-    width: 100%;
+.research-content ul li {
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  line-height: 1.6;
 }
 
-.footer-left, .footer-center, .footer-right {
-    display: flex;
-    align-items: center;
-    gap: 2rem;
+.research-content h4 + ul {
+  margin-left: 2rem;
+  border-left: 3px solid rgba(76, 110, 245, 0.2);
+  padding-left: 1rem;
 }
 
-.footer-left {
-    flex: 0 1 auto;
+.research-content h4 + ul li {
+  color: #666;
 }
 
-.footer-center {
-    flex-direction: column;
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-    flex: 0 1 auto;
-    margin: 0 2rem;
+.research-content ul li p {
+  margin: 0.5rem 0;
 }
 
-.footer-right {
-    flex: 0 1 auto;
-    justify-content: flex-end;
-    margin-right: 0;
-    gap: 2rem;
-    padding-right: 100px;
+.research-content ul li:first-child p {
+  margin-top: 0;
 }
 
-.footer-right a:last-child {
-    margin-right: -15px;
+.research-content img {
+  margin-right: 0.5rem;
+  vertical-align: middle;
 }
 
-.copyright-text {
-    font-size: 1em;
-    margin: 0;
-    opacity: 0.9;
-    line-height: 1.5;
-    white-space: nowrap;
+.research-content a {
+  color: var(--color-link);
+  text-decoration: none;
+  transition: color 0.3s ease;
 }
 
-.edit-link {
-    color: white;
-    text-decoration: none;
-    font-size: 0.9em;
-    padding: 0.5em 1em;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
-    transition: all 0.3s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5em;
+.research-content a:hover {
+  color: var(--color-link-hover);
+  text-decoration: none;
 }
 
-.edit-link:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.4);
-    transform: translateY(-1px);
+/* Join Us Section */
+.s-join {
+  padding: 12rem 0 8rem;
+  background-color: var(--color-background);
 }
 
-.edit-link i {
-    font-size: 1.1em;
+.join-content {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 4rem;
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(8px);
+  border-radius: 10px;
+  box-shadow: var(--shadow-lg);
 }
 
-.footer-logo {
-    height: 55px;
-    width: auto;
-    filter: brightness(0) invert(1);
-    transition: opacity 0.3s ease;
+[data-theme="dark"] .join-content {
+  background: rgba(30, 30, 30, 0.4);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
 }
 
-.pof-logo {
-    height: 60px;
+.join-content h1 {
+  font-size: 3.6rem;
+  margin-bottom: 4rem;
+  color: var(--color-text);
+  text-align: center;
 }
 
-.footer-logo:hover {
-    opacity: 0.8;
+.position-section {
+  margin-bottom: 4rem;
 }
 
-.footer-left a, .footer-right a {
-    transition: transform 0.3s ease, opacity 0.3s ease;
-    color: white;
+.position-section h2 {
+  font-size: 2.4rem;
+  color: var(--color-primary);
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid rgba(76, 110, 245, 0.2);
 }
 
-.footer-left a:hover, .footer-right a:hover {
-    transform: translateY(-2px);
-    opacity: 0.8;
+[data-theme="dark"] .position-section h2 {
+  color: #6fa1ff;
+  border-bottom: 2px solid rgba(111, 161, 255, 0.3);
 }
 
-/* Responsive footer adjustments */
-@media screen and (max-width: 1200px) {
-    .footer-logo {
-        height: 45px;
-    }
-    
-    .pof-logo {
-        height: 50px;
-    }
-    
-    .footer-left, .footer-right {
-        gap: 1.5rem;
-    }
-
-    .footer-right {
-        padding-right: 90px;
-    }
+.position-section h3 {
+  font-size: 1.8rem;
+  color: var(--color-text);
+  margin-bottom: 0.5rem;
 }
 
-@media screen and (max-width: 900px) {
-    .footer-logo {
-        height: 35px;
-    }
-    
-    .pof-logo {
-        height: 40px;
-    }
-    
-    .footer-left, .footer-right {
-        gap: 1rem;
-    }
-    
-    .footer-right {
-        padding-right: 80px;
-    }
-    
-    .footer-right i {
-        font-size: 2em !important;
-    }
+.position-section p {
+  font-size: 1.6rem;
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
 }
 
-@media screen and (max-width: 768px) {
-    .site-footer {
-        flex-direction: column;
-        gap: 2rem;
-        text-align: center;
-        padding: 2rem 1rem;
-    }
-    
-    .footer-left, .footer-center, .footer-right {
-        justify-content: center;
-        width: 100%;
-        flex-wrap: wrap;
-        margin: 0;
-        padding-right: 0;
-    }
-
-    .footer-right a:last-child {
-        margin-right: 0;
-    }
-    
-    .footer-logo {
-        height: 30px;
-    }
-    
-    .pof-logo {
-        height: 35px;
-    }
-    
-    .footer-center {
-        order: -1;
-    }
-    
-    .footer-right {
-        gap: 1.5rem;
-    }
-    
-    .footer-right i {
-        font-size: 1.75em !important;
-    }
-    
-    .edit-link {
-        width: 100%;
-        justify-content: center;
-        margin-top: 1rem;
-        color: white;
-    }
+.position-section ul {
+  list-style-type: disc;
+  margin-left: 2rem;
+  margin-bottom: 2rem;
 }
 
-/* Featured Section */
-.s-featured {
-    padding: 0 2rem;
-    background: white;
-    display: flex;
-    align-items: flex-start;
+.position-section li {
+  font-size: 1.6rem;
+  margin-bottom: 0.8rem;
 }
 
-.s-featured__content {
-    width: 100%;
-    max-width: 1400px;
-    margin: 0 auto;
+.application-info {
+  background: rgba(76, 110, 245, 0.05);
+  padding: 2rem;
+  border-radius: 8px;
+  margin-top: 2rem;
 }
 
-.s-featured__grid {
-    display: flex;
-    justify-content: center;
-    width: 100%;
+[data-theme="dark"] .application-info {
+  background: rgba(76, 110, 245, 0.15);
 }
 
-.s-featured__left {
-    width: 100%;
-    max-width: 1400px;
-    margin: 0 auto;
+.external-links a {
+  color: var(--color-link);
+  text-decoration: none;
+  transition: color 0.3s ease;
 }
 
-.s-featured__header {
-    text-align: center;
-    margin-bottom: 4rem;
+[data-theme="dark"] .external-links a {
+  color: #6fa1ff;
 }
 
-.s-featured__header .text-pretitle {
-    font-size: 3.6rem;
-    color: #4c6ef5;
-    margin-bottom: 1.5rem;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    font-weight: 500;
+.external-links a:hover {
+  color: var(--color-link-hover);
+  text-decoration: none;
 }
 
-.s-featured__header .text-display-title {
-    font-size: 3.6rem;
-    color: #2b2b2b;
-    margin: 0;
-    font-weight: 700;
+[data-theme="dark"] .external-links a:hover {
+  color: #9cbeff;
+  text-decoration: none;
 }
 
-.featured-papers {
-    display: flex;
-    flex-direction: row;
-    gap: 2rem;
-    overflow-x: auto;
-    padding: 1rem 0;
-    scroll-snap-type: x mandatory;
-    -webkit-overflow-scrolling: touch;
+.project-list li {
+  margin-bottom: 2rem;
 }
 
-/* Hide scrollbar but keep functionality */
-.featured-papers::-webkit-scrollbar {
-    display: none;
+.project-list h3 {
+  color: var(--color-primary);
+  margin-bottom: 0.5rem;
 }
 
-.featured-papers {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+.funding-info {
+  background: rgba(76, 110, 245, 0.05);
+  padding: 2rem;
+  border-radius: 8px;
+  margin-top: 4rem;
 }
 
-.featured-paper {
-    flex: 0 0 auto;
-    width: calc(50% - 1rem);
-    min-width: 600px;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 10px;
-    padding: 2rem;
-    transition: transform 0.3s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    scroll-snap-align: start;
+/* Badge/Shield Styles */
+.s-about__desc img[src*="img.shields.io"] {
+  height: 24px;
+  margin: 5px 8px;
+  transform: scale(1.1);
+  vertical-align: middle;
+  transition: transform 0.3s ease;
 }
 
-.featured-paper:hover {
-    transform: translateY(-5px);
+.s-about__desc a {
+  display: inline-block;
+  padding: 2px;
+  transition: transform 0.3s ease;
 }
 
-.featured-paper h3 {
-    font-size: 2rem;
-    margin: 0 0 1rem;
-    color: #4c6ef5;
+.s-about__desc a:hover {
+  color: var(--color-link-hover);
+  text-decoration: none;
+  transform: translateY(-2px);
 }
 
-/* Style tags */
-.featured-paper tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin: 1rem 0;
+.s-about__desc a:hover img[src*="img.shields.io"] {
+  transform: scale(1.15);
 }
 
-.featured-paper tags span {
-    display: inline-block;
-    padding: 0.4rem 0.8rem;
-    background: rgba(76, 110, 245, 0.1);
-    color: #4c6ef5;
-    border-radius: 4px;
-    font-size: 1.4rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-decoration: none;
+.s-about__desc strong,
+.s-about__desc b {
+  font-weight: 700;
+  color: var(--color-primary);
+  padding: 0.1em 0.2em;
+  background: linear-gradient(120deg, rgba(76, 110, 245, 0.1) 0%, rgba(76, 110, 245, 0.05) 100%);
+  border-radius: 3px;
+  transition: all 0.3s ease;
 }
 
-.featured-paper tags span:hover {
-    background: rgba(76, 110, 245, 0.2);
-    transform: translateY(-2px);
+.s-about__desc strong:hover,
+.s-about__desc b:hover {
+  background: linear-gradient(120deg, rgba(76, 110, 245, 0.15) 0%, rgba(76, 110, 245, 0.08) 100%);
 }
 
-.featured-paper iframe {
-    width: 100%;
-    border-radius: 8px;
-    margin: 1rem 0;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+/* Markdown Content Styles */
+.markdown-content strong,
+.markdown-content b {
+  font-weight: 700;
+  color: var(--color-text);
 }
 
-/* Hide year headers */
-.featured-paper h2 {
-    display: none;
+.markdown-content em,
+.markdown-content i {
+  font-style: italic;
 }
 
-@media screen and (max-width: 1200px) {
-    .featured-paper {
-        width: calc(100% - 1rem);
-        min-width: 500px;
-    }
+.markdown-content code {
+  font-family: monospace;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.9em;
 }
 
-@media screen and (max-width: 768px) {
-    .featured-paper {
-        min-width: 400px;
-    }
-    
-    .featured-papers {
-        gap: 1.5rem;
-    }
+.markdown-content pre code {
+  display: block;
+  padding: 1rem;
+  overflow-x: auto;
 }
 
-/* Join Us Section Styles */
-.s-join {
-  padding: 12rem 0 8rem;
-  background-color: var(--color-background);
+.markdown-content blockquote {
+  border-left: 4px solid var(--color-primary);
+  margin: 1.5rem 0;
+  padding-left: 1rem;
+  color: #666;
 }
 
-.join-content {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 4rem;
-  background: rgba(255, 255, 255, 0.25);
-  backdrop-filter: blur(8px);
-  border-radius: 10px;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+.markdown-content hr {
+  border: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  margin: 2rem 0;
 }
 
-[data-theme="dark"] .join-content {
-  background: rgba(30, 30, 30, 0.4);
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+/* Code block styling for contact info */
+.s-about__desc code.copyable {
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 0.95em;
+  background: rgba(76, 110, 245, 0.05);
+  padding: 0.4em 0.8em;
+  border-radius: 4px;
+  border: 1px solid rgba(76, 110, 245, 0.1);
+  color: var(--color-primary);
+  margin: 0;
+  display: inline-block;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  position: relative;
+  user-select: all;
+  text-decoration: none;
+  pointer-events: auto;
 }
 
-.join-content h1 {
-  font-size: 3.6rem;
-  margin-bottom: 4rem;
-  color: #2b2b2b;
-  text-align: center;
+.s-about__desc code.copyable:link,
+.s-about__desc code.copyable:visited,
+.s-about__desc code.copyable:hover,
+.s-about__desc code.copyable:active {
+  text-decoration: none;
+  color: var(--color-primary);
 }
 
-[data-theme="dark"] .join-content h1 {
-  color: #ffffff;
+.s-about__desc code.copyable::before {
+  content: "Click to copy";
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  transform: translateX(-50%) translateY(10px);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  opacity: 0;
+  visibility: hidden;
+  transition: var(--transition-fast);
+  white-space: nowrap;
+  pointer-events: none;
 }
 
-.position-section {
-  margin-bottom: 4rem;
+.s-about__desc code.copyable::after {
+  content: "";
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%) translateY(10px);
+  border: 5px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.8);
+  opacity: 0;
+  visibility: hidden;
+  transition: var(--transition-fast);
+  pointer-events: none;
 }
 
-.position-section h2 {
-  font-size: 2.4rem;
-  color: #4c6ef5;
-  margin-bottom: 1.5rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 2px solid rgba(76, 110, 245, 0.2);
+.s-about__desc code.copyable:hover::before,
+.s-about__desc code.copyable:hover::after {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
 }
 
-[data-theme="dark"] .position-section h2 {
-  color: #6fa1ff;
-  border-bottom: 2px solid rgba(111, 161, 255, 0.3);
+.s-about__desc code.copyable.copied::before {
+  content: "Copied!";
+  background: var(--color-primary);
 }
 
-.position-section h3 {
-  font-size: 1.8rem;
-  color: #2b2b2b;
-  margin-bottom: 0.5rem;
+.s-about__desc code.copyable.copied::after {
+  border-top-color: var(--color-primary);
 }
 
-[data-theme="dark"] .position-section h3 {
-  color: #e0e0e0;
+.s-about__desc code.copyable:hover {
+  background: rgba(76, 110, 245, 0.1);
+  border-color: rgba(76, 110, 245, 0.2);
 }
 
-.position-section p {
-  font-size: 1.6rem;
-  line-height: 1.6;
-  margin-bottom: 1.5rem;
+.s-about__desc code.copyable:active {
+  background: rgba(76, 110, 245, 0.15);
+  transform: scale(0.98);
 }
 
-.position-section ul {
-  list-style-type: disc;
-  margin-left: 2rem;
-  margin-bottom: 2rem;
+/* Email wrapper styles */
+.email-wrapper {
+  margin: 1em 0;
 }
 
-.position-section li {
-  font-size: 1.6rem;
-  margin-bottom: 0.8rem;
+.email-wrapper pre {
+  margin: 0;
+  padding: 0;
+  background: none;
 }
 
-.application-info {
+.email-wrapper code.copyable {
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 0.95em;
   background: rgba(76, 110, 245, 0.05);
-  padding: 2rem;
-  border-radius: 8px;
-  margin-top: 2rem;
-}
-
-[data-theme="dark"] .application-info {
-  background: rgba(76, 110, 245, 0.15);
+  padding: 0.4em 0.8em;
+  border-radius: 4px;
+  border: 1px solid rgba(76, 110, 245, 0.1);
+  color: var(--color-primary);
+  display: inline-block;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  position: relative;
+  user-select: all;
 }
 
-.external-links a {
-  color: #4c6ef5;
-  text-decoration: none;
-  transition: color 0.3s ease;
+.email-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(76, 110, 245, 0.05);
+  border: 1px solid rgba(76, 110, 245, 0.1);
+  border-radius: 6px;
+  padding: 0.8em 1em;
+  margin: 1em 0;
+  transition: var(--transition-medium);
 }
 
-[data-theme="dark"] .external-links a {
-  color: #6fa1ff;
+.email-container:hover {
+  background: rgba(76, 110, 245, 0.08);
+  border-color: rgba(76, 110, 245, 0.2);
 }
 
-.external-links a:hover {
-  color: #364fc7;
-  text-decoration: none;
+.email-text {
+  font-family: 'Consolas', 'Monaco', monospace;
+  color: var(--color-primary);
+  font-size: 0.95em;
+  user-select: all;
 }
 
-[data-theme="dark"] .external-links a:hover {
-  color: #9cbeff;
-  text-decoration: none;
+.copy-btn {
+  background: transparent;
+  border: none;
+  color: var(--color-primary);
+  cursor: pointer;
+  padding: 0.6em;
+  border-radius: 4px;
+  transition: var(--transition-fast);
+  opacity: 0.7;
+  font-size: 1.1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
 }
 
-.project-list li {
-  margin-bottom: 2rem;
+.copy-btn:hover {
+  opacity: 1;
+  background: rgba(76, 110, 245, 0.1);
 }
 
-.project-list h3 {
-  color: #4c6ef5;
-  margin-bottom: 0.5rem;
+.copy-btn:active {
+  transform: scale(0.95);
 }
 
-.funding-info {
-  background: rgba(76, 110, 245, 0.05);
-  padding: 2rem;
-  border-radius: 8px;
-  margin-top: 4rem;
+.copy-btn.copied {
+  background: var(--color-primary);
+  color: white;
+  opacity: 1;
 }
 
-@media screen and (max-width: 768px) {
-  .s-join {
-    padding: 10rem 0 6rem;
-  }
-
-  .join-content {
-    padding: 2rem;
-  }
-
-  .join-content h1 {
-    font-size: 3rem;
-  }
-
-  .position-section h2 {
-    font-size: 2.2rem;
-  }
-
-  .position-section h3 {
-    font-size: 1.6rem;
-  }
+.copy-btn i {
+  pointer-events: none;
 }
 
-/* Ensure consistent height and alignment for all header items including icons */
-.s-header__nav-list li[style="background: none;"] {
-  display: flex;
-  align-items: center;
-  height: 100%;
+/* Team member Google Scholar icon */
+.team-member .ai-google-scholar {
+  color: #e76b39 !important;
 }
 
-.s-header__nav-list li[style="background: none;"] a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  width: 40px;
+/* Dark theme - make Google Scholar icon white */
+[data-theme="dark"] .team-member .ai-google-scholar {
+  color: #ffffff !important;
 }
 
-/* Ensure the Bluesky icon is centered */
-.s-header__nav-list .fa-bluesky {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* Newspaper icon - black in light theme, white in dark theme */
+.fa-newspaper {
+  color: #000000 !important;
 }
 
-/* Ensure all nav links have consistent height */
-.s-header__nav-list a {
-  color: #1a1a1a;
-  text-decoration: none;
-  font-size: 1.6rem;
-  transition: all 0.3s ease;
-  padding: 0.8rem 1.6rem;
-  border-radius: 5px;
-  background: rgba(255, 255, 255, 0.25);
-  backdrop-filter: blur(8px);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  display: flex;
-  align-items: center;
-  height: 40px;
+[data-theme="dark"] .fa-newspaper {
+  color: #ffffff !important;
 }
\ No newline at end of file
diff --git a/assets/css/team.css b/assets/css/team.css
index 9e95ef5b..cba9c7f7 100644
--- a/assets/css/team.css
+++ b/assets/css/team.css
@@ -7,6 +7,7 @@
   --team-image-bg: #f5f5f5;
   --team-member-bg: rgba(255, 255, 255, 0.7);
   --team-shadow: rgba(0, 0, 0, 0.1);
+  --team-icon-color: #333333;
 }
 
 [data-theme="dark"] {
@@ -17,6 +18,7 @@
   --team-image-bg: #2a2a2a;
   --team-member-bg: rgba(40, 40, 40, 0.7);
   --team-shadow: rgba(0, 0, 0, 0.3);
+  --team-icon-color: #ffffff;
 }
 
 /* Team page general styles with dark mode support */
@@ -210,4 +212,75 @@
   .s-map .map-description .gray {
     font-size: 1.3rem;
   }
+}
+
+/* Style for social icons */
+.team-member .fa,
+.team-member .ai {
+  display: inline-block;
+  margin: 0 5px;
+  color: var(--team-icon-color);
+  transition: color 0.3s ease, transform 0.3s ease;
+  font-size: 1.5em;
+}
+
+/* Specific styling for social media icons */
+.team-member .fa-github,
+.team-member .fa-linkedin,
+.team-member .fa-x-twitter,
+.team-member .fa-bluesky,
+.team-member .fa-wikipedia-w {
+  color: var(--team-icon-color) !important;
+}
+
+/* Colored icons */
+.team-member .fa-bluesky {
+  color: #0085ff !important;
+}
+
+.team-member .fa-linkedin {
+  color: #0077b5 !important;
+  font-size: 1.7em;
+}
+
+.team-member .fa-x-twitter {
+  color: #000000 !important;
+}
+
+.team-member .fa-wikipedia-w {
+  color: #000000 !important;
+  font-size: 1.4em;
+}
+
+/* Dark theme overrides */
+[data-theme="dark"] .team-member .fa-github,
+[data-theme="dark"] .team-member .fa-linkedin,
+[data-theme="dark"] .team-member .fa-x-twitter,
+[data-theme="dark"] .team-member .fa-bluesky,
+[data-theme="dark"] .team-member .fa-wikipedia-w {
+  color: #ffffff !important;
+}
+
+
+
+[data-theme="dark"] .team-member .fa-x-twitter,
+[data-theme="dark"] .team-member .fa-wikipedia-w {
+  color: #ffffff !important;
+}
+
+/* Hover effects */
+.team-member .fa:hover,
+.team-member .ai:hover {
+  transform: translateY(-2px);
+  opacity: 0.9;
+}
+
+/* Center social links */
+.team-member h2 + p {
+  text-align: center !important;
+  margin: 1rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
 }
\ No newline at end of file
diff --git a/assets/js/command-data.js b/assets/js/command-data.js
index eea75639..0ea9091e 100644
--- a/assets/js/command-data.js
+++ b/assets/js/command-data.js
@@ -109,13 +109,6 @@
     },
     
     // Help commands
-    {
-      id: "help",
-      title: "View Keyboard Shortcuts",
-      handler: () => { window.displayShortcutsHelp(); },
-      section: "Help",
-      icon: '<i class="fa-solid fa-question-circle"></i>'
-    },
     {
       id: "repository",
       title: "View Website Repository",
diff --git a/assets/js/platform-utils.js b/assets/js/platform-utils.js
new file mode 100644
index 00000000..639fd793
--- /dev/null
+++ b/assets/js/platform-utils.js
@@ -0,0 +1,38 @@
+'use strict';
+
+/**
+ * Check if the user is on a Mac platform
+ * @returns {boolean} True if user is on Mac, false otherwise
+ */
+function isMacPlatform() {
+  return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+}
+
+/**
+ * Updates UI elements to reflect the user's platform.
+ *
+ * This function determines whether the current platform is a Mac by calling `isMacPlatform()`
+ * and adjusts the visibility of UI elements accordingly:
+ * - Elements with the class `.default-theme-text` are hidden on Mac platforms.
+ * - Elements with the class `.mac-theme-text` are shown on Mac platforms.
+ * On non-Mac platforms, the visibility settings are reversed.
+ */
+function updatePlatformSpecificElements() {
+  const isMac = isMacPlatform();
+  
+  // Update all platform-specific text elements
+  document.querySelectorAll('.default-theme-text').forEach(element => {
+    element.style.display = isMac ? 'none' : 'inline';
+  });
+  
+  document.querySelectorAll('.mac-theme-text').forEach(element => {
+    element.style.display = isMac ? 'inline' : 'none';
+  });
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', updatePlatformSpecificElements);
+
+// Export functions for use in other scripts
+window.isMacPlatform = isMacPlatform;
+window.updatePlatformSpecificElements = updatePlatformSpecificElements; 
\ No newline at end of file