diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..bf8280e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,49 @@
+# ── Node / Frontend ──────────────────────────────────────────
+node_modules/
+frontend/dist/
+frontend/.env
+frontend/.env.local
+frontend/.env.*.local
+*.tsbuildinfo
+
+# ── Go / Backend ─────────────────────────────────────────────
+backend/bin/
+backend/*.exe
+backend/*.test
+*.out
+
+# ── Environment & Secrets ────────────────────────────────────
+.env
+.env.*
+!.env.example
+infrastructure/.env
+*.pem
+*.key
+
+# ── Terraform ────────────────────────────────────────────────
+infrastructure/terraform/.terraform/
+infrastructure/terraform/.terraform.lock.hcl
+infrastructure/terraform/terraform.tfstate
+infrastructure/terraform/terraform.tfstate.backup
+infrastructure/terraform/*.tfvars
+infrastructure/terraform/override.tf
+infrastructure/terraform/override.tf.json
+
+# ── Docker ───────────────────────────────────────────────────
+.docker/
+
+# ── OS & Editor ──────────────────────────────────────────────
+.DS_Store
+Thumbs.db
+desktop.ini
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# ── Logs & Temp ──────────────────────────────────────────────
+*.log
+logs/
+tmp/
+temp/
diff --git a/backend/cmd/api/main.go b/backend/cmd/api/main.go
index 9482c2e..de1b6a3 100644
--- a/backend/cmd/api/main.go
+++ b/backend/cmd/api/main.go
@@ -25,6 +25,7 @@ func main() {
 		UserPasswords:   make(map[string]string),
 		FriendRequests:  make(map[string]*models.FriendRequest),
 		Locations:       make(map[string]*models.Location),
+		Messages:        make(map[string]*models.Message),
 	}
 
 	// Define our routes (Requires Go 1.22+ for method-based routing)
@@ -49,6 +50,14 @@ func main() {
 	mux.HandleFunc("POST /api/locations", api.EnableCORS(srv.HandleShareLocation))
 	mux.HandleFunc("GET /api/locations/nearby", api.EnableCORS(srv.HandleGetNearbyUsers))
 
+	// Message routes
+	mux.HandleFunc("POST /api/messages", api.EnableCORS(srv.HandleSendMessage))
+	mux.HandleFunc("GET /api/messages/conversations", api.EnableCORS(srv.HandleGetConversations))
+	mux.HandleFunc("GET /api/messages/conversation", api.EnableCORS(srv.HandleGetConversation))
+
+	// Trending route
+	mux.HandleFunc("GET /api/trending", api.EnableCORS(srv.HandleGetTrending))
+
 	// Start the server
 	port := ":8080"
 	log.Printf("Backend server starting on port %s...\n", port)
diff --git a/backend/internal/api/handlers.go b/backend/internal/api/handlers.go
index e8faa2a..c7c65e1 100644
--- a/backend/internal/api/handlers.go
+++ b/backend/internal/api/handlers.go
@@ -18,6 +18,7 @@ type Server struct {
 	UserPasswords   map[string]string         // In-memory password storage (demo only)
 	FriendRequests  map[string]*models.FriendRequest
 	Locations       map[string]*models.Location
+	Messages        map[string]*models.Message
 }
 
 // HandleLogin authenticates a user
diff --git a/backend/internal/api/messages.go b/backend/internal/api/messages.go
new file mode 100644
index 0000000..8f6c4d8
--- /dev/null
+++ b/backend/internal/api/messages.go
@@ -0,0 +1,196 @@
+package api
+
+import (
+	"encoding/json"
+	"net/http"
+	"sort"
+	"strings"
+	"time"
+
+	"github.com/mtepenner/brevity-sharing/internal/models"
+)
+
+// userByID looks up a user by their ID across the username-keyed Users map.
+func (s *Server) userByID(id string) *models.User {
+	for _, u := range s.Users {
+		if u.ID == id {
+			return u
+		}
+	}
+	return nil
+}
+
+// HandleSendMessage sends a private message from one user to another.
+func (s *Server) HandleSendMessage(w http.ResponseWriter, r *http.Request) {
+	var req struct {
+		SenderID    string `json:"sender_id"`
+		RecipientID string `json:"recipient_id"`
+		Content     string `json:"content"`
+	}
+
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		http.Error(w, "Invalid request payload", http.StatusBadRequest)
+		return
+	}
+
+	if req.SenderID == "" || req.RecipientID == "" || req.Content == "" {
+		http.Error(w, "sender_id, recipient_id, and content are required", http.StatusBadRequest)
+		return
+	}
+
+	if len(req.Content) > 1000 {
+		http.Error(w, "Message too long (max 1000 characters)", http.StatusBadRequest)
+		return
+	}
+
+	if req.SenderID == req.RecipientID {
+		http.Error(w, "Cannot send a message to yourself", http.StatusBadRequest)
+		return
+	}
+
+	msg := &models.Message{
+		ID:          generateID(),
+		SenderID:    req.SenderID,
+		RecipientID: req.RecipientID,
+		Content:     req.Content,
+		CreatedAt:   time.Now(),
+	}
+
+	s.Messages[msg.ID] = msg
+
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusCreated)
+	json.NewEncoder(w).Encode(msg)
+}
+
+// Conversation summarises the last message and unread count for a conversation partner.
+type Conversation struct {
+	PartnerID       string          `json:"partner_id"`
+	PartnerUsername string          `json:"partner_username"`
+	LastMessage     *models.Message `json:"last_message"`
+	UnreadCount     int             `json:"unread_count"`
+}
+
+// HandleGetConversations returns a list of conversations for a given user.
+func (s *Server) HandleGetConversations(w http.ResponseWriter, r *http.Request) {
+	userID := r.URL.Query().Get("user_id")
+	if userID == "" {
+		http.Error(w, "user_id required", http.StatusBadRequest)
+		return
+	}
+
+	convMap := make(map[string]*Conversation)
+
+	for _, msg := range s.Messages {
+		if msg.SenderID != userID && msg.RecipientID != userID {
+			continue
+		}
+
+		partnerID := msg.RecipientID
+		if msg.RecipientID == userID {
+			partnerID = msg.SenderID
+		}
+
+		conv, exists := convMap[partnerID]
+		if !exists {
+			partnerUsername := partnerID
+			if partner := s.userByID(partnerID); partner != nil {
+				partnerUsername = partner.Username
+			}
+			conv = &Conversation{
+				PartnerID:       partnerID,
+				PartnerUsername: partnerUsername,
+			}
+			convMap[partnerID] = conv
+		}
+
+		if conv.LastMessage == nil || msg.CreatedAt.After(conv.LastMessage.CreatedAt) {
+			msgCopy := *msg
+			conv.LastMessage = &msgCopy
+		}
+
+		if msg.RecipientID == userID && msg.ReadAt == nil {
+			conv.UnreadCount++
+		}
+	}
+
+	conversations := make([]*Conversation, 0, len(convMap))
+	for _, conv := range convMap {
+		conversations = append(conversations, conv)
+	}
+
+	sort.Slice(conversations, func(i, j int) bool {
+		if conversations[i].LastMessage == nil {
+			return false
+		}
+		if conversations[j].LastMessage == nil {
+			return true
+		}
+		return conversations[i].LastMessage.CreatedAt.After(conversations[j].LastMessage.CreatedAt)
+	})
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(conversations)
+}
+
+// HandleGetConversation returns all messages exchanged between two users.
+func (s *Server) HandleGetConversation(w http.ResponseWriter, r *http.Request) {
+	user1 := r.URL.Query().Get("user1")
+	user2 := r.URL.Query().Get("user2")
+
+	if user1 == "" || user2 == "" {
+		http.Error(w, "user1 and user2 required", http.StatusBadRequest)
+		return
+	}
+
+	messages := make([]models.Message, 0)
+	for _, msg := range s.Messages {
+		if (msg.SenderID == user1 && msg.RecipientID == user2) ||
+			(msg.SenderID == user2 && msg.RecipientID == user1) {
+			messages = append(messages, *msg)
+		}
+	}
+
+	sort.Slice(messages, func(i, j int) bool {
+		return messages[i].CreatedAt.Before(messages[j].CreatedAt)
+	})
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(messages)
+}
+
+// HandleGetTrending returns the top trending hashtags extracted from stored tweets.
+func (s *Server) HandleGetTrending(w http.ResponseWriter, r *http.Request) {
+	tweets := s.DB.GetTimeline()
+
+	topicCounts := make(map[string]int)
+	for _, tweet := range tweets {
+		for _, word := range strings.Fields(tweet.Content) {
+			word = strings.Trim(word, ".,!?\"';:()")
+			if strings.HasPrefix(word, "#") && len(word) > 1 {
+				topicCounts[strings.ToLower(word)]++
+			}
+		}
+	}
+
+	type TrendingTopic struct {
+		Topic string `json:"topic"`
+		Count int    `json:"count"`
+	}
+
+	topics := make([]TrendingTopic, 0, len(topicCounts))
+	for topic, count := range topicCounts {
+		topics = append(topics, TrendingTopic{Topic: topic, Count: count})
+	}
+
+	sort.Slice(topics, func(i, j int) bool {
+		return topics[i].Count > topics[j].Count
+	})
+
+	if len(topics) > 10 {
+		topics = topics[:10]
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(topics)
+}
diff --git a/backend/internal/models/message.go b/backend/internal/models/message.go
new file mode 100644
index 0000000..60e7d59
--- /dev/null
+++ b/backend/internal/models/message.go
@@ -0,0 +1,13 @@
+package models
+
+import "time"
+
+// Message represents a private message between two users
+type Message struct {
+	ID          string     `json:"id"`
+	SenderID    string     `json:"sender_id"`
+	RecipientID string     `json:"recipient_id"`
+	Content     string     `json:"content"`
+	CreatedAt   time.Time  `json:"created_at"`
+	ReadAt      *time.Time `json:"read_at,omitempty"`
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b8ee0c5..64e581e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,64 +1,107 @@
 import React, { useState, useEffect } from 'react';
+import { ThemeProvider } from './context/ThemeContext';
+import { Sidebar, BottomNav } from './components/Nav';
 import { Home } from './pages/Home';
+import { Explore } from './pages/Explore';
+import { Messages } from './pages/Messages';
+import { Notifications } from './pages/Notifications';
+import { Profile } from './pages/Profile';
+import { Settings } from './pages/Settings';
 import { Auth } from './pages/Auth';
-import { User } from './types';
+import { User, Page } from './types';
 
 const App: React.FC = () => {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState<Page>('home');
 
-  // Check if user is already logged in
   useEffect(() => {
     const token = localStorage.getItem('auth_token');
     const storedUser = localStorage.getItem('user');
     if (token && storedUser) {
-      setUser(JSON.parse(storedUser));
+      try {
+        setUser(JSON.parse(storedUser));
+      } catch {
+        localStorage.removeItem('user');
+        localStorage.removeItem('auth_token');
+      }
     }
     setLoading(false);
   }, []);
 
-  const handleLogin = (user: User) => {
-    setUser(user);
-    localStorage.setItem('user', JSON.stringify(user));
+  const handleLogin = (loggedInUser: User) => {
+    setUser(loggedInUser);
+    localStorage.setItem('user', JSON.stringify(loggedInUser));
   };
 
   const handleLogout = () => {
     setUser(null);
     localStorage.removeItem('user');
     localStorage.removeItem('auth_token');
+    setCurrentPage('home');
   };
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-blue-50 to-purple-100 flex items-center justify-center">
+      <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
           <div className="text-5xl mb-3 animate-bounce">✨</div>
-          <p className="text-gray-600 font-medium">Loading...</p>
+          <p className="text-gray-600 dark:text-gray-400 font-medium">Loading…</p>
         </div>
       </div>
     );
   }
 
+  const renderPage = () => {
+    if (!user) return null;
+    switch (currentPage) {
+      case 'home':
+        return <Home user={user} onLogout={handleLogout} onNavigate={setCurrentPage} />;
+      case 'explore':
+        return <Explore />;
+      case 'messages':
+        return <Messages user={user} />;
+      case 'notifications':
+        return <Notifications />;
+      case 'profile':
+        return <Profile user={user} />;
+      case 'settings':
+        return <Settings onLogout={handleLogout} />;
+      default:
+        return <Home user={user} onLogout={handleLogout} onNavigate={setCurrentPage} />;
+    }
+  };
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-blue-50 to-purple-100 flex justify-center w-full">
+    <ThemeProvider>
       {user ? (
-        <>
-          {/* FUTURE: Left Sidebar Navigation
-            <nav className="hidden sm:flex w-64 flex-col p-4">...</nav> 
-          */}
+        <div className="min-h-screen pb-16 sm:pb-0">
+          <div className="max-w-5xl mx-auto flex min-h-screen">
+            {/* Sidebar – visible on sm+ */}
+            <aside className="hidden sm:block w-16 lg:w-64 shrink-0 sticky top-0 h-screen overflow-y-auto border-r border-gray-100 dark:border-gray-800">
+              <Sidebar
+                currentPage={currentPage}
+                onNavigate={setCurrentPage}
+                user={user}
+                onLogout={handleLogout}
+              />
+            </aside>
 
