diff --git a/app.py b/app.py
index 23475eb..7d885d1 100644
--- a/app.py
+++ b/app.py
@@ -9,6 +9,10 @@
 def home():
     return render_template('index.html')
 
+@app.route('/chatbot')
+def chatbot():
+    return render_template('chatbot.html')
+
 @app.route('/predict',methods=['POST'])
 def predict():
     if request.method == 'POST':
@@ -20,4 +24,4 @@ def predict():
 
 
 if __name__ == '__main__':
-    app.run(host='0.0.0.0',port=5000)
\ No newline at end of file
+    app.run(host='0.0.0.0',port=5000,debug=True)
\ No newline at end of file
diff --git a/static/img/Background.png b/static/img/Background.png
index 7ed3ba1..348b25d 100644
Binary files a/static/img/Background.png and b/static/img/Background.png differ
diff --git a/static/img/background-result.jpg b/static/img/background-result.jpg
deleted file mode 100644
index 0929675..0000000
Binary files a/static/img/background-result.jpg and /dev/null differ
diff --git a/static/img/background-result.png b/static/img/background-result.png
new file mode 100644
index 0000000..6cbd287
Binary files /dev/null and b/static/img/background-result.png differ
diff --git a/static/img/joker2.mp4 b/static/img/joker2.mp4
new file mode 100644
index 0000000..6491714
Binary files /dev/null and b/static/img/joker2.mp4 differ
diff --git a/static/style.css b/static/style.css
index f26e89e..3ee01a1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,258 +1,304 @@
 html {
-    position: relative;
-    min-height: 450px;
-    scroll-behavior: smooth;
+  position: relative;
+  min-height: 450px;
+  scroll-behavior: smooth;
 }
 
 body {
-    font-family: "Montserrat", sans-serif;
-    font-size: 17.5px;
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
+  font-family: "Montserrat", sans-serif;
+  font-size: 17.5px;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  background-color: #660033;
 }
 
 * {
-    outline: 0 !important;
+  outline: 0 !important;
 }
 
 .logo-wrapper img {
-    max-width: 70px;
+  max-width: 70px;
 }
 
 .pull-right ul {
-    margin-top: -50px;
+  margin-top: -50px;
 }
 
