diff --git a/apple-touch-icon.png b/apple-touch-icon.png
new file mode 100644
index 0000000..6359e00
Binary files /dev/null and b/apple-touch-icon.png differ
diff --git a/favicon-96x96.png b/favicon-96x96.png
new file mode 100644
index 0000000..728fe1a
Binary files /dev/null and b/favicon-96x96.png differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..cf1b088
Binary files /dev/null and b/favicon.ico differ
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..b33397c
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="32" height="32"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>75-Write</title><g id="SvgjsG1001" data-name="75-Write"><path d="M30,7V25a5,5,0,0,1-5,5H7a5,5,0,0,1-5-5V7A5,5,0,0,1,7,2h9V0H7A7,7,0,0,0,0,7V25a7,7,0,0,0,7,7H25a7,7,0,0,0,7-7V7Z"></path><path d="M22.38,24H11a3,3,0,0,1,0-6h4V16H11a5,5,0,0,0,0,10H24a1,1,0,0,0,.89-.55l2-4A1,1,0,0,0,27,21V1a1,1,0,0,0-1-1H22a1,1,0,0,0-1,1V21a1,1,0,0,0,.11.45ZM23,2h2V3H23Zm0,3h2V20H23Z"></path></g></svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>
\ No newline at end of file
diff --git a/icon.svg b/icon.svg
new file mode 100644
index 0000000..d705003
--- /dev/null
+++ b/icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>75-Write</title><g id="_75-Write" data-name="75-Write"><path d="M30,7V25a5,5,0,0,1-5,5H7a5,5,0,0,1-5-5V7A5,5,0,0,1,7,2h9V0H7A7,7,0,0,0,0,7V25a7,7,0,0,0,7,7H25a7,7,0,0,0,7-7V7Z"/><path d="M22.38,24H11a3,3,0,0,1,0-6h4V16H11a5,5,0,0,0,0,10H24a1,1,0,0,0,.89-.55l2-4A1,1,0,0,0,27,21V1a1,1,0,0,0-1-1H22a1,1,0,0,0-1,1V21a1,1,0,0,0,.11.45ZM23,2h2V3H23Zm0,3h2V20H23Z"/></g></svg>
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..0f92904
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,26 @@
+{
+  "name": "CleanType",
+  "short_name": "CleanType",
+  "description": "Modern writing, minimalist thinking",
+  "icons": [
+    {
+      "src": "/favicon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/",
+  "theme_color": "#0f172a",
+  "background_color": "#0f172a",
+  "display": "standalone"
+} 
\ No newline at end of file
diff --git a/og-image.png b/og-image.png
new file mode 100644
index 0000000..38fdc83
Binary files /dev/null and b/og-image.png differ
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 6e7f48f..0000000
--- a/public/index.html
+++ /dev/null
@@ -1,665 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CleanType - Modern Text Editor</title>
-    
-    <!-- Favicons -->
-    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="manifest" href="/manifest.json" />
-    
-    <!-- Open Graph Meta Tags -->
-    <meta property="og:title" content="CleanType - Modern writing, minimalist thinking">
-    <meta property="og:description" content="A modern, distraction-free text editor for focused writing. Clean interface, fast performance, and beautiful design.">
-    <meta property="og:image" content="https://raw.githubusercontent.com/StarKnightt/cleantype/main/public/og-image.png">
-    <meta property="og:url" content="https://github.com/StarKnightt/cleantype">
-    <meta property="og:type" content="website">
-    
-    <!-- Twitter Card Meta Tags -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="CleanType - Modern writing, minimalist thinking">
-    <meta name="twitter:description" content="A modern, distraction-free text editor for focused writing. Clean interface, fast performance, and beautiful design.">
-    <meta name="twitter:image" content="https://raw.githubusercontent.com/StarKnightt/cleantype/main/public/og-image.png">
-    
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-        }
-
-        body {
-            background: #0f172a;
-            color: #f8fafc;
-            line-height: 1.6;
-            overflow-x: hidden;
-            cursor: none;
-        }
-
-        .cursor-fx {
-            position: fixed;
-            pointer-events: none;
-            z-index: 9999;
-        }
-
-        .cursor-main {
-            width: 8px;
-            height: 8px;
-            background: #60a5fa;
-            border-radius: 50%;
-            opacity: 0.8;
-        }
-
-        .cursor-trail {
-            width: 24px;
-            height: 24px;
-            border: 2px solid rgba(96, 165, 250, 0.5);
-            border-radius: 50%;
-            transition: transform 0.3s;
-        }
-
-        .svg-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-            pointer-events: none;
-        }
-
-        .morph-path {
-            fill: none;
-            stroke: rgba(255, 255, 255, 0.03);
-            stroke-width: 1;
-        }
-
-        .hero-svg {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 600px;
-            height: 600px;
-            opacity: 0.1;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            position: relative;
-        }
-
-        .hero {
-            text-align: center;
-            margin-bottom: 4rem;
-            position: relative;
-        }
-
-        .hero::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle at center, rgba(96, 165, 250, 0.1) 0%, transparent 50%);
-            transform: translate(-25%, -25%);
-            pointer-events: none;
-        }
-
-        h1 {
-            font-size: 4.5rem;
-            font-weight: 700;
-            margin-bottom: 1rem;
-            background: linear-gradient(135deg, #60a5fa, #a855f7);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-            -webkit-text-fill-color: transparent;
-            opacity: 0;
-            filter: blur(10px);
-            position: relative;
-        }
-
-        .subtitle {
-            font-size: 1.25rem;
-            color: #94a3b8;
-            max-width: 600px;
-            margin: 0 auto 2rem;
-            opacity: 0;
-        }
-
-        .download-section {
-            text-align: center;
-            margin-bottom: 4rem;
-            position: relative;
-        }
-
-        .download-button {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.5rem;
-            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
-            color: white;
-            padding: 1rem 2rem;
-            border-radius: 12px;
-            text-decoration: none;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .download-button::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: 0.5s;
-        }
-
-        .download-button:hover::before {
-            left: 100%;
-        }
-
-        .download-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
-        }
-
-        .features {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-            margin-bottom: 4rem;
-        }
-
-        .feature {
-            padding: 2rem;
-            background: rgba(255, 255, 255, 0.03);
-            border-radius: 16px;
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            transform: scale(0.9);
-            opacity: 0;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .feature::after {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-            opacity: 0;
-            transition: opacity 0.3s;
-            transform: translate(-50%, -50%);
-            pointer-events: none;
-        }
-
-        .feature:hover::after {
-            opacity: 1;
-        }
-
-        .feature h3 {
-            font-size: 1.25rem;
-            margin-bottom: 1rem;
-            color: #f8fafc;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .feature p {
-            color: #94a3b8;
-        }
-
-        .security-notice {
-            margin-top: 1rem;
-            padding: 1.5rem;
-            background: rgba(255, 247, 237, 0.03);
-            border: 1px solid rgba(254, 215, 170, 0.2);
-            border-radius: 12px;
-            font-size: 0.875rem;
-            color: #fed7aa;
-            max-width: 600px;
-            margin-left: auto;
-            margin-right: auto;
-            backdrop-filter: blur(10px);
-            transform: translateY(20px);
-            opacity: 0;
-        }
-
-        .footer {
-            text-align: center;
-            color: #64748b;
-            margin-top: auto;
-            padding-top: 2rem;
-            opacity: 0;
-        }
-
-        .footer a {
-            color: #60a5fa;
-            text-decoration: none;
-        }
-
-        .footer a:hover {
-            text-decoration: underline;
-        }
-
-        .button-note {
-            font-size: 0.75rem;
-            opacity: 0.8;
-        }
-
-        @media (max-width: 768px) {
-            .container {
-                padding: 1rem;
-            }
-
-            h1 {
-                font-size: 2.5rem;
-            }
-
-            .subtitle {
-                font-size: 1.1rem;
-            }
-        }
-
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-20px); }
-            100% { transform: translateY(0px); }
-        }
-
-        .floating {
-            animation: float 6s ease-in-out infinite;
-        }
-
-        .github-section {
-            text-align: center;
-            margin: 2rem auto;
-            opacity: 0;
-            transform: translateY(20px);
-        }
-
-        .github-button {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.75rem;
-            background: rgba(255, 255, 255, 0.1);
-            color: #f8fafc;
-            padding: 0.75rem 1.5rem;
-            border-radius: 12px;
-            text-decoration: none;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-        }
-
-        .github-button:hover {
-            background: rgba(255, 255, 255, 0.15);
-            transform: translateY(-2px);
-            border-color: rgba(255, 255, 255, 0.2);
-        }
-
-        .github-button svg {
-            width: 24px;
-            height: 24px;
-            transition: transform 0.3s ease;
-        }
-
-        .github-button:hover svg {
-            transform: rotate(360deg) scale(1.1);
-        }
-
-        .star-count {
-            background: rgba(255, 255, 255, 0.1);
-            padding: 0.25rem 0.75rem;
-            border-radius: 20px;
-            font-size: 0.875rem;
-            transition: all 0.3s ease;
-        }
-
-        .github-button:hover .star-count {
-            background: rgba(255, 255, 255, 0.2);
-        }
-
-        @media (max-width: 768px) {
-            .github-button {
-                padding: 0.5rem 1rem;
-                font-size: 0.875rem;
-            }
-
-            .github-button svg {
-                width: 20px;
-                height: 20px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="cursor-fx cursor-main"></div>
-    <div class="cursor-fx cursor-trail"></div>
-
-    <div class="svg-container">
-        <svg class="hero-svg" viewBox="0 0 100 100">
-            <path class="morph-path" d="M10,50 Q50,10 90,50 T90,50" />
-            <path class="morph-path" d="M10,50 Q50,90 90,50 T90,50" />
-        </svg>
-        <svg class="hero-svg" viewBox="0 0 100 100" style="transform: rotate(60deg)">
-            <path class="morph-path" d="M10,50 Q50,10 90,50 T90,50" />
-            <path class="morph-path" d="M10,50 Q50,90 90,50 T90,50" />
-        </svg>
-        <svg class="hero-svg" viewBox="0 0 100 100" style="transform: rotate(-60deg)">
-            <path class="morph-path" d="M10,50 Q50,10 90,50 T90,50" />
-            <path class="morph-path" d="M10,50 Q50,90 90,50 T90,50" />
-        </svg>
-    </div>
-
-    <div class="container">
-        <div class="hero">
-            <h1>CleanType</h1>
-            <p class="subtitle">A modern, distraction-free text editor for focused writing</p>
-            <div class="download-section">
-                <a href="https://github.com/StarKnightt/cleantype/releases/download/v0.1.0/CleanType_0.1.0_x64-setup.exe" 
-                   class="download-button">
-                    Download CleanType
-                    <span class="button-note">Windows Installer (Recommended)</span>
-                </a>
-            </div>
-            <div class="security-notice">
-                <strong>⚠️ Windows SmartScreen Notice:</strong> Since this is a new application pending certification, 
-                Windows SmartScreen might show a warning. This is normal for new software. To proceed:
-                <br>1. Click "More info"
-                <br>2. Select "Run anyway"
-                <br>We're working on obtaining a code signing certificate to remove this warning.
-            </div>
-            <div class="github-section">
-                <a href="https://github.com/StarKnightt/CleanType" target="_blank" rel="noopener noreferrer" class="github-button">
-                    <svg viewBox="0 0 16 16" fill="currentColor">
-                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
-                    </svg>
-                    Star on GitHub
-                    <span class="star-count">⭐</span>
-                </a>
-            </div>
-        </div>
-
-        <div class="features">
-            <div class="feature">
-                <h3>🎯 Distraction-Free</h3>
-                <p>Clean interface designed for focused writing sessions without unnecessary clutter.</p>
-            </div>
-            <div class="feature">
-                <h3>⚡ Fast & Efficient</h3>
-                <p>Built with Rust and Tauri for lightning-fast performance and minimal resource usage.</p>
-            </div>
-            <div class="feature">
-                <h3>🎨 Customizable</h3>
-                <p>Choose from various fonts, themes, and layouts to match your writing style.</p>
-            </div>
-        </div>
-
-        <footer class="footer">
-            <p>Made with ❤️ by <a href="https://github.com/StarKnightt">StarKnightt</a></p>
-        </footer>
-    </div>
-
-    <script>
-        // Optimized cursor animation
-        const cursorMain = document.querySelector('.cursor-main');
-        const cursorTrail = document.querySelector('.cursor-trail');
-        let mouseX = 0, mouseY = 0;
-        let cursorX = 0, cursorY = 0;
-        let trailX = 0, trailY = 0;
-        let speed = 0.15;
-
-        document.addEventListener('mousemove', (e) => {
-            mouseX = e.clientX;
-            mouseY = e.clientY;
-        });
-
-        function updateCursor() {
-            // Main cursor with physics
-            let dx = mouseX - cursorX;
-            let dy = mouseY - cursorY;
-            cursorX += dx * speed;
-            cursorY += dy * speed;
-            cursorMain.style.transform = `translate3d(${cursorX - 4}px, ${cursorY - 4}px, 0)`;
-
-            // Trail cursor with delayed following
-            let trailDx = mouseX - trailX;
-            let trailDy = mouseY - trailY;
-            trailX += trailDx * (speed * 0.5);
-            trailY += trailDy * (speed * 0.5);
-            cursorTrail.style.transform = `translate3d(${trailX - 12}px, ${trailY - 12}px, 0)`;
-
-            requestAnimationFrame(updateCursor);
-        }
-        updateCursor();
-
-        // Enhanced hover effects
-        document.querySelectorAll('a, .feature, .download-button').forEach(el => {
-            el.addEventListener('mouseenter', () => {
-                anime({
-                    targets: '.cursor-trail',
-                    scale: 1.5,
-                    duration: 600,
-                    easing: 'spring(1, 80, 10, 0)'
-                });
-            });
-
-            el.addEventListener('mouseleave', () => {
-                anime({
-                    targets: '.cursor-trail',
-                    scale: 1,
-                    duration: 600,
-                    easing: 'spring(1, 80, 10, 0)'
-                });
-            });
-        });
-
-        // SVG Morphing Animation with multiple paths
-        const morphPaths = document.querySelectorAll('.morph-path');
-        morphPaths.forEach((path, index) => {
-            anime({
-                targets: path,
-                d: [
-                    { value: 'M10,50 Q50,10 90,50 T90,50' },
-                    { value: 'M10,50 Q50,90 90,50 T90,50' },
-                    { value: 'M10,50 Q50,50 90,50 T90,50' }
-                ],
-                duration: 8000,
-                delay: index * 200,
-                easing: 'easeInOutSine',
-                loop: true,
-                direction: 'alternate'
-            });
-        });
-
-        // Enhanced timeline animations
-        const mainTimeline = anime.timeline({
-            easing: 'easeOutExpo'
-        });
-
-        mainTimeline
-        .add({
-            targets: '.hero h1',
-            opacity: [0, 1],
-            filter: ['blur(10px)', 'blur(0)'],
-            scale: [0.8, 1],
-            duration: 2000,
-            delay: 300
-        })
-        .add({
-            targets: '.hero .subtitle',
-            opacity: [0, 1],
-            translateY: [30, 0],
-            duration: 1200,
-            offset: '-=1800'
-        })
-        .add({
-            targets: '.download-button',
-            opacity: [0, 1],
-            translateY: [30, 0],
-            scale: [0.9, 1],
-            duration: 1200,
-            offset: '-=1000'
-        })
-        .add({
-            targets: '.security-notice',
-            opacity: [0, 1],
-            translateY: [30, 0],
-            duration: 1000,
-            offset: '-=800'
-        });
-
-        // Feature cards with physics-based animations
-        const features = document.querySelectorAll('.feature');
-        features.forEach((feature, index) => {
-            anime({
-                targets: feature,
-                translateY: [100, 0],
-                opacity: [0, 1],
-                scale: [0.8, 1],
-                delay: 1000 + (index * 200),
-                duration: 1500,
-                easing: 'spring(1, 80, 10, 0)'
-            });
-
-            // Interactive tilt effect with physics
-            feature.addEventListener('mousemove', (e) => {
-                const rect = feature.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
-                const centerX = rect.width / 2;
-                const centerY = rect.height / 2;
-                
-                const rotateX = ((y - centerY) / centerY) * -10;
-                const rotateY = ((x - centerX) / centerX) * 10;
-
-                anime({
-                    targets: feature,
-                    rotateX: rotateX,
-                    rotateY: rotateY,
-                    translateZ: 50,
-                    duration: 50,
-                    easing: 'linear'
-                });
-            });
-
-            feature.addEventListener('mouseleave', () => {
-                anime({
-                    targets: feature,
-                    rotateX: 0,
-                    rotateY: 0,
-                    translateZ: 0,
-                    duration: 1000,
-                    easing: 'spring(1, 80, 10, 0)'
-                });
-            });
-        });
-
-        // Download button effects
-        const downloadButton = document.querySelector('.download-button');
-        downloadButton.addEventListener('mouseenter', () => {
-            anime({
-                targets: downloadButton,
-                scale: 1.05,
-                duration: 500,
-                easing: 'spring(1, 80, 10, 0)'
-            });
-        });
-
-        downloadButton.addEventListener('mouseleave', () => {
-            anime({
-                targets: downloadButton,
-                scale: 1,
-                duration: 500,
-                easing: 'spring(1, 80, 10, 0)'
-            });
-        });
-
-        // Background gradient animation
-        anime({
-            targets: '.hero::before',
-            translateX: [-25, 25],
-            translateY: [-25, 25],
-            duration: 10000,
-            direction: 'alternate',
-            loop: true,
-            easing: 'easeInOutQuad'
-        });
-
-        // GitHub section animation
-        anime({
-            targets: '.github-section',
-            opacity: [0, 1],
-            translateY: [20, 0],
-            duration: 1000,
-            easing: 'spring(1, 80, 10, 0)',
-            delay: 1200
-        });
-
-        // Fetch GitHub stars count
-        async function updateStarCount() {
-            try {
-                const response = await fetch('https://api.github.com/repos/StarKnightt/CleanType');
-                const data = await response.json();
-                const starCount = document.querySelector('.star-count');
-                if (starCount && data.stargazers_count !== undefined) {
-                    starCount.textContent = `⭐ ${data.stargazers_count}`;
-                }
-            } catch (error) {
-                console.log('Error fetching star count:', error);
-            }
-        }
-        updateStarCount();
-
-        // Add hover effect for GitHub button
-        const githubButton = document.querySelector('.github-button');
-        githubButton.addEventListener('mouseenter', () => {
-            anime({
-                targets: '.github-button svg',
-                rotate: 360,
-                scale: 1.1,
-                duration: 600,
-                easing: 'spring(1, 80, 10, 0)'
-            });
-        });
-
-        githubButton.addEventListener('mouseleave', () => {
-            anime({
-                targets: '.github-button svg',
-                rotate: 0,
-                scale: 1,
-                duration: 600,
-                easing: 'spring(1, 80, 10, 0)'
-            });
-        });
-    </script>
-</body>
-</html>
diff --git a/web-app-manifest-192x192.png b/web-app-manifest-192x192.png
new file mode 100644
index 0000000..022c80a
Binary files /dev/null and b/web-app-manifest-192x192.png differ
diff --git a/web-app-manifest-512x512.png b/web-app-manifest-512x512.png
new file mode 100644
index 0000000..98acac3
Binary files /dev/null and b/web-app-manifest-512x512.png differ
