diff --git a/.idea/kara.iml b/.idea/kara.iml
index c956989..029757b 100644
--- a/.idea/kara.iml
+++ b/.idea/kara.iml
@@ -4,5 +4,8 @@
     <content url="file://$MODULE_DIR$" />
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="vue" level="application" />
+    <orderEntry type="library" name="jquery-3.5.1" level="application" />
+    <orderEntry type="library" name="bootstrap" level="application" />
   </component>
 </module>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b216789..bbd5df7 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,6 +5,7 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="e3f098f0-e98c-435a-af04-d153c9525633" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/kara.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/kara.iml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app.css" beforeDir="false" afterPath="$PROJECT_DIR$/app.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
@@ -45,7 +46,7 @@
       <workItem from="1597264411672" duration="27000" />
       <workItem from="1597264469454" duration="594000" />
       <workItem from="1597346228730" duration="1851000" />
-      <workItem from="1597348092890" duration="2704000" />
+      <workItem from="1597348092890" duration="4176000" />
     </task>
     <task id="LOCAL-00001" summary="Adds gitignore.">
       <created>1597348071361</created>
@@ -61,7 +62,14 @@
       <option name="project" value="LOCAL" />
       <updated>1597350180316</updated>
     </task>
-    <option name="localTasksCounter" value="3" />
+    <task id="LOCAL-00003" summary="Restyling.">
+      <created>1597350867239</created>
+      <option name="number" value="00003" />
+      <option name="presentableId" value="LOCAL-00003" />
+      <option name="project" value="LOCAL" />
+      <updated>1597350867239</updated>
+    </task>
+    <option name="localTasksCounter" value="4" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -70,25 +78,26 @@
   <component name="VcsManagerConfiguration">
     <MESSAGE value="Adds gitignore." />
     <MESSAGE value="Add message filters;&#10;Add responsiveness;&#10;Remove disabled input while Kara types;&#10;Does not send empty messages;" />
-    <option name="LAST_COMMIT_MESSAGE" value="Add message filters;&#10;Add responsiveness;&#10;Remove disabled input while Kara types;&#10;Does not send empty messages;" />
+    <MESSAGE value="Restyling." />
+    <option name="LAST_COMMIT_MESSAGE" value="Restyling." />
   </component>
   <component name="WindowStateProjectService">
     <state x="278" y="2" width="800" height="718" key="#Plugins" timestamp="1597350105557">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
     <state x="278" y="2" width="800" height="718" key="#Plugins/0.0.1366.720@0.0.1366.720" timestamp="1597350105557" />
-    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597350180268">
+    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597350867190">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
-    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597350180268" />
+    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597350867190" />
     <state x="172" y="0" key="SettingsEditor" timestamp="1597347922296">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
     <state x="172" y="0" key="SettingsEditor/0.0.1366.720@0.0.1366.720" timestamp="1597347922296" />
-    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1597350182410">
+    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1597350869458">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
-    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2/0.0.1366.720@0.0.1366.720" timestamp="1597350182410" />
+    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2/0.0.1366.720@0.0.1366.720" timestamp="1597350869458" />
     <state x="0" y="0" width="616" height="720" key="find.popup" timestamp="1597346688624">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
diff --git a/app.css b/app.css
index b55b2ca..6ae1ae4 100644
--- a/app.css
+++ b/app.css
@@ -1,8 +1,12 @@
+body {
+	margin: 15px;
+	padding: 0;
+}
+
 #kara {
-	margin: 2em auto auto auto;
-	width: 50em;
-	max-width: 99%;
-	max-height: 100%;
+	margin: 0;
+	padding: 0;
+	width: auto;
 	color: white;
 }
 
@@ -29,6 +33,27 @@
 }
 
 #chat-box {
+	margin-top: 4em;
 	overflow-y: scroll;
