diff --git a/frontend/index.html b/frontend/index.html
index e99a7dd..27725d8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,7 +7,7 @@
     <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=Caveat:wght@400;600;700&family=Inter:wght@300;400;500&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap"
       rel="stylesheet"
     />
   </head>
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index cff1597..1115dae 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -14,6 +14,7 @@ function App() {
   const [activeSubject, setActiveSubject] = useState("science");
   const [activeChat, setActiveChat] = useState(null);
   const [activeTab, setActiveTab] = useState("chat");
+  const [greetingDismissed, setGreetingDismissed] = useState(false);
 
   const handleSend = (text) => {
     if (!text.trim()) return;
@@ -55,6 +56,20 @@ function App() {
 
         {/* Chat Area */}
         <div className="main-content">
+          {!greetingDismissed && messages.length === 0 && (
+            <div className="greeting-banner">
+              <h2 className="greeting-banner__title">Welcome to padhLe 📚</h2>
+              <p className="greeting-banner__tagline">Let's make today a great day for learning.</p>
+              <button
+                className="greeting-banner__dismiss"
+                onClick={() => setGreetingDismissed(true)}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          )}
           <ChatHistory
             messages={messages}
             onPromptClick={handlePromptClick}
diff --git a/frontend/src/components/chat-history/ChatHistory.css b/frontend/src/components/chat-history/ChatHistory.css
index 6fc4268..94bc3a5 100644
--- a/frontend/src/components/chat-history/ChatHistory.css
+++ b/frontend/src/components/chat-history/ChatHistory.css
@@ -1,10 +1,10 @@
 /* ========================================
-   ChatHistory Component — padhLe
+   ChatHistory Component — padhLe (Bauhaus)
    ======================================== */
 
 .chat-history {
   flex: 1;
-  padding: var(--spacing-xl) 0;
+  padding: var(--spacing-lg) 0;
   overflow-y: auto;
 }
 
@@ -27,21 +27,24 @@
 
 .chat-history__empty-content {
   max-width: 600px;
+  width: 100%;
 }
 
 .chat-history__empty-title {
   font-family: var(--font-heading);
   font-size: 3rem;
-  font-weight: 700;
-  color: var(--color-text);
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: var(--color-primary);
   margin-bottom: var(--spacing-xs);
 }
 
 .chat-history__empty-tagline {
   font-family: var(--font-body);
-  font-size: 1.05rem;
-  font-weight: 300;
-  color: var(--color-text-muted);
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-text-variant);
   margin-bottom: var(--spacing-2xl);
 }
 
@@ -49,37 +52,48 @@
 .chat-history__prompts {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-md);
 }
 
 .chat-history__prompt {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-sm);
   padding: var(--spacing-md);
-  border: var(--border-thin);
+  border: var(--border-thick);
   border-radius: var(--border-radius);
-  background-color: var(--color-bg);
+  background-color: var(--color-surface);
   cursor: pointer;
   text-align: left;
   font-family: var(--font-body);
-  font-size: 0.9rem;
-  font-weight: 300;
-  color: var(--color-text);
+  font-size: 0.85rem;
+  font-weight: 700;
   line-height: 1.5;
+  color: var(--color-text);
+  box-shadow: var(--shadow-brutal-sm);
   transition: all var(--transition-fast);
 }
 
 .chat-history__prompt:hover {
-  background-color: var(--color-hover);
-  border-color: var(--color-text-muted);
+  background-color: var(--color-surface-container);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-brutal);
+}
+
+.chat-history__prompt:active {
+  transform: translateY(2px);
+  box-shadow: none;
 }
 
 .chat-history__prompt-icon {
   font-size: 1.25rem;
   flex-shrink: 0;
+  margin-top: 2px;
 }
 
 .chat-history__prompt-text {
   color: var(--color-text);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  font-weight: 700;
 }
