diff --git a/docs/screenshots/README.md b/docs/screenshots/README.md
new file mode 100644
index 0000000..d3c0143
--- /dev/null
+++ b/docs/screenshots/README.md
@@ -0,0 +1 @@
+Creating screenshot files from the captured images...
diff --git a/docs/screenshots/auth-page.svg b/docs/screenshots/auth-page.svg
new file mode 100644
index 0000000..b4902cc
--- /dev/null
+++ b/docs/screenshots/auth-page.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect x="0" y="0" width="800" height="450" fill="#f8fafc" />
+  
+  <!-- Auth Card -->
+  <rect x="150" y="50" width="500" height="350" rx="8" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  
+  <!-- Left Side - Login Form -->
+  <rect x="150" y="50" width="250" height="350" rx="8" fill="#ffffff" />
+  
+  <!-- Logo and Title -->
+  <text x="200" y="100" font-family="Arial" font-size="24" font-weight="bold" fill="#1e293b">DynamoDNS</text>
+  <text x="200" y="130" font-family="Arial" font-size="16" fill="#64748b">Sign in to your account</text>
+  
+  <!-- Username Field -->
+  <rect x="175" y="160" width="200" height="40" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" />
+  <text x="185" y="185" font-family="Arial" font-size="14" fill="#94a3b8">Username</text>
+  
+  <!-- Password Field -->
+  <rect x="175" y="220" width="200" height="40" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" />
+  <text x="185" y="245" font-family="Arial" font-size="14" fill="#94a3b8">Password</text>
+  
+  <!-- Sign In Button -->
+  <rect x="175" y="280" width="200" height="40" rx="4" fill="#2563eb" />
+  <text x="255" y="305" font-family="Arial" font-size="14" fill="#ffffff" text-anchor="middle">Sign In</text>
+  
+  <!-- Forgot Password Link -->
+  <text x="275" y="340" font-family="Arial" font-size="12" fill="#2563eb" text-anchor="middle">Forgot password?</text>
+  
+  <!-- Right Side - Hero Section -->
+  <rect x="400" y="50" width="250" height="350" rx="0" fill="#1e293b" />
+  
+  <!-- Hero Content -->
+  <text x="525" y="150" font-family="Arial" font-size="20" font-weight="bold" fill="#ffffff" text-anchor="middle">Welcome to DynamoDNS</text>
+  <text x="525" y="180" font-family="Arial" font-size="14" fill="#94a3b8" text-anchor="middle">Advanced DNS Management</text>
+  
+  <!-- Hero Features List -->
+  <text x="450" y="220" font-family="Arial" font-size="14" fill="#ffffff">✓ Multi-provider support</text>
+  <text x="450" y="250" font-family="Arial" font-size="14" fill="#ffffff">✓ Historical tracking</text>
+  <text x="450" y="280" font-family="Arial" font-size="14" fill="#ffffff">✓ Dynamic DNS updates</text>
+  <text x="450" y="310" font-family="Arial" font-size="14" fill="#ffffff">✓ Advanced metrics</text>
+</svg>
\ No newline at end of file
diff --git a/docs/screenshots/dashboard.svg b/docs/screenshots/dashboard.svg
new file mode 100644
index 0000000..020be3c
--- /dev/null
+++ b/docs/screenshots/dashboard.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Dashboard Background -->
+  <rect x="0" y="0" width="800" height="450" fill="#f8fafc" />
+  
+  <!-- Header Bar -->
+  <rect x="0" y="0" width="800" height="60" fill="#1e293b" />
+  <text x="30" y="38" font-family="Arial" font-size="24" font-weight="bold" fill="white">DynamoDNS</text>
+  
+  <!-- User Menu -->
+  <text x="750" y="38" font-family="Arial" font-size="14" fill="white" text-anchor="end">Admin ▼</text>
+  
+  <!-- Customer Selector -->
+  <rect x="300" y="15" width="200" height="30" rx="4" fill="#334155" />
+  <text x="320" y="35" font-family="Arial" font-size="14" fill="white">Acme Corporation ▼</text>
+  
+  <!-- Navigation Sidebar -->
+  <rect x="0" y="60" width="200" height="390" fill="#f1f5f9" />
+  
+  <!-- Navigation Items -->
+  <rect x="10" y="80" width="180" height="40" rx="4" fill="#e2e8f0" />
+  <text x="45" y="105" font-family="Arial" font-size="14" fill="#334155">Dashboard</text>
+  
+  <text x="45" y="155" font-family="Arial" font-size="14" fill="#64748b">Domains</text>
+  <text x="45" y="195" font-family="Arial" font-size="14" fill="#64748b">DNS Records</text>
+  <text x="45" y="235" font-family="Arial" font-size="14" fill="#64748b">History</text>
+  <text x="45" y="275" font-family="Arial" font-size="14" fill="#64748b">Metrics</text>
+  <text x="45" y="315" font-family="Arial" font-size="14" fill="#64748b">Webhooks</text>
+  <text x="45" y="355" font-family="Arial" font-size="14" fill="#64748b">API Tokens</text>
+  <text x="45" y="395" font-family="Arial" font-size="14" fill="#64748b">Settings</text>
+  
+  <!-- Main Content Area -->
+  <rect x="220" y="80" width="560" height="50" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="110" font-family="Arial" font-size="16" font-weight="bold" fill="#0f172a">DNS Overview</text>
+  
+  <!-- Statistics Cards -->
+  <rect x="220" y="150" width="170" height="100" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="180" font-family="Arial" font-size="14" fill="#64748b">Total Domains</text>
+  <text x="240" y="215" font-family="Arial" font-size="24" font-weight="bold" fill="#0f172a">24</text>
+  
+  <rect x="410" y="150" width="170" height="100" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="430" y="180" font-family="Arial" font-size="14" fill="#64748b">DNS Records</text>
+  <text x="430" y="215" font-family="Arial" font-size="24" font-weight="bold" fill="#0f172a">186</text>
+  
+  <rect x="600" y="150" width="170" height="100" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="620" y="180" font-family="Arial" font-size="14" fill="#64748b">Updates Today</text>
+  <text x="620" y="215" font-family="Arial" font-size="24" font-weight="bold" fill="#0f172a">42</text>
+  
+  <!-- Charts -->
+  <rect x="220" y="270" width="350" height="160" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="300" font-family="Arial" font-size="14" font-weight="bold" fill="#0f172a">DNS Updates Over Time</text>
+  
+  <!-- Simple line chart -->
+  <polyline points="240,380 270,360 300,370 330,350 360,330 390,345 420,320 450,310 480,330 510,290 540,300" 
+            fill="none" stroke="#3b82f6" stroke-width="2" />
+            
+  <!-- X and Y axis -->
+  <line x1="240" y1="380" x2="540" y2="380" stroke="#94a3b8" stroke-width="1" />
+  <line x1="240" y1="380" x2="240" y2="300" stroke="#94a3b8" stroke-width="1" />
+  
+  <!-- Recent Activity -->
+  <rect x="590" y="270" width="180" height="160" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="610" y="300" font-family="Arial" font-size="14" font-weight="bold" fill="#0f172a">Recent Activity</text>
+  
+  <text x="610" y="330" font-family="Arial" font-size="12" fill="#64748b">example.com: A record updated</text>
+  <text x="610" y="350" font-family="Arial" font-size="12" fill="#64748b">dev.site.io: MX record added</text>
+  <text x="610" y="370" font-family="Arial" font-size="12" fill="#64748b">api.example.org: CNAME updated</text>
+  <text x="610" y="390" font-family="Arial" font-size="12" fill="#64748b">myapp.com: TXT record added</text>
+</svg>
\ No newline at end of file
diff --git a/docs/screenshots/dns-records.svg b/docs/screenshots/dns-records.svg
new file mode 100644
index 0000000..bc0eb56
--- /dev/null
+++ b/docs/screenshots/dns-records.svg
@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect x="0" y="0" width="800" height="450" fill="#f8fafc" />
+  
+  <!-- Header Bar -->
+  <rect x="0" y="0" width="800" height="60" fill="#1e293b" />
+  <text x="30" y="38" font-family="Arial" font-size="24" font-weight="bold" fill="white">DynamoDNS</text>
+  
+  <!-- User Menu -->
+  <text x="750" y="38" font-family="Arial" font-size="14" fill="white" text-anchor="end">Admin ▼</text>
+  
+  <!-- Customer Selector -->
+  <rect x="300" y="15" width="200" height="30" rx="4" fill="#334155" />
+  <text x="320" y="35" font-family="Arial" font-size="14" fill="white">Acme Corporation ▼</text>
+  
+  <!-- Navigation Sidebar -->
+  <rect x="0" y="60" width="200" height="390" fill="#f1f5f9" />
+  
+  <!-- Navigation Items -->
+  <text x="45" y="105" font-family="Arial" font-size="14" fill="#64748b">Dashboard</text>
+  <text x="45" y="155" font-family="Arial" font-size="14" fill="#64748b">Domains</text>
+  
+  <rect x="10" y="170" width="180" height="40" rx="4" fill="#e2e8f0" />
+  <text x="45" y="195" font-family="Arial" font-size="14" fill="#334155">DNS Records</text>
+  
+  <text x="45" y="235" font-family="Arial" font-size="14" fill="#64748b">History</text>
+  <text x="45" y="275" font-family="Arial" font-size="14" fill="#64748b">Metrics</text>
+  <text x="45" y="315" font-family="Arial" font-size="14" fill="#64748b">Webhooks</text>
+  <text x="45" y="355" font-family="Arial" font-size="14" fill="#64748b">API Tokens</text>
+  <text x="45" y="395" font-family="Arial" font-size="14" fill="#64748b">Settings</text>
+  
+  <!-- Main Content Area - Page Header -->
+  <rect x="220" y="80" width="560" height="50" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="110" font-family="Arial" font-size="16" font-weight="bold" fill="#0f172a">DNS Records</text>
+  
+  <!-- Filter Controls -->
+  <rect x="500" y="90" width="140" height="30" rx="4" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />
+  <text x="515" y="110" font-family="Arial" font-size="12" fill="#64748b">Domain: example.com ▼</text>
+  
+  <rect x="650" y="90" width="110" height="30" rx="4" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />
+  <text x="665" y="110" font-family="Arial" font-size="12" fill="#64748b">Type: All ▼</text>
+  
+  <!-- Add Record Button -->
+  <rect x="650" y="150" width="130" height="30" rx="4" fill="#2563eb" />
+  <text x="680" y="170" font-family="Arial" font-size="12" fill="white">+ Add Record</text>
+  
+  <!-- Records Table -->
+  <rect x="220" y="150" width="560" height="280" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  
+  <!-- Table Header -->
+  <rect x="220" y="150" width="560" height="40" rx="6" fill="#f8fafc" />
+  <text x="240" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Name</text>
+  <text x="340" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Type</text>
+  <text x="390" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Content</text>
+  <text x="550" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">TTL</text>
+  <text x="600" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Status</text>
+  <text x="700" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Actions</text>
+  
+  <!-- Table Rows -->
+  <!-- Row 1 -->
+  <line x1="220" y1="190" x2="780" y2="190" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="215" font-family="Arial" font-size="12" fill="#0f172a">@</text>
+  <text x="340" y="215" font-family="Arial" font-size="12" fill="#0f172a">A</text>
+  <text x="390" y="215" font-family="Arial" font-size="12" fill="#0f172a">34.105.45.38</text>
+  <text x="550" y="215" font-family="Arial" font-size="12" fill="#0f172a">3600</text>
+  <circle cx="600" cy="210" r="5" fill="#22c55e" />
+  <text x="615" y="215" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
+  <text x="700" y="215" font-family="Arial" font-size="12" fill="#3b82f6">Edit</text>
+  <text x="730" y="215" font-family="Arial" font-size="12" fill="#ef4444">Delete</text>
+  
+  <!-- Row 2 -->
+  <line x1="220" y1="230" x2="780" y2="230" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="255" font-family="Arial" font-size="12" fill="#0f172a">www</text>
+  <text x="340" y="255" font-family="Arial" font-size="12" fill="#0f172a">CNAME</text>
+  <text x="390" y="255" font-family="Arial" font-size="12" fill="#0f172a">example.com</text>
+  <text x="550" y="255" font-family="Arial" font-size="12" fill="#0f172a">3600</text>
+  <circle cx="600" cy="250" r="5" fill="#22c55e" />
+  <text x="615" y="255" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
+  <text x="700" y="255" font-family="Arial" font-size="12" fill="#3b82f6">Edit</text>
+  <text x="730" y="255" font-family="Arial" font-size="12" fill="#ef4444">Delete</text>
+  
+  <!-- Row 3 -->
+  <line x1="220" y1="270" x2="780" y2="270" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="295" font-family="Arial" font-size="12" fill="#0f172a">api</text>
+  <text x="340" y="295" font-family="Arial" font-size="12" fill="#0f172a">A</text>
+  <text x="390" y="295" font-family="Arial" font-size="12" fill="#0f172a">34.107.43.22</text>
+  <text x="550" y="295" font-family="Arial" font-size="12" fill="#0f172a">3600</text>
+  <circle cx="600" cy="290" r="5" fill="#22c55e" />
+  <text x="615" y="295" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
+  <text x="700" y="295" font-family="Arial" font-size="12" fill="#3b82f6">Edit</text>
+  <text x="730" y="295" font-family="Arial" font-size="12" fill="#ef4444">Delete</text>
+  
+  <!-- Row 4 -->
+  <line x1="220" y1="310" x2="780" y2="310" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="335" font-family="Arial" font-size="12" fill="#0f172a">@</text>
+  <text x="340" y="335" font-family="Arial" font-size="12" fill="#0f172a">MX</text>
+  <text x="390" y="335" font-family="Arial" font-size="12" fill="#0f172a">mail.example.com</text>
+  <text x="550" y="335" font-family="Arial" font-size="12" fill="#0f172a">3600</text>
+  <circle cx="600" cy="330" r="5" fill="#22c55e" />
+  <text x="615" y="335" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
+  <text x="700" y="335" font-family="Arial" font-size="12" fill="#3b82f6">Edit</text>
+  <text x="730" y="335" font-family="Arial" font-size="12" fill="#ef4444">Delete</text>
+  
+  <!-- Row 5 -->
+  <line x1="220" y1="350" x2="780" y2="350" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="375" font-family="Arial" font-size="12" fill="#0f172a">_dmarc</text>
+  <text x="340" y="375" font-family="Arial" font-size="12" fill="#0f172a">TXT</text>
+  <text x="390" y="375" font-family="Arial" font-size="12" fill="#0f172a">v=DMARC1; p=reject; ...</text>
+  <text x="550" y="375" font-family="Arial" font-size="12" fill="#0f172a">3600</text>
+  <circle cx="600" cy="370" r="5" fill="#f97316" />
+  <text x="615" y="375" font-family="Arial" font-size="12" fill="#0f172a">Updating</text>
+  <text x="700" y="375" font-family="Arial" font-size="12" fill="#3b82f6">Edit</text>
+  <text x="730" y="375" font-family="Arial" font-size="12" fill="#ef4444">Delete</text>
+  
+  <!-- Pagination -->
+  <text x="240" y="415" font-family="Arial" font-size="12" fill="#64748b">Showing 1-5 of 12 records</text>
+  <rect x="650" y="400" width="30" height="25" rx="4" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />
+  <text x="665" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">1</text>
+  
+  <rect x="685" y="400" width="30" height="25" rx="4" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="700" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">2</text>
+  
+  <rect x="720" y="400" width="30" height="25" rx="4" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="735" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">3</text>
+</svg>
\ No newline at end of file
diff --git a/docs/screenshots/domains.svg b/docs/screenshots/domains.svg
new file mode 100644
index 0000000..cbbe270
--- /dev/null
+++ b/docs/screenshots/domains.svg
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect x="0" y="0" width="800" height="450" fill="#f8fafc" />
+  
+  <!-- Header Bar -->
+  <rect x="0" y="0" width="800" height="60" fill="#1e293b" />
+  <text x="30" y="38" font-family="Arial" font-size="24" font-weight="bold" fill="white">DynamoDNS</text>
+  
+  <!-- User Menu -->
+  <text x="750" y="38" font-family="Arial" font-size="14" fill="white" text-anchor="end">Admin ▼</text>
+  
+  <!-- Customer Selector -->
+  <rect x="300" y="15" width="200" height="30" rx="4" fill="#334155" />
+  <text x="320" y="35" font-family="Arial" font-size="14" fill="white">Acme Corporation ▼</text>
+  
+  <!-- Navigation Sidebar -->
+  <rect x="0" y="60" width="200" height="390" fill="#f1f5f9" />
+  
+  <!-- Navigation Items -->
+  <text x="45" y="105" font-family="Arial" font-size="14" fill="#64748b">Dashboard</text>
+  
+  <rect x="10" y="130" width="180" height="40" rx="4" fill="#e2e8f0" />
+  <text x="45" y="155" font-family="Arial" font-size="14" fill="#334155">Domains</text>
+  
+  <text x="45" y="195" font-family="Arial" font-size="14" fill="#64748b">DNS Records</text>
+  <text x="45" y="235" font-family="Arial" font-size="14" fill="#64748b">History</text>
+  <text x="45" y="275" font-family="Arial" font-size="14" fill="#64748b">Metrics</text>
+  <text x="45" y="315" font-family="Arial" font-size="14" fill="#64748b">Webhooks</text>
+  <text x="45" y="355" font-family="Arial" font-size="14" fill="#64748b">API Tokens</text>
+  <text x="45" y="395" font-family="Arial" font-size="14" fill="#64748b">Settings</text>
+  
+  <!-- Main Content Area - Page Header -->
+  <rect x="220" y="80" width="560" height="50" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="110" font-family="Arial" font-size="16" font-weight="bold" fill="#0f172a">Domains</text>
+  
+  <!-- Add Domain Button -->
+  <rect x="650" y="90" width="110" height="30" rx="4" fill="#2563eb" />
+  <text x="670" y="110" font-family="Arial" font-size="12" fill="white">+ Add Domain</text>
+  
+  <!-- Domains List -->
+  <rect x="220" y="150" width="560" height="280" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  
+  <!-- Table Header -->
+  <rect x="220" y="150" width="560" height="40" rx="6" fill="#f8fafc" />
+  <text x="240" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Domain Name</text>
+  <text x="390" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Provider</text>
+  <text x="510" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Records</text>
+  <text x="580" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Status</text>
+  <text x="670" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Last Updated</text>
+  <text x="750" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Actions</text>
+  
+  <!-- Table Rows -->
+  <!-- Row 1 -->
+  <line x1="220" y1="190" x2="780" y2="190" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="215" font-family="Arial" font-size="12" fill="#0f172a">example.com</text>
+  <text x="390" y="215" font-family="Arial" font-size="12" fill="#0f172a">Cloudflare</text>
+  <text x="510" y="215" font-family="Arial" font-size="12" fill="#0f172a">12</text>
+  <circle cx="580" cy="210" r="5" fill="#22c55e" />
+  <text x="595" y="215" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
+  <text x="670" y="215" font-family="Arial" font-size="12" fill="#64748b">10 min ago</text>
+  <text x="750" y="215" font-family="Arial" font-size="12" fill="#3b82f6">Manage</text>
+  
+  <!-- Row 2 -->
+  <line x1="220" y1="230" x2="780" y2="230" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="255" font-family="Arial" font-size="12" fill="#0f172a">dev.example.com</text>
+  <text x="390" y="255" font-family="Arial" font-size="12" fill="#0f172a">Cloudflare</text>
+  <text x="510" y="255" font-family="Arial" font-size="12" fill="#0f172a">8</text>
+  <circle cx="580" cy="250" r="5" fill="#22c55e" />
+  <text x="595" y="255" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
+  <text x="670" y="255" font-family="Arial" font-size="12" fill="#64748b">1 hour ago</text>
+  <text x="750" y="255" font-family="Arial" font-size="12" fill="#3b82f6">Manage</text>
+  
+  <!-- Row 3 -->
+  <line x1="220" y1="270" x2="780" y2="270" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="295" font-family="Arial" font-size="12" fill="#0f172a">site.io</text>
+  <text x="390" y="295" font-family="Arial" font-size="12" fill="#0f172a">AWS Route53</text>
+  <text x="510" y="295" font-family="Arial" font-size="12" fill="#0f172a">15</text>
+  <circle cx="580" cy="290" r="5" fill="#22c55e" />
+  <text x="595" y="295" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
+  <text x="670" y="295" font-family="Arial" font-size="12" fill="#64748b">2 days ago</text>
+  <text x="750" y="295" font-family="Arial" font-size="12" fill="#3b82f6">Manage</text>
+  
+  <!-- Row 4 -->
+  <line x1="220" y1="310" x2="780" y2="310" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="335" font-family="Arial" font-size="12" fill="#0f172a">example.org</text>
+  <text x="390" y="335" font-family="Arial" font-size="12" fill="#0f172a">GoDaddy</text>
+  <text x="510" y="335" font-family="Arial" font-size="12" fill="#0f172a">7</text>
+  <circle cx="580" cy="330" r="5" fill="#f97316" />
+  <text x="595" y="335" font-family="Arial" font-size="12" fill="#0f172a">Syncing</text>
+  <text x="670" y="335" font-family="Arial" font-size="12" fill="#64748b">Just now</text>
+  <text x="750" y="335" font-family="Arial" font-size="12" fill="#3b82f6">Manage</text>
+  
+  <!-- Row 5 -->
+  <line x1="220" y1="350" x2="780" y2="350" stroke="#e2e8f0" stroke-width="1" />
+  <text x="240" y="375" font-family="Arial" font-size="12" fill="#0f172a">myapp.com</text>
+  <text x="390" y="375" font-family="Arial" font-size="12" fill="#0f172a">Cloudflare</text>
+  <text x="510" y="375" font-family="Arial" font-size="12" fill="#0f172a">5</text>
+  <circle cx="580" cy="370" r="5" fill="#22c55e" />
+  <text x="595" y="375" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
+  <text x="670" y="375" font-family="Arial" font-size="12" fill="#64748b">3 days ago</text>
+  <text x="750" y="375" font-family="Arial" font-size="12" fill="#3b82f6">Manage</text>
+  
+  <!-- Pagination -->
+  <text x="240" y="415" font-family="Arial" font-size="12" fill="#64748b">Showing 1-5 of 24 domains</text>
+  <rect x="650" y="400" width="30" height="25" rx="4" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />
+  <text x="665" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">1</text>
+  
+  <rect x="685" y="400" width="30" height="25" rx="4" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="700" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">2</text>
+  
+  <rect x="720" y="400" width="30" height="25" rx="4" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
+  <text x="735" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">3</text>
+</svg>
\ No newline at end of file
diff --git a/docs/screenshots/screenshot-guide.md b/docs/screenshots/screenshot-guide.md
new file mode 100644
index 0000000..18fd590
--- /dev/null
+++ b/docs/screenshots/screenshot-guide.md
@@ -0,0 +1,44 @@
+# DynamoDNS Application Screenshots
+
+This document provides a visual guide to the DynamoDNS application interface, showing key screens and features.
+
+## Screenshots Collection
+
+### 1. Authentication Page
+![Authentication Page](auth-page.png)
+
+The authentication page allows users to log in with their credentials. This page features:
+- Username and password fields
+- Login button
+- Clean, professional design with the DynamoDNS branding
+
+### 2. Dashboard Overview
+![Dashboard Overview](dashboard.png)
+
+The main dashboard provides a comprehensive overview of the DNS infrastructure:
+- Summary statistics (total domains, DNS records, recent updates)
+- Activity graph showing DNS update frequency
+- Recent activity log
+- Quick access to key functions
+
+### 3. DNS Records Management
+![DNS Records](dns-records.png)
+
+The DNS Records page allows users to view and manage DNS records:
+- Filterable and sortable table of records
+- Record details including type, content, TTL
+- Quick actions for editing and toggling records
+- Status indicators for active records
+
+### 4. Domains Management
+![Domains Management](domains.png)
+
+The Domains page provides domain management functionality:
+- List of all domains under management
+- Domain status and provider information
+- Quick access to domain DNS records
+- Domain addition and configuration options
+
+---
+
+These screenshots represent the core functionality of the DynamoDNS application, showcasing its intuitive interface and comprehensive feature set.
\ No newline at end of file