diff --git a/internal/provider/providers/porkbun/provider.go b/internal/provider/providers/porkbun/provider.go
index 45d32534a..a2702fde4 100644
--- a/internal/provider/providers/porkbun/provider.go
+++ b/internal/provider/providers/porkbun/provider.go
@@ -103,7 +103,7 @@ func (p *Provider) HTML() models.HTMLRow {
 	return models.HTMLRow{
 		Domain:    fmt.Sprintf("<a href=\"http://%s\">%s</a>", p.BuildDomainName(), p.BuildDomainName()),
 		Owner:     p.Owner(),
-		Provider:  "<a href=\"https://www.porkbun.com/\">Porkbun DNS</a>",
+		Provider:  "<a href=\"https://www.porkbun.com/\">Porkbun</a>",
 		IPVersion: p.ipVersion.String(),
 	}
 }
diff --git a/internal/records/html.go b/internal/records/html.go
index e0c6b033e..f09072862 100644
--- a/internal/records/html.go
+++ b/internal/records/html.go
@@ -14,22 +14,34 @@ func (r *Record) HTML(now time.Time) models.HTMLRow {
 	row := r.Provider.HTML()
 	message := r.Message
 	if r.Status == constants.UPTODATE {
-		message = "no IP change for " + r.History.GetDurationSinceSuccess(now)
-	}
-	if message != "" {
-		message = fmt.Sprintf("(%s)", message)
+		message = "No changes needed - IP stable for " + r.History.GetDurationSinceSuccess(now)
 	}
 	if r.Status == "" {
 		row.Status = NotAvailable
 	} else {
-		row.Status = fmt.Sprintf("%s %s, %s",
-			convertStatus(r.Status),
-			message,
-			time.Since(r.Time).Round(time.Second).String()+" ago")
+		timeSince := time.Since(r.Time).Round(time.Second)
+		var timeDisplay string
+		if timeSince < time.Minute {
+			timeDisplay = "Just now"
+		} else if timeSince < time.Hour {
+			timeDisplay = fmt.Sprintf("%d min ago", int(timeSince.Minutes()))
+		} else if timeSince < 24*time.Hour {
+			timeDisplay = fmt.Sprintf("%d hrs ago", int(timeSince.Hours()))
+		} else {
+			timeDisplay = fmt.Sprintf("%d days ago", int(timeSince.Hours()/24))
+		}
+		
+		statusBadge := convertStatus(r.Status)
+		if message != "" {
+			statusBadge = convertStatusWithTooltip(r.Status, message)
+		}
+		
+		statusHTML := fmt.Sprintf(`%s <span class="status-timestamp">%s</span>`, statusBadge, timeDisplay)
+		row.Status = statusHTML
 	}
 	currentIP := r.History.GetCurrentIP()
 	if currentIP.IsValid() {
-		row.CurrentIP = `<a href="https://ipinfo.io/` + currentIP.String() + `">` + currentIP.String() + "</a>"
+		row.CurrentIP = `<a href="https://ipinfo.io/` + currentIP.String() + `" class="ip-link" target="_blank" rel="noopener noreferrer">` + currentIP.String() + ` <svg class="ipinfo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7z" fill="currentColor"/></svg></a>`
 	} else {
 		row.CurrentIP = NotAvailable
 	}
@@ -53,15 +65,32 @@ func (r *Record) HTML(now time.Time) models.HTMLRow {
 func convertStatus(status models.Status) string {
 	switch status {
 	case constants.SUCCESS:
-		return `<span class="success">Success</span>`
+		return `<span class="success">Updated</span>`
+	case constants.FAIL:
+		return `<span class="error">Failed</span>`
+	case constants.UPTODATE:
+		return `<span class="uptodate">Current</span>`
+	case constants.UPDATING:
+		return `<span class="updating">Syncing</span>`
+	case constants.UNSET:
+		return `<span class="unset">Pending</span>`
+	default:
+		return "Unknown status"
+	}
+}
+
+func convertStatusWithTooltip(status models.Status, message string) string {
+	switch status {
+	case constants.SUCCESS:
+		return fmt.Sprintf(`<span class="success" data-tooltip="%s">Updated</span>`, message)
 	case constants.FAIL:
-		return `<span class="error">Failure</span>`
+		return fmt.Sprintf(`<span class="error" data-tooltip="%s">Failed</span>`, message)
 	case constants.UPTODATE:
-		return `<span class="uptodate">Up to date</span>`
+		return fmt.Sprintf(`<span class="uptodate" data-tooltip="%s">Current</span>`, message)
 	case constants.UPDATING:
-		return `<span class="updating">Updating</span>`
+		return fmt.Sprintf(`<span class="updating" data-tooltip="%s">Syncing</span>`, message)
 	case constants.UNSET:
-		return `<span class="unset">Unset</span>`
+		return fmt.Sprintf(`<span class="unset" data-tooltip="%s">Pending</span>`, message)
 	default:
 		return "Unknown status"
 	}
diff --git a/internal/server/index.go b/internal/server/index.go
index 090721572..cb0397f20 100644
--- a/internal/server/index.go
+++ b/internal/server/index.go
@@ -6,12 +6,14 @@ import (
 	"github.com/qdm12/ddns-updater/internal/models"
 )
 
-func (h *handlers) index(w http.ResponseWriter, _ *http.Request) {
+func (h *handlers) index(w http.ResponseWriter, r *http.Request) {
 	var htmlData models.HTMLData
 	for _, record := range h.db.SelectAll() {
 		row := record.HTML(h.timeNow())
 		htmlData.Rows = append(htmlData.Rows, row)
 	}
+
+
 	err := h.indexTemplate.ExecuteTemplate(w, "index.html", htmlData)
 	if err != nil {
 		httpError(w, http.StatusInternalServerError, "failed generating webpage: "+err.Error())
diff --git a/internal/server/ui/index.html b/internal/server/ui/index.html
index 92c88fbfb..fba594b9c 100644
--- a/internal/server/ui/index.html
+++ b/internal/server/ui/index.html
@@ -11,46 +11,125 @@
 </head>
 
 <body>
-  <table role="table">
-    <thead>
-      <tr>
-        <th>Domain</th>
-        <th>Owner</th>
-        <th>Provider</th>
-        <th>IP Version</th>
-        <th>Update Status</th>
-        <th>Current IP</th>
-        <th>Previous IPs<small> (reverse chronological order)</small></th>
-      </tr>
-    </thead>
-    <tbody>
-      {{range .Rows}}
-      <tr>
-        <td data-label="Domain">{{.Domain}}</td>
-        <td data-label="Owner">{{.Owner}}</td>
-        <td data-label="Provider">{{.Provider}}</td>
-        <td data-label="IP Version">{{.IPVersion}}</td>
-        <td data-label="Update Status">{{.Status}}</td>
-        <td data-label="Current IP">{{.CurrentIP}}</td>
-        <td data-label="Previous IPs">{{.PreviousIPs}}</td>
-      </tr>
-      {{end}}
-    </tbody>
-  </table>
-  <footer>
-    <div>
-      <a href="https://github.com/qdm12/ddns-updater" class="text-big">
-        <svg class="github-icon" height="1em" aria-hidden="true" viewBox="0 0 16 16" version="1.1"
-          data-view-component="true">
-          <path
-            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
-          </path>
-        </svg>
-      </a>
-    </div>
-    <div>by <a href="https://github.com/qdm12">Quentin McGaw</a> / UI reworked by <a
-        href="https://github.com/fuse314">Gottfried Mayer</a></div>
-  </footer>
+  <div class="container">
+    <header class="header">
+      <div class="header-content">
+        <div class="title-section">
+          <h1 class="title">
+            <svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 2L3 7L12 12L21 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+              <path d="M3 17L12 22L21 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+              <path d="M3 12L12 17L21 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+            </svg>
+            DDNS Updater
+          </h1>
+          <p class="subtitle">Dynamic DNS Management Dashboard</p>
+        </div>
+        <div class="header-controls">
+          <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
+            <svg class="theme-icon sun-icon" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" />
+              <path
+                d="m12 1 0 2m0 18 0 2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12l2 0m18 0 2 0M4.22 19.78l1.42-1.42m12.72-12.72 1.42-1.42"
+                stroke="currentColor" stroke-width="2" />
+            </svg>
+            <svg class="theme-icon moon-icon" viewBox="0 0 24 24" fill="none">
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" />
+            </svg>
+          </button>
+          <button class="refresh-btn" onclick="window.location.reload()" aria-label="Refresh page">
+            <svg viewBox="0 0 24 24" fill="none">
+              <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M21 3v5h-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round" />
+              <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M3 21v-5h5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <main class="main-content">
+      <div class="table-container">
+        <table class="modern-table" role="table" aria-label="DDNS Records Status">
+          <thead>
+            <tr>
+              <th scope="col">Domain</th>
+              <th scope="col">Owner</th>
+              <th scope="col">Provider</th>
+              <th scope="col">IP Version</th>
+              <th scope="col">Status</th>
+              <th scope="col">Current IP</th>
+              <th scope="col">Previous IPs</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{range .Rows}}
+            <tr>
+              <td data-label="Domain">{{.Domain}}</td>
+              <td data-label="Owner">{{.Owner}}</td>
+              <td data-label="Provider">{{.Provider}}</td>
+              <td data-label="IP Version">
+                {{if eq .IPVersion "ipv4 or ipv6"}}
+                  <span class="ip-version-badge" role="img" aria-label="IPv4 supported">ipv4</span>
+                  <span class="ip-version-badge ipv6" role="img" aria-label="IPv6 supported">ipv6</span>
+                {{else}}
+                  <span class="ip-version-badge{{if eq .IPVersion "ipv6"}} ipv6{{end}}" role="img" aria-label="{{.IPVersion}} supported">{{.IPVersion}}</span>
+                {{end}}
+              </td>
+              <td data-label="Status">{{.Status}}</td>
+              <td data-label="Current IP">{{.CurrentIP}}</td>
+              <td data-label="Previous IPs">{{.PreviousIPs}}</td>
+            </tr>
+            {{end}}
+          </tbody>
+        </table>
+      </div>
+    </main>
+    <footer class="footer">
+      <div class="footer-content">
+        <div class="footer-links">
+          <a href="https://github.com/qdm12/ddns-updater" class="footer-link">
+            <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
+              <path
+                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
+              </path>
+            </svg>
+            GitHub
+          </a>
+        </div>
+      </div>
+    </footer>
+  </div>
+
+  <script>
+    // Dark mode toggle functionality
+    const themeToggle = document.getElementById('themeToggle');
+    const body = document.body;
+
+    // Check for saved theme preference or default to system preference
+    const savedTheme = localStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    if (savedTheme) {
+      body.setAttribute('data-theme', savedTheme);
+    } else if (systemPrefersDark) {
+      body.setAttribute('data-theme', 'dark');
+    }
+
+    themeToggle.addEventListener('click', () => {
+      const currentTheme = body.getAttribute('data-theme');
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+      body.setAttribute('data-theme', newTheme);
+      localStorage.setItem('theme', newTheme);
+    });
+
+  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/internal/server/ui/static/styles.css b/internal/server/ui/static/styles.css
index 3f0eb5f54..dd9a71f47 100644
--- a/internal/server/ui/static/styles.css
+++ b/internal/server/ui/static/styles.css
@@ -1,181 +1,1031 @@
+/* ==========================================================================
+   CSS Custom Properties for Design System
+   ========================================================================== */
+
 :root {
-  --page-background: #fff;
-  --table-background: #eee;
-  --background-zebra: #ddd;
-  --background-hover: #e9e9f9;
-  --text-color: #000;
-  --border-color: #666;
-  --link-color: #039;
-  --link-color-hover: #36c;
-  --success-color: #181;
-  --warn-color: #951;
-  --error-color: #811;
-  --progress-color: #818;
-  --footer-background: #eee;
-  --footer-link-color: #666;
-  --footer-link-color-hover: #777;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --page-background: #000;
-    --table-background: #111;
-    --background-zebra: #222;
-    --background-hover: #191929;
-    --text-color: #ddd;
-    --border-color: #aaa;
-    --link-color: #9cf;
-    --link-color-hover: #69c;
-    --success-color: #9f9;
-    --warn-color: #fb8;
-    --error-color: #f88;
-    --progress-color: #c7c;
-    --footer-background: #111;
-    --footer-link-color: #999;
-    --footer-link-color-hover: #888;
-  }
-}
-
-html,
-body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 16px;
-  background-color: var(--page-background);
-  color: var(--text-color);
+  /* Color Palette - Light Theme */
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f8fafc;
+  --color-bg-tertiary: #f1f5f9;
+  --color-bg-elevated: #ffffff;
+  --color-bg-overlay: rgb(255 255 255 / 0.95);
+
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-tertiary: #64748b;
+  --color-text-muted: #94a3b8;
+
+  --color-border-primary: #e2e8f0;
+  --color-border-secondary: #cbd5e1;
+  --color-border-accent: #3b82f6;
+
+  --color-accent-primary: #3b82f6;
+  --color-accent-hover: #2563eb;
+  --color-accent-light: #dbeafe;
+
+  --color-success: #10b981;
+  --color-success-light: #d1fae5;
+  --color-warning: #f59e0b;
+  --color-warning-light: #fef3c7;
+  --color-error: #ef4444;
+  --color-error-light: #fee2e2;
+  --color-info: #8b5cf6;
+  --color-info-light: #ede9fe;
+
+  /* Elevation System */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Border Radius Scale */
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+
+  /* Spacing Scale */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* Typography Scale */
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+
+  /* Timing Functions */
+  --transition-fast: 150ms;
+  --transition-normal: 200ms;
+  --transition-slow: 300ms;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Dark Theme Override */
+[data-theme="dark"] {
+  --color-bg-primary: #0f172a;
+  --color-bg-secondary: #1e293b;
+  --color-bg-tertiary: #334155;
+  --color-bg-elevated: #1e293b;
+  --color-bg-overlay: rgb(15 23 42 / 0.95);
+
+  --color-text-primary: #f8fafc;
+  --color-text-secondary: #cbd5e1;
+  --color-text-tertiary: #94a3b8;
+  --color-text-muted: #64748b;
+
+  --color-border-primary: #334155;
+  --color-border-secondary: #475569;
+
+  --color-accent-hover: #60a5fa;
+  --color-accent-light: #1e3a8a;
+
+  --color-success-light: #064e3b;
+  --color-warning-light: #451a03;
+  --color-error-light: #450a0a;
+  --color-info-light: #3c1d5b;
+
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+}
+
+/* ==========================================================================
+   Base Styles & CSS Reset
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
   margin: 0;
-  padding: 0.5rem;
+  padding: 0;
 }
 
-table {
-  border-collapse: collapse;
-  border-radius: 0.3rem;
+html {
+  scroll-behavior: smooth;
+  font-size: 100%;
+  /* Use browser default 16px */
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+body {
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  font-weight: var(--font-weight-normal);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  min-height: 100vh;
+  transition: background-color var(--transition-normal) var(--ease-out),
+    color var(--transition-normal) var(--ease-out);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ==========================================================================
+   Layout Components
+   ========================================================================== */
+
+.container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  isolation: isolate;
+}
+
+/* ==========================================================================
+   Header Component
+   ========================================================================== */
+
+.header {
+  background: var(--color-bg-elevated);
+  border-bottom: 1px solid var(--color-border-primary);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-6) var(--space-8);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.header-content {
+  max-width: 1400px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-8);
+}
+
+.title-section {
+  flex: 1;
+}
+
+.title {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  line-height: var(--line-height-tight);
+}
+
+.logo-icon {
+  width: var(--space-10);
+  height: var(--space-10);
+  color: var(--color-accent-primary);
+  flex-shrink: 0;
+}
+
+.subtitle {
+  margin-top: var(--space-2);
+  font-size: var(--font-size-base);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-normal);
+}
+
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.theme-toggle,
+.refresh-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all var(--transition-normal) var(--ease-out);
+  position: relative;
   overflow: hidden;
-  width: 100%;
-  max-width: 1900px;
-  background: var(--table-background);
+}
+
+.theme-toggle:hover,
+.refresh-btn:hover {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-accent);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.theme-toggle:active,
+.refresh-btn:active {
+  transform: translateY(0);
+  box-shadow: var(--shadow-xs);
+}
+
+.theme-icon,
+.refresh-btn svg {
+  inline-size: var(--space-5);
+  block-size: var(--space-5);
+  color: var(--color-text-secondary);
+  transition: color var(--transition-normal) var(--ease-out);
+}
+
+.theme-toggle:hover .theme-icon,
+.refresh-btn:hover svg {
+  color: var(--color-accent-primary);
+}
+
+/* Theme toggle icon switching */
+.sun-icon {
+  display: block;
+}
+
+.moon-icon {
+  display: none;
+}
+
+[data-theme="dark"] .sun-icon {
+  display: none;
+}
+
+[data-theme="dark"] .moon-icon {
+  display: block;
+}
+
+/* ==========================================================================
+   Main Content Area
+   ========================================================================== */
+
+.main-content {
+  flex: 1;
+  padding: var(--space-8);
+  max-width: 1400px;
   margin: 0 auto;
-  position: center;
+  inline-size: 100%;
+}
+
+.table-container {
+  background: var(--color-bg-elevated);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-border-primary);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  position: relative;
+  container-type: inline-size;
+}
+
+.modern-table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+  table-layout: auto;
+}
+
+.modern-table th {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: var(--space-4) var(--space-6);
+  text-align: start;
+  border-bottom: 1px solid var(--color-border-primary);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  white-space: nowrap;
+}
+
+.modern-table th:first-child {
+  border-top-left-radius: var(--radius-xl);
+}
+
+.modern-table th:last-child {
+  border-top-right-radius: var(--radius-xl);
+}
+
+.modern-table td {
+  padding: var(--space-4) var(--space-6);
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+  transition: background-color var(--transition-normal) var(--ease-out);
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.modern-table tbody tr {
+  transition: all var(--transition-normal) var(--ease-out);
+}
+
+.modern-table tbody tr:nth-child(even) {
+  background: var(--color-bg-secondary);
+}
+
+.modern-table tbody tr:hover {
+  background: var(--color-accent-light);
+}
+
+.modern-table tbody tr:last-child td:first-child {
+  border-bottom-left-radius: var(--radius-xl);
+}
+
+.modern-table tbody tr:last-child td:last-child {
+  border-bottom-right-radius: var(--radius-xl);
+}
+
+/* ==========================================================================
+   IP Version Badge Components - Production Ready
+   ========================================================================== */
+
+.ip-version-badge {
+  display: inline-block;
+  padding: var(--space-1) var(--space-3);
+  border: 2px solid var(--color-accent-primary);
+  border-radius: var(--radius-lg);
+  background: linear-gradient(135deg, var(--color-accent-light), rgba(59, 130, 246, 0.1));
+  color: var(--color-accent-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition-normal) var(--ease-out);
+  /* Accessibility improvements */
+  cursor: default;
+  user-select: none;
+  /* Performance optimizations */
+  will-change: transform, box-shadow;
+  backface-visibility: hidden;
+  /* Browser compatibility */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Hover states with reduced motion support */
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .ip-version-badge:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--color-accent-hover);
+    background: linear-gradient(135deg, var(--color-accent-light), rgba(37, 99, 235, 0.15));
+  }
+}
+
+/* Reduced motion fallback */
+@media (prefers-reduced-motion: reduce) {
+  .ip-version-badge {
+    transition: color var(--transition-normal) var(--ease-out),
+      background-color var(--transition-normal) var(--ease-out),
+      border-color var(--transition-normal) var(--ease-out);
+  }
+
+  .ip-version-badge:hover {
+    border-color: var(--color-accent-hover);
+    background: linear-gradient(135deg, var(--color-accent-light), rgba(37, 99, 235, 0.15));
+  }
+}
+
+/* IPv6 specific styling */
+.ip-version-badge.ipv6 {
+  border-color: var(--color-info);
+  color: var(--color-info);
+  background: linear-gradient(135deg, var(--color-info-light), rgba(139, 92, 246, 0.1));
+}
+
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .ip-version-badge.ipv6:hover {
+    border-color: #7c3aed;
+    background: linear-gradient(135deg, var(--color-info-light), rgba(124, 58, 237, 0.15));
+  }
 }
 