-.nav-wrapper a {
-    text-transform: uppercase;
-    font-weight: bold;
-    color: #fff;
-    font-size: 16px;
-    margin-left: 25px;
-    margin-top: 25px;
-    transition: all 100ms ease-in;
-    -moz-transition: all 100ms ease-in;
-    -webkit-transition: all 100ms ease-in;
+.nav-wrapper {
+  display: flex;
+  justify-content: flex-end; /* Align items to the left */
+  align-items: center;
+  padding: 10px; /* Optional: Add padding if needed */
 }
 
 .nav-wrapper li {
-    list-style: none;
-    float: right;
-    vertical-align: middle;
+  list-style: none;
+  margin-right: 25px;
+  /* Adjust this value as needed for spacing */
+}
+
+.nav-wrapper a {
+  text-transform: uppercase;
+  font-weight: bold;
+  color: white;
+  font-size: 16px;
+  padding: 10px 20px; /* Add padding for oval shape */
+  text-align: center;
+  border-radius: 25px; /* Make the button oval */
+  background-color: #2c974b; /* Button background color */
+  text-decoration: none; /* Remove underline from links */
+  transition: all 100ms ease-in;
+  -moz-transition: all 100ms ease-in;
+  -webkit-transition: all 100ms ease-in;
+}
+
+.nav-wrapper a:hover {
+  background-color: #0d47a1; /* Change background color on hover */
+  color: white; /* Change text color on hover */
 }
 
 .d-inline-block {
-    display: inline-block;
+  display: inline-block;
+  margin-left: 80%;
 }
 
 .top-wrapper {
-    padding-top: 30px;
+  padding-top: 30px;
 }
 
 .m-l-30 {
-    margin-left: 30px !important;
+  margin-left: 30px !important;
 }
 
 .page-header {
-    background-image: url("../static/img/Background.png");
-    background-position: center top;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-color: #090909;
-    background-attachment: fixed;
-    color: #fff;
-    min-height: 700px;
+  background-image: url("../static/img/Background.png");
+  background-position: center top;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: #660033;
+  background-attachment: fixed;
+  color: #fff;
+  min-height: 800px;
 }
 
 .result-header {
-    background-image: linear-gradient(rgb(0, 0, 0, 0.3), rgb(0, 0, 0, 0.3)), url("../static/img/background-result.jpg");
-    background-position: center top;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-color: #090909;
-    color: #fff;
-    min-height: 450px;
+  background-image: linear-gradient(rgb(0, 0, 0, 0.3), rgb(0, 0, 0, 0.3)),
+    url("../static/img/background-result.png");
+  background-position: center top;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: #660033;
+  color: #660033;
+  min-height: 800px;
 }
 
 .main-wrapper {
-    padding-top: 140px;
+  padding-top: 140px;
 }
 
 .main-wrapper h1 {
-    font-weight: 600;
-    font-size: 55px;
-    margin: 0 0 5px;
-    line-height: 75px;
+  font-weight: 700;
+  font-size: 55px;
+  /* margin: 10px 10px 10px 10px; */
+  margin-left: 20%;
+  line-height: 50px;
+  color: #090909;
+  margin-bottom: 1%;
 }
 
 .main-wrapper h2 {
-    font-weight: 600;
-    font-size: 55px;
-    margin: auto;
-    text-align: center;
-    line-height: 75px;
+  font-weight: 1000;
+  font-size: 55px;
+  margin: auto;
+  text-align: center;
+  line-height: 75px;
 }
 
 .main-wrapper h4 {
-    font-weight: 500;
-    max-width: 600px;
-    margin: 0;
-    font-size: 18px;
-    line-height: 32px;
+  font-weight: 500;
+  max-width: 600px;
+  margin: 0;
+  font-size: 30px;
+  line-height: 32px;
+  margin-left: 20%;
+  /* margin-top: 2%; */
+  color: #090909;
 }
 
 .collapse-content .fa.fa-heart:hover {
-    color: #f44336 !important;
+  color: #f44336 !important;
 }
 
 .collapse-content .fa.fa-share-alt:hover {
-    color: #0d47a1 !important;
+  color: #0d47a1 !important;
 }
 
 .result-wrapper {
-    background: #f1f3f3;
-    padding: 100px 0;
-    text-align: center;
+  background: #000000;
+  padding: 100px 0;
+  text-align: center;
 }
 
 #myCard {
-    width: 337px;
-    height: 450px;
-    box-shadow: #090909;
+  width: 337px;
+  height: 450px;
+  box-shadow: #090909;
 }
 
 .buttons-wrapper {
-    padding: 60px 0;
+  padding: 60px 0;
+  margin-left: 20%;
+  margin-top: 15%;
 }
 
 .btn {
-    font-weight: 500;
-    font-size: 16px;
-    color: #fff;
-    text-align: center;
-    padding: 14px 28px;
-    min-width: 230px;
-    border-radius: 30px;
-    -webkit-border-radius: 30px;
-    transition: all 100ms ease-in;
-    -moz-transition: all 100ms ease-in;
-    -webkit-transition: all 100ms ease-in;
+  font-weight: 500;
+  font-size: 16px;
+  color: #fff;
+  text-align: center;
+  padding: 14px 28px;
+  min-width: 230px;
+  border-radius: 30px;
+  -webkit-border-radius: 30px;
+  transition: all 100ms ease-in;
+  -moz-transition: all 100ms ease-in;
+  -webkit-transition: all 100ms ease-in;
 }
 
 .btn-primary {
-    background: #2c974b;
-    border: 2px solid #2c974b;
-    color: #fff;
+  background: #2c974b;
+  border: 2px solid #2c974b;
+  color: #fff;
+  /* margin-left: 80%; */
+  /* margin-top: 15%; */
 }
 
 .btnSubnmit:hover {
-    border: 2px solid #2c974b;
-    color: #2c974b;
+  border: 2px solid #2c974b;
+  color: #2c974b;
 }
 
 .about-us-wrapper {
-    background: #f1f3f3;
-    padding: 100px 0;
-    text-align: center;
+  background: #f1f3f3;
+  padding: 100px 0;
+  text-align: center;
 }
 
 .about-us-wrapper .icon-wrapper {
-    width: 70px;
-    height: 75px;
-    margin: 0 auto;
-    display: block;
+  width: 70px;
+  height: 75px;
+  margin: 0 auto;
+  display: block;
 }
 
 .about-us-wrapper .icon-wrapper img {
-    height: 100px;
+  height: 100px;
 }
 
 .about-us-wrapper h5 {
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: 18px;
-    color: #2c974b;
-    margin: 40px 0 0;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 18px;
+  color: #2c974b;
+  margin: 40px 0 0;
 }
 
 .about-us-wrapper p {
-    font-size: 16px;
-    font-weight: 500;
-    max-width: 300px;
-    margin: 20px auto;
-    line-height: 30px;
+  font-size: 16px;
+  font-weight: 500;
+  max-width: 300px;
+  margin: 20px auto;
+  line-height: 30px;
 }
 
 .input-wrapper {
-    background: #e8e8e8;
-    padding: 45px 0 35px;
-    overflow: hidden;
-    position: relative;
+  background: #660033;
+  padding: 45px 0 35px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 40px;
 }
 
 .input-wrapper h4 {
-    font-size: 30px;
-    font-weight: 600;
-    margin: 0 0 4px;
-    color: #111;
+  font-size: 30px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  color: #ffccb3;
 }
 
 .input-wrapper-form button {
-    background: #2c974b;
-    padding: 13px 18px;
-    border: 0;
-    color: #fff;
-    margin-left: -45px;
-    font-size: 14px;
-    vertical-align: middle;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-    transition: all 200ms ease-in-out;
+  background: #2c974b;
+  padding: 13px 18px;
+  border: 0;
+  color: #090909;
+  margin-left: -45px;
+  font-size: 14px;
+  vertical-align: middle;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  transition: all 200ms ease-in-out;
 }
 
 .input-wrapper-form button:hover,
 .input-wrapper-form button[disabled] {
-    background: #111111;
+  background: #090909;
 }
 
 .page-footer {
-    background-color: #f1f3f3;
-    text-align: center;
-    color: #090909;
-    padding: 60px 20px;
+  background-color: #660033;
+  text-align: center;
+  color: #090909;
+  padding: 60px 20px;
 }
 