-	height: 25em;
+	height: 75vh;
+}
+
+#chatbox-wrapper {
+	position: fixed;
+	padding: 1em;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: darkcyan;
+}
+
+#kara-banner {
+	position: fixed;
+	height: 2.5em;
+	top: 0;
+	left: 0;
+	right: 0;
+	text-align: center;
+	padding: 0.7em;
+	background-color: darkcyan;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index c5c23dd..8ebb180 100644
--- a/index.html
+++ b/index.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>
-            Kara
-        </title>
-        <link href="https://bootswatch.com/4/slate/bootstrap.min.css" rel="stylesheet" type="text/css"/>
-        <link href="app.css" rel="stylesheet" type="text/css"/>
-        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" name="viewport">
-    </head>
-    <body>
-        <div class="container" id="kara">
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="card">
-                        <div class="card-header">
-                            <h5 class="text-center">
-                                Kara
-                            </h5>
-                        </div>
-                        <div class="card-body">
-                            <div id="chat-box">
-                                <template v-for="message in messages">
-                                    <div class="message ai-message float-left" v-if="message.ai">
-                                        {{ message.body }}
-                                        <br/>
-                                    </div>
-                                    <div class="message user-message float-right" v-else="">
-                                        {{ message.body }}
-                                        <br/>
-                                    </div>
-                                </template>
-                                <div class="message ai-message typing float-left" v-if="isTyping">
-                                    <div class="spinner-grow text-secondary" role="status">
-                                        <span class="sr-only">
-                                            Loading...
-                                        </span>
-                                    </div>
-                                    <div class="spinner-grow text-secondary" role="status">
-                                        <span class="sr-only">
-                                            Loading...
-                                        </span>
-                                    </div>
-                                    <div class="spinner-grow text-secondary" role="status">
-                                        <span class="sr-only">
-                                            Loading...
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card-footer">
-                            <input autofocus="true" class="form-control" id="chatinput" type="text" v-model="chatbox" v-on:keyup.enter="sendMessage()" required autofocus>
-                        </div>
-                    </div>
-                </div>
+<head>
+    <title>
+        Kara
+    </title>
+    <link href="https://bootswatch.com/4/slate/bootstrap.min.css" rel="stylesheet" type="text/css"/>
+    <link href="app.css" rel="stylesheet" type="text/css"/>
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"
+          name="viewport">
+</head>
+<body>
+<div class="container-fluid" id="kara">
+    <h5 id="kara-banner">
+        Kara
+    </h5>
+
+    <div id="chat-box">
+        <template v-for="message in messages">
+            <div class="message ai-message float-left" v-if="message.ai">
+                {{ message.body }}
+                <br/>
+            </div>
+            <div class="message user-message float-right" v-else="">
+                {{ message.body }}
+                <br/>
+            </div>
+        </template>
+        <div class="message ai-message typing float-left" v-if="isTyping">
+            <div class="spinner-grow text-secondary" role="status">
+                        <span class="sr-only">
+                            Loading...
+                        </span>
+            </div>
+            <div class="spinner-grow text-secondary" role="status">
+                        <span class="sr-only">
+                            Loading...
+                        </span>
+            </div>
+            <div class="spinner-grow text-secondary" role="status">
+                        <span class="sr-only">
+                            Loading...
+                        </span>
             </div>
         </div>
-        <script src="https://code.jquery.com/jquery-3.5.1.js">
-        </script>
-        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
-        </script>
-        <script src="app.js">
-        </script>
-    </body>
+    </div>
+
+    <div id="chatbox-wrapper">
+        <input
+                autofocus="true"
+                class="form-control"
+                id="chatinput"
+                type="text"
+                v-model="chatbox"
+                v-on:keyup.enter="sendMessage()"
+                required autofocus>
+    </div>
+</div>
+<script src="https://code.jquery.com/jquery-3.5.1.js">
+</script>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
+</script>
+<script src="app.js">
+</script>
+</body>
 </html>