diff --git a/frontend/src/components/chat-input/ChatInput.css b/frontend/src/components/chat-input/ChatInput.css
index 89f0f9b..49a8914 100644
--- a/frontend/src/components/chat-input/ChatInput.css
+++ b/frontend/src/components/chat-input/ChatInput.css
@@ -1,60 +1,65 @@
 /* ========================================
-   ChatInput Component — padhLe
+   ChatInput Component — padhLe (Bauhaus)
    ======================================== */
 
 .chat-input {
-  padding: var(--spacing-md) 0 var(--spacing-xl) 0;
-  border-top: var(--border-thin);
-  background-color: var(--color-bg);
+  padding: var(--spacing-md) 0;
+  border-top: var(--border-thick);
+  background-color: var(--color-surface);
+  box-shadow: 0 -4px 0 0px var(--color-outline);
 }
 
 .chat-input__wrapper {
-  max-width: 760px;
+  max-width: 900px;
   margin: 0 auto;
+  padding: var(--spacing-md) var(--spacing-lg);
 }
 
-/* Form */
+/* Form Container */
 .chat-input__form {
   display: flex;
   align-items: flex-end;
   gap: var(--spacing-sm);
-  border: var(--border-thin);
+  border: var(--border-thick);
   border-radius: var(--border-radius);
-  padding: var(--spacing-sm) var(--spacing-md);
-  transition: border-color var(--transition-fast);
+  padding: var(--spacing-sm);
+  background-color: var(--color-surface);
+  box-shadow: var(--shadow-brutal-sm);
+  transition: all var(--transition-fast);
 }
 
 .chat-input__form:focus-within {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.08);
+  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15), var(--shadow-brutal-sm);
+  border-color: var(--color-primary);
 }
 
 /* Attachments */
 .chat-input__attachments {
   display: flex;
   align-items: center;
-  gap: 2px;
-  padding-bottom: var(--spacing-xs);
+  gap: var(--spacing-xs);
+  padding-bottom: 2px;
 }
 
 .chat-input__attach-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
+  width: 38px;
+  height: 38px;
+  border: var(--border-medium);
   border-radius: var(--border-radius);
+  background: transparent;
   cursor: pointer;
-  color: var(--color-text-muted);
-  opacity: 0.5;
+  color: var(--color-text-variant);
+  box-shadow: var(--shadow-brutal-sm);
   transition: all var(--transition-fast);
 }
 
 .chat-input__attach-btn:hover {
-  background-color: var(--color-hover);
-  opacity: 1;
+  background-color: var(--color-surface-variant);
+  color: var(--color-text);
+  transform: translateY(-1px);
 }
 
 /* Textarea Field */
@@ -62,56 +67,79 @@
   flex: 1;
   font-family: var(--font-body);
   font-size: 1rem;
-  font-weight: 300;
-  line-height: 1.6;
+  font-weight: 600;
+  line-height: 1.5;
   color: var(--color-text);
   background-color: transparent;
   border: none;
-  padding: var(--spacing-xs) 0;
+  padding: var(--spacing-sm);
   resize: none;
   outline: none;
   min-height: 24px;
   max-height: 200px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
 .chat-input__field::placeholder {
-  color: var(--color-text-muted);
-  opacity: 0.5;
+  color: var(--color-text-variant);
+  opacity: 0.6;
 }
 
-/* Submit Button */
+/* Send Button */
 .chat-input__submit {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  background: transparent;
+  width: 42px;
+  height: 42px;
+  border: var(--border-medium);
   border-radius: var(--border-radius);
+  background: transparent;
   cursor: not-allowed;
-  opacity: 0.3;
+  color: var(--color-text-variant);
+  box-shadow: var(--shadow-brutal-sm);
+  opacity: 0.4;
   transition: all var(--transition-fast);
   flex-shrink: 0;
 }
 
 .chat-input__submit--active {
-  background-color: var(--color-accent);
-  color: var(--color-bg);
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+  border-color: var(--color-outline);
   cursor: pointer;
   opacity: 1;
 }
 
 .chat-input__submit--active:hover {
-  background-color: var(--color-text-muted);
-  transform: translateY(-1px);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-brutal);
+}
+
+.chat-input__submit--active:active {
+  transform: translateY(2px);
+  box-shadow: none;
 }
 
 /* Disclaimer */
 .chat-input__disclaimer {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
+  font-family: var(--font-heading);
+  font-size: 0.65rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--color-text-variant);
+  text-align: center;
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: var(--border-medium);
+  border-radius: var(--border-radius);
+  display: inline-block;
+  background-color: var(--color-surface);
+  box-shadow: var(--shadow-brutal-sm);
+}
+
+.chat-input__disclaimer-wrapper {
   text-align: center;
-  margin-top: var(--spacing-sm);
-  opacity: 0.7;
 }