+.page-footer-result {
+  background-color: #000000;
+  text-align: center;
+  color: darkmagenta;
+  padding: 60px 20px;
+}
 
 /* .input-wrapper-form .textArea {
     margin-bottom: 20px !important;
 } */
 
 textarea .form-control {
-    padding: 10px !important;
+  padding: 10px !important;
 }
 
 .page-footer .icon {
-    color: #c2c3c3;
-    font-size: 24px;
-    margin: 0 10px;
+  color: #c2c3c3;
+  font-size: 24px;
+  margin: 0 10px;
 }
 
 .page-footer .icon:hover {
-    color: #090909;
+  color: #090909;
 }
 
 .page-footer p {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 26px;
-    color: #a5a5a5;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 26px;
+  color: #a5a5a5;
 }
 
 .page-footer p a {
-    color: #ea2845;
-    font-weight: 600;
+  color: #ea2845;
+  font-weight: 600;
 }
 
 #resultPage {
-    position: relative;
-}
\ No newline at end of file
+  position: relative;
+}
+
+.video-container {
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.embed-responsive-item {
+  background-color: white;
+}
diff --git a/templates/index.html b/templates/index.html
index d12053d..56a346d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,43 +1,150 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HaSa Application</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet" />
-    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
-</head>
-
-<body>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='style.css') }}"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap"
+      rel="stylesheet"
+    />
+    <script
+      defer
+      src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
+    ></script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI Mental Health Support</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      .trusted-logos img {
+        max-height: 50px;
+        margin: 0 15px;
+      }
+    </style>
+  </head>
+  <body>
     <header class="page-header">