-          {/* Main Content Area */}
-          <Home user={user} onLogout={handleLogout} />
+            {/* Main content */}
+            <main className="flex-1 min-w-0">{renderPage()}</main>
+          </div>
 
-          {/* FUTURE: Right Sidebar (Trending, Who to follow)
-            <aside className="hidden lg:block w-80 p-4">...</aside> 
-          */}
-        </>
+          {/* Bottom nav – mobile only */}
+          <nav className="sm:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 z-40 safe-area-inset-bottom">
+            <BottomNav currentPage={currentPage} onNavigate={setCurrentPage} />
+          </nav>
+        </div>
       ) : (
         <Auth onLogin={handleLogin} />
       )}
-    </div>
+    </ThemeProvider>
   );
 };
 
 export default App;
+
diff --git a/frontend/src/components/ComposePost.tsx b/frontend/src/components/ComposePost.tsx
index 4afdc07..a66bd60 100644
--- a/frontend/src/components/ComposePost.tsx
+++ b/frontend/src/components/ComposePost.tsx
@@ -31,7 +31,7 @@ export const ComposePost: React.FC<ComposePostProps> = ({ onPostCreated }) => {
   const charPercentage = (content.length / 280) * 100;
 
   return (
-    <div className="border-b border-gray-200 p-4 bg-white/50 backdrop-blur-sm">
+    <div className="border-b border-gray-200 dark:border-gray-700 p-4 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm">
       <form onSubmit={handleSubmit} className="flex flex-col gap-4">
         <div className="flex gap-4">
           {/* Avatar */}
@@ -42,7 +42,7 @@ export const ComposePost: React.FC<ComposePostProps> = ({ onPostCreated }) => {
           {/* Compose Area */}
           <div className="flex-1">
             <textarea
-              className="w-full resize-none outline-none text-lg placeholder-gray-400 bg-transparent rounded-lg p-3 border border-gray-200 hover:border-indigo-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100 transition-all"
+              className="w-full resize-none outline-none text-lg placeholder-gray-400 dark:placeholder-gray-500 bg-transparent text-gray-900 dark:text-gray-100 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:border-indigo-300 dark:hover:border-indigo-600 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100 dark:focus:ring-indigo-900 transition-all"
               placeholder="What's happening?!"
               rows={3}
               maxLength={280}
@@ -63,6 +63,7 @@ export const ComposePost: React.FC<ComposePostProps> = ({ onPostCreated }) => {
                   charPercentage > 70 ? 'bg-yellow-500' :
                   'bg-gradient-to-r from-indigo-500 to-purple-500'
                 }`}
+                // eslint-disable-next-line react/forbid-dom-props
                 style={{ width: `${Math.min(charPercentage, 100)}%` }}
               />
             </div>
diff --git a/frontend/src/components/Nav.tsx b/frontend/src/components/Nav.tsx
new file mode 100644
index 0000000..5de7b5b
--- /dev/null
+++ b/frontend/src/components/Nav.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { User, Page } from '../types';
+
+interface SidebarProps {
+  currentPage: Page;
+  onNavigate: (page: Page) => void;
+  user: User;
+  onLogout: () => void;
+}
+
+const navItems: { page: Page; icon: string; label: string }[] = [
+  { page: 'home', icon: '🏠', label: 'Home' },
+  { page: 'explore', icon: '🔥', label: 'Trending' },
+  { page: 'messages', icon: '✉️', label: 'Messages' },
+  { page: 'notifications', icon: '🔔', label: 'Notifications' },
+  { page: 'profile', icon: '👤', label: 'Profile' },
+  { page: 'settings', icon: '⚙️', label: 'Settings' },
+];
+
+export const Sidebar: React.FC<SidebarProps> = ({ currentPage, onNavigate, user, onLogout }) => {
+  return (
+    <div className="flex flex-col h-full py-4 px-2">
+      {/* Logo */}
+      <div className="mb-6 flex items-center gap-3 px-2">
+        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-white font-bold shadow-md shrink-0">
+          B
+        </div>
+        <span className="hidden lg:block text-xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
+          Brevity
+        </span>
+      </div>
+
+      {/* Nav items */}
+      <nav className="flex-1 space-y-1">
+        {navItems.map(({ page, icon, label }) => (
+          <button
+            key={page}
+            onClick={() => onNavigate(page)}
+            className={`w-full flex items-center gap-3 px-3 py-3 rounded-xl transition-all font-semibold text-left ${
+              currentPage === page
+                ? 'bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300'
+                : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
+            }`}
+          >
+            <span className="text-xl shrink-0 leading-none">{icon}</span>
+            <span className="hidden lg:block text-sm">{label}</span>
+          </button>
+        ))}
+      </nav>
+
+      {/* User info + logout */}
+      <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
+        <div className="hidden lg:flex items-center gap-2 px-3 mb-3">
+          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-400 to-purple-400 flex items-center justify-center text-white text-sm font-bold shrink-0">
+            {user.username[0].toUpperCase()}
+          </div>
+          <span className="text-sm font-medium text-gray-700 dark:text-gray-300 truncate">
+            @{user.username}
+          </span>
+        </div>
+        <button
+          onClick={onLogout}
+          className="w-full flex items-center gap-3 px-3 py-3 rounded-xl text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/20 transition-all font-semibold text-left"
+        >
+          <span className="text-xl shrink-0 leading-none">🚪</span>
+          <span className="hidden lg:block text-sm">Sign Out</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+interface BottomNavProps {
+  currentPage: Page;
+  onNavigate: (page: Page) => void;
+}
+
+const mobileNavItems = navItems.slice(0, 5);
+
+export const BottomNav: React.FC<BottomNavProps> = ({ currentPage, onNavigate }) => {
+  return (
+    <div className="flex items-center justify-around px-1 py-2">
+      {mobileNavItems.map(({ page, icon, label }) => (
+        <button
+          key={page}
+          onClick={() => onNavigate(page)}
+          className={`flex flex-col items-center gap-0.5 px-3 py-1.5 rounded-xl transition-all ${
+            currentPage === page
+              ? 'text-indigo-600 dark:text-indigo-400'
+              : 'text-gray-500 dark:text-gray-400'
+          }`}
+        >
+          <span className="text-xl leading-none">{icon}</span>
+          <span className="text-xs font-medium">{label}</span>
+        </button>
+      ))}
+    </div>
+  );
+};
diff --git a/frontend/src/components/PostCard.tsx b/frontend/src/components/PostCard.tsx
index fa77f9a..98bcadf 100644
--- a/frontend/src/components/PostCard.tsx
+++ b/frontend/src/components/PostCard.tsx
@@ -27,26 +27,26 @@ export const PostCard: React.FC<PostCardProps> = ({ tweet }) => {
   };
 
   return (
-    <div className="tweet-container group">
+    <div className="tweet-container group border-b border-gray-100 dark:border-gray-700 p-4 hover:bg-gray-50/50 dark:hover:bg-gray-800/50 transition-all duration-200 cursor-pointer">
       <div className="flex gap-4">
         {/* Avatar */}
         <div className={`w-12 h-12 rounded-full ${getAvatarGradient(tweet.author)} flex items-center justify-center text-white font-bold shrink-0 shadow-md`}>
           {tweet.author.charAt(0).toUpperCase()}
         </div>
         
-        <div className="flex flex-col w-full">
+        <div className="flex flex-col w-full min-w-0">
           {/* Author Info */}
           <div className="flex items-center gap-2 mb-1">
-            <span className="font-bold text-gray-900 hover:text-indigo-600 smooth-transition">{tweet.author}</span>
-            <span className="text-sm text-gray-400">•</span>
-            <span className="text-sm text-gray-500">{formattedDate}</span>
+            <span className="font-bold text-gray-900 dark:text-gray-100 hover:text-indigo-600 dark:hover:text-indigo-400 smooth-transition">{tweet.author}</span>
+            <span className="text-sm text-gray-400 dark:text-gray-500">•</span>
+            <span className="text-sm text-gray-500 dark:text-gray-400">{formattedDate}</span>
           </div>
           
           {/* Content */}
-          <p className="text-gray-800 leading-relaxed whitespace-pre-wrap mb-3">{tweet.content}</p>
+          <p className="text-gray-800 dark:text-gray-200 leading-relaxed whitespace-pre-wrap mb-3 break-words">{tweet.content}</p>
           
           {/* Action Buttons */}
-          <div className="flex gap-8 text-gray-500 text-sm opacity-0 group-hover:opacity-100 smooth-transition">
+          <div className="flex gap-8 text-gray-500 dark:text-gray-400 text-sm opacity-0 group-hover:opacity-100 smooth-transition">
             <button className="flex items-center gap-2 hover:text-blue-500 smooth-transition">
               <span>💬</span>
               <span className="text-xs">Reply</span>
diff --git a/frontend/src/context/ThemeContext.tsx b/frontend/src/context/ThemeContext.tsx
new file mode 100644
index 0000000..8b1ff77
--- /dev/null
+++ b/frontend/src/context/ThemeContext.tsx
@@ -0,0 +1,41 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+interface ThemeContextValue {
+  darkMode: boolean;
+  toggleDarkMode: () => void;
+  setDarkMode: (value: boolean) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  darkMode: false,
+  toggleDarkMode: () => {},
+  setDarkMode: () => {},
+});
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [darkMode, setDarkModeState] = useState<boolean>(() => {
+    const stored = localStorage.getItem('darkMode');
+    if (stored !== null) return stored === 'true';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('darkMode', String(darkMode));
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [darkMode]);
+
+  const toggleDarkMode = () => setDarkModeState((prev) => !prev);
+  const setDarkMode = (value: boolean) => setDarkModeState(value);
+
+  return (
+    <ThemeContext.Provider value={{ darkMode, toggleDarkMode, setDarkMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);
diff --git a/frontend/src/pages/Explore.tsx b/frontend/src/pages/Explore.tsx
index 5ae5f1e..cf9a106 100644
--- a/frontend/src/pages/Explore.tsx
+++ b/frontend/src/pages/Explore.tsx
@@ -1,37 +1,43 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { PostCard } from '../components/PostCard';
-import { Tweet } from '../types';
+import { Tweet, TrendingTopic } from '../types';
+import { api } from '../services/api';
 
 export const Explore: React.FC = () => {
+  const [trendingTopics, setTrendingTopics] = useState<TrendingTopic[]>([]);
   const [trendingPosts] = useState<Tweet[]>([
     {
       id: '1',
       author: 'Tech News Daily',
-      content: 'New JavaScript framework released: it\'s faster and lighter than ever before! Check out the benchmarks.',
+      content: 'New JavaScript framework released — faster and lighter than ever! Check out the benchmarks. #webdev #javascript',
       created_at: new Date(Date.now() - 1800000).toISOString(),
     },
     {
       id: '2',
       author: 'Dev Tips',
-      content: 'Pro tip: Always use meaningful variable names. Your future self will thank you!',
+      content: 'Pro tip: Always use meaningful variable names. Your future self will thank you! #coding #bestpractices',
       created_at: new Date(Date.now() - 3600000).toISOString(),
     },
     {
       id: '3',
       author: 'Code Mentor',
-      content: 'The best way to learn programming? Build projects. Build something meaningful today.',
+      content: 'The best way to learn programming? Build projects. Build something meaningful today. #learntocode',
       created_at: new Date(Date.now() - 7200000).toISOString(),
     },
     {
       id: '4',
       author: 'Web Development',
-      content: 'CSS Grid vs Flexbox: A comprehensive comparison for 2024. Link in bio.',
+      content: 'CSS Grid vs Flexbox: a comprehensive comparison for 2026. #css #webdev',
       created_at: new Date(Date.now() - 14400000).toISOString(),
     },
   ]);
 
   const [selectedCategory, setSelectedCategory] = useState<'all' | 'tech' | 'design' | 'business'>('all');
 
+  useEffect(() => {
+    api.getTrendingTopics().then(setTrendingTopics).catch(() => {});
+  }, []);
+
   const categories = [
     { id: 'all', label: 'All' },
     { id: 'tech', label: 'Technology' },
@@ -40,49 +46,78 @@ export const Explore: React.FC = () => {
   ];
 
   return (
-    <main className="w-full max-w-xl bg-white min-h-screen shadow-sm border-x border-gray-200">
+    <main className="w-full bg-white dark:bg-gray-900 min-h-screen">
       {/* Header */}
-      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-md border-b border-gray-200 p-4">
-        <h1 className="text-xl font-bold mb-4">Explore</h1>
-
-        {/* Search Bar */}
+      <header className="sticky top-0 z-10 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 p-4">
+        <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Trending</h1>
         <div className="flex gap-2">
           <input
             type="text"
-            placeholder="Search posts..."
-            className="flex-1 px-4 py-2 bg-gray-100 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
+            placeholder="Search posts…"
+            className="flex-1 px-4 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-full text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-400"
           />
-          <button className="p-2 hover:bg-gray-100 rounded-full transition">🔍</button>
+          <button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition text-gray-600 dark:text-gray-400">
+            🔍
+          </button>
         </div>
       </header>
 
-      {/* Category Filter */}
-      <div className="sticky top-16 z-10 bg-white border-b border-gray-200 px-4 py-3 flex gap-2 overflow-x-auto">
-        {categories.map((category) => (
+      {/* Category filter */}
+      <div className="sticky top-[73px] z-10 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex gap-2 overflow-x-auto">
+        {categories.map((cat) => (
           <button
-            key={category.id}
-            onClick={() => setSelectedCategory(category.id as any)}
-            className={`px-4 py-2 rounded-full whitespace-nowrap font-semibold transition ${
-              selectedCategory === category.id
-                ? 'bg-blue-500 text-white'
-                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            key={cat.id}
+            onClick={() => setSelectedCategory(cat.id as typeof selectedCategory)}
+            className={`px-4 py-1.5 rounded-full whitespace-nowrap font-semibold text-sm transition ${
+              selectedCategory === cat.id
+                ? 'bg-indigo-600 text-white'
+                : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
             }`}
           >
-            {category.label}
+            {cat.label}
           </button>
         ))}
       </div>
 
-      {/* Trending Posts */}
-      {trendingPosts.length > 0 ? (
-        <div className="flex flex-col">
-          {trendingPosts.map((post) => (
-            <PostCard key={post.id} tweet={post} />
-          ))}
+      {/* Trending hashtags */}
+      {trendingTopics.length > 0 && (
+        <div className="px-4 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+            Trending Hashtags
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            {trendingTopics.map((t) => (
+              <span
+                key={t.topic}
+                className="px-3 py-1 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-full text-sm font-semibold"
+              >
+                {t.topic}
+                <span className="ml-1.5 text-indigo-400 dark:text-indigo-500 font-normal text-xs">
+                  {t.count}
+                </span>
+              </span>
+            ))}
+          </div>
         </div>
-      ) : (
-        <div className="p-8 text-center text-gray-500">No trending posts found</div>
       )}
+
+      {/* Trending posts */}
+      <div>
+        <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="font-bold text-gray-900 dark:text-gray-100">Trending Posts</h2>
+        </div>
+        {trendingPosts.length > 0 ? (
+          <div className="flex flex-col">
+            {trendingPosts.map((post) => (
+              <PostCard key={post.id} tweet={post} />
+            ))}
+          </div>
+        ) : (
+          <div className="p-8 text-center text-gray-500 dark:text-gray-400">
+            No trending posts found
+          </div>
+        )}
+      </div>
     </main>
   );
 };
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index b4bb983..f68ac33 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -5,43 +5,47 @@ import { ComposePost } from '../components/ComposePost';
 import { SearchUsers } from '../components/SearchUsers';
 import { FriendsList } from '../components/FriendsList';
 import { FriendRequests } from '../components/FriendRequests';
-import { User } from '../types';
+import { User, Page } from '../types';
 
 interface HomeProps {
   user: User;
   onLogout: () => void;
+  onNavigate?: (page: Page) => void;
 }
 
-export const Home: React.FC<HomeProps> = ({ user, onLogout }) => {
-  // Destructure exactly what we need from our custom hook
+export const Home: React.FC<HomeProps> = ({ user, onNavigate }) => {
   const { tweets, loading, error, refetch } = useTimeline();
   const [showSearchUsers, setShowSearchUsers] = useState(false);
   const [showFriendsList, setShowFriendsList] = useState(false);
   const [showFriendRequests, setShowFriendRequests] = useState(false);
 
   return (
-    <main className="w-full max-w-xl bg-white min-h-screen shadow-xl border-x border-gray-100">
+    <main className="w-full bg-white dark:bg-gray-900 min-h-screen">
       {/* Sticky Header */}
-      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-md border-b border-gray-100 p-4 shadow-sm">
+      <header className="sticky top-0 z-10 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md border-b border-gray-100 dark:border-gray-700 p-4 shadow-sm">
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-3">
             <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-white font-bold shadow-md">
               B
             </div>
             <div>
-              <h1 className="text-xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Brevity</h1>
-              <p className="text-xs text-gray-500">Your feed</p>
+              <h1 className="text-xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
+                Brevity
+              </h1>
+              <p className="text-xs text-gray-500 dark:text-gray-400">Your feed</p>
             </div>
           </div>
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-gray-600">👤 {user.username}</span>
-            <button
-              onClick={onLogout}
-              className="text-sm px-3 py-2 rounded-lg bg-gradient-to-r from-red-500 to-pink-500 text-white hover:from-red-600 hover:to-pink-600 transition-all smooth-transition font-semibold"
-            >
-              Logout
-            </button>
-          </div>
+          <button
+            onClick={() => onNavigate?.('profile')}
+            className="flex items-center gap-2 px-3 py-1.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
+          >
+            <div className="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-400 to-purple-400 flex items-center justify-center text-white text-xs font-bold">
+              {user.username[0].toUpperCase()}
+            </div>
+            <span className="text-sm text-gray-600 dark:text-gray-400 hidden sm:block">
+              {user.username}
+            </span>
+          </button>
         </div>
 
         {/* Social Action Buttons */}
@@ -67,39 +71,37 @@ export const Home: React.FC<HomeProps> = ({ user, onLogout }) => {
         </div>
       </header>
 
-      {/* Compose Area - pass the refetch function so it updates on submit */}
       <ComposePost onPostCreated={refetch} />
 
-      {/* Error State */}
       {error && (
-        <div className="p-4 text-center text-red-600 bg-red-50 border border-red-200 rounded-lg m-4 shadow-sm">
+        <div className="p-4 text-center text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-lg m-4 shadow-sm">
           ⚠️ {error}
         </div>
       )}
 
-      {/* Timeline State Machine */}
       {loading ? (
         <div className="p-8 text-center">
-          <div className="inline-block">
-            <div className="text-4xl mb-3 animate-bounce">✨</div>
-            <p className="text-gray-500 font-medium animate-pulse">Loading your feed...</p>
-          </div>
+          <div className="text-4xl mb-3 animate-bounce">✨</div>
+          <p className="text-gray-500 dark:text-gray-400 font-medium animate-pulse">
+            Loading your feed…
+          </p>
         </div>
       ) : tweets.length === 0 && !error ? (
         <div className="p-12 text-center">
           <div className="text-5xl mb-3">📝</div>
-          <p className="text-gray-600 font-medium">No posts yet</p>
-          <p className="text-gray-400 text-sm mt-1">Be the first to share something!</p>
+          <p className="text-gray-600 dark:text-gray-400 font-medium">No posts yet</p>
+          <p className="text-gray-400 dark:text-gray-500 text-sm mt-1">
+            Be the first to share something!
+          </p>
         </div>
       ) : (
-        <div className="flex flex-col divide-y divide-gray-100">
+        <div className="flex flex-col divide-y divide-gray-100 dark:divide-gray-700">
           {tweets.map((tweet) => (
             <PostCard key={tweet.id} tweet={tweet} />
           ))}
         </div>
       )}
 
-      {/* Modals */}
       {showSearchUsers && (
         <SearchUsers currentUserId={user.id} onClose={() => setShowSearchUsers(false)} />
       )}
diff --git a/frontend/src/pages/Messages.tsx b/frontend/src/pages/Messages.tsx
new file mode 100644
index 0000000..534dacf
--- /dev/null
+++ b/frontend/src/pages/Messages.tsx
@@ -0,0 +1,312 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { api } from '../services/api';
+import { User, Message, Conversation } from '../types';
+
+interface MessagesProps {
+  user: User;
+}
+
+export const Messages: React.FC<MessagesProps> = ({ user }) => {
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [selectedConv, setSelectedConv] = useState<Conversation | null>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [newMessage, setNewMessage] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [sending, setSending] = useState(false);
+  const [showNewMsg, setShowNewMsg] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<User[]>([]);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    loadConversations();
+  }, []);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const loadConversations = async () => {
+    try {
+      const data = await api.getConversations(user.id);
+      setConversations(data);
+    } catch (err) {
+      console.error('Failed to load conversations:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const openConversation = async (conv: Conversation) => {
+    setSelectedConv(conv);
+    try {
+      const data = await api.getConversation(user.id, conv.partner_id);
+      setMessages(data);
+    } catch (err) {
+      console.error('Failed to load messages:', err);
+    }
+  };
+
+  const sendMessage = async () => {
+    if (!newMessage.trim() || !selectedConv || sending) return;
+    setSending(true);
+    try {
+      const msg = await api.sendMessage(user.id, selectedConv.partner_id, newMessage.trim());
+      setMessages((prev) => [...prev, msg]);
+      setNewMessage('');
+      loadConversations();
+    } catch (err) {
+      console.error('Failed to send message:', err);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const handleSearch = async (query: string) => {
+    setSearchQuery(query);
+    if (query.length < 2) {
+      setSearchResults([]);
+      return;
+    }
+    try {
+      const results = await api.searchUsers(query);
+      setSearchResults(results.filter((u) => u.id !== user.id));
+    } catch (err) {
+      console.error('Search error:', err);
+    }
+  };
+
+  const startNewConversation = (partner: User) => {
+    setSelectedConv({ partner_id: partner.id, partner_username: partner.username, unread_count: 0 });
+    setMessages([]);
+    setShowNewMsg(false);
+    setSearchQuery('');
+    setSearchResults([]);
+  };
+
+  const formatTime = (timestamp: string) => {
+    const diff = Date.now() - new Date(timestamp).getTime();
+    const mins = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    if (mins < 60) return `${mins}m`;
+    if (hours < 24) return `${hours}h`;
+    return new Date(timestamp).toLocaleDateString();
+  };
+
+  return (
+    <main className="w-full bg-white dark:bg-gray-900 min-h-screen flex flex-col">
+      {/* Header */}
+      <header className="sticky top-0 z-10 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {selectedConv && (
+            <button
+              onClick={() => setSelectedConv(null)}
+              className="sm:hidden p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400 transition"
+              aria-label="Back"
+            >
+              ←
+            </button>
+          )}
+          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+            {selectedConv ? `@${selectedConv.partner_username}` : 'Messages'}
+          </h1>
+        </div>
+        {!selectedConv && (
+          <button
+            onClick={() => setShowNewMsg(true)}
+            className="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-semibold text-sm transition"
+          >
+            ✏️ New
+          </button>
+        )}
+      </header>
+
+      <div className="flex flex-1 overflow-hidden" /* minHeight calc handled by flex */>
+        {/* Conversation list */}
+        <div
+          className={`${
+            selectedConv ? 'hidden sm:flex' : 'flex'
+          } flex-col w-full sm:w-72 border-r border-gray-200 dark:border-gray-700 overflow-y-auto`}
+        >
+          {loading ? (
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">Loading…</div>
+          ) : conversations.length === 0 ? (
+            <div className="p-8 text-center">
+              <div className="text-4xl mb-2">✉️</div>
+              <p className="text-gray-500 dark:text-gray-400 font-medium">No messages yet</p>
+              <p className="text-sm text-gray-400 dark:text-gray-500 mt-1">Start a conversation!</p>
+            </div>
+          ) : (
+            conversations.map((conv) => (
+              <button
+                key={conv.partner_id}
+                onClick={() => openConversation(conv)}
+                className={`w-full flex items-center gap-3 px-4 py-3 text-left border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-800 transition ${
+                  selectedConv?.partner_id === conv.partner_id
+                    ? 'bg-indigo-50 dark:bg-indigo-900/20'
+                    : ''
+                }`}
+              >
+                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-400 flex items-center justify-center text-white font-bold shrink-0">
+                  {conv.partner_username[0].toUpperCase()}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <span className="font-semibold text-gray-900 dark:text-gray-100 text-sm">
+                      @{conv.partner_username}
+                    </span>
+                    {conv.last_message && (
+                      <span className="text-xs text-gray-400 dark:text-gray-500 shrink-0 ml-1">
+                        {formatTime(conv.last_message.created_at)}
+                      </span>
+                    )}
+                  </div>
+                  {conv.last_message && (
+                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                      {conv.last_message.sender_id === user.id ? 'You: ' : ''}
+                      {conv.last_message.content}
+                    </p>
+                  )}
+                </div>
+                {conv.unread_count > 0 && (
+                  <span className="w-5 h-5 bg-indigo-600 text-white text-xs rounded-full flex items-center justify-center shrink-0">
+                    {conv.unread_count}
+                  </span>
+                )}
+              </button>
+            ))
+          )}
+        </div>
+
+        {/* Message thread */}
+        {selectedConv ? (
+          <div className="flex-1 flex flex-col min-w-0">
+            <div className="flex-1 overflow-y-auto p-4 space-y-3">
+              {messages.length === 0 ? (
+                <div className="text-center py-12">
+                  <div className="text-4xl mb-2">👋</div>
+                  <p className="text-gray-500 dark:text-gray-400 font-medium">
+                    Start a conversation with @{selectedConv.partner_username}
+                  </p>
+                </div>
+              ) : (
+                messages.map((msg) => (
+                  <div
+                    key={msg.id}
+                    className={`flex ${msg.sender_id === user.id ? 'justify-end' : 'justify-start'}`}
+                  >
+                    <div
+                      className={`max-w-xs lg:max-w-md px-4 py-2.5 rounded-2xl text-sm leading-relaxed ${
+                        msg.sender_id === user.id
+                          ? 'bg-indigo-600 text-white rounded-br-sm'
+                          : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-bl-sm'
+                      }`}
+                    >
+                      <p className="break-words">{msg.content}</p>
+                      <p
+                        className={`text-xs mt-1 ${
+                          msg.sender_id === user.id
+                            ? 'text-indigo-200'
+                            : 'text-gray-400 dark:text-gray-500'
+                        }`}
+                      >
+                        {formatTime(msg.created_at)}
+                      </p>
+                    </div>
+                  </div>
+                ))
+              )}
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Compose input */}
+            <div className="border-t border-gray-200 dark:border-gray-700 p-3">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={newMessage}
+                  onChange={(e) => setNewMessage(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && sendMessage()}
+                  placeholder="Type a message…"
+                  maxLength={1000}
+                  className="flex-1 px-4 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-400 transition"
+                />
+                <button
+                  onClick={sendMessage}
+                  disabled={!newMessage.trim() || sending}
+                  className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-full font-semibold text-sm transition"
+                >
+                  {sending ? '…' : '➤'}
+                </button>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="hidden sm:flex flex-1 items-center justify-center">
+            <div className="text-center text-gray-400 dark:text-gray-500">
+              <div className="text-5xl mb-3">✉️</div>
+              <p className="font-medium">Select a conversation</p>
+              <p className="text-sm mt-1">or start a new one</p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* New message modal */}
+      {showNewMsg && (
+        <div
+          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+          onClick={(e) => e.target === e.currentTarget && setShowNewMsg(false)}
+        >
+          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md">
+            <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+              <h2 className="font-bold text-gray-900 dark:text-gray-100">New Message</h2>
+              <button
+                onClick={() => {
+                  setShowNewMsg(false);
+                  setSearchQuery('');
+                  setSearchResults([]);
+                }}
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition"
+                aria-label="Close"
+              >
+                ✕
+              </button>
+            </div>
+            <div className="p-4">
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => handleSearch(e.target.value)}
+                placeholder="Search users…"
+                className="w-full px-4 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-full text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-400 transition"
+                autoFocus
+              />
+              <div className="mt-3 max-h-60 overflow-y-auto space-y-1">
+                {searchResults.map((u) => (
+                  <button
+                    key={u.id}
+                    onClick={() => startNewConversation(u)}
+                    className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition text-left"
+                  >
+                    <div className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-400 to-purple-400 flex items-center justify-center text-white font-bold text-sm shrink-0">
+                      {u.username[0].toUpperCase()}
+                    </div>
+                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      @{u.username}
+                    </span>
+                  </button>
+                ))}
+                {searchQuery.length >= 2 && searchResults.length === 0 && (
+                  <p className="text-center text-sm text-gray-500 dark:text-gray-400 py-4">
+                    No users found
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+};
diff --git a/frontend/src/pages/Notifications.tsx b/frontend/src/pages/Notifications.tsx
index 4d37f37..d344aa4 100644
--- a/frontend/src/pages/Notifications.tsx
+++ b/frontend/src/pages/Notifications.tsx
@@ -76,20 +76,20 @@ export const Notifications: React.FC = () => {
   };
 
   return (
-    <main className="w-full max-w-xl bg-white min-h-screen shadow-sm border-x border-gray-200">
+    <main className="w-full bg-white dark:bg-gray-900 min-h-screen">
       {/* Header */}
-      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-md border-b border-gray-200 p-4">
-        <h1 className="text-xl font-bold">Notifications</h1>
+      <header className="sticky top-0 z-10 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 p-4">
+        <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Notifications</h1>
       </header>
 
-      {/* Notifications List */}
+      {/* Notifications list */}
       {notifications.length > 0 ? (
         <div className="flex flex-col">
           {notifications.map((notification) => (
             <div
               key={notification.id}
-              className={`px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition cursor-pointer ${
-                !notification.read ? 'bg-blue-50' : ''
+              className={`px-4 py-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer ${
+                !notification.read ? 'bg-blue-50 dark:bg-blue-950/20' : ''
               }`}
             >
               <div className="flex gap-3">
@@ -99,20 +99,24 @@ export const Notifications: React.FC = () => {
                   className="w-10 h-10 rounded-full flex-shrink-0"
                 />
                 <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 flex-wrap">
                     <span className="text-lg">{getNotificationIcon(notification.type)}</span>
-                    <span className="font-semibold text-gray-900">{notification.actor.name}</span>
-                    <span className="text-gray-500">{notification.actor.handle}</span>
-                    <span className="text-gray-500 text-sm">{formatTime(notification.timestamp)}</span>
+                    <span className="font-semibold text-gray-900 dark:text-gray-100">
+                      {notification.actor.name}
+                    </span>
+                    <span className="text-gray-500 dark:text-gray-400">{notification.actor.handle}</span>
+                    <span className="text-gray-500 dark:text-gray-400 text-sm">
+                      {formatTime(notification.timestamp)}
+                    </span>
                   </div>
-                  <p className="text-gray-700">{notification.message}</p>
+                  <p className="text-gray-700 dark:text-gray-300">{notification.message}</p>
                 </div>
               </div>
             </div>
           ))}
         </div>
       ) : (
-        <div className="p-8 text-center text-gray-500">No notifications yet</div>
+        <div className="p-8 text-center text-gray-500 dark:text-gray-400">No notifications yet</div>
       )}
     </main>
   );
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 7cb34bd..37f0910 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,102 +1,79 @@
 import React, { useState } from 'react';
 import { PostCard } from '../components/PostCard';
-import { Tweet } from '../types';
+import { Tweet, User } from '../types';
 
-interface UserProfile {
-  id: string;
-  name: string;
-  handle: string;
-  bio: string;
-  avatar: string;
-  followers: number;
-  following: number;
-  joinDate: string;
+interface ProfileProps {
+  user: User;
 }
 
-export const Profile: React.FC = () => {
-  const [user] = useState<UserProfile>({
-    id: '1',
-    name: 'John Doe',
-    handle: '@johndoe',
-    bio: 'Software engineer | Coffee enthusiast | Open source contributor',
-    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=johndoe',
-    followers: 1234,
-    following: 567,
-    joinDate: 'January 2024',
-  });
-
-  // Mock user tweets
+export const Profile: React.FC<ProfileProps> = ({ user }) => {
+  // Mock tweets for the logged-in user (replace with API call as the app grows)
   const [userTweets] = useState<Tweet[]>([
     {
       id: '1',
-      author: user.name,
-      content: 'Just launched my new project!',
+      author: user.username,
+      content: 'Just joined Brevity! 👋',
       created_at: new Date(Date.now() - 3600000).toISOString(),
     },
     {
       id: '2',
-      author: user.name,
-      content: 'Wednesday tip: Always write tests for your code',
+      author: user.username,
+      content: 'Loving the minimalist design of this platform.',
       created_at: new Date(Date.now() - 86400000).toISOString(),
     },
   ]);
 
+  const joinDate = user.created_at
+    ? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+    : 'Recently';
+
   return (
-    <main className="w-full max-w-xl bg-white min-h-screen shadow-sm border-x border-gray-200">
+    <main className="w-full bg-white dark:bg-gray-900 min-h-screen">
       {/* Header */}
-      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-md border-b border-gray-200 p-4">
-        <h1 className="text-xl font-bold">Profile</h1>
+      <header className="sticky top-0 z-10 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 p-4">
+        <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Profile</h1>
       </header>
 
-      {/* Profile Card */}
-      <div className="bg-white border-b border-gray-200">
-        {/* Cover Photo */}
-        <div className="h-32 bg-gradient-to-r from-blue-400 to-purple-400"></div>
+      {/* Profile card */}
+      <div className="border-b border-gray-200 dark:border-gray-700">
+        {/* Cover */}
+        <div className="h-32 bg-gradient-to-r from-indigo-400 to-purple-500" />
 
-        {/* Profile Info */}
         <div className="px-4 pb-4">
           {/* Avatar */}
           <div className="-mt-16 mb-4">
-            <img
-              src={user.avatar}
-              alt={user.name}
-              className="w-32 h-32 rounded-full border-4 border-white bg-gray-100"
-            />
+            <div className="w-24 h-24 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 border-4 border-white dark:border-gray-900 flex items-center justify-center text-white text-3xl font-bold shadow-lg">
+              {user.username[0].toUpperCase()}
+            </div>
           </div>
 
-          {/* User Details */}
-          <div className="mb-4">
-            <h2 className="text-2xl font-bold text-gray-900">{user.name}</h2>
-            <p className="text-gray-500">{user.handle}</p>
+          {/* Details */}
+          <div className="mb-3">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+              {user.username}
+            </h2>
+            <p className="text-gray-500 dark:text-gray-400 text-sm">{user.email}</p>
           </div>
 
-          {/* Bio */}
-          <p className="text-gray-700 mb-4">{user.bio}</p>
+          {user.bio && (
+            <p className="text-gray-700 dark:text-gray-300 mb-3">{user.bio}</p>
+          )}
 
-          {/* Stats */}
-          <div className="flex gap-4 text-sm text-gray-500 mb-4">
-            <span>
-              <strong className="text-gray-900">{user.followers}</strong> Followers
-            </span>
-            <span>
-              <strong className="text-gray-900">{user.following}</strong> Following
-            </span>
-            <span>Joined {user.joinDate}</span>
+          <div className="flex gap-4 text-sm text-gray-500 dark:text-gray-400 mb-4">
+            <span>📅 Joined {joinDate}</span>
           </div>
 
-          {/* Action Button */}
-          <button className="w-full px-4 py-2 bg-blue-500 text-white rounded-full font-semibold hover:bg-blue-600 transition">
+          <button className="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-semibold transition">
             Edit Profile
           </button>
         </div>
       </div>
 
-      {/* User's Tweets */}
-      <div className="border-t border-gray-200">
-        <div className="px-4 py-3 bg-gray-50 border-b border-gray-200">
-          <h3 className="font-bold text-gray-900">Posts</h3>
+      {/* User tweets */}
+      <div>
+        <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="font-bold text-gray-900 dark:text-gray-100">Posts</h3>
         </div>
-
         {userTweets.length > 0 ? (
           <div className="flex flex-col">
             {userTweets.map((tweet) => (
@@ -104,7 +81,7 @@ export const Profile: React.FC = () => {
             ))}
           </div>
         ) : (
-          <div className="p-8 text-center text-gray-500">No posts yet</div>
+          <div className="p-8 text-center text-gray-500 dark:text-gray-400">No posts yet</div>
         )}
       </div>
     </main>
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 98fd91f..91ed54e 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -1,192 +1,204 @@
 import React, { useState } from 'react';
+import { useTheme } from '../context/ThemeContext';
+
+interface SettingsProps {
+  onLogout?: () => void;
+}
 
 interface SettingsState {
   emailNotifications: boolean;
   pushNotifications: boolean;
-  darkMode: boolean;
   privateAccount: boolean;
   allowMessages: boolean;
-  theme: 'light' | 'dark' | 'auto';
   language: string;
 }
 
-export const Settings: React.FC = () => {
+export const Settings: React.FC<SettingsProps> = ({ onLogout }) => {
+  const { darkMode, setDarkMode } = useTheme();
+
   const [settings, setSettings] = useState<SettingsState>({
     emailNotifications: true,
     pushNotifications: true,
-    darkMode: false,
     privateAccount: false,
     allowMessages: true,
-    theme: 'auto',
     language: 'en',
   });
 
   const handleToggle = (key: keyof SettingsState) => {
-    setSettings((prev) => ({
-      ...prev,
-      [key]: !prev[key],
-    }));
+    setSettings((prev) => ({ ...prev, [key]: !prev[key] }));
   };
 
   const handleSelectChange = (key: keyof SettingsState, value: string) => {
-    setSettings((prev) => ({
-      ...prev,
-      [key]: value,
-    }));
+    setSettings((prev) => ({ ...prev, [key]: value }));
   };
 
   const handleSave = () => {
-    // Save settings to backend
     console.log('Settings saved:', settings);
   };
 
+  const Toggle: React.FC<{
+    checked: boolean;
+    onChange: () => void;
+    label: string;
+  }> = ({ checked, onChange, label }) => (
+    <label className="relative inline-flex items-center cursor-pointer" aria-label={label}>
+      <input type="checkbox" checked={checked} onChange={onChange} className="sr-only peer" />
+      <div className="w-11 h-6 bg-gray-300 dark:bg-gray-600 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-500" />
+    </label>
+  );
+
   return (
-    <main className="w-full max-w-xl bg-white min-h-screen shadow-sm border-x border-gray-200">
+    <main className="w-full bg-white dark:bg-gray-900 min-h-screen">
       {/* Header */}
-      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-md border-b border-gray-200 p-4">
-        <h1 className="text-xl font-bold">Settings</h1>
+      <header className="sticky top-0 z-10 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 p-4">
+        <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Settings</h1>
       </header>
 
-      {/* Settings Sections */}
-      <div className="divide-y divide-gray-200">
-        {/* Privacy Settings */}
+      <div className="divide-y divide-gray-200 dark:divide-gray-700">
+        {/* Display */}
         <section className="px-4 py-6">
-          <h2 className="text-lg font-bold text-gray-900 mb-4">Privacy & Safety</h2>
+          <h2 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">Display</h2>
           <div className="space-y-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="font-semibold text-gray-900">Private Account</p>
-                <p className="text-sm text-gray-500">Only approved users can see your posts</p>
+                <p className="font-semibold text-gray-900 dark:text-gray-100">Dark Mode</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Switch to a darker colour scheme
+                </p>
               </div>
-              <label className="relative inline-flex items-center cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={settings.privateAccount}
-                  onChange={() => handleToggle('privateAccount')}
-                  className="sr-only peer"
-                  aria-label="Private Account"
-                />
-                <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
-              </label>
+              <Toggle
+                checked={darkMode}
+                onChange={() => setDarkMode(!darkMode)}
+                label="Dark Mode"
+              />
             </div>
 
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-semibold text-gray-900">Allow Direct Messages</p>
-                <p className="text-sm text-gray-500">Let anyone send you messages</p>
-              </div>
-              <label className="relative inline-flex items-center cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={settings.allowMessages}
-                  onChange={() => handleToggle('allowMessages')}
-                  className="sr-only peer"
-                  aria-label="Allow Direct Messages"
-                />
-                <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
+            <div>
+              <label className="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
+                Language
               </label>
+              <select
+                value={settings.language}
+                onChange={(e) => handleSelectChange('language', e.target.value)}
+                className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"
+                aria-label="Language"
+              >
+                <option value="en">English</option>
+                <option value="es">Spanish</option>
+                <option value="fr">French</option>
+                <option value="de">German</option>
+                <option value="ja">Japanese</option>
+              </select>
             </div>
           </div>
         </section>
 
-        {/* Notification Settings */}
+        {/* Privacy */}
         <section className="px-4 py-6">
-          <h2 className="text-lg font-bold text-gray-900 mb-4">Notifications</h2>
+          <h2 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">
+            Privacy &amp; Safety
+          </h2>
           <div className="space-y-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="font-semibold text-gray-900">Email Notifications</p>
-                <p className="text-sm text-gray-500">Receive email alerts</p>
+                <p className="font-semibold text-gray-900 dark:text-gray-100">Private Account</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Only approved users can see your posts
+                </p>
               </div>
-              <label className="relative inline-flex items-center cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={settings.emailNotifications}
-                  onChange={() => handleToggle('emailNotifications')}
-                  className="sr-only peer"
-                  aria-label="Email Notifications"
-                />
-                <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
-              </label>
+              <Toggle
+                checked={settings.privateAccount}
+                onChange={() => handleToggle('privateAccount')}
+                label="Private Account"
+              />
             </div>
 
             <div className="flex items-center justify-between">
               <div>
-                <p className="font-semibold text-gray-900">Push Notifications</p>
-                <p className="text-sm text-gray-500">Receive browser notifications</p>
+                <p className="font-semibold text-gray-900 dark:text-gray-100">
+                  Allow Direct Messages
+                </p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Let anyone send you messages
+                </p>
               </div>
-              <label className="relative inline-flex items-center cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={settings.pushNotifications}
-                  onChange={() => handleToggle('pushNotifications')}
-                  className="sr-only peer"
-                  aria-label="Push Notifications"
-                />
-                <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
-              </label>
+              <Toggle
+                checked={settings.allowMessages}
+                onChange={() => handleToggle('allowMessages')}
+                label="Allow Direct Messages"
+              />
             </div>
           </div>
         </section>
 
-        {/* Display Settings */}
+        {/* Notifications */}
         <section className="px-4 py-6">
-          <h2 className="text-lg font-bold text-gray-900 mb-4">Display</h2>
+          <h2 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">
+            Notifications
+          </h2>
           <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-semibold text-gray-900 mb-2">Theme</label>
-              <select
-                value={settings.theme}
-                onChange={(e) => handleSelectChange('theme', e.target.value)}
-                className="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
-                aria-label="Theme"
-              >
-                <option value="light">Light</option>
-                <option value="dark">Dark</option>
-                <option value="auto">Auto</option>
-              </select>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-semibold text-gray-900 dark:text-gray-100">
+                  Email Notifications
+                </p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Receive email alerts</p>
+              </div>
+              <Toggle
+                checked={settings.emailNotifications}
+                onChange={() => handleToggle('emailNotifications')}
+                label="Email Notifications"
+              />
             </div>
 
-            <div>
-              <label className="block text-sm font-semibold text-gray-900 mb-2">Language</label>
-              <select
-                value={settings.language}
-                onChange={(e) => handleSelectChange('language', e.target.value)}
-                className="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
-                aria-label="Language"
-              >
-                <option value="en">English</option>
-                <option value="es">Spanish</option>
-                <option value="fr">French</option>
-                <option value="de">German</option>
-                <option value="ja">Japanese</option>
-              </select>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-semibold text-gray-900 dark:text-gray-100">
+                  Push Notifications
+                </p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Receive browser notifications
+                </p>
+              </div>
+              <Toggle
+                checked={settings.pushNotifications}
+                onChange={() => handleToggle('pushNotifications')}
+                label="Push Notifications"
+              />
             </div>
           </div>
         </section>
 
-        {/* Account Settings */}
+        {/* Account */}
         <section className="px-4 py-6">
-          <h2 className="text-lg font-bold text-gray-900 mb-4">Account</h2>
-          <div className="space-y-4">
-            <button className="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-900 rounded-lg font-semibold transition">
+          <h2 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">Account</h2>
+          <div className="space-y-3">
+            <button className="w-full px-4 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg font-semibold transition text-left">
               Change Password
             </button>
-            <button className="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-900 rounded-lg font-semibold transition">
+            <button className="w-full px-4 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg font-semibold transition text-left">
               Download Your Data
             </button>
-            <button className="w-full px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg font-semibold transition">
+            <button className="w-full px-4 py-2 bg-red-50 dark:bg-red-950/30 hover:bg-red-100 dark:hover:bg-red-950/50 text-red-600 dark:text-red-400 rounded-lg font-semibold transition text-left">
               Deactivate Account
             </button>
+            {onLogout && (
+              <button
+                onClick={onLogout}
+                className="w-full px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg font-semibold transition"
+              >
+                Sign Out
+              </button>
+            )}
           </div>
         </section>
       </div>
 
-      {/* Save Button */}
-      <div className="sticky bottom-0 bg-white border-t border-gray-200 p-4">
+      {/* Save button */}
+      <div className="sticky bottom-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 p-4">
         <button
           onClick={handleSave}
-          className="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-full font-semibold transition"
+          className="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-semibold transition"
         >
           Save Changes
         </button>
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 2b3f35c..2f23a67 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -1,4 +1,4 @@
-import { Tweet, CreateTweetRequest, LoginRequest, SignupRequest, AuthResponse, User, FriendRequest, Location } from '../types';
+import { Tweet, CreateTweetRequest, LoginRequest, SignupRequest, AuthResponse, User, FriendRequest, Location, Message, Conversation, TrendingTopic } from '../types';
 
 // Use relative path so nginx can proxy it to the backend
 const API_URL = '/api';
@@ -220,5 +220,60 @@ export const api = {
       console.error('Get nearby users error:', error);
       throw error;
     }
-  }
+  },
+
+  // Message endpoints
+  async sendMessage(senderId: string, recipientId: string, content: string): Promise<Message> {
+    const response = await fetch(`${API_URL}/messages`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+      body: JSON.stringify({ sender_id: senderId, recipient_id: recipientId, content }),
+    });
+    if (!response.ok) throw new Error('Failed to send message');
+    return response.json();
+  },
+
+  async getConversations(userId: string): Promise<Conversation[]> {
+    try {
+      const response = await fetch(`${API_URL}/messages/conversations?user_id=${encodeURIComponent(userId)}`, {
+        headers: getAuthHeaders(),
+      });
+      if (!response.ok) throw new Error('Failed to fetch conversations');
+      const data = await response.json();
+      return data || [];
+    } catch (error) {
+      console.error('Get conversations error:', error);
+      return [];
+    }
+  },
+
+  async getConversation(user1: string, user2: string): Promise<Message[]> {
+    try {
+      const response = await fetch(
+        `${API_URL}/messages/conversation?user1=${encodeURIComponent(user1)}&user2=${encodeURIComponent(user2)}`,
+        { headers: getAuthHeaders() },
+      );
+      if (!response.ok) throw new Error('Failed to fetch conversation');
+      const data = await response.json();
+      return data || [];
+    } catch (error) {
+      console.error('Get conversation error:', error);
+      return [];
+    }
+  },
+
+  // Trending topics
+  async getTrendingTopics(): Promise<TrendingTopic[]> {
+    try {
+      const response = await fetch(`${API_URL}/trending`, {
+        headers: getAuthHeaders(),
+      });
+      if (!response.ok) return [];
+      const data = await response.json();
+      return data || [];
+    } catch (error) {
+      console.error('Get trending error:', error);
+      return [];
+    }
+  },
 };
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 6ad764a..d183a92 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -12,6 +12,17 @@
   }
 }
 
+/* Dark mode overrides for body background */
+.dark body {
+  background: #0f172a;
+  background-image: none;
+  color: #f1f5f9;
+}
+
+.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
+  color: #e2e8f0;
+}
+
 @layer components {
   .avatar-gradient {
     @apply bg-gradient-to-br from-blue-500 to-purple-500;
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 199b271..a812e67 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -61,3 +61,26 @@ export interface Location {
   place?: string;
   created_at: string;
 }
+
+export interface Message {
+  id: string;
+  sender_id: string;
+  recipient_id: string;
+  content: string;
+  created_at: string;
+  read_at?: string;
+}
+
+export interface Conversation {
+  partner_id: string;
+  partner_username: string;
+  last_message?: Message;
+  unread_count: number;
+}
+
+export interface TrendingTopic {
+  topic: string;
+  count: number;
+}
+
+export type Page = 'home' | 'explore' | 'messages' | 'notifications' | 'profile' | 'settings';
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index dca8ba0..6fa4d26 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",