diff --git a/frontend/src/components/chat-input/ChatInput.jsx b/frontend/src/components/chat-input/ChatInput.jsx
index ca20212..af5633c 100644
--- a/frontend/src/components/chat-input/ChatInput.jsx
+++ b/frontend/src/components/chat-input/ChatInput.jsx
@@ -106,9 +106,11 @@ const ChatInput = ({ onSend }) => {
         </form>
 
         {/* AI Disclaimer */}
-        <p className="chat-input__disclaimer">
-          padhLe AI can make mistakes. Consider verifying important information.
-        </p>
+        <div className="chat-input__disclaimer-wrapper">
+          <p className="chat-input__disclaimer">
+            padhLe AI can make mistakes. Consider verifying important information.
+          </p>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/message/Message.css b/frontend/src/components/message/Message.css
index 323cf90..b6b8c8a 100644
--- a/frontend/src/components/message/Message.css
+++ b/frontend/src/components/message/Message.css
@@ -1,5 +1,5 @@
 /* ========================================
-   Message Component — padhLe
+   Message Component — padhLe (Bauhaus)
    ======================================== */
 
 /* Base Message */
@@ -29,74 +29,170 @@
   align-items: flex-start;
 }
 
-/* Bubble */
-.message__bubble {
-  max-width: 80%;
-  padding: var(--spacing-lg);
-  border-radius: var(--border-radius);
-  line-height: 1.6;
-}
-
-.message--assistant .message__bubble {
-  background-color: var(--color-bg);
-  border: var(--border-thin);
-}
-
+/* --- USER MESSAGE --- */
 .message--user .message__bubble {
-  background-color: var(--color-accent);
-  color: var(--color-bg);
-  border: var(--border-thin);
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+  border: var(--border-thick);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md) var(--spacing-lg);
+  max-width: 80%;
+  position: relative;
+  box-shadow: var(--shadow-brutal-sm);
+  font-family: var(--font-body);
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.5;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.message--user .message__bubble::after {
+  content: "";
+  position: absolute;
+  right: -12px;
+  top: 12px;
+  width: 12px;
+  height: 12px;
+  background-color: var(--color-primary);
+  border-right: var(--border-thick);
+  border-top: var(--border-thick);
+  transform: rotate(45deg);
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .message--user .message__bubble::after {
+    display: block;
+  }
+}
+
+.message--user .message__text {
+  color: var(--color-on-primary);
+}
+
+/* --- ASSISTANT AVATAR --- */
+.message__avatar {
+  display: flex;
+  align-items: flex-start;
+  margin-right: var(--spacing-sm);
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.message__avatar-icon {
+  width: 40px;
+  height: 40px;
+  border: var(--border-medium);
+  border-radius: var(--border-radius);
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-brutal-sm);
+}
+
+/* --- ASSISTANT MESSAGE --- */
+.message--assistant .message__bubble {
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border: var(--border-thick);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-lg);
+  max-width: 85%;
+  position: relative;
+  box-shadow: var(--shadow-brutal-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.message--assistant .message__bubble::before {
+  content: "";
+  position: absolute;
+  left: -12px;
+  top: 16px;
+  width: 12px;
+  height: 12px;
+  background-color: var(--color-surface);
+  border-left: var(--border-thick);
+  border-top: var(--border-thick);
+  transform: rotate(45deg);
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .message--assistant .message__bubble::before {
+    display: block;
+  }
 }
 
-/* Text */
 .message__text {
-  font-size: 1rem;
+  font-size: 0.95rem;
   line-height: 1.6;
   white-space: pre-wrap;
+  font-weight: 600;
 }
 
 .message--assistant .message__text {
   color: var(--color-text);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
 }
 
-.message--user .message__text {
-  color: var(--color-bg);
-}
-
-/* Action Buttons */
+/* --- ACTION BUTTONS --- */
 .message__actions {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
   margin-top: var(--spacing-sm);
-  padding-left: var(--spacing-xs);
+  flex-wrap: wrap;
 }
 
 .message__action {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px var(--spacing-sm);
-  border: none;
-  background: transparent;
+  gap: 6px;
+  padding: 6px var(--spacing-md);
+  border: var(--border-medium);
   border-radius: var(--border-radius);
+  background-color: var(--color-surface);
   cursor: pointer;
-  font-family: var(--font-body);
-  font-size: 0.75rem;
-  font-weight: 400;
-  color: var(--color-text-muted);
+  font-family: var(--font-heading);
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-variant);
+  box-shadow: var(--shadow-brutal-sm);
   transition: all var(--transition-fast);
 }
 
 .message__action:hover {
-  background-color: var(--color-hover);
+  background-color: var(--color-surface-variant);
   color: var(--color-text);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-brutal);
