diff --git a/templates/chattybot.jpg b/templates/chattybot.jpg
new file mode 100644
index 0000000..0e5ed47
Binary files /dev/null and b/templates/chattybot.jpg differ
diff --git a/templates/home.html b/templates/home.html
new file mode 100644
index 0000000..9096c38
--- /dev/null
+++ b/templates/home.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+  <title>ChatBot</title>
+  <head>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="https://cdn0.iconfinder.com/data/icons/business-management-78/66/63-512.png"
+    />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+    <style>
+      body {
+        font-family: monospace;
+        color: #20C20E;
+        background-color: black;
+      }
+      h1 {
+        background-color: black;
+        display: inline-block;
+        font-size: 3em;
+        margin: 0;
+        padding: 14px;
+
+      }
+      h3 {
+        color: #20C20E;
+        font-size: 20px;
+        margin-top: 3px;
+        text-align: center;
+
+      }
+      #chatbox {
+        margin-left: auto;
+        margin-right: auto;
+        width: 40%;
+        margin-top: 60px;
+        color: black;
+      }
+      #userInput {
+        margin-left: auto;
+        margin-right: auto;
+        width: 40%;
+        margin-top: 60px;
+        color: #20C20E;
+      }
+      #textInput {
+        width: 90%;
+        border: solid green;
+        border-bottom: 3px solid black;
+        font-family: monospace;
+        font-size: 17px;
+        color: #20C20E;
+        font-color: solid green;
+        background-color: black;
+      }
+      .userText {
+        color: black;;
+        font-family: monospace;
+        font-size: 17px;
+        text-align: right;
+        line-height: 30px;
+      }
+      .userText span {
+        background-color: #60C454;
+        padding: 10px;
+        border-radius: 2px;
+      }
+      .botText {
+        color: black;
+        font-family: monospace;
+        font-size: 17px;
+        text-align: left;
+        line-height: 30px;
+        font-weight: bold;
+      }
+      .botText span {
+        background-color: #20C20E;
+        padding: 10px;
+        border-radius: 2px;
+      }
+      #tidbit {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 300px;
+      }
+      .boxed {
+        margin-left: auto;
+        margin-right: auto;
+        width: 78%;
+        margin-top: 60px;
+        border: 1px solid green;
+      }
+      .box {
+        border: 2px solid green;
+      }
+      .Button {
+        position: relative;
+        bottom: 0;
+        right: 10;
+        left: 0;
+        width: 300px;
+
+      }
+    </style>
+</head>
+  <body>
+    <center>
+      <h1>Your Personal ChatBot
+      </h1>
+    </center>
+<div class="box"></div>
+    <div class="boxed">
+      <div>
+        <div id="chatbox">
+          <img
+          src="https://cdn0.iconfinder.com/data/icons/business-management-78/66/63-512.png"
+          alt="LazyBot"
+          style="width:200px;height:200px;"
+        />
+          />
+          <p class="botText">
+            <span>Hi! I'm your personal ChatBot</span>
+          </p>
+        </div>
+        <div id="userInput">
+          <div>
+             <form method="post" action="/" class="Button">
+            <input type="submit" value="Talk" name="Talk"/></div>
+            </form>
+          <input id="textInput" type="text" name="msg" placeholder="Type Your Message Here"  />
+        </div>
+      </div>
+    </div>
+
+     <script>
+        function getBotResponse() {
+          var rawText = $("#textInput").val();
+          var userHtml = '<p class="userText"><span>' + rawText + "</span></p>";
+          $("#textInput").val("");
+          $("#chatbox").append(userHtml);
+          document
+            .getElementById("userInput")
+            .scrollIntoView({ block: "start", behavior: "smooth" });
+          $.get("/get", { msg: rawText }).done(function(botText1) {
+            var botHtml = '<p class="botText"><span>' + botText1 + "</span></p>";
+            $("#chatbox").append(botHtml);
+            document
+              .getElementById("userInput")
+              .scrollIntoView({ block: "start", behavior: "smooth" });
+          });
+        }
+        $("#textInput").keypress(function(e) {
+          if (e.which == 13) {
+            getBotResponse();
+          }
+        });
+  </script>
+  </body>
+</html>
\ No newline at end of file
