diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 6cba226..a460803 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,6 +6,8 @@
   <component name="ChangeListManager">
     <list default="true" id="e3f098f0-e98c-435a-af04-d153c9525633" name="Default Changelist" comment="">
       <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$/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/app.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -47,7 +49,7 @@
       <workItem from="1597348092890" duration="8205000" />
       <workItem from="1597530844649" duration="131000" />
       <workItem from="1597577497243" duration="3353000" />
-      <workItem from="1597583294362" duration="3976000" />
+      <workItem from="1597583294362" duration="5755000" />
     </task>
     <task id="LOCAL-00001" summary="Adds gitignore.">
       <created>1597348071361</created>
@@ -252,7 +254,14 @@
       <option name="project" value="LOCAL" />
       <updated>1597587202860</updated>
     </task>
-    <option name="localTasksCounter" value="30" />
+    <task id="LOCAL-00030" summary="Change button symbol.">
+      <created>1597587291650</created>
+      <option name="number" value="00030" />
+      <option name="presentableId" value="LOCAL-00030" />
+      <option name="project" value="LOCAL" />
+      <updated>1597587291650</updated>
+    </task>
+    <option name="localTasksCounter" value="31" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -274,17 +283,18 @@
     <MESSAGE value="Move answers to data." />
     <MESSAGE value="Kara now saves the chat and her saved answers in localstorage." />
     <MESSAGE value="Adds method to change saved username." />
-    <option name="LAST_COMMIT_MESSAGE" value="Adds method to change saved username." />
+    <MESSAGE value="Change button symbol." />
+    <option name="LAST_COMMIT_MESSAGE" value="Change button symbol." />
   </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="1597587202806">
+    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597587291601">
       <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="1597587202806" />
+    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597587291601" />
     <state x="466" y="118" width="424" height="490" key="FileChooserDialogImpl" timestamp="1597353496276">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
@@ -301,10 +311,10 @@
       <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="1597530949459" />
-    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1597587206315">
+    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1597587292665">
       <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="1597587206315" />
+    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2/0.0.1366.720@0.0.1366.720" timestamp="1597587292665" />
     <state x="0" y="0" width="616" height="720" key="find.popup" timestamp="1597346688624">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
@@ -313,13 +323,13 @@
       <screen x="0" y="0" width="1366" height="720" />
     </state>
     <state width="533" height="302" key="javadoc.popup.new/0.0.1366.720@0.0.1366.720" timestamp="1597585751908" />
-    <state x="347" y="155" key="run.anything.popup" timestamp="1597584197904">
+    <state x="347" y="155" key="run.anything.popup" timestamp="1597587322870">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
-    <state x="347" y="155" key="run.anything.popup/0.0.1366.720@0.0.1366.720" timestamp="1597584197904" />
-    <state x="346" y="41" width="672" height="678" key="search.everywhere.popup" timestamp="1597584542754">
+    <state x="347" y="155" key="run.anything.popup/0.0.1366.720@0.0.1366.720" timestamp="1597587322870" />
+    <state x="346" y="41" width="672" height="678" key="search.everywhere.popup" timestamp="1597587640929">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
-    <state x="346" y="41" width="672" height="678" key="search.everywhere.popup/0.0.1366.720@0.0.1366.720" timestamp="1597584542754" />
+    <state x="346" y="41" width="672" height="678" key="search.everywhere.popup/0.0.1366.720@0.0.1366.720" timestamp="1597587640929" />
   </component>
 </project>
\ No newline at end of file
diff --git a/app.css b/app.css
index 454fe13..ad9d379 100644
--- a/app.css
+++ b/app.css
@@ -18,7 +18,7 @@ body {
 	max-width: 80%;
 }
 
