diff --git a/core/templates/ai_chat_new.html b/core/templates/ai_chat_new.html
index c2f8f93..c0f84ee 100644
--- a/core/templates/ai_chat_new.html
+++ b/core/templates/ai_chat_new.html
@@ -2,66 +2,43 @@
 {% load static %}
 
 {% block extra_head %}
-<style>
-  .chat-bubble {
-    max-width: 70%;
-    padding: 12px 16px;
-    border-radius: 20px;
-    margin-bottom: 8px;
-    word-wrap: break-word;
-  }
-
-  .user-bubble {
-    background-color: #007bff;
-    color: white;
-    align-self: flex-end;
-    margin-left: auto;
-  }
-
-  .ai-bubble {
-    background-color: #374151; /* gray-700 */
-    color: white;
-    align-self: flex-start;
-    margin-right: auto;
-  }
-</style>
 {% endblock %}
 
 {% block content %}
-<div class="flex h-screen bg-gray-900 text-white">
-  <!-- Sidebar -->
-  <div class="w-1/4 bg-gray-800 border-r border-gray-700">
-    <div class="p-4 border-b border-gray-700">
-      <h2 class="text-xl font-bold">Conversations</h2>
-    </div>
-    <div class="p-4">
+<div class="chat-container glass-card">
+  <!-- Sidebar - Conversations List (Adjusted for new layout) -->
+  <div class="flex flex-col w-64 border-r border-gray-700 bg-gray-800 p-4">
+    <h2 class="text-xl font-bold mb-4">Conversations</h2>
+    <div class="flex-1 overflow-y-auto">
       <!-- Conversation list will go here -->
-      <p class="text-gray-400">No conversations yet.</p>
+      <p class="text-gray-400 text-sm">No conversations yet.</p>
     </div>
   </div>
 
-  <!-- Chat Area -->
-  <div class="flex flex-col w-3/4">
+  <!-- Chat Area (Adjusted for new layout) -->
+  <div class="flex flex-col flex-1">
     <!-- Header -->
-    <div class="bg-gray-800 p-4 border-b border-gray-700">
+    <div class="chat-header">
       <h2 class="text-2xl font-bold">BotAI</h2>
     </div>
 
     <!-- Messages -->
-    <div id="chat-messages" class="flex-1 p-4 overflow-y-auto" style="max-height: 50vh;">
+    <div id="chat-messages" class="chat-box">
       {% for message in messages %}
-        <div class="chat-bubble {% if message.is_user %}user-bubble{% else %}ai-bubble{% endif %}">
-          {{ message.message|linebreaksbr }}
+        <div class="chat-message {% if message.is_user %}user-message{% else %}ai-message{% endif %}">
+          <div class="message-content">
+            {{ message.message|linebreaksbr }}
+          </div>
         </div>
       {% endfor %}
     </div>
 
     <!-- Input -->
-    <div class="bg-gray-800 p-4">
+    <div class="chat-input-area">
       <form id="chat-form" class="flex items-center">
         {% csrf_token %}
-        <input type="text" id="message" name="message" class="w-full bg-gray-700 text-white rounded-full py-3 px-6 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Type your message...">
-        <button type="submit" class="ml-4 bg-blue-500 hover:bg-blue-600 text-white rounded-full p-3">
+        <input type="text" id="message" name="message" class="chat-input" placeholder="Type your message...">
+        <button type="submit" class="send-button">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
         </button>
       </form>
@@ -118,10 +95,13 @@
       }
 
       // Display user message
-      const userBubble = document.createElement('div');
-      userBubble.classList.add('chat-bubble', 'user-bubble');
-      userBubble.textContent = messageText;
-      chatMessages.appendChild(userBubble);
+      const userMessageDiv = document.createElement('div');
+      userMessageDiv.classList.add('chat-message', 'user-message');
+      const userMessageContent = document.createElement('div');
+      userMessageContent.classList.add('message-content');
+      userMessageContent.textContent = messageText;
+      userMessageDiv.appendChild(userMessageContent);
+      chatMessages.appendChild(userMessageDiv);
       chatMessages.scrollTop = chatMessages.scrollHeight;
 
       messageInput.value = '';