-td,
-th {
+@media (prefers-reduced-motion: reduce) {
+  .ip-version-badge.ipv6:hover {
+    border-color: #7c3aed;
+    background: linear-gradient(135deg, var(--color-info-light), rgba(124, 58, 237, 0.15));
+  }
+}
+
+/* Spacing between multiple badges */
+.ip-version-badge+.ip-version-badge {
+  margin-inline-start: var(--space-2);
+}
+
+/* Focus states for accessibility */
+.ip-version-badge:focus-visible {
+  outline: 2px solid var(--color-accent-primary);
+  outline-offset: 2px;
+}
+
+.ip-version-badge.ipv6:focus-visible {
+  outline-color: var(--color-info);
+}
+
+/* ==========================================================================
+   Table Column Specific Styling - Production Ready
+   ========================================================================== */
+
+/* Previous IPs column - single line display without truncation */
+.modern-table td:last-child {
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: initial;
+  min-width: 12rem;
+  width: auto;
+  line-height: 1.4;
+}
+
+.modern-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* ==========================================================================
+   Status Badge Components
+   ========================================================================== */
+
+.success,
+.error,
+.uptodate,
+.updating,
+.unset {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-xs);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-md);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 80px;
   text-align: center;
-  padding: 0.7rem;
+  white-space: nowrap;
 }
 
