diff --git a/src/index.html b/src/index.html
index 9ceaa1d..3c7a4da 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,9 +7,10 @@
     <link href="output.css" rel="stylesheet">
 </head>
 
-<body>
+<body class="bg-gradient-to-t from-black to-fuchsia-800 w-full h-full min-h-screen">
 
-    <nav class="bg-gradient-to-l from-fuchsia-800 to-cyan-600 p-4">
+    <nav
+        class="bg-gradient-to-l from-fuchsia-800/90 to-cyan-600/90 p-4 drop-shadow-lg sticky top-0 z-50 backdrop-blur-sm">
         <ul class="flex justify-center w-full">
             <li class="ml-6">
                 <a href="#" class="text-white hover:text-gray-300"><code class="text-xl">SNOTES</code></a>
@@ -20,12 +21,43 @@
             </li>
         </ul>
     </nav>
-
-    <div class="container mx-auto bg-white dark:bg-slate-900 text-black dark:text-white">
-        <h1 class="text-4xl font-bold text-center mt-8">Welcome to My Website</h1>
-        <p class="text-lg text-center mt-4">This is a basic Tailwind CSS boilerplate.</p>
+    <div>
+        <div class="flex flex-col md:flex-row ml-10 mr-10 mt-20 justify-center items-center">
+            <div class="w-full md:w-full flex-grow">
+                <img src="screenshot.png" alt="Screenshot of the software" class="drop-shadow-lg">
+            </div>
+            <div
+                class="w-full md:w-1/2 bg-cyan-600/50 text-white p-8 rounded-lg ml-10 mr-10 sm:mt-10 sm:text-center backdrop-blur-sm drop-shadow-lg">
+                <h1
+                    class="text-4xl font-bold mb-4 text-center bg-gradient-to-r from-purple-300 to-pink-200 text-transparent bg-clip-text">
+                    Simple Notes</h1>
+                <p class="text-lg">Quickly create, paste, tag and search notes. No BS.</p>
+            </div>
+        </div>
     </div>
 
+    <div class="grid grid-cols-2 gap-4 mt-10 mx-10">
+        <div class="bg-purple-500 p-4 rounded-lg">
+            <h2 class="text-white text-2xl font-bold mb-2">Free</h2>
+            <p class="text-white"><code>SNOTES</code> is free software.</p>
+        </div>
+        <div class="bg-pink-500 p-4 rounded-lg">
+            <h2 class="text-white text-2xl font-bold mb-2">Simple</h2>
+            <p class="text-white">Create and manage your notes with a simple and intuitive interface.</p>
+        </div>
+        <div class="bg-blue-500 p-4 rounded-lg">
+            <h2 class="text-white text-2xl font-bold mb-2">Fast</h2>
+            <p class="text-white">Everything from startup to search is lightning fast.</p>
+        </div>
+        <div class="bg-green-500 p-4 rounded-lg">
+            <h2 class="text-white text-2xl font-bold mb-2">OCR</h2>
+            <p class="text-white">Use Optical Character Recognition (OCR) to extract text from image files.</p>
+        </div>
+        <div class="bg-yellow-500 p-4 rounded-lg">
+            <h2 class="text-white text-2xl font-bold mb-2">Export</h2>
+            <p class="text-white">Export your notes in various formats such as TXT or Markdown.</p>
+        </div>
+    </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/screenshot.png b/src/screenshot.png
new file mode 100644
index 0000000..16de1ce
Binary files /dev/null and b/src/screenshot.png differ