+}
+
+.message__action:active {
+  transform: translateY(2px);
+  box-shadow: none;
+}
+
+.message__action--primary {
+  background-color: var(--color-secondary);
+  color: var(--color-on-secondary);
+  border-color: var(--color-outline);
+  margin-left: auto;
+}
+
+.message__action--primary:hover {
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
 }
 
 .message__action svg {
-  opacity: 0.6;
-}
-
-.message__action:hover svg {
-  opacity: 1;
+  flex-shrink: 0;
 }
diff --git a/frontend/src/components/message/Message.jsx b/frontend/src/components/message/Message.jsx
index 6bbc27a..bd214be 100644
--- a/frontend/src/components/message/Message.jsx
+++ b/frontend/src/components/message/Message.jsx
@@ -1,5 +1,5 @@
 /* ========================================
-   Message Component — padhLe
+   Message Component — padhLe (Bauhaus)
    ======================================== */
 
 import "./Message.css";
@@ -10,6 +10,16 @@ const Message = ({ message }) => {
 
   return (
     <div className={`message ${isUser ? "message--user" : "message--assistant"}`}>
+      {!isUser && (
+        <div className="message__avatar">
+          <div className="message__avatar-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 2a10 10 0 1 0 10 10H12V2z" />
+              <path d="M12 2a10 10 0 0 1 10 10" />
+            </svg>
+          </div>
+        </div>
+      )}
       <div className="message__bubble">
         <div className="message__text">{text}</div>
       </div>
@@ -18,19 +28,19 @@ const Message = ({ message }) => {
       {!isUser && (
         <div className="message__actions">
           <button className="message__action" aria-label="Helpful" title="Helpful">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M7 22h4c1.1 0 2-.9 2-2v-4c0-.57-.24-1.09-.62-1.47L13 11.76c.38-.38.62-.9.62-1.47V7c0-1.1-.9-2-2-2H7c-1.1 0-2 .9-2 2v12c0 3.31 2.69 6 6 6h8v-2h-2.11c-.18-.5-.29-1.04-.29-1.6V22z" />
             </svg>
             <span>Helpful</span>
           </button>
           <button className="message__action" aria-label="Save note" title="Save Note">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
             </svg>
             <span>Note</span>
           </button>
-          <button className="message__action" aria-label="Explain deeper" title="Explain Deeper">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <button className="message__action message__action--primary" aria-label="Explain deeper" title="Explain Deeper">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M12 2a10 10 0 1 0 10 10H12V2z" />
               <path d="M12 2a10 10 0 0 1 10 10" />
             </svg>
diff --git a/frontend/src/components/sidebar/Sidebar.css b/frontend/src/components/sidebar/Sidebar.css
index 382981c..16ee006 100644
--- a/frontend/src/components/sidebar/Sidebar.css
+++ b/frontend/src/components/sidebar/Sidebar.css
@@ -1,5 +1,5 @@
 /* ========================================
-   Sidebar Component — padhLe
+   Sidebar Component — padhLe (Bauhaus)
    ======================================== */
 
 /* Main Sidebar */
@@ -9,8 +9,8 @@
   left: 0;
   width: var(--sidebar-width);
   height: 100vh;
-  background-color: var(--color-bg);
-  border-right: var(--border-thin);
+  background-color: var(--color-surface);
+  border-right: var(--border-thick);
   display: flex;
   flex-direction: column;
   padding: var(--spacing-lg);
@@ -18,13 +18,12 @@
   z-index: 10;
 }
 
-/* Scrollbar styling */
 .sidebar::-webkit-scrollbar {
   width: 4px;
 }
 
 .sidebar::-webkit-scrollbar-thumb {
-  background-color: var(--color-line);
+  background-color: var(--color-outline);
   border-radius: 2px;
 }
 
@@ -32,14 +31,16 @@
 .sidebar__brand {
   padding-bottom: var(--spacing-md);
   margin-bottom: var(--spacing-md);
+  border-bottom: var(--border-medium);
 }
 
 .sidebar__title {
   font-family: var(--font-heading);
-  font-size: 2.25rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  color: var(--color-text);
+  font-size: 2rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: var(--color-primary);
 }
 
 /* New Chat Button */
@@ -50,21 +51,29 @@
   gap: var(--spacing-xs);
   width: 100%;
   padding: var(--spacing-sm);
-  border: var(--border-thin);
+  border: var(--border-medium);
   border-radius: var(--border-radius);
-  background-color: var(--color-bg);
+  background-color: var(--color-surface);
   color: var(--color-text);
-  font-family: var(--font-body);
-  font-size: 0.9rem;
-  font-weight: 400;
+  font-family: var(--font-heading);
+  font-size: 0.85rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   cursor: pointer;
+  box-shadow: var(--shadow-brutal-sm);
   transition: all var(--transition-fast);
   margin-bottom: var(--spacing-lg);
 }
 
 .sidebar__new-chat:hover {
-  background-color: var(--color-hover);
-  border-color: var(--color-text-muted);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-brutal);
+}
+
+.sidebar__new-chat:active {
+  transform: translateY(2px);
+  box-shadow: none;
 }
 
 /* Section */
@@ -79,11 +88,12 @@
 }
 
 .sidebar__section-title {
+  font-family: var(--font-heading);
   font-size: 0.7rem;
-  font-weight: 500;
+  font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--color-text-muted);
+  color: var(--color-text-variant);
   margin-bottom: var(--spacing-sm);
   padding-left: var(--spacing-sm);
 }
