diff --git a/.github/workflows/deploy-dev-to-beta.yml b/.github/workflows/deploy-dev-to-beta.yml
new file mode 100644
index 0000000..512bf3f
--- /dev/null
+++ b/.github/workflows/deploy-dev-to-beta.yml
@@ -0,0 +1,62 @@
+name: Deploy dev -> main:/beta
+
+on:
+  push:
+    branches: [ dev ]
+  workflow_dispatch: {}
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout dev
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.1'
+
+      - name: Install bundler & dependencies
+        run: |
+          gem install bundler
+          bundle config set --local deployment 'true'
+          bundle install --jobs 4 --retry 3
+
+      - name: Build site (Jekyll)
+        run: bundle exec jekyll build --destination _site
+
+      - name: Remove CNAME from build (prevent overriding custom domain)
+        run: rm -f _site/CNAME || true
+
+      - name: Checkout main into separate folder
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ github.repository }}
+          ref: main
+          token: ${{ secrets.GITHUB_TOKEN }}
+          path: main-worktree
+
+      - name: Copy built site into main-worktree/beta
+        run: |
+          rm -rf main-worktree/beta || true
+          mkdir -p main-worktree/beta
+          cp -a _site/. main-worktree/beta/
+
+      - name: Commit & push beta content to main
+        run: |
+          cd main-worktree
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add -A beta
+          git commit -m "Deploy dev -> beta: $GITHUB_SHA" || echo "No changes to commit"
+          # ensure push uses token auth (works around some permission/remote issues)
+          git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git
+          git push origin main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 3afc81b..aa4771a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@ _site/
 .DS_Store
 Dockerfile
 /.vscode
+/.history
+/node_modules
diff --git a/_includes/footer.html b/_includes/footer.html
index d4abd12..ef57ac6 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,3 +1,3 @@
 <footer class="text-center my-6">
-    <p class="f4-mktg color-fg-muted"> <a href="https://github.com/Iautner/Iautner.github.io" class="">View on Github</a></p>
+    <p class="f4-mktg color-fg-muted">© 2025 Lautner</p>
 </footer>
\ No newline at end of file
diff --git a/_includes/links.html b/_includes/links.html
index 5140380..b8a007d 100644
--- a/_includes/links.html
+++ b/_includes/links.html
@@ -1,11 +1,11 @@
-<ul class="list-style-none f3 container-sm">
+<ul class="list-style-none container-sm">
     {% for item in site.data.links %}
