diff --git a/client/src/App.css b/client/src/App.css
index 39be4d0..4cc89b0 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -131,6 +131,27 @@ nav svg {
   color: #d1d5db;
   font-size: 16px;
 }
+#introsection::before,
+#introsection::after {
+  content: "<HomePage/>";
+  float: left;
+  color: rgb(0, 134, 244);
+}
+#introsection {
+  text-align: left;
+  padding: 20px;
+}
+#introsection h1 {
+  padding-top: 20px;
+  line-height: 33px;
+}
+#introsection h2 {
+  font-size: 16px;
+  font-weight: 400;
+}
+#introsection ul {
+  list-style-type: square;
+}
 .chatLogWrapper {
   height: 80vh;
   overflow-y: auto;
@@ -212,10 +233,11 @@ nav svg {
 
 .inputPromptWrapper {
   padding: 8px;
-  position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
+  position: relative;
+  padding-top: 20px;
 }
 .inputPrompttTextarea {
   width: 80%;
@@ -233,7 +255,13 @@ nav svg {
   overflow-y: hidden;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (min-width: 768px) {
+  .inputPromptWrapper {
+    position: absolute;
+  }
+}
+
+@media screen and (max-width: 1024px) {
   .App {
     display: block;
   }
@@ -269,4 +297,14 @@ nav svg {
     width: 30px;
     height: 30px;
   }
+  #introsection {
+    padding: 20px 20px 40px 20px;
+    font-size: 14px;
+  }
+  #introsection h1 {
+    font-size: 25px;
+  }
+  #introsection h2 {
+    font-size: 14px;
+  }
 }
diff --git a/client/src/App.js b/client/src/App.js
index b590208..94392e8 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -8,6 +8,7 @@ import Loading from "./components/Loading";
 import Error from "./components/Error";
 import NavLinks from "./components/NavLink";
 import BotResponse from "./components/BotResponse";
+import IntroSection from "./components/IntroSection";
 
 function App() {
   const [showMenu, setShowMenu] = useState(false);
@@ -195,64 +196,68 @@ function App() {
       </aside>
 
       <section className="chatBox">
-        <div className="chatLogWrapper">
-          {chatLog.length > 0 &&
-            chatLog.map((chat, idx) => (
-              <div className="chatLog" key={idx}>
-                <div className="chatPromptMainContainer">
-                  <div className="chatPromptWrapper">
-                    <Avatar bg="#5437DB" className="userSVG">
-                      <svg
-                        stroke="currentColor"
-                        fill="none"
-                        strokeWidth={1.9}
-                        viewBox="0 0 24 24"
-                        // strokeLinecap="round"
-                        // strokeLinejoin="round"
-                        className="h-6 w-6"
-                        height={40}
-                        width={40}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                        <circle cx={12} cy={7} r={4} />
-                      </svg>
-                    </Avatar>
-                    <div id="chatPrompt">{chat.chatPrompt}</div>
+        {chatLog.length > 0 ? (
+          <div className="chatLogWrapper">
+            {chatLog.length > 0 &&
+              chatLog.map((chat, idx) => (
+                <div className="chatLog" key={idx}>
+                  <div className="chatPromptMainContainer">
+                    <div className="chatPromptWrapper">
+                      <Avatar bg="#5437DB" className="userSVG">
+                        <svg
+                          stroke="currentColor"
+                          fill="none"
+                          strokeWidth={1.9}
+                          viewBox="0 0 24 24"
+                          // strokeLinecap="round"
+                          // strokeLinejoin="round"
+                          className="h-6 w-6"
+                          height={40}
+                          width={40}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                          <circle cx={12} cy={7} r={4} />
+                        </svg>
+                      </Avatar>
+                      <div id="chatPrompt">{chat.chatPrompt}</div>
+                    </div>
                   </div>
-                </div>
 
-                <div className="botMessageMainContainer">
-                  <div className="botMessageWrapper">
-                    <Avatar bg="#11a27f" className="openaiSVG">
-                      <svg
-                        width={41}
-                        height={41}
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        strokeWidth={1.5}
-                        className="h-6 w-6"
-                      >
-                        <path
-                          d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813ZM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496ZM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744ZM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.01L7.04 23.856a7.504 7.504 0 0 1-2.743-10.237Zm27.658 6.437-9.724-5.615 3.367-1.943a.121.121 0 0 1 .113-.01l8.052 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.65-1.132Zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763Zm-21.063 6.929-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225Zm1.829-3.943 4.33-2.501 4.332 2.5v5l-4.331 2.5-4.331-2.5V18Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </Avatar>
-                    {chat.botMessage ? (
-                      <div id="botMessage">
-                        <BotResponse response={chat.botMessage} />
-                      </div>
-                    ) : err ? (
-                      <Error err={err} />
-                    ) : (
-                      <Loading />
-                    )}
+                  <div className="botMessageMainContainer">
+                    <div className="botMessageWrapper">
+                      <Avatar bg="#11a27f" className="openaiSVG">
+                        <svg
+                          width={41}
+                          height={41}
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          strokeWidth={1.5}
+                          className="h-6 w-6"
+                        >
+                          <path
+                            d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813ZM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496ZM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744ZM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.01L7.04 23.856a7.504 7.504 0 0 1-2.743-10.237Zm27.658 6.437-9.724-5.615 3.367-1.943a.121.121 0 0 1 .113-.01l8.052 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.65-1.132Zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763Zm-21.063 6.929-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225Zm1.829-3.943 4.33-2.501 4.332 2.5v5l-4.331 2.5-4.331-2.5V18Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </Avatar>
+                      {chat.botMessage ? (
+                        <div id="botMessage">
+                          <BotResponse response={chat.botMessage} />
+                        </div>
+                      ) : err ? (
+                        <Error err={err} />
+                      ) : (
+                        <Loading />
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            ))}
-        </div>
+              ))}
+          </div>
+        ) : (
+          <IntroSection />
+        )}
 
         <form onSubmit={handleSubmit}>
           <div className="inputPromptWrapper">
diff --git a/client/src/components/IntroSection.jsx b/client/src/components/IntroSection.jsx
new file mode 100644
index 0000000..63e8a98
--- /dev/null
+++ b/client/src/components/IntroSection.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const IntroSection = () => {
+  return (
+    <div id="introsection">
+      <h1>Introducing Talkbot - The Ultimate AI Assistant</h1>
+      <h2>
+        A cutting-edge AI-powered app that provides instant answers to any
+        question you may have. With Talkbot, you'll never be left searching for
+        answers again. Whether you need information for school or work, or just
+        want to know the latest news, Talkbot has you covered.
+      </h2>
+      <p>
+        Features:
+        <ul>
+          <li>Instant answers to any question</li>
+          <li>Deep learning technology that improves with usage</li>
+          <li>Continuously Learning</li>
+          <li>User-friendly interface</li>
+          <li>Available 24/7</li>
+        </ul>
+      </p>
+      <p>
+        Say goodbye to endless searching and typing, and say hello to TalkBot,
+        your personal AI assistant. Try it now and see for yourself how TalkBot
+        can make your life easier.
+      </p>
+    </div>
+  );
+};
+
+export default IntroSection;