-th {
-  border-bottom: 1px solid var(--border-color);
+.success,
+.uptodate {
+  background: var(--color-success-light);
+  color: var(--color-success);
+  border: 1px solid var(--color-success);
+}
+
+.error {
+  background: var(--color-error-light);
+  color: var(--color-error);
+  border: 1px solid var(--color-error);
+}
+
+.updating {
+  background: var(--color-info-light);
+  color: var(--color-info);
+  border: 1px solid var(--color-info);
+  position: relative;
+  overflow: hidden;
+}
+
+.updating::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  animation: shimmer 1.5s infinite;
 }
 
-tbody tr:nth-child(odd) {
-  background: var(--background-zebra);
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
 }
 
-tbody tr:hover {
-  background: var(--background-hover);
+.unset {
+  background: var(--color-warning-light);
+  color: var(--color-warning);
+  border: 1px solid var(--color-warning);
+}
+
+/* ==========================================================================
+   Status Timestamp Component
+   ========================================================================== */
+
+.status-timestamp {
+  display: inline-flex;
+  align-items: center;
+  margin-left: var(--space-2);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-muted);
+  text-transform: none;
+  letter-spacing: normal;
+  background: var(--color-bg-tertiary);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-primary);
+  gap: var(--space-1);
+  vertical-align: middle;
+}
+
+.status-timestamp::before {
+  content: "🕒";
+  font-size: var(--font-size-xs);
+}
+
+/* Status column layout */
+.modern-table td[data-label="Status"] {
+  min-width: 160px;
+  max-width: 250px;
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: initial;
+  line-height: 1.4;
+  padding: var(--space-3) var(--space-4);
+}
+
+/* Enhanced tooltip styling for status badges */
+.success[data-tooltip],
+.error[data-tooltip],
+.uptodate[data-tooltip],
+.updating[data-tooltip],
+.unset[data-tooltip] {
+  cursor: help;
+  position: relative;
+}
+
+.success[data-tooltip]:hover::after,
+.error[data-tooltip]:hover::after,
+.uptodate[data-tooltip]:hover::after,
+.updating[data-tooltip]:hover::after,
+.unset[data-tooltip]:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-text-primary);
+  color: var(--color-bg-primary);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  text-transform: none;
+  letter-spacing: normal;
+  white-space: nowrap;
+  z-index: 1000;
+  box-shadow: var(--shadow-lg);
+  margin-bottom: var(--space-2);
+  min-width: max-content;
+}
+
+.success[data-tooltip]:hover::before,
+.error[data-tooltip]:hover::before,
+.uptodate[data-tooltip]:hover::before,
+.updating[data-tooltip]:hover::before,
+.unset[data-tooltip]:hover::before {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: var(--color-text-primary);
+  z-index: 1000;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .ip-version-badge {
+    border-width: 3px;
+    font-weight: var(--font-weight-bold);
+  }
+}
+
+/* Print styles */
+@media print {
+  .ip-version-badge {
+    background: transparent !important;
+    color: black !important;
+    border: 1px solid black !important;
+    box-shadow: none !important;
+  }
 }
 