-    <li class="mb-3 text-center text-semibold">
-        <a href="{{ item.url }}" class="Link--primary d-block p-3 border rounded-3 color-shadow-small color-bg-subtle">
-            <svg class="bi mr-1" width="16" height="16" fill="currentColor">
-                <use xlink:href="{{ site.baseurl }}/assets/img/bootstrap-icons.svg#{{ item.icon | default: 'globe2' }}"/>
-            </svg><br>
-            {{ item.text }}
+    <li>
+        <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="link-card" aria-label="Open {{ item.text }} in new tab">
+            <svg class="bi" width="16" height="16" fill="currentColor">
+                <use xlink:href="assets/img/bootstrap-icons.svg#{{ item.icon | default: 'globe2' }}"/>
+            </svg>
+            <span class="link-text">{{ item.text }}</span>
         </a>
     </li>
     {% endfor %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 35c43b9..272dbe7 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -5,26 +5,74 @@
     <meta charset="utf-8">
     <title>{{ site.data.metadata.title }}</title>
     <meta name="description" content="{{ site.data.metadata.description }}">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    
+    <!-- Enhanced viewport for modern devices -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    
+    <!-- PWA and mobile optimizations -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Lautner">
+    <meta name="application-name" content="Lautner">
+    <meta name="msapplication-TileColor" content="#000000">
+    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+    
+    <!-- Performance and SEO -->
+    <meta name="robots" content="index, follow">
+    <meta name="googlebot" content="index, follow">
+    <link rel="canonical" href="{{ site.url }}{{ page.url }}">
+    
+    <!-- Icons and manifest -->
     <link rel="icon" href="favicon.ico" type="image/x-icon">
-
+    <link rel="apple-touch-icon" sizes="192x192" href="/manifest-icon-192.maskable.png">
+    <link rel="manifest" href="manifest.json">
+    
+    <!-- Preload critical resources -->
     <link rel="preload" href="assets/css/primer.css" as="style">
     <link rel="preload" href="assets/css/custom.css" as="style">
-
+    <link rel="preload" href="assets/js/lazy-load.js" as="script">
+    
+    <!-- CSS with enhanced loading -->
     <link rel="stylesheet" href="assets/css/primer.css" media="print" onload="this.media='all'">
     <link rel="stylesheet" href="assets/css/custom.css" media="print" onload="this.media='all'">
     <link rel="stylesheet" href="assets/css/bootstrap-icons.css" media="print" onload="this.media='all'">
-
+    
     <noscript>
         <link rel="stylesheet" href="assets/css/primer.css">
         <link rel="stylesheet" href="assets/css/custom.css">
         <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
     </noscript>
-    <meta property="og:image" content="https://lautner.co/assets/img/thumbnail-og.png">
+    
+    <!-- Enhanced Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="{{ site.url }}{{ page.url }}">
     <meta property="og:title" content="Lautner's Links">
-<script>navigator.serviceWorker.register("service-worker.js")</script> 
-<link rel="manifest" href="/manifest.json" />    <meta property="og:description" content="Fun Minecraft content, modded Minecraft, let's play, and challenge videos!">
+    <meta property="og:description" content="Fun Minecraft content, modded Minecraft, let's play, and challenge videos!">
+    <meta property="og:image" content="{{ '/assets/img/thumbnail-og.png' | absolute_url }}">
+    <meta property="og:site_name" content="Lautner">
+    
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Lautner's Links">
+    <meta name="twitter:description" content="Fun Minecraft content, modded Minecraft, let's play, and challenge videos!">
+    <meta name="twitter:image" content="{{ '/assets/img/thumbnail-og.png' | absolute_url }}">
+    
+    <!-- Enhanced Service Worker Registration -->
+    <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('service-worker.js')
+                    .then(registration => {
+                        console.log('SW registered: ', registration);
+                    })
+                    .catch(registrationError => {
+                        console.log('SW registration failed: ', registrationError);
+                    });
+            });
+        }
+    </script>
 </head>
 
 <body class="p-3">
@@ -34,7 +82,25 @@
         {% include links.html %}
         {% include footer.html %}
     </main>
-    <script src="assets/js/lazy-load.js" defer></script>
+    
+    <!-- Enhanced scripts -->
+    <script src="assets/js/lazy-load.js"></script>
+    
+    <!-- Minimal initialization -->
+    <script>
+        // Prevent zoom on double tap (iOS Safari) but allow scrolling
+        let lastTouchEnd = 0;
+        document.addEventListener('touchend', event => {
+            const now = (new Date()).getTime();
+            if (now - lastTouchEnd <= 300) {
+                // Only prevent default for non-scrollable elements
+                if (!event.target.closest('.scrollable, main, body')) {
+                    event.preventDefault();
+                }
+            }
+            lastTouchEnd = now;
+        }, false);
+    </script>
 </body>
 
 </html>
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 6e3257c..6f058bb 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,6 +1,305 @@
-/* Add CSS rules to override Primer */
+/* Modern Link Tree - Optimized Design System */
 