@@ -141,15 +121,21 @@
       .then(data => {
         if (data.error) {
           console.error('Error:', data.error);
-          const aiBubble = document.createElement('div');
-          aiBubble.classList.add('chat-bubble', 'ai-bubble');
-          aiBubble.textContent = `Error: ${data.error}`;
-          chatMessages.appendChild(aiBubble);
+          const aiMessageDiv = document.createElement('div');
+          aiMessageDiv.classList.add('chat-message', 'ai-message');
+          const aiMessageContent = document.createElement('div');
+          aiMessageContent.classList.add('message-content');
+          aiMessageContent.textContent = `Error: ${data.error}`;
+          aiMessageDiv.appendChild(aiMessageContent);
+          chatMessages.appendChild(aiMessageDiv);
         } else if (data.reply) {
-          const aiBubble = document.createElement('div');
-          aiBubble.classList.add('chat-bubble', 'ai-bubble');
-          aiBubble.textContent = data.reply;
-          chatMessages.appendChild(aiBubble);
+          const aiMessageDiv = document.createElement('div');
+          aiMessageDiv.classList.add('chat-message', 'ai-message');
+          const aiMessageContent = document.createElement('div');
+          aiMessageContent.classList.add('message-content');
+          aiMessageContent.textContent = data.reply;
+          aiMessageDiv.appendChild(aiMessageContent);
+          chatMessages.appendChild(aiMessageDiv);
         } else if (data.commands) {
           data.commands.forEach(command => {
             executeCommand(command);
@@ -158,10 +144,13 @@
       })
       .catch(error => {
         console.error('Fetch error:', error);
-        const aiBubble = document.createElement('div');
-        aiBubble.classList.add('chat-bubble', 'ai-bubble');
-        aiBubble.textContent = 'Sorry, something went wrong.';
-        chatMessages.appendChild(aiBubble);
+        const aiMessageDiv = document.createElement('div');
+        aiMessageDiv.classList.add('chat-message', 'ai-message');
+        const aiMessageContent = document.createElement('div');
+        aiMessageContent.classList.add('message-content');
+        aiMessageContent.textContent = 'Sorry, something went wrong.';
+        aiMessageDiv.appendChild(aiMessageContent);
+        chatMessages.appendChild(aiMessageDiv);
         chatMessages.scrollTop = chatMessages.scrollHeight;
       });
     });
diff --git a/core/templates/base.html b/core/templates/base.html
index 6402a38..0bebf24 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -14,6 +14,9 @@
   <meta property="twitter:image" content="{{ project_image_url }}">
   {% endif %}
   <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   {% load static %}
   <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
   {% block head %}{% endblock %}
@@ -44,6 +47,10 @@
               </div>
             </div>
           </div>
+          <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 ml-2">
+            <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.272a1 1 0 01-1.393 1.138l-.053-.057a5 5 0 00-6.19-6.19l-.057-.053a1 1 0 011.138-1.393l.057.053a7.001 7.001 0 018.825 8.825l.053.057z"></path></svg>
+          </button>
           {% if user.is_authenticated %}
             <a href="{% url 'logout' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Logout</a>
             <a href="{% url 'post_create' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Create Post</a>
@@ -55,9 +62,30 @@
       </div>
     </div>
   </nav>
-  <main>
-    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-      {% block content %}{% endblock %}
+  <main class="container mx-auto mt-4 px-4">
+    <div class="flex flex-col lg:flex-row gap-4">
+      <aside class="lg:w-1/4">
+        <div class="glass-card p-4 h-full">
+          <h2 class="text-xl font-semibold mb-4">Navigation</h2>
+          <ul>
+            <li class="mb-2"><a href="{% url 'ai_chat' %}" class="hover:text-blue-500">AI Chat</a></li>
+            <li class="mb-2"><a href="{% url 'image_generator' %}" class="hover:text-blue-500">Image Generator</a></li>
+            <li class="mb-2"><a href="{% url 'ad_generator' %}" class="hover:text-blue-500">Ad Generator</a></li>
+            <li class="mb-2"><a href="{% url 'graphics_editor' %}" class="hover:text-blue-500">Graphics Editor</a></li>
+            <li class="mb-2"><a href="{% url 'post_list' %}" class="hover:text-blue-500">Blog</a></li>
+            {% if user.is_authenticated %}
+            <li class="mb-2"><a href="{% url 'post_create' %}" class="hover:text-blue-500">Create Post</a></li>
+            <li class="mb-2"><a href="{% url 'logout' %}" class="hover:text-blue-500">Logout</a></li>
+            {% else %}
+            <li class="mb-2"><a href="{% url 'login' %}" class="hover:text-blue-500">Login</a></li>
+            <li class="mb-2"><a href="{% url 'signup' %}" class="hover:text-blue-500">Sign Up</a></li>
+            {% endif %}
+          </ul>
+        </div>
+      </aside>
+      <section class="lg:w-3/4">
+        {% block content %}{% endblock %}
+      </section>
     </div>
   </main>
   <script>
@@ -70,6 +98,37 @@
         menuButton.setAttribute('aria-expanded', !isExpanded);
         menu.classList.toggle('hidden');
       });
