diff --git a/assets/index.css b/assets/index.css
new file mode 100644
index 0000000..f3640b5
--- /dev/null
+++ b/assets/index.css
@@ -0,0 +1,24 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Lato', sans-serif;
+    --primary-color: #E76F51;
+}
+main {
+    padding: 0 32px;
+}
+
+h1 {
+    padding-bottom: 1rem;
+    border-bottom: 3px solid var(--primary-color);
+}
+strong {
+    font-weight: bolder;
+}
+a {
+    color: var(--primary-color);
+}
+pre {
+    background: #EBEBEB;
+    padding: 1rem;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f9b973c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mega Interview Guide</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="stylesheet" href="assets/index.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+    <link rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
+  </head>
+  <body>
+    <main>
+        
+    </main>
+    <script>
+        async function init() {
+            marked.setOptions({
+                highlight: function(code, lang, callback) {
+                    const validLanguage = hljs.getLanguage(lang) ? lang : 'plaintext';
+                    return hljs.highlight(validLanguage, code).value;
+                }
+            });
+            const r = await fetch('README.md');
+            const readmeText = await r.text();
+            document.querySelector('main').innerHTML = marked(readmeText);
+        }
+        
+        init();
+    </script>
+  </body>
+</html>
\ No newline at end of file