-svg {
-    width: 1.25em;
-    height: 1.25em;
-}
\ No newline at end of file
+:root {
+    /* Apple-inspired semantic color system */
+    --primary: #007AFF;
+    --bg-primary: #FFFFFF;
+    --bg-secondary: #F2F2F7;
+    --border: rgba(60, 60, 67, 0.29);
+    --shadow: rgba(0, 0, 0, 0.04);
+    --glass-bg: rgba(255, 255, 255, 0.8);
+    --glass-border: rgba(0, 0, 0, 0.04);
+    --text-primary: #000000;
+    --text-secondary: rgba(60, 60, 67, 0.6);
+    
+    /* Design tokens */
+    --radius: 12px;
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.1);
+    --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.15);
+    --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+/* Dark mode theme */
+[data-color-mode="dark"],
+[data-color-mode="auto"][data-dark-theme="dark"] {
+    --primary: #0A84FF;
+    --bg-primary: #000000;
+    --bg-secondary: #1C1C1E;
+    --border: rgba(84, 84, 88, 0.6);
+    --shadow: rgba(0, 0, 0, 0.3);
+    --glass-bg: rgba(28, 28, 30, 0.8);
+    --glass-border: rgba(84, 84, 88, 0.6);
+    --text-primary: #FFFFFF;
+    --text-secondary: rgba(235, 235, 245, 0.6);
+    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.2);
+    --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+/* System preference support */
+@media (prefers-color-scheme: dark) {
+    html[data-color-mode="auto"] {
+        --primary: #0A84FF !important;
+        --bg-primary: #000000 !important;
+        --bg-secondary: #1C1C1E !important;
+        --border: rgba(84, 84, 88, 0.6) !important;
+        --shadow: rgba(0, 0, 0, 0.3) !important;
+        --glass-bg: rgba(28, 28, 30, 0.8) !important;
+        --glass-border: rgba(84, 84, 88, 0.6) !important;
+        --text-primary: #FFFFFF !important;
+        --text-secondary: rgba(235, 235, 245, 0.6) !important;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    html[data-color-mode="auto"] {
+        --primary: #007AFF !important;
+        --bg-primary: #FFFFFF !important;
+        --bg-secondary: #F2F2F7 !important;
+        --border: rgba(60, 60, 67, 0.29) !important;
+        --shadow: rgba(0, 0, 0, 0.04) !important;
+        --glass-bg: rgba(255, 255, 255, 0.8) !important;
+        --glass-border: rgba(0, 0, 0, 0.04) !important;
+        --text-primary: #000000 !important;
+        --text-secondary: rgba(60, 60, 67, 0.6) !important;
+    }
+}
+
+/* Base styles */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+    height: 100%;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    color: var(--text-primary);
+    margin: 0;
+    padding: 1rem;
+    min-height: 100vh;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+
+/* Main container */
+.container-md {
+    max-width: 768px;
+    margin: 0 auto;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius);
+    padding: 2rem;
+    box-shadow: var(--elevation-3);
+    animation: slideUp 0.6s var(--transition);
+    width: calc(100% - 2rem);
+}
+
+@supports not (backdrop-filter: blur(20px)) {
+    .container-md {
+        background: var(--bg-secondary);
+        border: 1px solid var(--border);
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* SVG icons */
+.link-card svg {
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    transition: var(--transition);
+    filter: drop-shadow(0 1px 2px var(--shadow));
+}
+
+/* Link text */
+.link-card .link-text {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    line-height: 1.3;
+    white-space: nowrap;
+}
+
+/* Enhanced hover effects that preserve brand colors */
+@media (hover: hover) and (pointer: fine) {
+    a.link-card:hover svg {
+        transform: scale(1.1) !important;
+        filter: drop-shadow(0 2px 4px var(--app-shadow)) brightness(1.1) !important;
+    }
+    
+    a.link-card:hover .link-text {
+        color: var(--app-primary) !important;
+    }
+}
+
+/* Brand colors */
+.link-card svg {
+    color: var(--primary);
+}
+
+.link-card[href*="youtube"] svg { color: #FF0000; }
+.link-card[href*="discord"] svg { color: #5865F2; }
+.link-card[href*="twitch"] svg { color: #9146FF; }
+.link-card[href*="tiktok"] svg { color: #FF0050; }
+.link-card[href*="instagram"] svg { color: #E4405F; }
+.link-card[href*="bluesky"] svg { color: #0085FF; }
+.link-card[href*="twitter"] svg { color: #1DA1F2; }
+/* Text in link cards */
+ul.list-style-none li a.link-card .link-text,
+ul li a.link-card .link-text,
+a.link-card .link-text,
+.link-card .link-text {
+    display: block !important;
+    font-size: 1.1rem !important;
+    font-weight: 600 !important;
+    color: var(--app-text-primary) !important;
+    line-height: 1.3 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+}
+
+/* Link cards */
+.link-card {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 100%;
+    min-height: 72px;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    gap: 1rem;
+    background: var(--glass-bg) !important;
+    border: 1px solid var(--glass-border) !important;
+    border-radius: var(--radius);
+    box-shadow: var(--elevation-1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: var(--text-primary) !important;
+    text-decoration: none !important;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: var(--transition);
+    -webkit-tap-highlight-color: transparent;
+}
+
+@supports not (backdrop-filter: blur(10px)) {
+    .link-card {
+        background: var(--bg-secondary) !important;
+        border: 1px solid var(--border) !important;
+    }
+}
+
+/* Link card hover effects */
+@media (hover: hover) {
+    .link-card:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--elevation-2);
+        border-color: var(--primary) !important;
+        background: var(--glass-bg) !important;
+    }
+    
+    .link-card:hover svg {
+        transform: scale(1.1);
+        filter: drop-shadow(0 2px 4px var(--shadow)) brightness(1.1);
+    }
+    
+    .link-card:hover .link-text {
+        color: var(--primary) !important;
+    }
+}
+
+.link-card:active {
+    transform: translateY(0);
+    transition: all 0.1s ease;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    body { padding: 0.75rem; }
+    .container-md {
+        padding: 1.75rem;
+        width: calc(100% - 1.5rem);
+        border-radius: 16px;
+    }
+    .link-card {
+        min-height: 68px;
+        padding: 1.25rem;
+        gap: 0.875rem;
+        font-size: 1rem;
+    }
+    .link-card svg {
+        width: 1.75rem;
+        height: 1.75rem;
+    }
+}
+
+@media (max-width: 480px) {
+    body { padding: 0.5rem; }
+    .container-md {
+        padding: 1.5rem;
+        width: calc(100% - 1rem);
+        border-radius: 12px;
+    }
+    .link-card {
+        min-height: 64px;
+        padding: 1.125rem;
+        gap: 0.75rem;
+        font-size: 0.95rem;
+    }
+    .link-card svg {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+}
+
+/* Footer spacing */
+footer.my-6 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+}
+
+/* Focus and accessibility */
+a:focus, button:focus {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+    border-radius: 4px;
+}
+
+.keyboard-navigation *:focus {
+    outline: 2px solid var(--primary) !important;
+    outline-offset: 2px !important;
+}
+
+/* Image animations */
+.loaded {
+    animation: imageLoad 0.3s ease;
+}
+
+@keyframes imageLoad {
+    from { opacity: 0; transform: scale(1.02); }
+    to { opacity: 1; transform: scale(1); }
+}
diff --git a/assets/js/lazy-load.js b/assets/js/lazy-load.js
index c7293ed..6d004fd 100644
--- a/assets/js/lazy-load.js
+++ b/assets/js/lazy-load.js
@@ -1,25 +1,84 @@
-document.addEventListener("DOMContentLoaded", function() {
-    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
+// Modern Link Tree - Optimized Performance
 
-    if ("IntersectionObserver" in window) {
-        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
-            entries.forEach(function(entry) {
-                if (entry.isIntersecting) {
-                    let lazyImage = entry.target;
-                    lazyImage.src = lazyImage.dataset.src;
-                    lazyImage.classList.remove("lazy");
-                    lazyImageObserver.unobserve(lazyImage);
-                }
+class LinkTreeApp {
+    constructor() {
+        this.isOnline = navigator.onLine;
+        this.init();
+    }
+    
+    init() {
+        this.setupLazyLoading();
+        this.setupNetworkStatus();
+        this.setupAccessibility();
+        console.log('Link Tree initialized');
+    }
+    
+    setupLazyLoading() {
+        const lazyImages = document.querySelectorAll('img.lazy, img[data-src]');
+        
+        if ('IntersectionObserver' in window && lazyImages.length) {
+            const imageObserver = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        this.loadImage(entry.target);
+                        imageObserver.unobserve(entry.target);
+                    }
+                });
+            }, {
+                rootMargin: '50px 0px',
+                threshold: 0.01
             });
+            
+            lazyImages.forEach(img => imageObserver.observe(img));
+        }
+    }
+    
+    loadImage(img) {
+        const src = img.dataset.src || img.src;
+        if (src) {
+            img.src = src;
+            img.classList.remove('lazy');
+            img.classList.add('loaded');
+            
+            img.style.opacity = '0';
+            img.onload = () => {
+                img.style.transition = 'opacity 0.3s ease';
+                img.style.opacity = '1';
+            };
+        }
+    }
+    
+    setupNetworkStatus() {
+        const updateStatus = () => {
+            this.isOnline = navigator.onLine;
+            document.body.classList.toggle('offline', !this.isOnline);
+        };
+        
+        window.addEventListener('online', updateStatus);
+        window.addEventListener('offline', updateStatus);
+        updateStatus();
+    }
+    
+    setupAccessibility() {
+        let isTabbing = false;
+        
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Tab' && !isTabbing) {
+                isTabbing = true;
+                document.body.classList.add('keyboard-navigation');
+            }
         });
-
-        lazyImages.forEach(function(lazyImage) {
-            lazyImageObserver.observe(lazyImage);
-        });
-    } else {
-        lazyImages.forEach(function(lazyImage) {
-            lazyImage.src = lazyImage.dataset.src;
-            lazyImage.classList.remove("lazy");
+        
+        document.addEventListener('mousedown', () => {
+            if (isTabbing) {
+                isTabbing = false;
+                document.body.classList.remove('keyboard-navigation');
+            }
         });
     }
-});
\ No newline at end of file
+}
+
+// Initialize efficiently
+document.readyState === 'loading' 
+    ? document.addEventListener('DOMContentLoaded', () => new LinkTreeApp())
+    : new LinkTreeApp();
diff --git a/manifest.json b/manifest.json
index c8fdfb1..c66bd26 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,43 +1,67 @@
 {
-"protocol_handlers": [{"protocol":"","url":"/"}], 
-"name": "Lautner",
-"short_name": "Lautner",
-"start_url": "/",
-"display": "standalone",
-"description": "Lautner's links and socials, Fun Minecraft content, modded Minecraft, let's play, and challenge videos!",
-"lang": " The default language of your application",
-"dir": "auto",
-"theme_color": "#000000",
-"background_color": "#000000",
-"orientation": "any",
-"icons": [
+  "name": "Lautner",
+  "short_name": "Lautner",
+  "description": "Lautner's links and socials, Fun Minecraft content, modded Minecraft, let's play, and challenge videos!",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "display_override": ["window-controls-overlay", "standalone", "minimal-ui"],
+  "orientation": "any",
+  "lang": "en",
+  "dir": "auto",
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "edge_side_panel": {
+    "preferred_width": 400
+  },
+  "icons": [
     {
-        "src": "/manifest-icon-512.maskable.png",
-        "sizes": "512x512",
-        "type": "image/png",
-        "purpose": "maskable"
+      "src": "/manifest-icon-512.maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-        "src": "/manifest-icon-192.maskable.png",
-        "sizes": "192x192",
-        "type": "image/png",
-        "purpose": "any"
+      "src": "/manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "monochrome"
     }
-],
-"screenshots": [
+  ],
+  "screenshots": [
     {
-        "src": "/Screenshot.png",
-        "sizes": "2880x1800",
-        "type": "image/png",
-        "description": "A screenshot of the home page"
+      "src": "/Screenshot.png",
+      "sizes": "2880x1800",
+      "type": "image/png",
+      "description": "A screenshot of the home page",
+      "form_factor": "wide"
     }
-],
-"prefer_related_applications": false,
-"shortcuts": [
+  ],
+  "categories": ["entertainment", "social", "games"],
+  "shortcuts": [
     {
-        "name":"Shortcut",
-        "url":"/shortcut",
-        "description":"shortcut"
+      "name": "Quick Links",
+      "short_name": "Links",
+      "description": "Access social links directly",
+      "url": "/#links",
+      "icons": [
+        {
+          "src": "/manifest-icon-192.maskable.png",
+          "sizes": "192x192"
+        }
+      ]
     }
-]
+  ],
+  "prefer_related_applications": false,
+  "protocol_handlers": [],
+  "handle_links": "preferred",
+  "launch_handler": {
+    "client_mode": ["navigate-existing", "auto"]
+  }
 }
\ No newline at end of file
diff --git a/service-worker.js b/service-worker.js
index a57f769..d6b0f76 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -1,60 +1,84 @@
 
-    // Based off of https://github.com/pwa-builder/PWABuilder/blob/main/docs/sw.js
-
-    /*
-      Welcome to our basic Service Worker! This Service Worker offers a basic offline experience
-      while also being easily customizeable. You can add in your own code to implement the capabilities
-      listed below, or change anything else you would like.
-
-
-      Need an introduction to Service Workers? Check our docs here: https://docs.pwabuilder.com/#/home/sw-intro
-      Want to learn more about how our Service Worker generation works? Check our docs here: https://docs.pwabuilder.com/#/studio/existing-app?id=add-a-service-worker
-
-      Did you know that Service Workers offer many more capabilities than just offline? 
-        - Background Sync: https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/06
-        - Periodic Background Sync: https://web.dev/periodic-background-sync/
-        - Push Notifications: https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/07?id=push-notifications-on-the-web
-        - Badges: https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/07?id=application-badges
-    */
+    // Enhanced Service Worker with modern PWA capabilities
+    // Optimized for app-like experience across all devices
 
+    const CACHE_NAME = 'lautner-app-v2.0';
+    const RUNTIME_CACHE = 'lautner-runtime-v2.0';
+    const OFFLINE_CACHE = 'lautner-offline-v2.0';
+    
     const HOSTNAME_WHITELIST = [
         self.location.hostname,
         'fonts.gstatic.com',
         'fonts.googleapis.com',
-        'cdn.jsdelivr.net'
-    ]
+        'cdn.jsdelivr.net',
+        'cdnjs.cloudflare.com',
+        'unpkg.com'
+    ];
+    
+    // Critical resources to cache immediately
+    const CRITICAL_RESOURCES = [
+        '/',
+        '/index.html',
+        '/assets/css/primer.css',
+        '/assets/css/custom.css',
+        '/assets/css/bootstrap-icons.css',
+        '/assets/js/lazy-load.js',
+        '/manifest.json'
+    ];
+    
+    // Install event - cache critical resources
+    self.addEventListener('install', event => {
+        event.waitUntil(
+            caches.open(CACHE_NAME)
+                .then(cache => {
+                    console.log('Caching critical resources');
+                    return cache.addAll(CRITICAL_RESOURCES);
+                })
+                .then(() => self.skipWaiting())
+        );
+    });
 
-    // The Util Function to hack URLs of intercepted requests
+    // Enhanced URL utility function for cache busting and protocol fixes
     const getFixedUrl = (req) => {
-        var now = Date.now()
-        var url = new URL(req.url)
+        const now = Date.now();
+        const url = new URL(req.url);
 
-        // 1. fixed http URL
-        // Just keep syncing with location.protocol
-        // fetch(httpURL) belongs to active mixed content.
-        // And fetch(httpRequest) is not supported yet.
-        url.protocol = self.location.protocol
+        // 1. Fixed http URL - sync with location.protocol
+        url.protocol = self.location.protocol;
 
-        // 2. add query for caching-busting.
-        // Github Pages served with Cache-Control: max-age=600
-        // max-age on mutable content is error-prone, with SW life of bugs can even extend.
-        // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string.
-        // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190
+        // 2. Add query for cache-busting (GitHub Pages specific)
         if (url.hostname === self.location.hostname) {
-            url.search += (url.search ? '&' : '?') + 'cache-bust=' + now
+            url.search += (url.search ? '&' : '?') + 'cache-bust=' + now;
         }
-        return url.href
-    }
+        
+        return url.href;
+    };
 
     /**
      *  @Lifecycle Activate
-     *  New one activated when old isnt being used.
-     *
-     *  waitUntil(): activating ====> activated
+     *  Clean up old caches and claim all clients
      */
     self.addEventListener('activate', event => {
-      event.waitUntil(self.clients.claim())
-    })
+        event.waitUntil(
+            Promise.all([
+                // Clean up old caches
+                caches.keys().then(cacheNames => {
+                    return Promise.all(
+                        cacheNames.map(cacheName => {
+                            if (cacheName !== CACHE_NAME && 
+                                cacheName !== RUNTIME_CACHE && 
+                                cacheName !== OFFLINE_CACHE) {
+                                console.log('Deleting old cache:', cacheName);
+                                return caches.delete(cacheName);
+                            }
+                        })
+                    );
+                }),
+                // Take control of all pages immediately
+                self.clients.claim()
+            ])
+        );
+    });
 
     /**
      *  @Functional Fetch