@@ -93,7 +103,7 @@
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
 }
 
 .sidebar__link {
@@ -102,30 +112,37 @@
   gap: var(--spacing-sm);
   width: 100%;
   padding: var(--spacing-sm);
-  border: none;
-  background: transparent;
+  border: var(--border-medium);
   border-radius: var(--border-radius);
+  background: transparent;
   cursor: pointer;
   font-family: var(--font-body);
-  font-size: 0.9rem;
-  font-weight: 300;
-  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-variant);
   text-align: left;
+  box-shadow: var(--shadow-brutal-sm);
   transition: all var(--transition-fast);
 }
 
 .sidebar__link:hover {
-  background-color: var(--color-hover);
+  background-color: var(--color-surface-variant);
   color: var(--color-text);
+  transform: translateY(-1px);
 }
 
 .sidebar__link--active {
-  background-color: var(--color-accent);
-  color: var(--color-bg);
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+  border-color: var(--color-outline);
 }
 
 .sidebar__link--active:hover {
-  color: var(--color-bg);
+  color: var(--color-on-primary);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-brutal);
 }
 
 .sidebar__icon {
@@ -141,7 +158,7 @@
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
 }
 
 .sidebar__chat-link {
@@ -150,26 +167,30 @@
   width: 100%;
   padding: var(--spacing-sm);
   padding-left: var(--spacing-sm);
-  border: none;
-  background: transparent;
+  border: var(--border-medium);
   border-radius: var(--border-radius);
+  background: transparent;
   cursor: pointer;
   font-family: var(--font-body);
   text-align: left;
+  box-shadow: var(--shadow-brutal-sm);
   transition: all var(--transition-fast);
 }
 
 .sidebar__chat-link:hover {
-  background-color: var(--color-hover);
+  background-color: var(--color-surface-variant);
+  transform: translateY(-1px);
 }
 
 .sidebar__chat-link--active {
-  background-color: var(--color-hover);
+  background-color: var(--color-surface-container);
+  box-shadow: var(--shadow-brutal);
 }
 
 .sidebar__chat-preview {
-  font-size: 0.85rem;
-  font-weight: 400;
+  font-family: var(--font-body);
+  font-size: 0.8rem;
+  font-weight: 700;
   color: var(--color-text);
   white-space: nowrap;
   overflow: hidden;
@@ -177,9 +198,12 @@
 }
 
 .sidebar__chat-time {
-  font-size: 0.7rem;
-  color: var(--color-text-muted);
-  margin-top: 2px;
+  font-family: var(--font-body);
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--color-text-variant);
+  margin-top: 4px;
 }
 
 /* Footer */
@@ -188,7 +212,7 @@
   flex-direction: column;
   gap: 4px;
   padding-top: var(--spacing-sm);
