diff --git a/frontend/index.html b/frontend/index.html
index b002de1..cbf32f7 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,20 +7,28 @@
         <meta name="description" content="Maya's Stream">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta charset="UTF-8">
-        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="stream.css">
         <link rel="icon" href="/favicon.svg">
     </head>
 
     <body>
-
-        
-<a href="login.html">Login Page</a>
+<nav>
 
 <a href="register.html">Register Page</a>
 
-<a href="loginchange.html">LoginChange Page</a>
+<a href="login.html">Login Page</a>
 
+<a href="updateinfo.html">Update Info Page</a>
 
+</nav>
+        <div id="streamchat">
+            <div id="stream">
+                <h1>Test Text</h1>
+            </div>
+
+            <iframe id="chatbox" src="chat.html" title="chat box"></iframe> 
+            
+        </div>
     </body>
 
 </html>
diff --git a/frontend/stream.css b/frontend/stream.css
new file mode 100644
index 0000000..9a3cbe1
--- /dev/null
+++ b/frontend/stream.css
@@ -0,0 +1,34 @@
+html {
+    background: #F7A8B8;
+    text-align: center;
+    font-family: "Lucida Console", "Courier New", monospace;
+}
+
+body {
+    margin-top: 3%;
+}
+
+#streamchat {
+    display: flex;
+    height: 100%;
+    max-width: 960px;
+    margin: 0 auto;
+
+}
+
+#stream {
+    background-color: white;
+    padding: 5%;
+    box-shadow: 10px 10px 10px black;
+    border-radius: 5px;
+    width: 100%;
+    height: 100%;
+    margin-right: 4em;
+}
+
+#chatbox {
+    width: 100%;
+    height: 100%;
+    margin-left: 4em;
+}
+