-        <div class="container">
-            <div class="top-wrapper">
-                <div class="logo-wrapper d-inline-block">
-                    <a href="/">
-                        <img src="{{ url_for('static', filename='img/HappySad.png') }}" alt="HaSa Logo" />
-                    </a>
-                </div>
-                <nav class="pull-right">
-                    <ul class="nav-wrapper">
-                        <li class="hidden-xs">
-                            <a href="/" title="HaSa Application" style="text-decoration: none;">HOME</a>
-                        </li>
-                    </ul>
-                </nav>
-                <div class="main-wrapper">
-                    <h1>HaSa App</h1>
-                    <h4>A Depression Text Detector - A Machine Learning Web App</h4>
-                    <div class="buttons-wrapper">
-                        <a href="#info-wrapper" class="btn btn-primary d-inline-block">See More</a>
-                    </div>
-                </div>
+      <div class="container">
+        <div class="top-wrapper">
+          <div class="logo-wrapper d-inline-block">
+            <a href="/">
+              <img
+                src="{{ url_for('static', filename='img/HappySad.png') }}"
+                alt="HaSa Logo"
+              />
+            </a>
+          </div>
+          <nav class="pull-right">
+            <ul class="nav-wrapper">
+              <li class="hidden-xs">
+                <a
+                  href="/"
+                  title="HaSa Application"
+                  style="text-decoration: none"
+                  >HOME</a
+                >
+              </li>
+            </ul>
+          </nav>
+          <div class="main-wrapper">
+            <h1>HaSa App</h1>
+            <h4>A Depression Text Detector - A Machine Learning Web App</h4>
+            <div class="buttons-wrapper">
+              <a href="#info-wrapper" class="btn btn-primary d-inline-block"
+                >SEE MORE</a
+              >
             </div>
+          </div>
         </div>
+      </div>
     </header>
-    <div class="about-us-wrapper" id="info-wrapper">
+    <div id="info-wrapper">
+      <section class="container mx-auto py-16">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+          <div
+            class="p-6 rounded-lg shadow-lg"
+            style="background-color: #ffccb3"
+          >
+            <div class="icon-wrapper">
+              <img
+                src="{{ url_for('static', filename='img/icon-1.png') }}"
+                alt="Facts"
+                class="mx-auto mb-4 h-24 object-contain"
+              />
+            </div>
+            <h5 class="text-xl font-bold mb-2 text-green-800">FACTS</h5>
+            <p class="text-gray-600 font-semibold py-4">
+              Depression is a mood disorder that can affect a person's daily
+              life. It may be described as feelings of sadness, loss, or anger.
+              According to Appolo Hospitals there are 10 Million cases per year
+              in India.
+            </p>
+          </div>
+          <div
+            class="p-6 rounded-lg shadow-lg"
+            style="background-color: #ffccb3"
+          >
+            <div class="icon-wrapper">
+              <img
+                src="{{ url_for('static', filename='img/icon-2.png') }}"
+                alt="Solution"
+                class="mx-auto mb-4 h-24 object-contain"
+              />
+            </div>
+            <h5 class="text-xl font-bold mb-2 text-green-800">SOLUTION</h5>
+            <p class="text-gray-600 font-semibold py-4">
+              It's important to take action against depression - it doesn't just
+              go away on its own. Being depressed can make you feel helpless.
+              You're not. Along with therapy and sometimes medication, there's a
+              lot you can do on your own to fight back. Changing your behavior
+              -- your physical activity, lifestyle, and even your way of
+              thinking -- are all natural depression treatments.
+            </p>
+          </div>
+          <div
+            class="p-6 rounded-lg shadow-lg"
+            style="background-color: #ffccb3"
+          >
+            <div class="icon-wrapper">
+              <img
+                src="{{ url_for('static', filename='img/icon-3.png') }}"
+                alt="Our Idea"
+                class="mx-auto mb-4 h-24 object-contain"
+              />
+            </div>
+            <h5 class="text-xl font-bold mb-2 text-green-800">OUR IDEA</h5>
+            <p class="text-gray-600 font-semibold py-4">
+              It's just a small initiative against depression. Not all people
+              but some people put Depression quotes in stories of social media
+              or in tweets. So, we trained our model like this: you just input
+              that quote in our app and it will tell you if the person is sad or
+              depressed so you can talk to him/her about the problem.
+            </p>
+          </div>
+        </div>
+        <div class="text-center mt-8">
+          <a href="#input-wrapper" class="btn btn-primary d-inline-block"
+            >VIEW MORE</a
+          >
+        </div>
+      </section>
+    </div>
+
+    <!-- <div class="about-us-wrapper" id="info-wrapper">
         <div class="container">
             <div class="row">
                 <div class="col-md-4 highlight-block">