+
+      // Theme toggle logic
+      const themeToggleBtn = document.getElementById('theme-toggle');
+      const lightIcon = document.getElementById('theme-toggle-light-icon');
+      const darkIcon = document.getElementById('theme-toggle-dark-icon');
+      const htmlElement = document.documentElement;
+
+      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+      if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        htmlElement.classList.add('dark');
+        darkIcon.classList.remove('hidden');
+        lightIcon.classList.add('hidden');
+      } else {
+        htmlElement.classList.remove('dark');
+        lightIcon.classList.remove('hidden');
+        darkIcon.classList.add('hidden');
+      }
+
+      themeToggleBtn.addEventListener('click', function() {
+        if (htmlElement.classList.contains('dark')) {
+          htmlElement.classList.remove('dark');
+          localStorage.setItem('theme', 'light');
+          lightIcon.classList.remove('hidden');
+          darkIcon.classList.add('hidden');
+        } else {
+          htmlElement.classList.add('dark');
+          localStorage.setItem('theme', 'dark');
+          darkIcon.classList.remove('hidden');
+          lightIcon.classList.add('hidden');
+        }
+      });
     });
   </script>
 </body>
diff --git a/static/css/custom.css b/static/css/custom.css
index 01f472c..bc224a0 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,7 +1,40 @@
+:root {
+    /* Light Theme */
+    --bg-primary: #F0F2F5;
+    --bg-secondary: #FFFFFF;
+    --text-primary: #1A1A1A;
+    --text-secondary: #667085;
+    --accent-blue: #00A3B5;
+    --accent-green: #34C759;
+    --glass-bg: rgba(255, 255, 255, 0.7);
+    --glass-border: rgba(220, 220, 220, 0.8);
+    --shadow-color: rgba(0, 0, 0, 0.08);
+    --heading-font: 'Poppins', sans-serif;
+}
+
+html.dark {
+    /* Dark Theme */
+    --bg-primary: #1C1C24;
+    --bg-secondary: #282830;
+    --text-primary: #E0E0E0;
+    --text-secondary: #A0A0A5;
+    --accent-blue: #00A3B5;
+    --accent-green: #4CD964;
+    --glass-bg: rgba(40, 40, 48, 0.6);
+    --glass-border: rgba(70, 70, 75, 0.7);
+    --shadow-color: rgba(0, 0, 0, 0.3);
+    --heading-font: 'Poppins', sans-serif;
+}
+
 body {
-    background: linear-gradient(to right, #0F2027, #203A43, #2C5364);
+    background: var(--bg-primary);
     font-family: 'Inter', sans-serif;
-    color: #fff;
+    color: var(--text-primary);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--heading-font);
+    color: var(--text-primary);
 }
 
 .font-poppins {
@@ -13,18 +46,50 @@ body {
 }
 
 .glass-card {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--glass-bg);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 1.25rem; /* Slightly more rounded */
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 4px 20px 0 var(--shadow-color); /* Softer, more diffused shadow */
+}
+
+/* Sidebar and Main Content Layout */
+.container.mx-auto.mt-4.px-4 {
+    margin-top: 1.5rem; /* Adjust top margin for spacing */
+}
+
+aside {
+    background: var(--glass-bg);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 8px 32px 0 var(--shadow-color);
+    padding: 1rem;
+}
+
+aside ul li a {
+    display: block;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+aside ul li a:hover {
+    background-color: color-mix(in srgb, var(--bg-primary) 90%, var(--glass-border)); /* Subtle background on hover */
+    color: var(--accent-blue);
+}
+
+section.lg\:w-3\/4 {
+    /* Ensure main content area has some padding if needed */
+    padding: 1rem;
 }
 
 /* Redefine form styles from forms.py to avoid specificity issues */
 .glass-card form .w-full.bg-gray-800 {
-    background-color: rgba(31, 41, 55, 0.5) !important;
-    border-color: rgba(55, 65, 81, 0.5) !important;
+    background-color: var(--bg-secondary) !important;
+    border-color: var(--glass-border) !important;
 }
 
 /* Intent Badge Styles */
@@ -37,46 +102,50 @@ body {
 }
 
 .intent-neutral {
-    background-color: #9CA3AF; /* gray-400 */
+    background-color: var(--text-secondary); /* gray-400 equivalent */
 }
 
 .intent-safe {
-    background-color: #10B981; /* green-500 */
+    background-color: var(--accent-green); /* green-500 equivalent */
 }
 
 .intent-caution {
-    background-color: #F59E0B; /* yellow-500 */
+    background-color: #F59E0B; /* yellow-500, keeping for now */
 }
 
 .intent-warning {
-    background-color: #EF4444; /* red-500 */
+    background-color: #EF4444; /* red-500, keeping for now */
 }
 
 /* Image Generator Styles */
 .btn-primary {
-    background-color: #4A90E2;
-    border-color: #4A90E2;
-    transition: background-color 0.3s ease;
+    background-color: var(--accent-blue);
+    border-color: var(--accent-blue);
+    border-radius: 0.75rem; /* More rounded */
+    padding: 0.75rem 1.5rem; /* More comfortable padding */
+    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1); /* Subtle lifted effect */
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .btn-primary:hover {
-    background-color: #357ABD;
-    border-color: #357ABD;
+    background-color: color-mix(in srgb, var(--accent-blue) 90%, black); /* Darker shade on hover */
+    border-color: color-mix(in srgb, var(--accent-blue) 90%, black);
+    box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.15);
 }
 
 .form-control {
-    background-color: rgba(255, 255, 255, 0.2);
-    border: none;
-    color: #fff;
+    background-color: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    color: var(--text-primary);
 }
 
 .form-control::placeholder {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--text-secondary);
 }
 
 .card {
-    background-color: rgba(0,0,0,0.2);
-    border: none;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--glass-border);
 }
 
 /* AI Chat Styles */