-  border-top: var(--border-thin);
+  border-top: var(--border-medium);
   margin-top: auto;
 }
 
@@ -198,23 +222,28 @@
   gap: var(--spacing-sm);
   width: 100%;
   padding: var(--spacing-sm);
-  border: none;
-  background: transparent;
+  border: var(--border-medium);
   border-radius: var(--border-radius);
+  background: transparent;
   cursor: pointer;
   font-family: var(--font-body);
-  font-size: 0.85rem;
-  font-weight: 300;
-  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-variant);
   text-align: left;
+  box-shadow: var(--shadow-brutal-sm);
   transition: all var(--transition-fast);
 }
 
 .sidebar__footer-btn:hover {
-  background-color: var(--color-hover);
+  background-color: var(--color-surface-variant);
   color: var(--color-text);
+  transform: translateY(-1px);
 }
 
-.sidebar__footer-btn svg {
-  flex-shrink: 0;
+.sidebar__footer-btn:active {
+  transform: translateY(2px);
+  box-shadow: none;
 }
diff --git a/frontend/src/components/top-nav/TopNav.css b/frontend/src/components/top-nav/TopNav.css
index 37b1d11..0206406 100644
--- a/frontend/src/components/top-nav/TopNav.css
+++ b/frontend/src/components/top-nav/TopNav.css
@@ -1,14 +1,14 @@
 /* ========================================
-   TopNav Component — padhLe
+   TopNav Component — padhLe (Bauhaus)
    ======================================== */
 
 .topnav {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--spacing-sm) var(--spacing-xl);
-  border-bottom: var(--border-thin);
-  background-color: var(--color-bg);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-bottom: var(--border-thick);
+  background-color: var(--color-surface);
   position: sticky;
   top: 0;
   z-index: 5;
@@ -26,29 +26,36 @@
   align-items: center;
   gap: var(--spacing-xs);
   padding: var(--spacing-sm) var(--spacing-md);
-  border: none;
-  background: transparent;
+  border: var(--border-medium);
   border-radius: var(--border-radius);
+  background: transparent;
   cursor: pointer;
-  font-family: var(--font-body);
-  font-size: 0.9rem;
-  font-weight: 400;
-  color: var(--color-text-muted);
+  font-family: var(--font-heading);
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-variant);
+  box-shadow: var(--shadow-brutal-sm);
   transition: all var(--transition-fast);
 }
 
 .topnav__tab:hover {
-  background-color: var(--color-hover);
+  background-color: var(--color-surface-variant);
   color: var(--color-text);
+  transform: translateY(-2px);
 }
 
 .topnav__tab--active {
-  background-color: var(--color-accent);
-  color: var(--color-bg);
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+  border-color: var(--color-outline);
 }
 
 .topnav__tab--active:hover {
-  color: var(--color-bg);
+  color: var(--color-on-primary);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-brutal);
 }
 
 .topnav__icon {
@@ -56,7 +63,7 @@
 }
 
 .topnav__label {
-  font-family: var(--font-body);
+  font-family: var(--font-heading);
 }
 
 /* Action Buttons (Search, Notifications) */
@@ -72,15 +79,17 @@
   justify-content: center;
   width: 36px;
   height: 36px;
-  border: none;
-  background: transparent;
+  border: var(--border-medium);
   border-radius: var(--border-radius);
+  background: transparent;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--color-text-variant);
+  box-shadow: var(--shadow-brutal-sm);
   transition: all var(--transition-fast);
 }
 
 .topnav__action:hover {
-  background-color: var(--color-hover);
+  background-color: var(--color-surface-variant);
   color: var(--color-text);
+  transform: translateY(-2px);
 }
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index f3c0b3a..2087792 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -1,6 +1,59 @@
 /* ========================================
-   App Component — padhLe
+   App Component — padhLe (Bauhaus)
    ======================================== */
 
