diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8317518..4223436 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,6 @@
-import { Routes, Route, Link, Navigate } from "react-router-dom";
+import { Routes, Route, Navigate } from "react-router-dom";
 import { useAuth } from "./contexts/AuthContext";
+import Navbar from "./components/Navbar";
 import Login from "./pages/Login";
 import Signup from "./pages/Signup";
 import Addresses from "./pages/Addresses";
@@ -7,9 +8,8 @@ import Alerts from "./pages/Alerts";
 import AlertHistory from "./pages/AlertHistory";
 
 export default function App() {
-    const { currentUser, logout } = useAuth();
+    const { currentUser } = useAuth();
 
-    // Show login/signup routes if not authenticated
     if (!currentUser) {
         return (
             <Routes>
@@ -20,51 +20,9 @@ export default function App() {
         );
     }
 
-    // Show main app if authenticated
     return (
-        <div style={{ padding: "1rem" }}>
-            <nav
-                style={{
-                    marginBottom: "1rem",
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                }}
-            >
-                <div>
-                    <Link to="/addresses">Addresses</Link>
-                    {" | "}
-                    <Link to="/alerts">Alerts</Link>
-                    {" | "}
-                    <Link to="/history">History</Link>
-                </div>
-                <div
-                    style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "1rem",
-                    }}
-                >
-                    <span style={{ fontSize: "0.9rem", color: "#999" }}>
-                        {currentUser.email}
-                    </span>
-                    <button
-                        onClick={logout}
-                        style={{
-                            padding: "0.5rem 1rem",
-                            fontSize: "0.9rem",
-                            backgroundColor: "#333",
-                            color: "white",
-                            border: "1px solid #555",
-                            borderRadius: "4px",
-                            cursor: "pointer",
-                        }}
-                    >
-                        Logout
-                    </button>
-                </div>
-            </nav>
-
+        <div>
+            <Navbar />
             <Routes>
                 <Route path="/" element={<Addresses />} />
                 <Route path="/addresses" element={<Addresses />} />
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
new file mode 100644
index 0000000..f5cad23
--- /dev/null
+++ b/frontend/src/components/Navbar.jsx
@@ -0,0 +1,85 @@
+import { Link, useLocation } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext";
+
+const navLinks = [
+  { to: "/addresses", label: "Addresses" },
+  { to: "/alerts", label: "Configure Alerts" },
+  { to: "/history", label: "Alert History" },
+];
+
+export default function Navbar() {
+  const { currentUser, logout } = useAuth();
+  const location = useLocation();
+
+  if (!currentUser) return null;
+
+  return (
+    <nav style={{
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: "1rem 2rem",
+      marginBottom: "1.5rem",
+      backgroundColor: "#1a1a1a",
+      borderBottom: "1px solid #333",
+    }}>
+      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+        <span style={{
+          fontWeight: 700,
+          fontSize: "1.1rem",
+          color: "#fff",
+          marginRight: "2rem",
+          letterSpacing: "0.5px",
+        }}>
+          Koin Ping
+        </span>
+
+        <div style={{ display: "flex", gap: "0.25rem" }}>
+          {navLinks.map(({ to, label }) => {
+            const isActive = location.pathname === to;
+            return (
+              <Link
+                key={to}
+                to={to}
+                style={{
+                  padding: "0.5rem 1.25rem",
+                  borderRadius: "6px",
+                  textDecoration: "none",
+                  fontSize: "1.425rem",
+                  fontWeight: isActive ? 600 : 200,
+                  color: isActive ? "#fff" : "#999",
+                  backgroundColor: isActive ? "#333" : "transparent",
+                  transition: "all 0.15s ease",
+                }}
+              >
+                {label}
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center", gap: "1.25rem" }}>
+        <span style={{ fontSize: "1.275rem", color: "#777" }}>
+          {currentUser.email}
+        </span>
+        <button
+          onClick={logout}
+          style={{
+            padding: "0.4rem 1rem",
+            fontSize: "1.275rem",
+            fontWeight: 400,
+            backgroundColor: "transparent",
+            color: "#999",
+            border: "1px solid #444",
+            borderRadius: "6px",
+            cursor: "pointer",
+            transition: "all 0.15s ease",
+          }}
+        >
+          Logout
+        </button>
+      </div>
+    </nav>
+  );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..79d770c
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,33 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 14px;
+}
+
+body {
+  font-family: 'Nunito', sans-serif;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Nunito', sans-serif;
+  font-weight: 200;
+}
+
+input, select, textarea, button {
+  font-family: 'Nunito', sans-serif;
+  font-size: 1rem;
+  font-weight: 200;
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index f4417d1..00913df 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { AuthProvider } from "./contexts/AuthContext";
 import App from "./App";
+import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
diff --git a/frontend/src/pages/Addresses.jsx b/frontend/src/pages/Addresses.jsx
index 9e33911..4783342 100644
--- a/frontend/src/pages/Addresses.jsx
+++ b/frontend/src/pages/Addresses.jsx
@@ -51,7 +51,7 @@ export default function Addresses() {
                 {loading && <p>Loading addresses...</p>}
                 {error && <p style={{ color: "red" }}>Error: {error}</p>}
                 {!loading && !error && addresses.length === 0 && (
-                    <p style={{ color: "#666" }}>
+                    <p style={{ color: "#808080" }}>
                         No addresses tracked yet. Add one above to get started.
                     </p>
                 )}
@@ -63,8 +63,9 @@ export default function Addresses() {
                                 style={{
                                     padding: "1rem",
                                     marginBottom: "0.5rem",
-                                    border: "1px solid #ddd",
+                                    border: "1px solid #444",
                                     borderRadius: "4px",
+                                    backgroundColor: "#333",
                                 }}
                             >
                                 <div
@@ -78,7 +79,8 @@ export default function Addresses() {
                                 <div
                                     style={{
                                         fontFamily: "monospace",
-                                        fontSize: "0.9rem",
+                                        fontSize: "1.035rem",
+                                        color: "#b3b3b3",
                                     }}
                                 >
                                     {addr.address}
diff --git a/frontend/src/pages/AlertHistory.jsx b/frontend/src/pages/AlertHistory.jsx
index f9d76fc..e2af5a4 100644
--- a/frontend/src/pages/AlertHistory.jsx
+++ b/frontend/src/pages/AlertHistory.jsx
@@ -39,7 +39,7 @@ export default function AlertHistory() {
             <h1>Recent Alerts</h1>
 
             {alertEvents.length === 0 ? (
-                <p style={{ color: "#666" }}>No alerts yet</p>
+                <p style={{ color: "#808080" }}>No alerts yet</p>
             ) : (
                 <ul style={{ listStyle: "none", padding: 0 }}>
                     {alertEvents.map((event) => (
@@ -48,8 +48,9 @@ export default function AlertHistory() {
                             style={{
                                 padding: "1rem",
                                 marginBottom: "0.75rem",
-                                border: "1px solid #ddd",
+                                border: "1px solid #444",
                                 borderRadius: "4px",
+                                backgroundColor: "#333",
                             }}
                         >
                             <div style={{ marginBottom: "0.5rem" }}>
@@ -58,15 +59,15 @@ export default function AlertHistory() {
                             {event.address_label && (
                                 <div
                                     style={{
-                                        fontSize: "0.9rem",
-                                        color: "#666",
+                                    fontSize: "1.035rem",
+                                    color: "#808080",
                                         marginBottom: "0.25rem",
                                     }}
                                 >
                                     Address: {event.address_label}
                                 </div>
                             )}
-                            <small style={{ color: "#999" }}>
+                            <small style={{ color: "#b3b3b3" }}>
                                 {formatTimestamp(event.timestamp)}
                             </small>
                         </li>
diff --git a/frontend/src/pages/Alerts.jsx b/frontend/src/pages/Alerts.jsx
index 529420c..b3676f2 100644
--- a/frontend/src/pages/Alerts.jsx
+++ b/frontend/src/pages/Alerts.jsx
@@ -250,15 +250,15 @@ export default function Alerts() {
                                 style={{
                                     padding: "1rem",
                                     marginBottom: "2rem",
-                                    backgroundColor: "#2a2a2a",
+                                    backgroundColor: "#333",
                                     borderRadius: "4px",
                                     border: "1px solid #444",
                                 }}
                             >
                                 <div
                                     style={{
-                                        fontSize: "0.9rem",
-                                        color: "#999",
+                                        fontSize: "1.035rem",
+                                        color: "#b3b3b3",
                                     }}
                                 >
                                     Managing alerts for:
@@ -274,8 +274,8 @@ export default function Alerts() {
                                 <div
                                     style={{
                                         fontFamily: "monospace",
-                                        fontSize: "0.9rem",
-                                        color: "#999",
+                                        fontSize: "1.035rem",
+                                        color: "#b3b3b3",
                                     }}
                                 >
                                     {selectedAddress.address}
@@ -316,7 +316,7 @@ export default function Alerts() {
                                                     marginBottom: "0.5rem",
                                                     border: "1px solid #444",
                                                     borderRadius: "4px",
-                                                    backgroundColor: "#2a2a2a",
+                                                                    backgroundColor: "#333",
                                                     opacity: alert.enabled
                                                         ? 1
                                                         : 0.6,
@@ -348,8 +348,8 @@ export default function Alerts() {
                                                             <div
                                                                 style={{
                                                                     fontSize:
-                                                                        "0.9rem",
-                                                                    color: "#999",
+                                                                        "1.035rem",
+                                                                    color: "#b3b3b3",
                                                                 }}
                                                             >
                                                                 Threshold:{" "}
@@ -362,8 +362,8 @@ export default function Alerts() {
                                                         <div
                                                             style={{
                                                                 fontSize:
-                                                                    "0.85rem",
-                                                                color: "#666",
+                                                                    "0.978rem",
+                                                                color: "#808080",
                                                                 marginTop:
                                                                     "0.25rem",
                                                             }}
@@ -451,7 +451,7 @@ export default function Alerts() {
                         style={{
                             marginBottom: "2rem",
                             padding: "1rem",
-                            backgroundColor: "#f5f5f5",
+                            backgroundColor: "#333",
                             borderRadius: "4px",
                         }}
                     >
@@ -480,8 +480,8 @@ export default function Alerts() {
                         </label>
                         <div
                             style={{
-                                fontSize: "0.85rem",
-                                color: "#666",
+                                fontSize: "0.978rem",
+                                color: "#808080",
                                 marginTop: "0.5rem",
                                 marginLeft: "26px",
                             }}
@@ -524,8 +524,8 @@ export default function Alerts() {
                             />
                             <div
                                 style={{
-                                    fontSize: "0.85rem",
-                                    color: "#999",
+                                    fontSize: "0.978rem",
+                                    color: "#b3b3b3",
                                     marginTop: "0.5rem",
                                 }}
                             >
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 1842833..3af2e66 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -81,7 +81,7 @@ export default function Login() {
                             width: "100%",
                             padding: "0.5rem",
                             fontSize: "1rem",
-                            backgroundColor: "#1a1a1a",
+                            backgroundColor: "#242424",
                             border: "1px solid #444",
                             borderRadius: "4px",
                             color: "white",
@@ -103,7 +103,7 @@ export default function Login() {
                             width: "100%",
                             padding: "0.5rem",
                             fontSize: "1rem",
-                            backgroundColor: "#1a1a1a",
+                            backgroundColor: "#242424",
                             border: "1px solid #444",
                             borderRadius: "4px",
                             color: "white",
@@ -131,7 +131,7 @@ export default function Login() {
             </form>
 
             <div style={{ marginTop: "1.5rem", textAlign: "center" }}>
-                <p style={{ color: "#999" }}>
+                <p style={{ color: "#b3b3b3" }}>
                     Don't have an account?{" "}
                     <Link
                         to="/signup"
diff --git a/frontend/src/pages/Signup.jsx b/frontend/src/pages/Signup.jsx
index b4ee96a..f854af2 100644
--- a/frontend/src/pages/Signup.jsx
+++ b/frontend/src/pages/Signup.jsx
@@ -101,7 +101,7 @@ export default function Signup() {
                             width: "100%",
                             padding: "0.5rem",
                             fontSize: "1rem",
-                            backgroundColor: "#1a1a1a",
+                            backgroundColor: "#242424",
                             border: "1px solid #444",
                             borderRadius: "4px",
                             color: "white",
@@ -123,7 +123,7 @@ export default function Signup() {
                             width: "100%",
                             padding: "0.5rem",
                             fontSize: "1rem",
-                            backgroundColor: "#1a1a1a",
+                            backgroundColor: "#242424",
                             border: "1px solid #444",
                             borderRadius: "4px",
                             color: "white",
@@ -145,7 +145,7 @@ export default function Signup() {
                             width: "100%",
                             padding: "0.5rem",
                             fontSize: "1rem",
-                            backgroundColor: "#1a1a1a",
+                            backgroundColor: "#242424",
                             border: "1px solid #444",
                             borderRadius: "4px",
                             color: "white",
@@ -173,7 +173,7 @@ export default function Signup() {
             </form>
 
             <div style={{ marginTop: "1.5rem", textAlign: "center" }}>
-                <p style={{ color: "#999" }}>
+                <p style={{ color: "#b3b3b3" }}>
                     Already have an account?{" "}
                     <Link
                         to="/login"