diff --git a/app/templates/index.html b/app/templates/index.html
index dab5bcf..43c09c6 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,3 +1,87 @@
+<!DOCTYPE html>
 <html>
-    <h1> ALL HAIL KRAIG</h1>
-</html>
\ No newline at end of file
+<head>
+    <title> UT MakerSpace Inventory Website </title>
+    <link rel="stylesheet" href="style.css" type="text/css/"> 
+</head>
+<!-- Main HTML body section. --> 
+<body>
+    <header>
+        <h1> ALL HAIL KRAIG!</h1>
+        <nav> 
+            <a href="http://127.0.0.1:8000">Home</a>
+            <a href="domain.tld/about">About</a>
+            <a href="items">Items</a>
+            <a href="docs">Database</a>  
+        </nav>
+    </header>
+    <main>
+        <div class="row">
+            <div class="post-text-box">
+                <h1> Newest Post </h1>
+                <section> 
+                    <h1> First Post </h1>
+                    <p> The first post's content </p> 
+                </section>
+            </div>
+            <div class="profile">
+                <h1> </h1>
+                <img src="https://sites.utexas.edu/cnsmakerspace/files/2021/07/Screen-Shot-2021-07-02-at-1.04.05-PM-1.png" width="250" height="187">
+                <p> About the Website </p>
+            </div>
+        </div>
+    </main>
+    
+</body>
+
+<!--CSS webpage style/format settings.-->
+<style>
+    /*header style*/
+header {
+   text-align: center; 
+   padding: 20px;
+   background-color: #bf5700;
+   color: #ffffff;
+   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+
+}
+/*navigation menu style*/
+nav {
+   text-align: center;
+   word-spacing: 30px;
+   Padding: 10px;
+   background-color: #bf5700;
+}
+/*creating the two-column layout*/
+*{
+   box-sizing: border-box;
+}
+.row {
+   display: flex;
+   flex-wrap: wrap;
+}
+.post-text-box {
+   flex: 70%;
+   padding: 20px;
+   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+.profile {
+   flex: 70%;
+   padding: 20px;
+}
+/*profile image and heading style*/
+.profile img {
+   width: 250px;
+   display: block;
+   margin-left: 0;
+   margin-right: 0;
+   flex-shrink: 0; 
+
+}
+.profile h1 {
+   text-align: center;
+}
+   </style>
+   
+
+</html>