@@ -71,38 +178,69 @@ <h5>Our Idea</h5>
                 </div>
             </div>
         </div>
-    </div>
-    <div class="input-wrapper">
-        <div class="container">
-            <div class="content mb-4">
-                <h4>Put your Text Here</h4>
-            </div>
-            <div class="input-wrapper-form">
-                <form action="{{ url_for('predict') }}" method="POST" class="form-wrapper">
-                    <div class="form-group">
-                        <textarea class="form-control mb-4" name="message" id="exampleFormControlTextarea1" rows="5" cols="5"></textarea>
-                        <input type="submit" value="Predict" class="btn btn-primary btnSubmit" style="min-width: 30%;" />
-                    </div>
-                </form>
-            </div>
+    </div> -->
+    <div class="input-wrapper" id="input-wrapper">
+      <div class="container">
+        <div class="content mb-4">
+          <h4>Analyze Your Text for Depression Indicators</h4>
         </div>
+        <div class="input-wrapper-form">
+          <form
+            action="{{ url_for('predict') }}"
+            method="POST"
+            class="form-wrapper"
+          >
+            <div class="form-group">
+              <textarea
+                class="form-control mb-4"
+                name="message"
+                id="exampleFormControlTextarea1"
+                rows="5"
+                cols="5"
+                placeholder="Write your message here..."
+                style="background-color: #660033; color: white"
+              ></textarea>
 
+              <style>
+                #exampleFormControlTextarea1::placeholder {
+                  color: #aaa; /* Light color for placeholder text */
+                }
+              </style>
+
+              <input
+                type="submit"
+                value="Predict"
+                class="btn btn-primary btnSubmit"
+                style="min-width: 10%"
+              />
+            </div>
+          </form>
+        </div>
+      </div>
     </div>
 
     <footer class="page-footer">
-        <div class="container">
-            <div class="social-wrapper">
-                <p>If you like it, Drop a ⭐ on repository here</p>
-                <a href="https://github.com/AquibPy/HaSa" target="_blank" class="icon">
-                    <i class="fab fa-github"></i>
-                </a>
-            </div>
-            <p>
-                Copyright 2020 : Made with ❤️ by
-                <a href="https://www.linkedin.com/in/mohd-aquib-182b2a71/" title="Aquib's Profile" target="_blank">Aquib</a>
-            </p>
+      <div class="container">
+        <div class="social-wrapper">
+          <p>If you like it, Drop a ⭐ on repository here</p>
+          <a
+            href="https://github.com/AquibPy/HaSa"
+            target="_blank"
+            class="icon"
+          >
+            <i class="fab fa-github"></i>
+          </a>
         </div>
+        <p>
+          Copyright 2024 : Made with ❤️ by
+          <a
+            href="https://www.linkedin.com/in/mohd-aquib-182b2a71/"
+            title="Aquib's Profile"
+            target="_blank"
+            >Aquib</a
+          >
+        </p>
+      </div>
     </footer>
-</body>
-
+  </body>
 </html>
diff --git a/templates/result.html b/templates/result.html
index 6f44695..7d8fd28 100644
--- a/templates/result.html
+++ b/templates/result.html
@@ -9,73 +9,148 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
     <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet" />
     <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
