diff --git a/docs/index.html b/docs/index.html
index 41088dc..6997269 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,15 +1,49 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Garage Parking Assistant</title>
+    <title>ESPHome Garage Assistant</title>
     <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
     <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 </head>
-<body>
-    <div id="root"></div>
+<body class="bg-gray-50">
+    <div class="max-w-4xl mx-auto p-8">
+        <h1 class="text-4xl font-bold text-gray-900 mb-2">ESPHome Garage Parking Assistant</h1>
+        
+        <div class="mb-8">
+            <a href="https://github.com/jdillenburg/esphome" 
+               class="text-blue-600 hover:text-blue-800 hover:underline inline-flex items-center">
+                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+                View project on GitHub
+            </a>
+        </div>
+        
+        <div class="prose prose-lg mb-8 text-gray-600">
+            <p>This simulator demonstrates an ESP32-based parking assistance system that helps guide vehicles to the perfect parking position in a garage. The system uses:</p>            <ul>
+                <li>An HC-SR04 ultrasonic distance sensor to detect the vehicle's position</li>
+                <li>A WS2812B LED strip providing visual feedback through color changes</li>
+                <li>Four distinct zones for precise parking guidance:
+                    <ul>
+                        <li>Too Close Zone: Blinking red warning when too close to the wall</li>
+                        <li>Buffer Zone: Solid red indicating the minimum safe distance</li>
+                        <li>Approach Zone: Gradient from red to green showing optimal approach</li>
+                        <li>Safe Zone: Solid green indicating plenty of space</li>
+                    </ul>
+                </li>
+            </ul>
+            <p>Use the slider below to simulate moving a vehicle closer to or further from the garage wall.</p>
+        </div>
+
+        <div id="root"></div>
+    </div>
     <script type="text/babel">
+        // [Previous React component code remains the same]
+        
+        // Only change the return statement of GarageParkingAssistant to remove the title 
+        // since we now have it in the HTML:
         const GarageParkingAssistant = () => {
             const [distance, setDistance] = React.useState(2.5);
             const [isWarningState, setIsWarningState] = React.useState(false);