+/* ==========================================================================
+   Link Components
+   ========================================================================== */
+
 a {
-  color: var(--link-color);
+  color: var(--color-accent-primary);
   text-decoration: none;
+  transition: color var(--transition-normal) var(--ease-out);
+  font-weight: var(--font-weight-medium);
 }
 
 a:hover {
-  color: var(--link-color-hover);
+  color: var(--color-accent-hover);
   text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
 }
 
-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
+/* IP Info Link Styling */
+.ip-link {
+  display: inline-flex;
   align-items: center;
-  background: var(--footer-background);
-  font-size: 0.9em;
-  line-height: 1.6em;
-}
-footer a {
-  color: var(--footer-link-color);
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-normal) var(--ease-out);
+  text-decoration: none;
 }
-footer a:hover {
-  color: var(--footer-link-color-hover);
+
+.ip-link:hover {
+  background: var(--color-accent-light);
+  text-decoration: none;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
 }
 
-.text-big {
-  font-size: 1.4em;
+.ipinfo-icon {
+  width: var(--space-4);
+  height: var(--space-4);
+  opacity: 0.7;
+  transition: opacity var(--transition-normal) var(--ease-out);
+  flex-shrink: 0;
 }
 
-.success, .error, .uptodate, .updating, .unset {
-  font-weight: bold;
+.ip-link:hover .ipinfo-icon {
+  opacity: 1;
 }
 
-.success {
-  color: var(--success-color);
+/* ==========================================================================
+   Footer Component
+   ========================================================================== */
+
+.footer {
+  background: var(--color-bg-elevated);
+  border-top: 1px solid var(--color-border-primary);
+  padding: var(--space-8);
+  margin-top: auto;
 }
 
-.error {
-  color: var(--error-color);
+.footer-content {
+  max-width: 1400px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-8);
+  flex-wrap: wrap;
 }
 
-.uptodate {
-  color: var(--success-color);
+.footer-links {
+  display: flex;
+  gap: var(--space-6);
 }
 
-.updating {
-  color: var(--progress-color);
+.footer-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  transition: all var(--transition-normal) var(--ease-out);
 }
 
-.unset {
-  color: var(--warn-color);
+.footer-link:hover {
+  background: var(--color-accent-light);
+  border-color: var(--color-accent-primary);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+  text-decoration: none;
 }
 
 .github-icon {
-  vertical-align: text-bottom;
+  inline-size: var(--space-4);
+  block-size: var(--space-4);
   fill: currentColor;
-  height: 1em;
-}
-
-/* responsive table. source: https://css-tricks.com/responsive-data-tables/ */
-@media only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
-  table,
-  thead,
-  tbody,
-  th,
-  td,
-  tr {
+}
+
+.credits {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* ==========================================================================
+   Responsive Design
+   ========================================================================== */
+
+@media (width <=64rem) {
+  .header {
+    padding: var(--space-4) var(--space-6);
+  }
+
+  .main-content {
+    padding: var(--space-6);
+  }
+
+  .title {
+    font-size: var(--font-size-2xl);
+  }
+
+  .logo-icon {
+    inline-size: var(--space-8);
+    block-size: var(--space-8);
+  }
+}
+
+@media (width <=48rem) {
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-4);
+  }
+
+  .header-controls {
+    align-self: flex-end;
+  }
+
+  .main-content {
+    padding: var(--space-4);
+  }
+
+  .title {
+    font-size: var(--font-size-xl);
+  }
+
+  .footer-content {
+    flex-direction: column;
+    text-align: center;
+    gap: var(--space-4);
+  }
+}
+
+/* Mobile table styles */
+@media (width <=40rem) {
+  .table-container {
+    border-radius: var(--radius-lg);
+    overflow: visible;
+    box-shadow: none;
+    background: transparent;
+    border: none;
+  }
+
+  .modern-table,
+  .modern-table thead,
+  .modern-table tbody,
+  .modern-table th,
+  .modern-table td,
+  .modern-table tr {
     display: block;
   }
 
-  thead tr {
+  .modern-table thead tr {
     position: absolute;
     top: -9999px;
     left: -9999px;
   }
 
-  tr {
-    margin: 0 0 1rem 0;
+  .modern-table tbody tr {
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-primary);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-4);
+    padding: var(--space-4);
+    box-shadow: var(--shadow-md);
+    transform: none;
+  }
+
+  .modern-table tbody tr:hover {
+    transform: none;
+    box-shadow: var(--shadow-lg);
   }
 
-  td {
+  .modern-table td {
     border: none;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--color-border-primary);
     position: relative;
-    padding-left: 50%;
+    padding: var(--space-3) 0;
+    padding-inline-start: 40%;
+    text-align: end;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: initial;
+  }
+
+  .modern-table td:last-child {
+    border-bottom: none;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 
-  td:before {
+  .modern-table td:before {
+    content: attr(data-label);
     position: absolute;
-    left: 6px;
-    width: 45%;
-    padding-right: 10px;
+    inset-inline-start: 0;
+    inline-size: 35%;
+    padding-inline-end: var(--space-4);
+    white-space: nowrap;
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    text-align: start;
+    top: var(--space-3);
+  }
+
+  /* Override desktop IPv6 badge stacking for mobile inline display */
+  .ip-version-badge+.ip-version-badge {
+    margin-inline-start: var(--space-2);
+    margin-top: 0;
+    display: inline-flex;
+  }
+
+  /* Fix status badges positioning on mobile */
+  .modern-table td[data-label="Status"] {
     white-space: nowrap;
-    font-weight: bold;
+    position: relative;
+    z-index: 1;
+    padding-inline-start: 40%;
+  }
+
+  .modern-table td[data-label="Status"]:before {
+    white-space: nowrap;
+    position: absolute;
+    inset-inline-start: 0;
+    inline-size: 35%;
+    padding-inline-end: var(--space-4);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    text-align: start;
+    top: var(--space-3);
     content: attr(data-label);
+    z-index: 0;
+  }
+
+  .modern-table td[data-label="Status"] .status-timestamp {
+    margin-left: var(--space-2);
+    margin-top: 0;
+    display: inline-flex;
+    width: auto;
+  }
+
+  /* Ensure tooltips work properly on mobile */
+  .success[data-tooltip]:hover::after,
+  .error[data-tooltip]:hover::after,
+  .uptodate[data-tooltip]:hover::after,
+  .updating[data-tooltip]:hover::after,
+  .unset[data-tooltip]:hover::after {
+    position: fixed;
+    top: 50vh;
+    left: 50vw;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    max-width: calc(100vw - 2rem);
+    min-width: 200px;
+    white-space: normal;
+    word-wrap: break-word;
+    text-align: center;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  .success[data-tooltip]:hover::before,
+  .error[data-tooltip]:hover::before,
+  .uptodate[data-tooltip]:hover::before,
+  .updating[data-tooltip]:hover::before,
+  .unset[data-tooltip]:hover::before {
+    display: none;
+  }
+}
+
+/* Loading states and animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modern-table tbody tr {
+  animation: fadeIn 0.3s ease-out;
+}
+
+/* ==========================================================================
+   Custom Scrollbar
+   ========================================================================== */
+
+::-webkit-scrollbar {
+  inline-size: 8px;
+  block-size: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-secondary);
+  border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}
+
+/* ==========================================================================
+   Accessibility & Focus States
+   ========================================================================== */
+
+.theme-toggle:focus-visible,
+.refresh-btn:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--color-accent-primary);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+@media (forced-colors: active) {
+
+  .theme-toggle,
+  .refresh-btn {
+    border: 1px solid ButtonBorder;
   }
 }
+
+/* ==========================================================================
+   Motion & Animation Preferences
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+@media (prefers-contrast: high) {
+  :root {
+    --color-border-primary: currentColor;
+    --color-border-secondary: currentColor;
+  }
+}
\ No newline at end of file