diff --git a/app/assets/stylesheets/theme.css b/app/assets/stylesheets/theme.css
index b1a311c..4a04c68 100644
--- a/app/assets/stylesheets/theme.css
+++ b/app/assets/stylesheets/theme.css
@@ -11,19 +11,33 @@
   --border-color: #374151; /* gray-700 */
   --accent-color: #eab308; /* yellow-500 */
   --accent-hover: #facc15; /* yellow-400 */
+  --pill-bg: #374151; /* gray-700 */
+  --pill-text: #eab308; /* yellow-500 */
+  --pill-bg-active: #eab308; /* yellow-500 */
+  --pill-text-active: #000000;
+  --glass-accent-1: rgba(100, 150, 255, 0.1);
+  --glass-accent-2: rgba(130, 80, 220, 0.05);
 }
 
 /* CSS Variables - Light Theme */
 :root.light-theme {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f3f4f6; /* gray-100 */
-  --bg-card: #f9fafb; /* gray-50 */
-  --text-primary: #111827; /* gray-900 */
-  --text-secondary: #4b5563; /* gray-600 */
-  --text-muted: #6b7280; /* gray-500 */
-  --border-color: #e5e7eb; /* gray-200 */
-  --accent-color: #eab308; /* yellow-500 */
-  --accent-hover: #d97706; /* yellow-600 */
+  --bg-primary: #eae4cf;         /* toned down from f4f1e6 */
+  --bg-secondary: #e3dbc1;       /* less light, more warm fade */
+  --bg-card: #f2ecda;            /* card paper tone */
+  --text-primary: #3a372f;       /* inkier, softened */
+  --text-secondary: #5e5746;
+  --text-muted: #807b70;
+  --border-color: #d0c8b4;       /* subtle sepia-gray */
+  --accent-color: #c28b00;
+  --accent-hover: #a77400;
+  --pill-bg: #e5ddc7;
+  --pill-text: #a77400;
+  --pill-bg-active: #c28b00;
+  --pill-text-active: #f2ecda;
+  --glass-accent-1: rgba(160, 140, 100, 0.05);
+  --glass-accent-2: rgba(140, 110, 80, 0.03);
+  --sidebar-bg: #e8e1ca;
+  --sidebar-text: #3a372f;
 }
 
 /* Set dark theme as default */
@@ -37,6 +51,12 @@
   --border-color: #374151;
   --accent-color: #eab308;
   --accent-hover: #facc15;
+  --pill-bg: #374151;
+  --pill-text: #eab308;
+  --pill-bg-active: #eab308;
+  --pill-text-active: #000000;
+  --glass-accent-1: rgba(100, 150, 255, 0.1);
+  --glass-accent-2: rgba(130, 80, 220, 0.05);
 }
 
 /* Card Styles */
@@ -75,6 +95,71 @@
   text-decoration: underline;
 }
 
