diff --git a/index.html b/index.html
index 6437816..a8b5645 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,60 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MK Design System</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Set the base URL for all relative URLs within the document -->
+        <!-- <base href="https://example.com/"> -->
+
+        <meta name="robots" content="index,follow">
+        <meta name="googlebot" content="index,follow">
+
+        <meta name="format-detection" content="telephone=no">
+        <meta http-equiv="x-dns-prefetch-control" content="off">
+
+        <meta name="google" content="notranslate">
+        <meta name="google" content="nositelinkssearchbox">
+
+        <meta name="rating" content="General">
+
+        <!-- <meta name="url" content="https://example.com/"> -->
+        <!-- <meta name="subject" content="your website's subject"> -->
+        <!-- <meta name="description" content="A description of the page"> -->
+
+        <title>Page Title</title>
+
+        <!-- Privacy -->
+
+        <!-- analytics -->
+        <!-- -->
+
+        <!-- Files listing who was involved in this site and copyrights -->
+        <!-- <link href="https://example.com/humans.txt" rel="author"> -->
+        <!-- <link href="https://example.com/copyright.html" rel="copyright"> -->
+
+        <!-- Favicon -->
+        <!-- <link href="https://example.com/favicon.ico" rel="icon" sizes="16x16" type="image/icon"> -->
+        <!-- <link href="https://example.com/favicon.svg" rel="icon" type="image/svg+xml"> -->
+        <!-- <link href="https://example.com/favicon.png" rel="icon" sizes="192x192"> -->
+
+        <!-- Font preloads (should be done for each font file) -->
+        <link href="https://example.com/fonts/fontfam/font.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+
+        <!-- CSS -->
+        <link href="/src/style.css" rel="stylesheet" media="screen">
+
+        <!-- JS that must be executed before the document is loaded -->
+        <script>
+            if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+              document.documentElement.classList.add("dark"); localStorage.theme = "dark";
+            } else {
+              document.documentElement.classList.remove("dark"); localStorage.theme = "light";
+            }
+        </script>
+        <script type="module" src="/src/main.js" defer></script>
+    </head>
+    <body class="font-sans antialiased">
+        <div id="app" class="min-h-screen bg-neutral-100"></div>
+    </body>
 </html>