+    <style>
+        .iframe-container {
+            position: fixed;
+            right: 0;
+            bottom: 3%;
+            height: 450px;
+            width: 400px; /* Set the width as needed */
+            overflow: hidden; /* Hide the overflow content */
+            box-shadow: 0px 19px 147px -41px rgba(0, 0, 0, 0.75);
+        }
+        .iframe-container:before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 120px; /* Increased height for the black section */
+            background-color: black; /* Add black background color */
+            z-index: 1; /* Ensure it's on top of the iframe */
+        }
+        .iframe-container .heading-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 120px; /* Match the height of the black section */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: white; /* Text color */
+            z-index: 2; /* Ensure it's on top of the black background */
+        }
+        .heading-container .main-heading {
+            font-size: 1.5em;
+            font-weight: bold;
+            margin: 0;
+        }
+        .heading-container .sub-heading {
+            font-size: 1em;
+            margin: 0;
+        }
+        .iframe-wrapper {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 0; /* Ensure iframe is behind the overlay */
+        }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .chat-card {
+            margin-top: 20px;
+            padding: 20px;
+            border-radius: 10px;
+            background-color: #f8f9fa;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+        .chat-card p {
+            font-size: 1.2em;
+            margin-bottom: 20px;
+        }
+        .chat-card button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            font-size: 1.2em;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .chat-card button:hover {
+            background-color: #0056b3;
+        }
+    </style>
 </head>
 
 <body>
-    <header class="result-header">
-        <div class="container">
-            <div class="top-wrapper">
-                <div class="logo-wrapper d-inline-block">
+    <header class="result-header" style="position: relative; background-color: #f8f9fa; padding: 20px;">
+        <div class="container" style="position: relative; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;">
+            <div class="top-wrapper" style="display: flex; justify-content: space-between; width: 100%;">
+                <!-- <div class="logo-wrapper d-inline-block">
                     <a href="/" title="HaSa Application">
                         <img src="{{ url_for('static', filename='img/HappySad.png') }}" alt="HaSa Logo" width="150px" height="150px" />
                     </a>
-                </div>
-                <nav class="pull-right">
+                </div> -->
+                <nav class="pull-right" style="position: absolute; bottom: 0; right: 0; margin-bottom: -50px; margin-right: -200px; color: white;">
                     <ul class="nav-wrapper">
                         <li class="hidden-xs">
-                            <a href="/" title="HaSa Application">HOME</a>
+                            <a href="/" title="HaSa Application">GO TO HOME</a>
                         </li>
                     </ul>
                 </nav>
-                <div class="main-wrapper">
-                    <h2>Thank You! For Using Our App</h2>
-                </div>
+            </div>
+            <div class="main-wrapper" style="position: absolute; bottom: 0; right: 0; margin-bottom: -600px; margin-right: -100px; color: black;">
+                <h2>For Using Our App!</h2>
             </div>
         </div>
     </header>
+    
     <div class="result-wrapper" id="resultPage">
         <div class="container">
             {% if prediction==1 %}
             <div class="render-result">
                 <div class="result-text">
-                    <h2>Umm!! This is depressing Text Buddy 🙁</h2>
-                    <p>There are some articles and Resources that may help you</p>
+                    <h2 style="color: #ffccb3;">Umm!! This is depressing Text Buddy 🙁</h2>
+                    <p style="color: darkmagenta;">There are some articles and Resources that may help you</p>
                 </div>
-                <div class="card-group">
-                    <div class="card promoting-card shadow p-3 mb-5 mr-2 bg-white rounded" id="myCard">
+                <div class="card-group d-flex justify-content-center" style="gap: 10px; margin-top: 50px;">
+                    <div class="card promoting-card shadow p-3 mb-5 rounded" id="myCard" style="background-color: #ffccb3; color: darkmagenta; width: 300px;">
                         <div class="card-body d-flex flex-row">
-                            <img src="{{ url_for('static', filename='img/kindpng_7860959.png') }}" class="rounded-circle mr-3" height=50px width=50px alt="avatar" />
-
+                            <img src="{{ url_for('static', filename='img/kindpng_7860959.png') }}" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar" />
                             <div>
