diff --git a/index.html b/index.html
index 71149fb..d38fde4 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,72 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Propacity</title>
+    <title>Propacity - Your Property Management Solution</title>
+    <meta name="description" content="Propacity offers innovative solutions for property management and real estate needs.">
     <link rel="shortcut icon" href="./src/assets/icons/logo.png" type="image/x-icon">
+    <style>
+      body {
+          margin: 0;
+          font-family: Arial, sans-serif;
+          background: rgba(255, 255, 255, 0.9); /* Optional semi-transparent background */
+      }
+      .fixed-background {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: url('path/to/your/background-image.jpg') no-repeat center center fixed; /* Set a background image */
+          background-size: cover;
+          z-index: -1; /* Keeps it behind other content */
+      }
+      #root {
+          position: relative;
+          z-index: 1; /* Ensure root content is above background */
+          padding: 20px;
+          text-align: center;
+      }
+      input[type="text"] {
+          padding: 10px;
+          margin: 10px;
+          border: 1px solid #ccc;
+          border-radius: 5px; /* Rounded corners */
+      }
+      button {
+          padding: 10px;
+          margin: 10px;
+          background-color: #007BFF; /* Bootstrap primary color */
+          color: white;
+          border: none;
+          border-radius: 5px; /* Rounded corners */
+          cursor: pointer;
+      }
+      button:hover {
+          background-color: #0056b3; /* Darker shade on hover */
+      }
+    </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div class="fixed-background"></div> <!-- Fixed background div -->
+    <div id="root">
+      <header>
+        <h1>Welcome to Propacity</h1>
+        <p>Your Property Management Solution</p>
+      </header>
+      <main>
+        <input type="text" id="search-input" placeholder="Search properties..." />
+        <button id="search-button">Search</button>
+        <div id="results"></div>
+      </main>
+    </div>
     <script type="module" src="/src/main.jsx"></script>
+    <script>
+      document.getElementById('search-button').addEventListener('click', function() {
+          const query = document.getElementById('search-input').value;
+          console.log('Search query:', query);
+          // Example: Fetch search results and display them in the 'results' div
+      });
+    </script>
   </body>
 </html>
+