@@ -92,8 +161,9 @@ body {
 
 .chat-header {
     padding: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid var(--glass-border);
     text-align: center;
+    background-color: var(--bg-secondary);
 }
 
 .chat-box {
@@ -113,7 +183,7 @@ body {
 
 .message-content {
     padding: 0.75rem 1rem;
-    border-radius: 1rem;
+    border-radius: 0.75rem;
     line-height: 1.5;
 }
 
@@ -128,9 +198,9 @@ body {
 }
 
 .user-message .message-content {
-    background-color: #4A90E2;
-    color: #fff;
-    border-bottom-right-radius: 0;
+    background-color: var(--accent-blue);
+    color: var(--text-primary);
+    border-bottom-right-radius: 0.25rem;
 }
 
 /* AI Message */
@@ -140,14 +210,15 @@ body {
 }
 
 .ai-message .message-content {
-    background: rgba(255, 255, 255, 0.15);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-bottom-left-radius: 0;
+    background: var(--bg-secondary);
+    border: 1px solid var(--glass-border);
+    color: var(--text-primary);
+    border-bottom-left-radius: 0.25rem;
 }
 
 .ai-message.error-message .message-content {
-    background-color: #721c24;
-    color: #f8d7da;
+    background-color: #721c24; /* Keeping static for error visibility */
+    color: #f8d7da; /* Keeping static for error visibility */
 }
 
 /* Typing Indicator */
@@ -161,7 +232,7 @@ body {
     height: 8px;
     width: 8px;
     margin: 0 2px;
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: var(--text-secondary);
     border-radius: 50%;
     display: inline-block;
     animation: bounce 1.4s infinite ease-in-out both;
@@ -178,14 +249,15 @@ body {
 /* Chat Input */
 .chat-input-area {
     padding: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid var(--glass-border);
+    background-color: var(--bg-secondary);
 }
 
 .chat-input {
-    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
     border-radius: 9999px;
-    color: #fff;
+    color: var(--text-primary);
     padding: 0.75rem 1.5rem;
     flex-grow: 1;
     outline: none;
@@ -193,11 +265,11 @@ body {
 }
 
 .chat-input:focus {
-    border-color: #4A90E2;
+    border-color: var(--accent-blue);
 }
 
 .send-button {
-    background: #4A90E2;
+    background: var(--accent-blue);
     border: none;
     border-radius: 50%;
     width: 48px;
@@ -206,13 +278,13 @@ body {
     align-items: center;
     justify-content: center;
     margin-left: 0.5rem;
-    color: #fff;
+    color: var(--text-primary);
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
 
 .send-button:hover {
-    background: #357ABD;
+    background: var(--text-secondary);
 }
 
 /* Code Block Styles */
@@ -222,17 +294,18 @@ body {
     overflow: hidden;
 }
 .code-block-header {
-    background: #1a202c;
+    background: var(--bg-secondary);
     padding: 0.5rem 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.875rem;
-    color: #a0aec0;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--glass-border);
 }
 .copy-code-btn {
-    background: #4a5568;
-    color: white;
+    background: var(--accent-blue);
+    color: var(--text-primary);
     border: none;
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
@@ -240,18 +313,16 @@ body {
     font-size: 0.75rem;
 }
 .copy-code-btn:hover {
-    background: #2d3748;
+    background: var(--text-secondary);
 }
 pre {
     margin: 0;
     padding: 1rem;
-    background: #2d3748;
-    color: #e2e8f0;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
     overflow-x: auto;
 }
 code {
     font-family: 'Fira Code', 'Courier New', monospace;
     font-size: 0.875rem;
-}
-
-
+}
\ No newline at end of file
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 01f472c..91d39f3 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -1,7 +1,33 @@
+:root {
+    /* Light Theme */
+    --bg-primary: #f8f9fa;
+    --bg-secondary: #ffffff;
+    --text-primary: #212529;
+    --text-secondary: #6c757d;
+    --accent-blue: #007bff;
+    --accent-green: #28a745;
+    --glass-bg: rgba(255, 255, 255, 0.6);
+    --glass-border: rgba(220, 220, 220, 0.7);
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+html.dark {
+    /* Dark Theme */
+    --bg-primary: #0F172A;
+    --bg-secondary: #1A202C;
+    --text-primary: #f8f9fa;
+    --text-secondary: #a0aec0;
+    --accent-blue: #667EEA;
+    --accent-green: #38A169;
+    --glass-bg: rgba(0, 0, 0, 0.4);
+    --glass-border: rgba(60, 60, 60, 0.7);
+    --shadow-color: rgba(0, 0, 0, 0.5);
+}
+
 body {
-    background: linear-gradient(to right, #0F2027, #203A43, #2C5364);
+    background: var(--bg-primary);
     font-family: 'Inter', sans-serif;
-    color: #fff;
+    color: var(--text-primary);
 }
 
 .font-poppins {
@@ -13,18 +39,50 @@ body {
 }
 
 .glass-card {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--glass-bg);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 8px 32px 0 var(--shadow-color);
+}
+
+/* Sidebar and Main Content Layout */
+.container.mx-auto.mt-4.px-4 {
+    margin-top: 1.5rem; /* Adjust top margin for spacing */
+}
+
+aside {
+    background: var(--glass-bg);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 1rem;
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 8px 32px 0 var(--shadow-color);
+    padding: 1rem;
+}
+
+aside ul li a {
+    display: block;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+aside ul li a:hover {
+    background-color: var(--bg-secondary);
+    color: var(--accent-blue);
+}
+
+section.lg\:w-3\/4 {
+    /* Ensure main content area has some padding if needed */
+    padding: 1rem;
 }
 
 /* Redefine form styles from forms.py to avoid specificity issues */
 .glass-card form .w-full.bg-gray-800 {
-    background-color: rgba(31, 41, 55, 0.5) !important;
-    border-color: rgba(55, 65, 81, 0.5) !important;
+    background-color: var(--bg-secondary) !important;
+    border-color: var(--glass-border) !important;
 }
 
 /* Intent Badge Styles */
@@ -37,46 +95,46 @@ body {
 }
 
 .intent-neutral {
-    background-color: #9CA3AF; /* gray-400 */
+    background-color: var(--text-secondary); /* gray-400 equivalent */
 }
 
 .intent-safe {
-    background-color: #10B981; /* green-500 */
+    background-color: var(--accent-green); /* green-500 equivalent */
 }
 
 .intent-caution {
-    background-color: #F59E0B; /* yellow-500 */
+    background-color: #F59E0B; /* yellow-500, keeping for now */
 }
 
 .intent-warning {
-    background-color: #EF4444; /* red-500 */
+    background-color: #EF4444; /* red-500, keeping for now */
 }
 
 /* Image Generator Styles */
 .btn-primary {
-    background-color: #4A90E2;
-    border-color: #4A90E2;
+    background-color: var(--accent-blue);
+    border-color: var(--accent-blue);
     transition: background-color 0.3s ease;
 }
 
 .btn-primary:hover {
-    background-color: #357ABD;
-    border-color: #357ABD;
+    background-color: var(--text-secondary);
+    border-color: var(--text-secondary);
 }
 
 .form-control {
-    background-color: rgba(255, 255, 255, 0.2);
-    border: none;
-    color: #fff;
+    background-color: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    color: var(--text-primary);
 }
 
 .form-control::placeholder {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--text-secondary);
 }
 
 .card {
-    background-color: rgba(0,0,0,0.2);
-    border: none;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--glass-border);
 }
 
 /* AI Chat Styles */
@@ -92,8 +150,9 @@ body {
 
 .chat-header {
     padding: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid var(--glass-border);
     text-align: center;
+    background-color: var(--bg-secondary);
 }
 
 .chat-box {
@@ -128,8 +187,8 @@ body {
 }
 
 .user-message .message-content {
-    background-color: #4A90E2;
-    color: #fff;
+    background-color: var(--accent-blue);
+    color: var(--text-primary);
     border-bottom-right-radius: 0;
 }
 
@@ -140,14 +199,15 @@ body {
 }
 
 .ai-message .message-content {
-    background: rgba(255, 255, 255, 0.15);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: var(--bg-secondary);
+    border: 1px solid var(--glass-border);
+    color: var(--text-primary);
     border-bottom-left-radius: 0;
 }
 
 .ai-message.error-message .message-content {
-    background-color: #721c24;
-    color: #f8d7da;
+    background-color: #721c24; /* Keeping static for error visibility */
+    color: #f8d7da; /* Keeping static for error visibility */
 }
 
 /* Typing Indicator */
@@ -161,7 +221,7 @@ body {
     height: 8px;
     width: 8px;
     margin: 0 2px;
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: var(--text-secondary);
     border-radius: 50%;
     display: inline-block;
     animation: bounce 1.4s infinite ease-in-out both;
@@ -178,14 +238,15 @@ body {
 /* Chat Input */
 .chat-input-area {
     padding: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid var(--glass-border);
+    background-color: var(--bg-secondary);
 }
 
 .chat-input {
-    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
     border-radius: 9999px;
-    color: #fff;
+    color: var(--text-primary);
     padding: 0.75rem 1.5rem;
     flex-grow: 1;
     outline: none;
@@ -193,11 +254,11 @@ body {
 }
 
 .chat-input:focus {
-    border-color: #4A90E2;
+    border-color: var(--accent-blue);
 }
 
 .send-button {
-    background: #4A90E2;
+    background: var(--accent-blue);
     border: none;
     border-radius: 50%;
     width: 48px;
@@ -206,13 +267,13 @@ body {
     align-items: center;
     justify-content: center;
     margin-left: 0.5rem;
-    color: #fff;
+    color: var(--text-primary);
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
 
 .send-button:hover {
-    background: #357ABD;
+    background: var(--text-secondary);
 }
 
 /* Code Block Styles */
@@ -222,17 +283,18 @@ body {
     overflow: hidden;
 }
 .code-block-header {
-    background: #1a202c;
+    background: var(--bg-secondary);
     padding: 0.5rem 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.875rem;
-    color: #a0aec0;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--glass-border);
 }
 .copy-code-btn {
-    background: #4a5568;
-    color: white;
+    background: var(--accent-blue);
+    color: var(--text-primary);
     border: none;
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
@@ -240,18 +302,16 @@ body {
     font-size: 0.75rem;
 }
 .copy-code-btn:hover {
-    background: #2d3748;
+    background: var(--text-secondary);
 }
 pre {
     margin: 0;
     padding: 1rem;
-    background: #2d3748;
-    color: #e2e8f0;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
     overflow-x: auto;
 }
 code {
     font-family: 'Fira Code', 'Courier New', monospace;
     font-size: 0.875rem;
-}
-
-
+}
\ No newline at end of file
diff --git a/staticfiles/pasted-20251219-023919-8b35c0f2.jpg b/staticfiles/pasted-20251219-023919-8b35c0f2.jpg
new file mode 100644
index 0000000..699f9d1
Binary files /dev/null and b/staticfiles/pasted-20251219-023919-8b35c0f2.jpg differ
diff --git a/staticfiles/pasted-20251219-024826-df897180.jpg b/staticfiles/pasted-20251219-024826-df897180.jpg
new file mode 100644
index 0000000..fc5f94b
Binary files /dev/null and b/staticfiles/pasted-20251219-024826-df897180.jpg differ
diff --git a/staticfiles/pasted-20251219-030116-b9572f80.jpg b/staticfiles/pasted-20251219-030116-b9572f80.jpg
new file mode 100644
index 0000000..60bfbf9
Binary files /dev/null and b/staticfiles/pasted-20251219-030116-b9572f80.jpg differ