-                                <h4 class="card-title font-weight-bold mb-2">
-                                    Coping with Depression
-                                </h4>
+                                <h4 class="card-title font-weight-bold mb-2">Coping with Depression</h4>
                             </div>
                         </div>
-
                         <div class="view overlay">
-                            <img class="card-img-top rounded-0 mt-2" width=150px height=150px src="https://www.helpguide.org/wp-content/uploads/person-laying-in-grass-field-1536.jpg" alt="Card image cap" />
+                            <img class="card-img-top rounded-0 mt-2" width="150px" height="150px" src="https://www.helpguide.org/wp-content/uploads/person-laying-in-grass-field-1536.jpg" alt="Card image cap" />
                             <a href="#!">
                                 <div class="mask rgba-white-slight"></div>
                             </a>
                         </div>
                         <div class="card-body">
                             <div class="collapse-content">
-                                <a class="btn btn-flat btn-success" href="https://www.helpguide.org/articles/depression/coping-with-depression.htm">Read More</a>
+                                <a class="btn btn-flat btn-success custom-button" href="https://www.helpguide.org/articles/depression/coping-with-depression.htm">Read More</a>
                             </div>
                         </div>
                     </div>
-                    <div class="card promoting-card shadow p-3 mr-2 mb-5 bg-white rounded" id="myCard">
+                
+                    <div class="card promoting-card shadow p-3 mb-5 rounded" id="myCard" style="background-color: #ffccb3; color: darkmagenta; width: 300px;">
                         <div class="card-body d-flex flex-row">
-                            <img src="{{ url_for('static', filename='img/Yoda.png') }}" class="rounded-circle mr-3" height=50px width=50px alt="avatar" />
-
+                            <img src="{{ url_for('static', filename='img/Yoda.png') }}" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar" />
                             <div>
-                                <h4 class="card-title font-weight-bold mb-2">
-                                    Fight Depression Naturally
-                                </h4>
+                                <h4 class="card-title font-weight-bold mb-2">Fight Depression Naturally</h4>
                             </div>
                         </div>
-
                         <div class="view overlay">
                             <img width="150px" height="150px" class="card-img-top rounded-0 mt-2" src="https://images.unsplash.com/photo-1598919053400-16c846eca803?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1330&q=80" alt="Card image cap" />
                             <a href="#!">
@@ -84,21 +159,18 @@ <h4 class="card-title font-weight-bold mb-2">
                         </div>
                         <div class="card-body">
                             <div class="collapse-content">
-                                <a class="btn btn-flat btn-success" href="https://www.healthline.com/health/depression/how-to-fight-depression">Read More</a>
+                                <a class="btn btn-flat btn-success custom-button" href="https://www.healthline.com/health/depression/how-to-fight-depression">Read More</a>
                             </div>
                         </div>
                     </div>
-                    <div class="card promoting-card shadow p-3 mr-2 mb-5 bg-white rounded" id="myCard">
+                
+                    <div class="card promoting-card shadow p-3 mb-5 rounded" id="myCard" style="background-color: #ffccb3; color: darkmagenta; width: 300px;">
                         <div class="card-body d-flex flex-row">
-                            <img src="{{ url_for('static', filename='img/kindpng_7860959.png') }}" class="rounded-circle mr-3" height=50px width=50px alt="avatar" />
-
+                            <img src="{{ url_for('static', filename='img/kindpng_7860959.png') }}" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar" />
                             <div>
-                                <h4 class="card-title font-weight-bold mb-2">
-                                    7 Powerful Tips to overcome with Depression
-                                </h4>
+                                <h4 class="card-title font-weight-bold mb-2">7 Powerful Tips to Overcome Depression</h4>
                             </div>
                         </div>
-
                         <div class="view overlay" style="margin-top: -27px;">
                             <img class="card-img-top rounded-0 mt-2" src="https://images.unsplash.com/photo-1530747349247-78b098bdfc79?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" alt="Card image cap" width="150px" height="150px" />
                             <a href="#!">