+/* Pill Styles */
+.theme-pill {
+  background-color: var(--pill-bg);
+  color: var(--pill-text);
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px; /* rounded-full */
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.theme-pill.active {
+  background-color: var(--pill-bg-active);
+  color: var(--pill-text-active);
+}
+
+.theme-pill:hover {
+  opacity: 0.9;
+}
+
+/* Glass Effect Utilities */
+.glass-effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.glass-effect::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: var(--glass-accent-1);
+  filter: blur(15px);
+  animation: pulse-slow 12s infinite, float 15s ease-in-out infinite;
+  z-index: 0;
+}
+
+.glass-effect::after {
+  content: '';
+  position: absolute;
+  bottom: -20px;
+  left: -20px;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: var(--glass-accent-2);
+  filter: blur(20px);
+  animation: pulse-slow 15s infinite reverse;
+  z-index: 0;
+}
+
+@keyframes pulse-slow {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 0.8; }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0) translateX(0); }
+  25% { transform: translateY(-10px) translateX(5px); }
+  50% { transform: translateY(0) translateX(10px); }
+  75% { transform: translateY(10px) translateX(5px); }
+}
+
 /* Legacy classes for backward compatibility */
 .dark-card { 
   background-color: var(--bg-card);
diff --git a/app/javascript/application.js b/app/javascript/application.js
index a82d212..25473dd 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -12,7 +12,9 @@ import MarkdownRenderer from './components/MarkdownRenderer'
 import GameCard from './components/GameCard'
 import GamesGrid from './components/GamesGrid'
 import AboutMe from './components/AboutMe'
-import ThemeLayout from './components/DarkModeLayout' // Renamed but kept same file
+import ContactInfo from './components/ContactInfo'
+import FunProjects from './components/FunProjects'
+import ThemeLayout from './components/ThemeLayout' // Use the new ThemeLayout component
 import ThemeProvider from './components/ThemeProvider'
 import ThemeToggle from './components/ThemeToggle'
 
@@ -25,6 +27,8 @@ const COMPONENTS = {
   'GamesGrid': GamesGrid,
   'WorkExperience': WorkExperience,
   'AboutMe': AboutMe,
+  'ContactInfo': ContactInfo,
+  'FunProjects': FunProjects,
   'ThemeLayout': ThemeLayout, // New name
   'DarkModeLayout': ThemeLayout, // For backwards compatibility 
   'ThemeProvider': ThemeProvider,
@@ -43,8 +47,32 @@ window.sidebarEvents = {
 
 // No need for margin adjustments with grid layout
 
+// Create a global ThemeProvider instance that exists outside
+// of the component lifecycle to ensure theme is applied immediately
+const initializeThemeProvider = () => {
+  // Check if we already have a ThemeProvider
+  if (!window.themeProviderRoot) {
+    // Create a div to hold the ThemeProvider
+    const themeProviderContainer = document.createElement('div')
+    themeProviderContainer.id = 'theme-provider-root'
+    document.body.appendChild(themeProviderContainer)
+    
+    // Create the root and render the ThemeProvider
+    const themeProviderRoot = createRoot(themeProviderContainer)
+    themeProviderRoot.render(<ThemeProvider />)
+    window.themeProviderRoot = themeProviderRoot
+    console.log('Global ThemeProvider initialized')
+  }
+}
+
+// Initialize ThemeProvider immediately
+initializeThemeProvider()
+
 document.addEventListener("turbo:load", () => {
-    const reactComponents = document.querySelectorAll("[data-react-component]")
+  // Ensure ThemeProvider is initialized on each page load
+  initializeThemeProvider()
+  
+  const reactComponents = document.querySelectorAll("[data-react-component]")
   
   reactComponents.forEach(component => {
     const componentName = component.dataset.reactComponent
@@ -71,6 +99,12 @@ document.addEventListener("turbo:load", () => {
           }
         }
         
+        // Skip rendering another ThemeProvider since we have a global one
+        if (componentName === 'ThemeProvider') {
+          console.log('Skipping additional ThemeProvider render because we have a global one')
+          return
+        }
+        
         // Check if we already have a root for this container
         if (!roots.has(component)) {
           const root = createRoot(component)
diff --git a/app/javascript/components/AboutMe.jsx b/app/javascript/components/AboutMe.jsx
index e78eae8..7c163a4 100644
--- a/app/javascript/components/AboutMe.jsx
+++ b/app/javascript/components/AboutMe.jsx
@@ -3,18 +3,14 @@ import { ThemeContext } from './ThemeProvider';
 import ResponsiveImage from './ResponsiveImage';
 
 const AboutMe = () => {
-  // Get theme context if available
-  let theme = 'dark'; // Default to dark if context not available
+  // Use ThemeContext via useContext hook
   try {
-    const themeContext = useContext(ThemeContext);
-    if (themeContext) {
-      theme = themeContext.theme;
-    }
+    // This component uses CSS variables so we don't need to track theme state
+    // Just ensure ThemeContext is properly initialized
+    useContext(ThemeContext);
   } catch (e) {
     console.log('ThemeContext not available, using default theme');
   }
-  
-  const isDark = theme === 'dark';
   // Placeholder data - replace with your actual data
   const skills = [
     { name: 'Full Stack Web Development' },
@@ -56,28 +52,18 @@ const AboutMe = () => {
         <div className="max-w-4xl mx-auto">
           {/* Domain name header */}
           <div 
-            className="text-center text-2xl font-mono mb-12 rounded-md p-4 glass-panel"
+            className="text-center text-2xl font-mono mb-12 rounded-md p-4 theme-card glass-effect"
           >
             austn.net
           </div>
           
           {/* Hero Section */}
-          <div 
-            className="rounded-md p-8 mb-12 glass-morphism"
-          >
+          <div className="theme-card glass-effect rounded-md p-8 mb-12">
             {/* Decorative elements to enhance glass effect */}
-            <div 
-              className="absolute w-32 h-32 rounded-full blur-xl -top-10 -right-10 bg-blue-500/10"
-              style={{ animation: 'pulse-slow 8s infinite, float 15s ease-in-out infinite' }}
-            ></div>
-            <div 
-              className="absolute w-24 h-24 rounded-full blur-xl bottom-10 -left-10 bg-purple-500/10"
-              style={{ animation: 'pulse-slow 10s infinite, float 12s ease-in-out infinite reverse' }}
-            ></div>
             <div className="flex flex-col items-center text-center">
               <div 
                 className="w-32 h-32 rounded-full flex items-center justify-center mb-6"
-                style={{ backgroundColor: isDark ? '#374151' : '#f3f4f6' }}
+                style={{ backgroundColor: 'var(--pill-bg)' }}
               >
                 <ResponsiveImage
                   src="https://i.ibb.co/TBvNqtT1/Chat-GPT-Image-Mar-27-2025-09-07-30-PM.png" 
@@ -96,8 +82,7 @@ const AboutMe = () => {
                 {skills.map((skill) => (
                   <span 
                     key={skill.name} 
-                    className="px-3 py-1 rounded-full text-sm"
-                    style={{ backgroundColor: isDark ? '#374151' : '#f3f4f6' }}
+                    className="theme-pill"
                   >
                     {skill.name}
                   </span>
@@ -107,17 +92,7 @@ const AboutMe = () => {
           </div>
           
           {/* About Me Section */}
-          <div 
-            className="rounded-md p-8 mb-12 glass-panel relative"
-          >
-            {/* Subtle decorative accent for glass panel */}
-            <div 
-              className="absolute top-0 left-0 w-full h-full overflow-hidden rounded-md z-0"
-            >
-              <div 
-                className="absolute -top-20 -left-20 w-40 h-40 rounded-full blur-lg bg-teal-500/5"
-              ></div>
-            </div>
+          <div className="theme-card glass-effect rounded-md p-8 mb-12 relative">
             <h2 className="text-2xl font-semibold mb-6">About Me</h2>
             <p style={{ color: 'var(--text-secondary)' }}>
               I'm a passionate full-stack developer with expertise in React and Ruby on Rails. 
@@ -127,9 +102,7 @@ const AboutMe = () => {
           </div>
           
           {/* Featured Post */}
-          <div 
-            className="rounded-md p-8 mb-12 glass-morphism"
-          >
+          <div className="theme-card glass-effect rounded-md p-8 mb-12">
             {/* Decorative elements for featured post */}
             <div 
               className="absolute w-40 h-40 rounded-full blur-xl -top-5 right-10 bg-pink-500/10" 
@@ -144,7 +117,7 @@ const AboutMe = () => {
               <div className="md:w-1/3">
                 <div 
                   className="aspect-video rounded-md overflow-hidden"
-                  style={{ backgroundColor: isDark ? '#374151' : '#f3f4f6' }}
+                  style={{ backgroundColor: 'var(--pill-bg)' }}
                 >
                   <div className="w-full h-full flex items-center justify-center">
                     <ResponsiveImage
@@ -165,7 +138,7 @@ const AboutMe = () => {
                 <p className="mb-4" style={{ color: 'var(--text-secondary)' }}>{featuredPost.excerpt}</p>
                 <a 
                   href={featuredPost.url} 
-                  className="glass-button inline-flex items-center"
+                  className="theme-button inline-flex items-center"
                 >
                   Read More
                   <svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -177,17 +150,7 @@ const AboutMe = () => {
           </div>
           
           {/* Favorite Items */}
-          <div 
-            className="rounded-md p-8 mb-12 glass-panel relative"
-          >
-            {/* Subtle decorative accent for glass panel */}
-            <div 
-              className="absolute top-0 left-0 w-full h-full overflow-hidden rounded-md z-0"
-            >
-              <div 
-                className="absolute -bottom-20 -right-20 w-40 h-40 rounded-full blur-lg bg-indigo-500/5"
-              ></div>
-            </div>
+          <div className="theme-card glass-effect rounded-md p-8 mb-12 relative">
             <h2 className="text-2xl font-semibold mb-6">My Favorite Things</h2>
             
             {favoriteItems.map((category) => (
@@ -200,11 +163,11 @@ const AboutMe = () => {
                       href={item.url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="group flex items-start p-4 rounded-md transition-all glass-panel"
+                      className="group flex items-start p-4 rounded-md transition-all theme-card glass-effect"
                     >
                       <div 
                         className="mr-4 w-12 h-12 rounded-md flex items-center justify-center"
-                        style={{ backgroundColor: isDark ? '#374151' : '#f3f4f6' }}
+                        style={{ backgroundColor: 'var(--pill-bg)' }}
                       >
                         {/* Replace with actual image */}
                         <span style={{ color: 'var(--text-muted)' }} className="text-xs">{item.name.substring(0, 2)}</span>
diff --git a/app/javascript/components/ContactInfo.jsx b/app/javascript/components/ContactInfo.jsx
new file mode 100644
index 0000000..4c534c9
--- /dev/null
+++ b/app/javascript/components/ContactInfo.jsx
@@ -0,0 +1,112 @@
+import React, { useContext } from 'react';
+import { ThemeContext } from './ThemeProvider';
+
+const ContactInfo = () => {
+  // Use ThemeContext via useContext hook
+  try {
+    // This component uses CSS variables so we don't need to track theme state
+    // Just ensure ThemeContext is properly initialized
+    useContext(ThemeContext);
+  } catch (e) {
+    console.log('ThemeContext not available, using default theme');
+  }
+
+  // Contact information
+  const contactDetails = {
+    email: 'austindanielfrench at gmail.com',
+    github: 'github.com/frogr',
+  };
+
+  // Social media links with icons
+  const socialLinks = [
+    { name: 'GitHub', url: `https://${contactDetails.github}`, icon: 'code' },
+  ];
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6 text-primary">Contact Me</h1>
+      <p className="text-base md:text-lg mb-6 md:mb-8 text-secondary">
+        Get in touch for collaborations, questions, or just to say hello!
+      </p>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Contact Information Card */}
+        <div className="theme-card glass-effect p-4 md:p-6 relative overflow-hidden">
+          
+          <div className="relative z-1">
+            <h2 className="text-lg md:text-xl font-semibold mb-4 text-primary">Contact Information</h2>
+            <ul className="space-y-3 md:space-y-4">
+              <li className="flex items-center">
+                <span className="material-icons mr-3 text-accent">email</span>
+                <div>
+                  <span className="font-medium block text-primary">Email</span>
+                  <a href={`mailto:${contactDetails.email}`} className="text-secondary hover:text-accent transition-colors duration-200">
+                    {contactDetails.email}
+                  </a>
+                </div>
+              </li>
+              <li className="flex items-center">
+                <span className="material-icons mr-3 text-accent">code</span>
+                <div>
+                  <span className="font-medium block text-primary">GitHub</span>
+                  <a href={`https://${contactDetails.github}`} target="_blank" rel="noopener noreferrer" className="text-secondary hover:text-accent transition-colors duration-200">
+                    {contactDetails.github}
+                  </a>
+                </div>
+              </li>
+              <li className="flex items-center">
+                <span className="material-icons mr-3 text-accent">business</span>
+                <div>
+                  <span className="font-medium block text-primary">LinkedIn</span>
+                  <a href={`https://${contactDetails.linkedin}`} target="_blank" rel="noopener noreferrer" className="text-secondary hover:text-accent transition-colors duration-200">
+                    {contactDetails.linkedin}
+                  </a>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+        
+        {/* Quick Contact Form Card */}
+        <div className="theme-card glass-effect p-4 md:p-6 relative overflow-hidden">
+          
+          <div className="relative z-1">
+            <h2 className="text-lg md:text-xl font-semibold mb-4 text-primary">Let's Connect</h2>
+            <p className="mb-4 text-secondary">Feel free to reach out on any of my social platforms:</p>
+            
+            <div className="flex flex-wrap gap-3">
+              {socialLinks.map((link) => (
+                <a 
+                  key={link.name}
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="theme-pill flex items-center text-primary hover:text-accent transition-colors duration-200"
+                >
+                  <span className="material-icons mr-2 text-sm">{link.icon}</span>
+                  <span>{link.name}</span>
+                </a>
+              ))}
+            </div>
+            
+            <div className="mt-6">
+              <p className="text-muted text-sm">Business inquiries only:</p>
+              <p className="text-secondary">business@example.com</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      {/* Availability Section */}
+      <div className="theme-card glass-effect mt-6 p-4 md:p-6 text-center relative overflow-hidden">
+        
+        <div className="relative z-1">
+          <h2 className="text-lg md:text-xl font-semibold mb-2 text-primary">Current Availability</h2>
+          <p className="text-secondary mt-2">Currently employed, but feel free to reach out and say hello!</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactInfo;
\ No newline at end of file
diff --git a/app/javascript/components/DebugComponent.jsx b/app/javascript/components/DebugComponent.jsx
new file mode 100644
index 0000000..002e754
--- /dev/null
+++ b/app/javascript/components/DebugComponent.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const DebugComponent = ({ name = 'Unknown', props = {} }) => {
+  console.log(`DebugComponent rendering: ${name}`, props);
+  
+  return (
+    <div className="p-4 border border-red-500 rounded mb-4">
+      <h3 className="text-xl font-bold mb-2 text-red-500">Debug Component: {name}</h3>
+      <pre className="bg-gray-100 p-2 rounded overflow-auto max-h-60 text-xs">
+        {JSON.stringify(props, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+export default DebugComponent;
\ No newline at end of file
diff --git a/app/javascript/components/FunProjects.jsx b/app/javascript/components/FunProjects.jsx
new file mode 100644
index 0000000..c6bbedc
--- /dev/null
+++ b/app/javascript/components/FunProjects.jsx
@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import ResponsiveImage from './ResponsiveImage';
+import { ThemeContext } from './ThemeProvider';
+
+const FunProjects = () => {
+  // Use ThemeContext via useContext hook
+  try {
+    // This component uses CSS variables so we don't need to track theme state
+    // Just ensure ThemeContext is properly initialized
+    useContext(ThemeContext);
+  } catch (e) {
+    console.log('ThemeContext not available, using default theme');
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6 text-primary">Fun Stuff</h1>
+      <p className="text-base md:text-lg mb-6 md:mb-8 text-secondary">
+        A collection of personal projects, hobbies, and interests outside of my professional work.
+      </p>
+
+      {/* What I'm Learning Section */}
+      <div className="theme-card glass-effect p-4 md:p-6 relative">
+        
+        <div className="relative z-1">
+          <h2 className="text-xl font-semibold mb-4 text-primary">What I'm Learning Right Now</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="bg-card p-3 rounded-md">
+              <h3 className="font-medium mb-2 text-primary">WebGL & Three.js</h3>
+              <p className="text-secondary text-sm">Exploring 3D graphics in the browser for interactive visualizations.</p>
+            </div>
+            <div className="bg-card p-3 rounded-md">
+              <h3 className="font-medium mb-2 text-primary">Advanced Rails</h3>
+              <p className="text-secondary text-sm">Diving deeper into Rails internals and performance optimization.</p>
+            </div>
+            <div className="bg-card p-3 rounded-md">
+              <h3 className="font-medium mb-2 text-primary">Machine Learning</h3>
+              <p className="text-secondary text-sm">Getting started with ML fundamentals for potential future projects.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FunProjects;
\ No newline at end of file
diff --git a/app/javascript/components/Sidebar.jsx b/app/javascript/components/Sidebar.jsx
index f52220c..d09f676 100644
--- a/app/javascript/components/Sidebar.jsx
+++ b/app/javascript/components/Sidebar.jsx
@@ -73,15 +73,15 @@ const Sidebar = () => {
     <div 
       className={`fixed inset-y-0 left-0 ${collapsed ? 'w-16' : 'w-56'} flex flex-col sidebar z-10 transition-all duration-300`}
       style={{ 
-        backgroundColor: isDark ? '#1f2937' : '#e5e7eb',
-        color: isDark ? '#ffffff' : '#1a202c'
+        backgroundColor: isDark ? '#1f2937' : 'var(--sidebar-bg, #f8f5f0)',
+        color: isDark ? '#ffffff' : 'var(--sidebar-text, #2c2917)'
       }}
     >
       <div className="p-5 flex justify-between items-center">
         <h1 className={`text-2xl font-bold ${collapsed ? 'hidden' : 'block'}`}>Austn</h1>
         <button 
           onClick={() => setCollapsed(!collapsed)}
-          style={{ color: isDark ? '#ffffff' : '#1a202c' }}
+          style={{ color: isDark ? '#ffffff' : 'var(--sidebar-text, #2c2917)' }}
           className="focus:outline-none"
         >
           {collapsed ? '→' : '←'}
@@ -93,7 +93,7 @@ const Sidebar = () => {
             <a 
               href="/" 
               className="block py-2 flex items-center"
-              style={{ color: isDark ? '#ffffff' : '#1f2937' }}
+              style={{ color: isDark ? '#ffffff' : 'var(--sidebar-text, #2c2917)' }}
             >
               <span className="material-icons mr-2">home</span>
               {!collapsed && <span>Home</span>}
@@ -103,7 +103,7 @@ const Sidebar = () => {
             <a 
               href="/blog" 
               className="block py-2 flex items-center"
-              style={{ color: isDark ? '#ffffff' : '#1f2937' }}
+              style={{ color: isDark ? '#ffffff' : 'var(--sidebar-text, #2c2917)' }}
             >
               <span className="material-icons mr-2">article</span>
               {!collapsed && <span>Blog</span>}
@@ -113,7 +113,7 @@ const Sidebar = () => {
             <a 
               href="/work" 
               className="block py-2 flex items-center"
-              style={{ color: isDark ? '#ffffff' : '#1f2937' }}
+              style={{ color: isDark ? '#ffffff' : 'var(--sidebar-text, #2c2917)' }}
             >
               <span className="material-icons mr-2">work</span>
               {!collapsed && <span>Work</span>}
@@ -123,7 +123,7 @@ const Sidebar = () => {
             <a 
               href="/contact" 
               className="block py-2 flex items-center"
-              style={{ color: isDark ? '#ffffff' : '#1f2937' }}
+              style={{ color: isDark ? '#ffffff' : 'var(--sidebar-text, #2c2917)' }}
             >
               <span className="material-icons mr-2">mail</span>
               {!collapsed && <span>Contact</span>}
@@ -133,7 +133,7 @@ const Sidebar = () => {
             <a 
               href="/fun" 
               className="block py-2 flex items-center"
-              style={{ color: isDark ? '#ffffff' : '#1f2937' }}
+              style={{ color: isDark ? '#ffffff' : 'var(--sidebar-text, #2c2917)' }}
             >
               <span className="material-icons mr-2">emoji_emotions</span>
               {!collapsed && <span>Fun</span>}
@@ -143,7 +143,7 @@ const Sidebar = () => {
             <a 
               href="/games" 
               className="block py-2 flex items-center"
-              style={{ color: isDark ? '#ffffff' : '#1f2937' }}
+              style={{ color: isDark ? '#ffffff' : 'var(--sidebar-text, #2c2917)' }}
             >
               <span className="material-icons mr-2">sports_esports</span>
               {!collapsed && <span>Games</span>}
@@ -154,7 +154,7 @@ const Sidebar = () => {
       <div className="p-5">
         <div 
           className={`text-sm ${collapsed ? 'hidden' : 'block'}`}
-          style={{ color: isDark ? '#9ca3af' : '#4b5563' }}
+          style={{ color: isDark ? '#9ca3af' : 'var(--text-muted, #6b6657)' }}
         >
           &copy; 2025 Austn
         </div>
diff --git a/app/javascript/components/ThemeLayout.jsx b/app/javascript/components/ThemeLayout.jsx
new file mode 100644
index 0000000..7c7eee6
--- /dev/null
+++ b/app/javascript/components/ThemeLayout.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Sidebar from './Sidebar';
+
+/**
+ * ThemeLayout - A wrapper component that applies the current theme styling
+ * and includes standard layout elements like the sidebar
+ */
+const ThemeLayout = ({ children, className = '', showSidebar = true, title = null }) => {
+  return (
+    <div className="min-h-screen w-full bg-primary text-primary">
+      {showSidebar && <Sidebar />}
+      
+      <main className={`transition-all duration-300 ${showSidebar ? 'ml-16' : ''} ${className}`}>
+        <div className="max-w-4xl mx-auto py-8 px-4">
+          {title && <h1 className="text-3xl md:text-4xl font-bold mb-6 md:mb-8 text-primary">{title}</h1>}
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default ThemeLayout;
\ No newline at end of file
diff --git a/app/javascript/components/ThemeProvider.jsx b/app/javascript/components/ThemeProvider.jsx
index 57c4e13..9ac7f14 100644
--- a/app/javascript/components/ThemeProvider.jsx
+++ b/app/javascript/components/ThemeProvider.jsx
@@ -1,11 +1,13 @@
 import React, { createContext, useState, useEffect } from 'react';
 
-// Create the Theme Context as a global variable to access it anywhere
-window.ThemeContextValue = {
-  theme: 'dark',
-  setTheme: () => {},
-  toggleTheme: () => {}
-};
+// Initialize the global context
+if (!window.ThemeContextValue) {
+  window.ThemeContextValue = {
+    theme: 'dark',
+    setTheme: () => {},
+    toggleTheme: () => {}
+  };
+}
 
 const ThemeContextValue = window.ThemeContextValue;
 
@@ -39,6 +41,19 @@ const ThemeProvider = ({ initialTheme = 'dark' }) => {
     
     // Update the global ThemeContextValue object
     ThemeContextValue.theme = theme;
+
+    // Setup storage event listener to sync theme across tabs
+    const handleStorageChange = (e) => {
+      if (e.key === 'theme' && e.newValue !== theme) {
+        setTheme(e.newValue);
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
   }, [theme]);
   
   // Toggle between light and dark themes
@@ -50,8 +65,9 @@ const ThemeProvider = ({ initialTheme = 'dark' }) => {
   
   // Update the global context methods
   useEffect(() => {
-    ThemeContextValue.setTheme = setTheme;
-    ThemeContextValue.toggleTheme = toggleTheme;
+    // Define the methods directly on the global object
+    window.ThemeContextValue.setTheme = setTheme;
+    window.ThemeContextValue.toggleTheme = toggleTheme;
   }, [toggleTheme]);
   
   // This component doesn't need to render anything visible
diff --git a/app/javascript/components/WorkExperience.jsx b/app/javascript/components/WorkExperience.jsx
index 122ce90..1acaf57 100644
--- a/app/javascript/components/WorkExperience.jsx
+++ b/app/javascript/components/WorkExperience.jsx
@@ -4,18 +4,14 @@ import { ThemeContext } from './ThemeProvider';
 const WorkExperience = () => {
   const [expandedJob, setExpandedJob] = useState(null);
   
-  // Get theme context if available
-  let theme = 'dark'; // Default to dark if context not available
+  // Use ThemeContext via useContext hook
   try {
-    const themeContext = useContext(ThemeContext);
-    if (themeContext) {
-      theme = themeContext.theme;
-    }
+    // This component uses CSS variables so we don't need to track theme state
+    // Just ensure ThemeContext is properly initialized
+    useContext(ThemeContext);
   } catch (e) {
     console.log('ThemeContext not available, using default theme');
   }
-  
-  const isDark = theme === 'dark';
 
   const jobs = [
     {
@@ -98,15 +94,7 @@ const WorkExperience = () => {
       
       <div className="grid grid-cols-1 gap-6">
         {jobs.map((job) => (
-          <div key={job.id} className="theme-card glass-morphism overflow-hidden relative">
-            {/* Decorative elements for glass effect */}
-            <div 
-              className="absolute -top-10 -right-10 w-32 h-32 rounded-full blur-xl"
-              style={{ 
-                background: 'rgba(100, 150, 255, 0.1)', 
-                animation: 'pulse-slow 12s infinite, float 15s ease-in-out infinite'  
-              }}
-            ></div>
+          <div key={job.id} className="theme-card glass-effect overflow-hidden relative">
             <div 
               className="p-6 cursor-pointer flex justify-between items-center"
               onClick={() => toggleExpand(job.id)}
@@ -136,11 +124,7 @@ const WorkExperience = () => {
                   {job.technologies.map((tech, index) => (
                     <span 
                       key={index} 
-                      className="px-3 py-1 rounded-full text-sm"
-                      style={{ 
-                        backgroundColor: isDark ? '#374151' : '#f3f4f6', 
-                        color: 'var(--accent-color)' 
-                      }}
+                      className="theme-pill"
                     >
                       {tech}
                     </span>
@@ -152,69 +136,23 @@ const WorkExperience = () => {
         ))}
       </div>
       
-      <div className="mt-8 p-6 theme-card glass-panel relative">
-        {/* Subtle decorative accent for glass panel */}
-        <div className="absolute top-0 left-0 w-full h-full overflow-hidden rounded-md z-0">
-          <div 
-            className="absolute -bottom-20 -right-20 w-40 h-40 rounded-full blur-lg"
-            style={{ 
-              background: 'rgba(130, 80, 220, 0.05)',
-              animation: 'pulse-slow 15s infinite'
-            }}
-          ></div>
-        </div>
+      <div className="mt-8 p-6 theme-card glass-effect relative">
         <h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>Technical Skills</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
             <h3 className="font-medium mb-2" style={{ color: 'var(--text-primary)' }}>Languages</h3>
             <div className="flex flex-wrap gap-2">
-              <span 
-                className="px-3 py-1 rounded-full text-sm"
-                style={{ 
-                  backgroundColor: isDark ? '#374151' : '#f3f4f6', 
-                  color: 'var(--accent-color)' 
-                }}
-              >Ruby</span>
-              <span 
-                className="px-3 py-1 rounded-full text-sm"
-                style={{ 
-                  backgroundColor: isDark ? '#374151' : '#f3f4f6', 
-                  color: 'var(--accent-color)' 
-                }}
-              >JavaScript</span>
+              <span className="theme-pill">Ruby</span>
+              <span className="theme-pill">JavaScript</span>
             </div>
           </div>
           <div>
             <h3 className="font-medium mb-2" style={{ color: 'var(--text-primary)' }}>Frameworks/Libraries</h3>
             <div className="flex flex-wrap gap-2">
-              <span 
-                className="px-3 py-1 rounded-full text-sm"
-                style={{ 
-                  backgroundColor: isDark ? '#374151' : '#f3f4f6', 
-                  color: 'var(--accent-color)' 
-                }}
-              >Rails</span>
-              <span 
-                className="px-3 py-1 rounded-full text-sm"
-                style={{ 
-                  backgroundColor: isDark ? '#374151' : '#f3f4f6', 
-                  color: 'var(--accent-color)' 
-                }}
-              >React</span>
-              <span 
-                className="px-3 py-1 rounded-full text-sm"
-                style={{ 
-                  backgroundColor: isDark ? '#374151' : '#f3f4f6', 
-                  color: 'var(--accent-color)' 
-                }}
-              >Node</span>
-              <span 
-                className="px-3 py-1 rounded-full text-sm"
-                style={{ 
-                  backgroundColor: isDark ? '#374151' : '#f3f4f6', 
-                  color: 'var(--accent-color)' 
-                }}
-              >Express</span>
+              <span className="theme-pill">Rails</span>
+              <span className="theme-pill">React</span>
+              <span className="theme-pill">Node</span>
+              <span className="theme-pill">Express</span>
             </div>
           </div>
         </div>
diff --git a/app/views/blog/index.html.erb b/app/views/blog/index.html.erb
index bf65d41..20c4681 100644
--- a/app/views/blog/index.html.erb
+++ b/app/views/blog/index.html.erb
@@ -1,5 +1,3 @@
-<div class="bg-black text-white min-h-screen">
-  <div class="max-w-4xl mx-auto py-8 px-4" id="page-content">
 <div style="background-color: var(--bg-primary); color: var(--text-primary);" class="min-h-screen">
   <div class="max-w-4xl mx-auto py-8 px-4 ml-16 transition-all duration-300" id="page-content">
     <h1 class="text-3xl font-bold mb-8">Blog</h1>
diff --git a/app/views/portfolio/contact.html.erb b/app/views/portfolio/contact.html.erb
index 0a58638..d9f2a12 100644
--- a/app/views/portfolio/contact.html.erb
+++ b/app/views/portfolio/contact.html.erb
@@ -1,29 +1,5 @@
 <div class="min-h-screen" style="background-color: var(--bg-primary); color: var(--text-primary);">
   <div class="max-w-4xl mx-auto py-8 px-4 ml-16 transition-all duration-300" id="page-content">
-    <h1 class="text-3xl font-bold mb-6">Contact Me</h1>
-    <p class="text-lg mb-8">Get in touch for collaborations, questions, or just to say hello!</p>
-    
-    <div class="theme-card glass-morphism mb-8 p-6 relative">
-      <!-- Decorative elements for glass effect -->
-      <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full blur-xl" 
-           style="background: rgba(100, 200, 255, 0.1); animation: pulse-slow 12s infinite, float 15s ease-in-out infinite;"></div>
-      <div class="absolute -bottom-10 -left-10 w-24 h-24 rounded-full blur-xl" 
-           style="background: rgba(200, 100, 255, 0.1); animation: pulse-slow 10s infinite, float 12s ease-in-out infinite reverse;"></div>
-      <h2 class="text-xl font-semibold mb-4">Contact Information</h2>
-      <ul class="space-y-4">
-        <li class="flex items-center">
-          <span class="font-medium mr-2">Email:</span>
-          <span>placeholder@example.com</span>
-        </li>
-        <li class="flex items-center">
-          <span class="font-medium mr-2">GitHub:</span>
-          <a href="#" class="theme-link">github.com/username</a>
-        </li>
-        <li class="flex items-center">
-          <span class="font-medium mr-2">LinkedIn:</span>
-          <a href="#" class="theme-link">linkedin.com/in/username</a>
-        </li>
-      </ul>
-    </div>
+    <div data-react-component="ContactInfo"></div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/views/portfolio/fun.html.erb b/app/views/portfolio/fun.html.erb
index 567bd6f..59a5490 100644
--- a/app/views/portfolio/fun.html.erb
+++ b/app/views/portfolio/fun.html.erb
@@ -1,27 +1,5 @@
 <div class="min-h-screen" style="background-color: var(--bg-primary); color: var(--text-primary);">
   <div class="max-w-4xl mx-auto py-8 px-4 ml-16 transition-all duration-300" id="page-content">
-    <h1 class="text-3xl font-bold mb-6">Fun Stuff</h1>
-    <p class="text-lg mb-8">A collection of personal projects, hobbies, and interests.</p>
-    
-    <div class="space-y-8">
-      <div class="dark-card">
-        <h2 class="text-xl font-semibold mb-4">Hobby Project 1</h2>
-        <p>Placeholder content for a fun project or hobby.</p>
-      </div>
-      
-      <div class="dark-card">
-        <h2 class="text-xl font-semibold mb-4">Hobby Project 2</h2>
-        <p>Placeholder content for another fun project or hobby.</p>
-      </div>
-      
-      <div class="dark-card">
-        <h2 class="text-xl font-semibold mb-4">Interesting Facts</h2>
-        <ul class="list-disc pl-5 space-y-2">
-          <li>Placeholder fact 1</li>
-          <li>Placeholder fact 2</li>
-          <li>Placeholder fact 3</li>
-        </ul>
-      </div>
-    </div>
+    <div data-react-component="FunProjects"></div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/views/portfolio/work.html.erb b/app/views/portfolio/work.html.erb
index 500f14f..96b3aff 100644
--- a/app/views/portfolio/work.html.erb
+++ b/app/views/portfolio/work.html.erb
@@ -1,4 +1,4 @@
-<div class="dark:bg-black dark:text-white bg-white text-black min-h-screen">
+<div style="background-color: var(--bg-primary); color: var(--text-primary);" class="min-h-screen">
   <div class="max-w-4xl mx-auto py-8 px-4 ml-16 transition-all duration-300" id="page-content">
     <div data-react-component="WorkExperience"></div>
   </div>