diff --git a/www/cws.jpg b/www/cws.jpg
deleted file mode 100644
index 9732493..0000000
Binary files a/www/cws.jpg and /dev/null differ
diff --git a/www/index.html b/www/index.html
index 2b9b2d0..baa040e 100644
--- a/www/index.html
+++ b/www/index.html
@@ -1,32 +1,204 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>cws • home</title>
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap"
+            rel="stylesheet"
+        />
+        <style>
+            :root {
+                --bg: #f3f4f6;
+                --accent: #3b82f6;
+                --accent-soft: rgba(59, 130, 246, 0.08);
+                --text: #0f172a;
+                --muted: #6b7280;
+            }
 
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>cws</title>
-    <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="style.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap" rel="stylesheet" />
-</head>
+            * {
+                box-sizing: border-box;
+                margin: 0;
+                padding: 0;
+            }
 
-<body>
-    <main>
-        <h1>Hello from <span class="highlight">cws</span>!</h1>
-        <p>
-            Open an image
-            <a href="/cws.jpg" target="_blank" rel="noopener noreferrer">here</a>.
-        </p>
-    </main>
+            body {
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background:
+                    radial-gradient(
+                        circle at top left,
+                        #dbeafe 0,
+                        transparent 50%
+                    ),
+                    radial-gradient(
+                        circle at bottom right,
+                        #e5e7eb 0,
+                        transparent 55%
+                    ),
+                    var(--bg);
+                font-family:
+                    "Montserrat",
+                    system-ui,
+                    -apple-system,
+                    BlinkMacSystemFont,
+                    "Segoe UI",
+                    sans-serif;
+                color: var(--text);
+            }
 
-    <footer class="icon-credit">
-        <a target="_blank" href="https://icons8.com/icon/38796/linux">Linux</a>
-        icon by
-        <a target="_blank" href="https://icons8.com">Icons8</a>
-    </footer>
+            .wrapper {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 18px;
+                padding: 24px;
+                width: 100%;
+                text-align: left;
+            }
 
-</body>
+            main {
+                max-width: 560px;
+                width: 100%;
+            }
 