-.ai-message {
+.bot-message {
 	border-radius: 0px 15px 15px 15px;
 	background-color: lightgreen;
 }
@@ -61,4 +61,8 @@ body {
 
 .response-input {
 	margin-bottom: 3px;
+}
+
+.form-button {
+	width: 100%;
 }
\ No newline at end of file
diff --git a/app.js b/app.js
index fd0a803..65948f8 100644
--- a/app.js
+++ b/app.js
@@ -14,6 +14,10 @@ let kara = new Vue({
                 'Answer #1'
             ]
         },
+        settingsModal: {
+            name: null,
+            username: null
+        },
         answers: [
             {
                 includeAll: false,
@@ -42,6 +46,11 @@ let kara = new Vue({
     mounted() {
         this.getSavedData();
 
+        this.settingsModal = {
+            name: this.name,
+            username: this.username
+        };
+
         if (!this.username) {
             this.initialGreeting();
             this.askForName();
@@ -57,19 +66,15 @@ let kara = new Vue({
         this.scrollDown();
     },
     methods: {
-        addMessage(body, ai) {
+        addMessage(body, bot) {
             this.messages.push({
                 body: body,
-                ai: ai,
+                bot: bot,
                 time: Date.now()
             })
-
-            this.updateStorage();
         },
-        aiMessage(body) {
+        botMessage(body) {
             this.addMessage(body, true);
-
-            this.updateStorage();
         },
         userMessage(body) {
             this.addMessage(body, false);
@@ -77,7 +82,7 @@ let kara = new Vue({
             this.updateStorage();
         },
         initialGreeting() {
-            this.aiMessage(
+            this.botMessage(
                 this.oneOf(
                     [
                         "Hi! I'm " + this.name + ". :)",
@@ -89,7 +94,7 @@ let kara = new Vue({
             this.updateStorage();
         },
         welcomeBack() {
-            this.aiMessage(
+            this.botMessage(
                 this.oneOf(
                     [
                         "Hi! Haven't heard of you in a while. :)",
@@ -98,8 +103,6 @@ let kara = new Vue({
                     ]
                 )
             );
-
-            this.updateStorage();
         },
         sendMessage() {
             if (this.chatbox.trim() === '') {
@@ -110,8 +113,6 @@ let kara = new Vue({
             this.scrollDown();
             this.react(this.chatbox);
             this.chatbox = '';
-
-            this.updateStorage();
         },
         react(message) {
             this.isTyping = true;
@@ -121,7 +122,11 @@ let kara = new Vue({
                     this.setName(message)
                 } else {
                     let answer = this.getAnswer(message);
-                    this.aiMessage(answer);
+                    if (answer) {
+                        this.botMessage(answer);
+                    }
+
+                    this.updateStorage();
                 }
 
                 this.isTyping = false;
@@ -130,10 +135,8 @@ let kara = new Vue({
         },
         scrollDown() {
             $('#chat-box').stop().animate({
-                scrollTop: $('#chat-box')[0].scrollHeight
+                scrollTop: ($('#chat-box')[0].scrollHeight * 10)
             }, 800);
-
-            this.updateStorage();
         },
         oneOf(answers) {
             let amountOfAnswers = answers.length;
@@ -201,6 +204,11 @@ let kara = new Vue({
                 return "Please tell me how i should call you.";
             }
 
+            if (this.includesAllOf(phrases, ['clear', 'chat'])) {
+                this.clearChat()
+                return false;
+            }
+
             this.answers.forEach((answerOption) => {
                 if (answerOption.includeAll === true) {
                     if (
@@ -267,7 +275,7 @@ let kara = new Vue({
             this.scrollDown();
         },
         askForName() {
-            this.aiMessage(
+            this.botMessage(
                 this.oneOf([
                     'May i ask for your name?',
                     'Whats your name? :)',
@@ -283,13 +291,25 @@ let kara = new Vue({
             this.updateStorage();
             this.askedForName = false;
 
-            this.aiMessage(
+            this.botMessage(
                 this.oneOf([
                     "That's a beautiful name!",
                     "Okay, i'll call you " + this.username + " from now on :)",
                     "Nice to meet you, " + this.username + ". :D"
                 ])
             )
+        },
+        saveSettings() {
+            this.name = this.settingsModal.name;
+            this.username = this.settingsModal.username;
+            this.updateStorage();
+
+            this.botMessage('Settings saved! :)');
+            this.scrollDown();
+        },
+        clearChat() {
+            this.messages = [];
+            this.botMessage('Chat cleared.');
         }
     }
 })
\ No newline at end of file
diff --git a/index.html b/index.html
index 99dabd6..7493502 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,10 @@
 <div class="container-fluid" id="kara">
     <h5 id="kara-banner">
         <div class="float-right">
-            <div class="btn btn-sm btn-secondary" @click="scrollDown()" data-toggle="modal" data-target="#addModal">
+            <div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#settingsModal">
+                <i class="fas fa-sliders-h"></i>
+            </div>
+            <div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#addModal">
                 <i class="fas fa-plus"></i>
             </div>
             <div class="btn btn-sm btn-secondary" @click="scrollDown()">
@@ -25,7 +28,7 @@
 
     <div id="chat-box">
         <template v-for="message in messages">
-            <div class="message ai-message float-left" v-if="message.ai">
+            <div class="message bot-message float-left" v-if="message.bot">
                 {{ message.body }}
                 <br/>
             </div>
@@ -34,7 +37,7 @@
                 <br/>
             </div>
         </template>
-        <div class="message ai-message typing float-left" v-if="isTyping">
+        <div class="message bot-message typing float-left" v-if="isTyping">
             <div class="spinner-grow text-secondary" role="status">
                         <span class="sr-only">
                             Loading...
@@ -96,6 +99,45 @@
             </div>
         </div>
     </div>
+
+    <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Settings</h5>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="name">What's my name?</label>
+                        <input type="text" class="form-control" id="name" v-model="settingsModal.name">
+                    </div>
+                    <div class="form-group" v-if="username !== null">
+                        <label for="username">What's your name?</label>
+                        <input type="text" class="form-control" id="username" v-model="settingsModal.username">
+                    </div>
+                    <div class="form-group">
+                        <label>Data</label>
+                        <div class="row">
+                            <div class="col-sm-6">
+                                <button @click="clearChat()" class="btn btn-warning form-button" data-dismiss="modal">
+                                    Delete chat
+                                </button>
+                            </div>
+                            <div class="col-sm-6">
+                                <button @click="" class="btn btn-warning form-button">
+                                    Delete everything
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary" data-dismiss="modal" @click="saveSettings()">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>