diff --git a/index.html b/index.html
index 17a98c9..a548cc2 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="public/logos/SymbolLogo-removebg-preview.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>QR Builder</title>
-  </head>
-  <body>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>QR Builder</title>
+  <link rel="icon" type="image/png" href="public/logos/SymbolLogo-removebg-preview.png">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      background-color: #f0f0f0;
+    }
+    #root {
+      width: 80%;
+      max-width: 400px;
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>QR Builder</h1>
+  </header>
+  <main>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
+  </main>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
 </html>
