diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..84f95e2
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RE.DFINED BIO</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      
+        textarea {
+            resize: none; 
+        }
+
+        textarea::-webkit-scrollbar {
+            width: 12px;
+        }
+
+        textarea::-webkit-scrollbar-track {
+            background: rgba(136, 136, 136, 0.2);
+            border-radius: 10px;
+        }
+
+        textarea::-webkit-scrollbar-thumb {
+            background: rgba(214, 214, 214, 0.5);
+            border-radius: 10px;
+        }
+
+        textarea::-webkit-scrollbar-thumb:hover {
+            background: rgba(85, 85, 85, 0.8);
+        }
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+    </style>
+    <script>
+
+        function saveFormData() {
+            localStorage.setItem('lastfm_username', document.getElementById('lastfm_username').value);
+            localStorage.setItem('y99_session_token', document.getElementById('y99_session_token').value);
+            localStorage.setItem('bio_template', document.getElementById('bio_template').value);
+        }
+
+
+        document.addEventListener('DOMContentLoaded', function() {
+
+            document.getElementById('lastfm_username').value = localStorage.getItem('lastfm_username') || '';
+            document.getElementById('y99_session_token').value = localStorage.getItem('y99_session_token') || '';
+            document.getElementById('bio_template').value = localStorage.getItem('bio_template') || '';
+
+
+            document.getElementById('monitoringForm').addEventListener('input', saveFormData);
+        });
+    </script>
+</head>
+<body class="dark:bg-gray-900 text-white min-h-screen flex items-center justify-center backdrop-filter backdrop-blur-lg" style="background-image: url('https://cdn.neowin.com/news/images/galleries/4686/1654793763_2-ventura-bloom-dark.jpg'); background-size: cover;">
+
+
+    <div class="container max-w-lg mx-auto bg-black bg-opacity-30 backdrop-blur-md rounded-xl shadow-lg p-8 text-center">
+
+        <img class="center" style="height:200px;" src="https://cloud.re.dfined.net/apps/files_sharing/publicpreview/k6sCc87WjRDbkHM?file=/&fileId=2041&x=1924&y=924&a=true&etag=25010b217b1059db37a0f3aa37026641" alt="Logo">
+        
+
+        <form id="monitoringForm" method="post" action="/start_monitoring" class="space-y-4">
+            <div class="form-group">
+                <label for="lastfm_username" class="block text-left dark:text-gray-300 font-semibold mb-2">Last.fm Username:</label>
+                <input type="text" id="lastfm_username" name="lastfm_username" required 
+                    class="w-full p-3 border dark:border-gray-500 rounded-lg shadow-sm bg-white bg-opacity-20 text-white focus:outline-none focus:ring-2 focus:ring-purple-400">
+            </div>
+            
+            <div class="form-group">
+                <label for="y99_session_token" class="block text-left dark:text-gray-300 font-semibold mb-2">Y99 Session Token:</label>
+                <input type="password" id="y99_session_token" name="y99_session_token" required
+                    class="w-full p-3 border dark:border-gray-500 rounded-lg shadow-sm bg-white bg-opacity-20 text-white focus:outline-none focus:ring-2 focus:ring-purple-400">
+            </div>
+            
+            <div class="form-group">
+                <label for="bio_template" class="block text-left text-gray-300 font-semibold mb-2">Bio Template:</label>
+                <textarea id="bio_template" style="resize: none; height: 250px;" name="bio_template" required 
+                    class="w-full p-3 border dark:border-gray-500 rounded-lg shadow-sm bg-white bg-opacity-20 text-white focus:outline-none focus:ring-2 focus:ring-purple-400"
+                    placeholder="Use {song_title} and {youtube_link} as placeholders."></textarea>
+                <small class="block text-left dark:text-gray-400">Use <code>{song_title}</code> and <code>{youtube_link}</code> as placeholders.</small>
+            </div>
+            
+            <input type="submit" value="Start Monitoring" 
+                class="w-full dark:bg-purple-500 hover:bg-purple-700 text-white font-bold py-3 rounded-lg shadow-lg cursor-pointer transition duration-200 ease-in-out">
+        </form>
+        
+        <p class="text-sm dark:text-gray-400 mt-6">Powered by Last.fm & Y99</p>
+        <a class="text-sm dark:text-gray-400 mt-6">Made with ♡ by Skye [RE.DFINED]</a>
+    </div>
+
+</body>
+</html>