@@ -107,30 +179,63 @@ <h4 class="card-title font-weight-bold mb-2">
                         </div>
                         <div class="card-body">
                             <div class="collapse-content">
-                                <a class="btn btn-flat btn-success" href="https://www.psychologytoday.com/us/blog/anxiety-zen/201605/depression-7-powerful-tips-help-you-overcome-bad-moods">Read
-                  More</a>
+                                <a class="btn btn-flat btn-success custom-button" href="https://www.psychologytoday.com/us/blog/anxiety-zen/201605/depression-7-powerful-tips-help-you-overcome-bad-moods">Read More</a>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
+                
+                <style>
+                    .custom-button {
+                        background-color: darkmagenta;
+                        color: white;
+                        padding: 10px 20px;
+                        border-radius: 5px;
+                        text-decoration: none;
+                        display: inline-block;
+                        margin-top: 10px;
+                        transition: background-color 0.3s ease;
+                    }
+                
+                    .custom-button:hover {
+                        background-color: mediumvioletred;
+                    }
+                </style>
+                
             {% elif prediction==0 %}
             <div class="render-result">
-                <h2 class="m-4">Not a Problem!😎 This is not a depressing Text</h2>
-                <div class="embed-responsive embed-responsive-16by9">
-                    <iframe class="embed-responsive-item" src="{{ url_for('static', filename='img/joker.mp4') }}" width="150px" height="150px"></iframe>
+                <h2 class="m-4" style="color: darkmagenta;">Not a Problem!😎 This is not a depressing Text</h2>
+                <div class="embed-responsive embed-responsive-16by9 video-container">
+                    <iframe class="embed-responsive-item" src="{{ url_for('static', filename='img/joker2.mp4') }}" width="150px" height="150px"></iframe>
                 </div>
             </div>
+            
             {% endif %}
         </div>
-        <iframe id="frame" style=" border: 1px solid transparent;
-        box-shadow: 0px 19px 147px -41px rgba(0,0,0,0.75);
-        position: absolute;
-        left: 80%;
-        bottom: 3%;
-        position: fixed;" class="b_frame" height=350px allow="microphone;" src="https://console.dialogflow.com/api-client/demo/embedded/710c1a23-eda6-436b-9c3c-9e7408328b4b"></iframe>
+        <div class="chat-card" style="background-color: #ffccb3; color: darkmagenta; padding: 20px; border-radius: 10px; text-align: center; max-width: 600px; margin: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
+            <p>If you're feeling lonely or depressed, we're here to listen. Don't hesitate to reach out and chat with us.</p>
+            <a href="chatbot" class="button" style="background-color: darkmagenta; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block; margin-top: 10px; transition: background-color 0.3s ease;">
+                Start Chat
+            </a>
+        </div>
+        
+        <style>
+            .button:hover {
+                background-color: mediumvioletred;
+            }
+        </style>
+        
+         <!-- <div class="iframe-container"> -->
+        <!-- <div class="heading-container">
+            <div class="main-heading" style="font-family: cursive;">Chat With Us</div>
+            <div class="sub-heading"><em>Developed by Mohd Zaid Rashid</em></div>
+        </div>
+        <div class="iframe-wrapper">
+            <iframe id="frame" class="b_frame" allow="microphone;" src="https://console.dialogflow.com/api-client/demo/embedded/710c1a23-eda6-436b-9c3c-9e7408328b4b"></iframe>
+        </div> -->
+    <!-- </div> -->
     </div>
-    <footer class="page-footer">
+    <footer class="page-footer-result">
         <div class="container">
             <div class="social-wrapper">
                 <p>If you like it, Drop a ⭐ on repository here</p>
@@ -139,7 +244,7 @@ <h2 class="m-4">Not a Problem!😎 This is not a depressing Text</h2>
                 </a>
             </div>
             <p>
-                Copyright 2020 : Made with ❤️ by
+                Copyright 2024 : Made with ❤️ by
                 <a href="https://www.linkedin.com/in/mohd-aquib-182b2a71/" title="Aquib's Profile" target="_blank">Aquib</a>
             </p>
         </div>