-</html>
\ No newline at end of file
+            .badge {
+                display: inline-flex;
+                align-items: center;
+                gap: 10px;
+                padding: 7px 14px;
+                border-radius: 999px;
+                background: var(--accent-soft);
+                color: var(--accent);
+                font-size: 11px;
+                text-transform: uppercase;
+                letter-spacing: 0.11em;
+                margin-bottom: 20px;
+                font-weight: 600;
+            }
+
+            .badge-dot {
+                width: 9px;
+                height: 9px;
+                border-radius: 999px;
+                background: var(--accent);
+                box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.22);
+            }
+
+            h1 {
+                font-size: 32px;
+                line-height: 1.2;
+                margin-bottom: 8px;
+            }
+
+            .highlight {
+                background: linear-gradient(115deg, #38bdf8, #3b82f6, #818cf8);
+                -webkit-background-clip: text;
+                color: transparent;
+            }
+
+            p {
+                font-size: 15px;
+                color: var(--muted);
+                margin-bottom: 16px;
+                line-height: 1.7;
+            }
+
+            .lead {
+                font-size: 16px;
+                margin-bottom: 10px;
+            }
+
+            .bg-orbit {
+                position: absolute;
+                width: 240px;
+                height: 240px;
+                border-radius: 50%;
+                border: 1px dashed rgba(148, 163, 184, 0.5);
+                top: -100px;
+                right: -60px;
+                opacity: 0.7;
+                pointer-events: none;
+            }
+
+            .bg-orbit-dot {
+                position: absolute;
+                width: 9px;
+                height: 9px;
+                border-radius: 50%;
+                background: #38bdf8;
+                box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);
+                top: 32%;
+                left: 12%;
+            }
+
+            footer.icon-credit {
+                font-size: 11px;
+                color: var(--muted);
+                text-align: center;
+                opacity: 0.9;
+            }
+
+            footer.icon-credit a {
+                color: var(--muted);
+                font-weight: 500;
+                text-decoration: none;
+            }
+
+            footer.icon-credit a:hover {
+                color: var(--accent);
+                text-decoration: underline;
+            }
+
+            @media (max-width: 480px) {
+                h1 {
+                    font-size: 26px;
+                }
+
+                .lead {
+                    font-size: 15px;
+                }
+            }
+        </style>
+    </head>
+
+    <body>
+        <div class="bg-orbit">
+            <div class="bg-orbit-dot"></div>
+        </div>
+
+        <div class="wrapper">
+            <main>
+                <div class="badge">
+                    <span class="badge-dot"></span>
+                    <span>cws is running</span>
+                </div>
+
+                <h1>Hello from <span class="highlight">cws</span>!</h1>
+                <p class="lead">
+                    Your lightweight C web server is up and ready.
+                </p>
+                <p>
+                    You’re seeing the default homepage served by
+                    <strong>cws</strong>. Replace this file or point your
+                    virtual host to a different root directory to serve your own
+                    content.
+                </p>
+            </main>
+
+            <footer class="icon-credit">
+                <a target="_blank" href="https://icons8.com/icon/38796/linux"
+                    >Linux</a
+                >
+                icon by
+                <a target="_blank" href="https://icons8.com">Icons8</a>
+            </footer>
+        </div>
+    </body>
+</html>
diff --git a/www/pages/404.html b/www/pages/404.html
new file mode 100644
index 0000000..bacaf36
--- /dev/null
+++ b/www/pages/404.html
@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>404 • Page not found</title>
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <style>
+            :root {
+                --bg: #f9fafb;
+                --accent: #f97316;
+                --accent-soft: rgba(249, 115, 22, 0.14);
+                --text: #0f172a;
+                --muted: #6b7280;
+            }
+
+            * {
+                box-sizing: border-box;
+                margin: 0;
+                padding: 0;
+            }
+
+            body {
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background:
+                    radial-gradient(circle at top, #ffedd5 0, transparent 55%),
+                    var(--bg);
+                font-family:
+                    system-ui,
+                    -apple-system,
+                    BlinkMacSystemFont,
+                    "Segoe UI",
+                    sans-serif;
+                color: var(--text);
+                padding: 16px;
+            }
+
+            .wrap {
+                max-width: 520px;
+                width: 100%;
+                text-align: center;
+            }
+
+            .badge {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                padding: 6px 12px;
+                border-radius: 999px;
+                background: var(--accent-soft);
+                color: var(--accent);
+                font-size: 11px;
+                text-transform: uppercase;
+                letter-spacing: 0.12em;
+                margin-bottom: 20px;
+            }
+
+            .badge-dot {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: var(--accent);
+                box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.35);
+            }
+
+            .code {
+                font-size: 60px;
+                font-weight: 900;
+                letter-spacing: 0.18em;
+                margin-bottom: 10px;
+                text-transform: uppercase;
+                background: linear-gradient(120deg, #fbbf24, #f97316, #ec4899);
+                -webkit-background-clip: text;
+                color: transparent;
+            }
+
+            h1 {
+                font-size: 28px;
+                margin-bottom: 10px;
+            }
+
+            p {
+                font-size: 15px;
+                color: var(--muted);
+                margin-bottom: 24px;
+                line-height: 1.6;
+            }
+
+            .actions {
+                display: flex;
+                justify-content: center;
+            }
+
+            .btn-primary {
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 999px;
+                padding: 10px 18px;
+                font-size: 13px;
+                font-weight: 600;
+                text-decoration: none;
+                border: none;
+                cursor: pointer;
+                background: linear-gradient(135deg, #f97316, #ec4899);
+                color: #fff7ed;
+                box-shadow: 0 10px 22px rgba(236, 72, 153, 0.3);
+                transition:
+                    transform 120ms ease,
+                    box-shadow 120ms ease,
+                    filter 120ms ease;
+            }
+
+            .btn-primary:hover {
+                transform: translateY(-1px);
+                box-shadow: 0 14px 30px rgba(236, 72, 153, 0.4);
+                filter: brightness(1.03);
+            }
+
+            @media (max-width: 480px) {
+                .code {
+                    font-size: 50px;
+                }
+                h1 {
+                    font-size: 24px;
+                }
+                p {
+                    font-size: 14px;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="wrap">
+            <div class="badge">
+                <span class="badge-dot"></span>
+                <span>Page not found</span>
+            </div>
+
+            <div class="code">404</div>
+            <h1>You’ve reached an empty corner of the internet.</h1>
+            <p>
+                The page you’re looking for doesn’t exist (anymore). It may have
+                been moved, deleted, or the link is just a bit outdated.
+            </p>
+        </div>
+    </body>
+</html>
diff --git a/www/pages/500.html b/www/pages/500.html
new file mode 100644
index 0000000..8cd69df
--- /dev/null
+++ b/www/pages/500.html
@@ -0,0 +1,171 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>500 • Internal server error</title>
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <style>
+            :root {
+                --bg: #020617;
+                --accent: #38bdf8; /* light blue */
+                --accent-soft: rgba(56, 189, 248, 0.16);
+                --text: #e5e7eb;
+                --muted: #9ca3af;
+            }
+
+            * {
+                box-sizing: border-box;
+                margin: 0;
+                padding: 0;
+            }
+
+            body {
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: radial-gradient(
+                    circle at top,
+                    #0f172a 0,
+                    var(--bg) 60%
+                );
+                font-family:
+                    system-ui,
+                    -apple-system,
+                    BlinkMacSystemFont,
+                    "Segoe UI",
+                    sans-serif;
+                color: var(--text);
+                padding: 16px;
+            }
+
+            .wrap {
+                max-width: 520px;
+                width: 100%;
+                text-align: center;
+                position: relative;
+            }
+
+            .badge {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                padding: 6px 13px;
+                border-radius: 999px;
+                background: var(--accent-soft);
+                color: var(--accent);
+                font-size: 11px;
+                text-transform: uppercase;
+                letter-spacing: 0.14em;
+                margin-bottom: 22px;
+            }
+
+            .badge-dot {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: var(--accent);
+                box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.35);
+            }
+
+            .code {
+                font-size: 64px;
+                font-weight: 900;
+                letter-spacing: 0.22em;
+                margin-bottom: 14px;
+                text-transform: uppercase;
+                background: linear-gradient(120deg, #e0f2fe, #38bdf8, #818cf8);
+                -webkit-background-clip: text;
+                color: transparent;
+            }
+
+            h1 {
+                font-size: 32px;
+                margin-bottom: 12px;
+            }
+
+            p {
+                font-size: 15px;
+                color: var(--muted);
+                margin-bottom: 26px;
+                line-height: 1.7;
+            }
+
+            .actions {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                max-width: 260px;
+                margin: 0 auto;
+            }
+
+            .btn-primary,
+            .btn-ghost {
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 999px;
+                padding: 11px 18px;
+                font-size: 13px;
+                font-weight: 600;
+                text-decoration: none;
+                border: none;
+                cursor: pointer;
+                transition:
+                    transform 120ms ease,
+                    box-shadow 120ms ease,
+                    background 120ms ease,
+                    color 120ms ease,
+                    border-color 120ms ease;
+                outline: none;
+            }
+
+            .btn-primary {
+                background: linear-gradient(135deg, #38bdf8, #818cf8);
+                color: #020617;
+                box-shadow: 0 12px 26px rgba(56, 189, 248, 0.5);
+            }
+
+            .btn-primary:hover {
+                transform: translateY(-1px) scale(1.01);
+                box-shadow: 0 16px 34px rgba(56, 189, 248, 0.6);
+            }
+
+            .btn-ghost {
+                background: transparent;
+                color: var(--muted);
+                border: 1px solid rgba(148, 163, 184, 0.5);
+            }
+
+            .btn-ghost:hover {
+                background: rgba(15, 23, 42, 0.9);
+                color: var(--text);
+                border-color: rgba(148, 163, 184, 0.85);
+            }
+
+            @media (max-width: 480px) {
+                .code {
+                    font-size: 52px;
+                }
+                h1 {
+                    font-size: 26px;
+                }
+                p {
+                    font-size: 14px;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="wrap">
+            <div class="badge">
+                <span class="badge-dot"></span>
+                <span>Internal server error</span>
+            </div>
+
+            <div class="code">500</div>
+            <h1>Something went wrong on our side.</h1>
+            <p>Try again in a moment or head back home while we fix things.</p>
+        </div>
+    </body>
+</html>
diff --git a/www/style.css b/www/style.css
deleted file mode 100644
index 42571f2..0000000
--- a/www/style.css
+++ /dev/null
@@ -1,85 +0,0 @@
-body {
-    margin: 0;
-    height: 100vh;
-    font-family: "Montserrat", sans-serif;
-    background: linear-gradient(135deg, #3a8ddb, #6dd5fa);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: white;
-    animation: fadeIn 1s ease-out;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-main {
-    text-align: center;
-    padding: 1rem;
-}
-
-h1 {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-    font-weight: 800;
-}
-
-.highlight {
-    color: #d1b3ff;
-}
-
-p {
-    font-size: 1.2rem;
-    font-weight: 400;
-    margin: 0;
-}
-
-a {
-    color: #ffffff;
-    font-weight: 600;
-    text-decoration: underline;
-    transition: color 0.3s;
-}
-
-a:hover {
-    color: #ffe678;
-}
-
-.icon-credit {
-    position: absolute;
-    bottom: 10px;
-    width: 100%;
-    text-align: center;
-    font-size: 0.8rem;
-    color: #cccccc;
-}
-
-.icon-credit a {
-    color: #cccccc;
-    text-decoration: none;
-    transition: color 0.3s;
-}
-
-.icon-credit a:hover {
-    color: #ffffff;
-}
-
-/* Mobile tweaks */
-@media (max-width: 480px) {
-    h1 {
-        font-size: 2.2rem;
-    }
-
-    p {
-        font-size: 1rem;
-    }
-}
\ No newline at end of file