-/* All page styles are in global.css */
-/* This file is intentionally kept minimal */
+/* Greeting Banner */
+.greeting-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-lg);
+  border-bottom: var(--border-thick);
+  border-left: var(--border-thick);
+  background-color: var(--color-tertiary);
+  color: var(--color-on-tertiary);
+}
+
+.greeting-banner__title {
+  font-family: var(--font-heading);
+  font-size: 1.5rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.greeting-banner__tagline {
+  font-family: var(--font-body);
+  font-size: 0.85rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-top: 4px;
+}
+
+.greeting-banner__dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: var(--border-medium);
+  border-radius: var(--border-radius);
+  background: transparent;
+  color: var(--color-on-tertiary);
+  cursor: pointer;
+  box-shadow: var(--shadow-brutal-sm);
+  transition: all var(--transition-fast);
+  flex-shrink: 0;
+  margin-left: var(--spacing-md);
+}
+
+.greeting-banner__dismiss:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-brutal);
+}
+
+.greeting-banner__dismiss:active {
+  transform: translateY(2px);
+  box-shadow: none;
+}
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index dbe4b63..7179f47 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1,5 +1,5 @@
 /* ========================================
-   Global Styles — padhLe
+   Global Styles — padhLe (Bauhaus Theme)
    ======================================== */
 
 /* Reset */
@@ -11,47 +11,69 @@
   box-sizing: border-box;
 }
 
-/* Root Variables */
+/* Root Variables — Cognitive Flow / Bauhaus */
 :root {
-  --color-bg: #ffffff;
-  --color-border: #1a1a1a;
-  --color-text: #1a1a1a;
-  --color-text-muted: #555555;
-  --color-accent: #1a1a1a;
-  --color-line: #e8e8e8;
-  --color-hover: #f5f5f5;
+  /* Colors */
+  --color-primary: #4f46e5;
+  --color-secondary: #a855f7;
+  --color-tertiary: #10b981;
+  --color-background: #f8f9ff;
+  --color-surface: #ffffff;
+  --color-surface-variant: #d3e4fe;
+  --color-surface-lowest: #ffffff;
+  --color-surface-low: #eff4ff;
+  --color-surface-container: #e5eeff;
+  --color-surface-high: #dce9ff;
+  --color-outline: #1a1a1a;
+  --color-outline-variant: #c7c4d8;
+  --color-text: #0b1c30;
+  --color-text-variant: #464555;
+  --color-on-primary: #ffffff;
+  --color-on-secondary: #ffffff;
+  --color-on-tertiary: #ffffff;
 
-  --font-heading: "Caveat", cursive, sans-serif;
+  /* Fonts */
+  --font-heading: "Montserrat", sans-serif;
   --font-body: "Inter", system-ui, sans-serif;
 
-  --border-thin: 1px solid var(--color-border);
-  --border-medium: 2px solid var(--color-border);
-  --border-radius: 4px;
+  /* Border */
+  --border-thick: 3px solid var(--color-outline);
+  --border-medium: 2px solid var(--color-outline);
+  --border-radius: 8px;
 
-  --spacing-xs: 0.5rem;
-  --spacing-sm: 0.75rem;
-  --spacing-md: 1rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-  --spacing-2xl: 3rem;
-  --spacing-3xl: 4rem;
-  --spacing-4xl: 6rem;
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 12px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 40px;
+  --spacing-2xl: 64px;
 
+  /* Transition */
   --transition-fast: 150ms ease;
   --transition-normal: 250ms ease;
-  --transition-slow: 350ms ease;
 
+  /* Brutalist Shadow */
+  --shadow-brutal: 4px 4px 0px 0px var(--color-outline);
+  --shadow-brutal-sm: 3px 3px 0px 0px var(--color-outline);
+  --shadow-brutal-hover: 6px 6px 0px 0px var(--color-outline);
+  --shadow-brutal-lg: 8px 8px 0px 0px var(--color-outline);
+
+  /* Layout */
   --sidebar-width: 240px;
+  --container-max: 1200px;
 }
 
 /* Body */
 body {
   font-family: var(--font-body);
-  font-weight: 300;
-  background-color: var(--color-bg);
+  font-weight: 600;
+  background-color: var(--color-background);
   color: var(--color-text);
   line-height: 1.6;
   min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Page Frame — sidebar + main layout */
@@ -70,17 +92,18 @@ body {
   min-width: 0;
 }
 
-/* Main Content Wrapper (centered chat area) */
+/* Main Content Wrapper (scrollable chat area) */
 .main-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  background-color: var(--color-background);
 }
 
 /* Container — centered content */
 .container {
-  max-width: 800px;
+  max-width: var(--container-max);
   margin: 0 auto;
   width: 100%;
 }