diff --git a/templates/chatbot.html b/templates/chatbot.html
new file mode 100644
index 00000000..2e3be759
--- /dev/null
+++ b/templates/chatbot.html
@@ -0,0 +1,463 @@
+
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <style>
+#textInput {
+    border: 2px solid black;
+    border-bottom: 3px solid aqua;
+}
+
+.userText {
+    color: white;
+    font-family: monospace;
+    font-size: 17px;
+    text-align: right;
+    line-height: 30px;
+}
+.userText span {
+    background-color: #009688;
+    padding: 10px;
+    border-radius: 10px;
+}
+.botText {
+    color: white;
+    font-family: monospace;
+    font-size: 17px;
+    text-align: left;
+    line-height: 30px;
+}
+.botText span {
+    background-color: #ae312f;
+    padding: 5px;
+    border-radius: 10px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #edeff2;
+  font-family: "Calibri", "Roboto", sans-serif;
+}
+.chat_window {
+  position: absolute;
+  width: calc(100% - 20px);
+  max-width: 800px;
+  height: 500px;
+  border-radius: 10px;
+  background-color: #fff;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+  background-color: #fff;
+  overflow: hidden;
+}
+
+
+
+.top_menu {
+  background-color: #fff;
+  width: 100%;
+  padding: 20px 0 15px;
+  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
+}
+.top_menu .buttons {
+  margin: 3px 0 0 20px;
+  position: absolute;
+}
+.top_menu .buttons .button {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 10px;
+  position: relative;
+}
+.top_menu .buttons .button.close {
+  background-color: #f5886e;
+}
+.top_menu .buttons .button.minimize {
+  background-color: #fdbf68;
+}
+.top_menu .buttons .button.maximize {
+  background-color: #a3d063;
+}
+.top_menu .title {
+  text-align: center;
+  color: #bcbdc0;
+  font-size: 20px;
+}
+
+.messages {
+  position: relative;
+  list-style: none;
+  padding: 20px 10px 0 10px;
+  margin: 0;
+  height: 347px;
+  overflow: scroll;
+}
+.messages .message {
+  clear: both;
+  overflow: hidden;
+  margin-bottom: 20px;
+  transition: all 0.5s linear;
+  opacity: 0;
+}
+.messages .message.left .avatar {
+  background-color: #f5886e;
+  float: left;
+}
+.messages .message.left .text_wrapper {
+  background-color: #ffe6cb;
+  margin-left: 20px;
+}
+.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
+  right: 100%;
+  border-right-color: #ffe6cb;
+}
+.messages .message.left .text {
+  color: #c48843;
+}
+.messages .message.left .avatar {
+  float: left;
+  width: 50px;
+  height: 50px;
+  background-image: url("https://pas-wordpress-media.s3.amazonaws.com/wp-content/uploads/2013/08/Customer-service-woman-on-headset-gives-OK-1024x770.jpg");
+  background-size: cover;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.messages .message.right .text_wrapper {
+  background-color: #c7eafc;
+  margin-right: 20px;
+  float: right;
+}
+.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
+  left: 100%;
+  border-left-color: #c7eafc;
+}
+.messages .message.right .text {
+  color: #45829b;
+}
+.messages .message.appeared {
+  opacity: 1;
+}
+.messages .message .avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.messages .message .text_wrapper {
+  display: inline-block;
+  padding: 20px;
+  border-radius: 6px;
+  width: calc(100% - 85px);
+  min-width: 100px;
+  position: relative;
+}
+.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
+  top: 18px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.messages .message .text_wrapper::after {
+  border-width: 13px;
+  margin-top: 0px;
+}
+.messages .message .text_wrapper::before {
+  border-width: 15px;
+  margin-top: -2px;
+}
+.messages .message .text_wrapper .text {
+  font-size: 18px;
+  font-weight: 300;
+}
+
+.bottom_wrapper {
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  padding: 20px 20px;
+  position: absolute;
+  bottom: 0;
+}
+.bottom_wrapper .message_input_wrapper {
+  display: inline-block;
+  height: 50px;
+  border-radius: 25px;
+  border: 1px solid #bcbdc0;
+  width: calc(100% - 160px);
+  position: relative;
+  padding: 0 20px;
+}
+.bottom_wrapper .message_input_wrapper .message_input {
+  border: none;
+  height: 100%;
+  box-sizing: border-box;
+  width: calc(100% - 40px);
+  position: absolute;
+  outline-width: 0;
+  color: gray;
+}
+.bottom_wrapper .send_message {
+  width: 140px;
+  height: 50px;
+  display: inline-block;
+  border-radius: 50px;
+  background-color: #a3d063;
+  border: 2px solid #a3d063;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.2s linear;
+  text-align: center;
+  float: right;
+}
+.bottom_wrapper .send_message:hover {
+  color: #a3d063;
+  background-color: #fff;
+}
+.bottom_wrapper .send_message .text {
+  font-size: 18px;
+  font-weight: 300;
+  display: inline-block;
+  line-height: 48px;
+}
+
+.message_template {
+  display: none;
+}
+
+.footer #button{
+	width:55px;
+	height:55px;
+	border: #4e919c 12px solid;
+	border-radius:35px;
+	margin:0 auto;
+	position:relative;
+	-webkit-transition: all 1s ease;
+    -moz-transition: all 1s ease;
+    -o-transition: all 1s ease;
+    -ms-transition: all 1s ease;
+    transition: all 1s ease;
+}
+.footer #button:hover{
+	width:55px;
+	height:55px;
+	border: #3A3A3A 12px solid;
+	-webkit-transition: all 1s ease;
+    -moz-transition: all 1s ease;
+    -o-transition: all 1s ease;
+    -ms-transition: all 1s ease;
+    transition: all 1s ease;
+	position:relative;
+}
+.footer {
+	bottom:0;
+	left:0;
+	position:fixed;
+    width: 100%;
+    height: 2em;
+    overflow:hidden;
+    margin:0 auto;
+	-webkit-transition: all 1s ease;
+    -moz-transition: all 1s ease;
+    -o-transition: all 1s ease;
+    -ms-transition: all 1s ease;
+    transition: all 1s ease;
+	z-index:999;
+}
+.footer:hover {
+	-webkit-transition: all 1s ease;
+    -moz-transition: all 1s ease;
+    -o-transition: all 1s ease;
+    -ms-transition: all 1s ease;
+    transition: all 1s ease;
+	height: 10em;
+}
+.footer #container{
+	margin-top:5px;
+	width:100%;
+height:100%;
+  position:relative;
+  top:0;
+  left:0;
+	background: #4e919c;
+}
+.footer #cont{
+  position:relative;
+  top:-45px;
+  right:190px;
+	width:150px;
+	height:auto;
+	margin:0 auto;
+}
+.footer_center{
+	width:500px;
+	float:left;
+  text-align:center;
+}
+.footer h3{
+	font-family: 'Arial';
+	font-size: 20px;
+	font-weight: 100;
+	margin-top:70px;
+	margin-left:10px;
+}
+ </style>
+
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+</head>
+
+
+
+
+<body>
+<div class="container" style="border: 1px solid black; border-radius: 10px; padding: 10px; background-color: #4e919c; margin: auto;">
+    <p style="font-family: Arial; color: white;font-size: 12px">
+	  <small> Supported languages: Albanian, Arabic, Armenian, Awadhi, Azerbaijani, Bashkir, Basque,Belarusian, Bengali, Bhojpuri, Bosnian, Brazilian Portuguese, Bulgarian, Cantonese (Yue), Catalan, Chhattisgarhi, Chinese, Croatian, Czech, Danish, Dogri, Dutch, English, Estonian, Faroese, Finnish, French, Galician, Georgian, German, Greek, Gujarati, Haryanvi, Hindi, Hungarian, Indonesian, Irish, Italian, Japanese, Javanese, Kannada, Kashmiri, Kazakh, Konkani, Korean, Kyrgyz, Latvian, Lithuanian, Macedonian, Maithili, Malay, Maltese, Mandarin, Mandarin Chinese, Marathi, Marwari, Min Nan, Moldovan, Mongolian, Montenegrin, Nepali, Norwegian, Oriya, Pashto, Persian (Farsi), Polish, Portuguese, Punjabi, Rajasthani, Romanian, Russian, Sanskrit, Santali, Serbian, Sindhi, Sinhala, Slovak, Slovene, Slovenian, Spanish, Swahili, Swedish, Tajik, Tamil, Tatar, Telugu, Thai, Turkish, Turkmen, Ukrainian, Urdu, Uzbek, Vietnamese, Welsh, Wu
+    </small></p>
+</div>
+<div class="chat_window">
+
+    <div class="top_menu">
+        <div class="title">Customer Service:</div>
+    </div>
+    <ul class="messages"></ul>
+    <div class="bottom_wrapper clearfix">
+        <div class="message_input_wrapper">
+            <input class="message_input" placeholder="Type your message here..." />
+        </div>
+        <div class="send_message">
+            <div class="icon"></div>
+            <div class="text">Send</div>
+        </div>
+        <!--
+        <button id="refreshBtn" class="btn btn-primary form-control" onclick="location.reload()">Refresh</button>
+        -->
+    </div>
+    <div class="message_template">
+    <li class="message">
+        <div class="avatar"></div>
+        <div class="text_wrapper">
+            <div class="text"></div>
+        </div>
+    </li>
+</div>
+
+</div>
+<div class="footer">
+  <div id="button"></div>
+<div id="container">
+<div id="cont">
+<div class="footer_center">
+	   <h3>It is an AI model. &#169; <a href="https://www.batuhantoker.com/">Batuhan Toker</a>   </h3>
+</div>
+</div>
+</div>
+</div>
+</div>
+
+
+
+
+
+<script>
+    (function () {
+    var Message;
+    Message = function (arg) {
+        this.text = arg.text, this.message_side = arg.message_side;
+        this.draw = function (_this) {
+            return function () {
+                var $message;
+                $message = $($('.message_template').clone().html());
+                $message.addClass(_this.message_side).find('.text').html(_this.text);
+                $('.messages').append($message);
+                return setTimeout(function () {
+                    return $message.addClass('appeared');
+                }, 0);
+            };
+        }(this);
+        return this;
+    };
+    $(function () {
+        var getMessageText, message_side, sendMessage;
+        message_side = 'right';
+        getMessageText = function () {
+            var $message_input;
+            $message_input = $('.message_input');
+            return $message_input.val();
+        };
+
+
+        sendMessage = function (text) {
+    var $messages, message;
+    if (text.trim() === '') {
+        return;
+    }
+    $('.message_input').val('');
+    $messages = $('.messages');
+
+    // Set message_side based on whether the message is from the user or chatbot
+    var message_side = 'right';
+
+    message = new Message({
+        text: text,
+        message_side: message_side
+    });
+
+// Draw user message
+    message.draw();
+
+// Call getResponse() to get the chatbot's response
+$.get("/get", { msg: text }).done(function(data) {
+    var botMessage = new Message({
+        text: data,
+        message_side: 'left'
+    });
+
+
+    // Draw bot message
+    botMessage.draw();
+    $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);
+});
+
+return $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);
+};
+
+        $('.send_message').click(function (e) {
+            return sendMessage(getMessageText());
+        });
+        $('.message_input').keyup(function (e) {
+            if (e.which === 13) {
+                return sendMessage(getMessageText());
+            }
+        });
+            // Add "Writing..." message
+    writingMessage = new Message({
+        text: 'FitnessBot here, how can I help you today?. Fluent in 95 languages, I am always ready to assist you quickly and efficiently. Just type!',
+        message_side: 'left'
+    });
+    writingMessage.draw();
+
+    });
+}.call(this));
+
+</script>
+
+
+</body>
+</html>
diff --git a/templates/layout.html b/templates/layout.html
index cfe9a34e..022fd94b 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -39,6 +39,7 @@
               <a class="nav-item nav-link" href="{{ url_for('calories') }}">Enter Calories</a>
               <a class="nav-item nav-link" href="/history">Your plan</a>
               <a class="nav-item nav-link" href="/workout">Burnout</a>
+              <a class="nav-item nav-link" href="/chatbot">FitnessBot</a>
               <a class="nav-item nav-link" href="{{url_for('bmi_calci')}}">BMI Calculator</a>
               <a class="nav-item nav-link" href="{{url_for('friends')}}">Friends</a>
               <a class="nav-item nav-link btn btn-link" href="{{ url_for('user_profile') }}">Profile</button>
