diff --git a/frontend/tone-teller/public/images/banner.png b/frontend/tone-teller/public/images/banner.png
index 9bd6514..6150c49 100644
Binary files a/frontend/tone-teller/public/images/banner.png and b/frontend/tone-teller/public/images/banner.png differ
diff --git a/frontend/tone-teller/public/images/loop.svg b/frontend/tone-teller/public/images/loop.svg
new file mode 100644
index 0000000..30008d4
--- /dev/null
+++ b/frontend/tone-teller/public/images/loop.svg
@@ -0,0 +1,3 @@
+<svg width="183" height="60" viewBox="0 0 183 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M95.5278 55.5837C101.612 55.146 107.67 54.5508 113.675 53.7922C119.348 53.0686 125.012 52.2575 130.571 51.2013L132.663 50.822L134.738 50.4018C136.121 50.1159 137.505 49.8475 138.879 49.5499C141.61 48.9255 144.377 48.3361 147.055 47.6475C152.422 46.2996 157.578 44.7182 162.183 42.6699C164.485 41.6487 166.604 40.4933 168.521 39.2154C170.421 37.9491 172.075 36.5486 173.415 35.0022C173.677 34.6871 173.923 34.3603 174.141 34.0336L174.745 33.0299L174.693 33.0824C177.337 29.2135 177.958 24.7786 175.507 21.0556C173.117 17.2918 167.934 14.4208 162.025 12.4193C158.576 11.2697 154.899 10.336 151.1 9.58909C147.283 8.87134 143.335 8.21194 139.404 7.67508C131.517 6.5897 123.507 5.90112 115.47 5.60352C99.3797 5.00831 83.1667 5.97698 67.4703 8.45119C66.2359 8.62041 64.809 8.89468 63.347 9.13977C61.8851 9.39652 60.3706 9.6066 59.0312 9.82834C56.3349 10.2368 54.1638 10.3652 53.9186 9.7233C53.3934 8.43368 58.5759 6.26292 67.4352 4.83908C72.7753 3.9521 78.2118 3.34522 83.6482 2.8317C86.3795 2.62747 89.1022 2.37071 91.851 2.25984C93.2255 2.19565 94.5911 2.10228 95.9655 2.0556L100.08 1.93305C101.454 1.88054 102.82 1.88054 104.194 1.8747C105.569 1.8747 106.935 1.84552 108.309 1.85719C111.049 1.92138 113.789 1.91555 116.529 2.04976C122.001 2.21315 127.437 2.63914 132.856 3.0943L138.774 3.72452L144.648 4.5123L150.478 5.45763C152.422 5.79608 154.374 6.18122 156.3 6.61887C160.143 7.50002 163.951 8.55039 167.532 9.98006C168.425 10.3419 169.318 10.6978 170.176 11.1121C171.051 11.4973 171.883 11.9349 172.706 12.3842C173.546 12.8161 174.29 13.3354 175.087 13.8081L176.181 14.5959C176.557 14.8526 176.908 15.1269 177.231 15.4186C179.945 17.6711 181.933 20.3904 182.633 23.2964C183.386 26.1908 182.931 29.1377 181.722 31.8686C181.092 33.2283 180.296 34.5471 179.333 35.8133C178.343 37.068 177.214 38.2642 175.953 39.3963C173.371 41.6546 170.272 43.5628 166.919 45.1908C160.887 48.126 154.12 50.0926 147.397 51.7498C140.656 53.3721 133.81 54.7784 126.859 55.9338C112.966 58.2563 98.6969 59.5284 84.3924 59.9135C70.937 60.2111 57.4817 59.756 44.1051 58.3088C40.7435 57.912 37.3994 57.4335 34.0815 56.8149C30.7724 56.1789 27.4894 55.4261 24.2853 54.4924C21.0987 53.5296 17.9909 52.3975 15.067 51.0321C12.1518 49.6491 9.48175 47.986 7.17937 46.0895L5.75253 44.829C5.30606 44.3972 4.91217 43.9304 4.50072 43.4811L3.88797 42.8042C3.69537 42.5766 3.53771 42.3315 3.36262 42.0922L2.35596 40.6567C1.13912 38.6902 0.41247 36.5953 0.123579 34.4887C-0.156559 32.3821 0.0533818 30.2697 0.613656 28.2273C1.19144 26.1849 2.14578 24.2126 3.36262 22.3336C5.83133 18.5873 9.37682 15.2202 13.6489 12.3667C15.785 10.9371 18.1048 9.62994 20.5998 8.48037C21.8429 7.90266 23.1299 7.36581 24.4605 6.8698C25.7912 6.39129 27.1129 5.9478 28.4611 5.51015C33.5736 3.92292 39.2639 2.80836 44.2451 1.57126H44.1489C47.388 1.4137 50.7584 0.888518 54.1638 0.532559C57.5605 0.153259 60.9572 -0.0801569 64.0474 0.246625C66.1835 0.188271 68.3633 0.217448 70.4206 0.124082C79.884 -0.261054 82.3613 0.24079 79.2447 1.76383C78.5619 2.10228 79.3761 2.52826 77.1 2.77919C77.0912 2.77919 76.9249 2.75584 76.9249 2.75584L76.9948 2.77919C73.8258 3.32771 70.3068 3.51445 66.6912 3.63115C63.0845 3.7537 59.3901 3.81789 55.9146 4.08048C47.3967 4.73404 39.0101 5.98865 31.3851 8.34615C30.4134 8.62041 29.503 8.95303 28.5663 9.27981C27.6208 9.59493 26.7278 9.93921 25.8523 10.2952C24.1015 11.0129 22.4294 11.8357 20.8449 12.7227C17.6759 14.5025 14.8657 16.5682 12.5283 18.844C7.87981 23.3781 5.09589 28.8634 5.90128 34.1911C6.10263 35.5157 6.51424 36.817 7.1533 38.0716L7.67843 38.9995C7.87102 39.3029 8.10737 39.6005 8.31747 39.904L8.95652 40.8084C9.20164 41.1002 9.47314 41.3803 9.73577 41.6604C11.8105 43.9362 14.6468 45.9086 17.9297 47.5308C21.9391 49.5557 26.6402 51.0204 31.4901 52.1875C36.3574 53.3545 41.47 54.1423 46.635 54.7142C57.0614 55.8404 67.6804 56.3131 78.2293 56.2431C84.0159 56.1497 89.7761 55.8171 95.624 55.5662L95.5278 55.5837Z" fill="#F5CC6E"/>
+</svg>
diff --git a/frontend/tone-teller/src/App.css b/frontend/tone-teller/src/App.css
index 81534a2..bb2622c 100644
--- a/frontend/tone-teller/src/App.css
+++ b/frontend/tone-teller/src/App.css
@@ -53,13 +53,13 @@ p {
 
 .heading-1 {
     font-family: Abyss;
-    font-size: 4.5rem; /* 72px */
+    font-size: 3.5rem;
     line-height: 1;
 }
 
 .heading-2 {
     font-family: Abyss;
-    font-size: 3.75rem; /* 60px */
+    font-size: 3.125rem; /* 60px */
     line-height: 1;
     margin-bottom: 30px;
 }
@@ -100,14 +100,14 @@ p {
 
 .body-text {
     font-family: 'Cantarell';
-    font-size: 1rem;
+    font-size: 1.125rem;
     line-height: 1.5rem;
 }
 
 .body-title {
     font-family: 'Cantarell';
     font-size: 1rem;
-    line-height: 1.5rem;
+    line-height: 1.125rem;
     font-weight: 700;
 }
 
@@ -120,7 +120,7 @@ p {
 .overline-text {
     font-family: 'Cantarell';
     font-weight: 700;
-    font-size: 0.75rem; /* 12px */
+    font-size: 0.875rem; /* 12px */
     line-height: 1rem; /* 16px */
     letter-spacing: 0.12em;
     text-transform: uppercase;
@@ -136,6 +136,12 @@ p {
     border-radius: 10px;
 }
 
+
+.button-sm {
+    padding: 8px 12px !important;
+    box-shadow: 4px 4px 0px #000000;
+}
+
 .background-white {
     background-color: var(--white);
 }
@@ -233,4 +239,4 @@ p {
     background-repeat: no-repeat;
     color: #fff;
     font-size: 100px;
-  }
+  }
\ No newline at end of file
diff --git a/frontend/tone-teller/src/App.js b/frontend/tone-teller/src/App.js
index 04772a4..e8612a5 100644
--- a/frontend/tone-teller/src/App.js
+++ b/frontend/tone-teller/src/App.js
@@ -1,17 +1,15 @@
 import React from "react";
-import Hero from "./components/Hero";
-import LandingContent from "./components/LandingContent";
 import "./App.css";
 
 // import the landing page from the components folder
 import NavHeader from "./components/NavHeader";
-import Footer from "./components/Footer";
+import Toneteller from "./components/Toneteller";
+import Home from "./components/Home";
 
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-// import About from './components/pages/About';
-import ChromeExtension from './components/pages/ChromeExtension';
-import FAQ from './components/pages/FAQ';
-import ToneTeller from './components/pages/ToneTeller';
+import About from "./components/pages/About";
+import ChromeExtension from "./components/pages/ChromeExtension";
+import FAQ from "./components/pages/FAQ";
 
 function App() {
   return (
@@ -21,13 +19,12 @@ function App() {
         {/* <Hero></Hero>
         <LandingContent></LandingContent> */}
         <Routes>
-          <Route path="/" element={<Hero />} />
-          <Route path="/about" element={<LandingContent/>} />
+          <Route path="/" element={<Home />} />
           <Route path="/chrome" element={<ChromeExtension />} />
-          <Route path="/faq" element={<FAQ />}> </Route>
-          <Route path="/toneteller" element={<ToneTeller />} />
+          <Route path="/faq" element={<FAQ />}></Route>
+          <Route path="/toneteller" element={<Toneteller />} />
         </Routes>
-        <Footer />
+        {/* <Footer /> */}
       </Router>
     </>
   );
diff --git a/frontend/tone-teller/src/components/Cards.js b/frontend/tone-teller/src/components/Cards.js
index 14a2f56..35b7f3c 100644
--- a/frontend/tone-teller/src/components/Cards.js
+++ b/frontend/tone-teller/src/components/Cards.js
@@ -1,30 +1,30 @@
-import React from 'react';
-import './Cards.css';
-import CardItem from './CardItem';
+import React from "react";
+import "./Cards.css";
+import CardItem from "./CardItem";
 
 function Cards() {
   return (
-    <div className='cards'>
+    <div className="cards">
       <h1>The Lore Behind ToneTeller</h1>
-      <div className='cards__container'>
-        <div className='cards__wrapper'>
-          <ul className='cards__items'>
+      <div className="cards__container">
+        <div className="cards__wrapper">
+          <ul className="cards__items">
             <CardItem
-              text='Accessible on desktop and mobile, anywhere'
-              label='Accesibility'
-              path='/'
+              text="Accessible on desktop and mobile, anywhere"
+              label="Accesibility"
+              path="/"
             />
             <CardItem
-              text='Straight forward to learn, easy to use'
-              label='Simple'
-              path='/'
+              text="Straight forward to learn, easy to use"
+              label="Simple"
+              path="/"
             />
           </ul>
-          <ul className='cards__items'>
+          <ul className="cards__items">
             <CardItem
-              text='Text analysis applicable in both professional and casual settings'
-              label='Helpful'
-              path='/'
+              text="Text analysis applicable in both professional and casual settings"
+              label="Helpful"
+              path="/"
             />
           </ul>
         </div>
@@ -33,4 +33,4 @@ function Cards() {
   );
 }
 
-export default Cards;
\ No newline at end of file
+export default Cards;
diff --git a/frontend/tone-teller/src/components/Footer.css b/frontend/tone-teller/src/components/Footer.css
index 758c378..9377cb1 100644
--- a/frontend/tone-teller/src/components/Footer.css
+++ b/frontend/tone-teller/src/components/Footer.css
@@ -19,11 +19,6 @@
   color: #fff;
 }
 
-.footer-subscription > p {
-  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
-    'Lucida Sans', Arial, sans-serif;
-}
-
 .footer-subscription-heading {
   margin-bottom: 24px;
   font-size: 24px;
diff --git a/frontend/tone-teller/src/components/Footer.js b/frontend/tone-teller/src/components/Footer.js
index a2a3903..4ec4f85 100644
--- a/frontend/tone-teller/src/components/Footer.js
+++ b/frontend/tone-teller/src/components/Footer.js
@@ -1,34 +1,35 @@
-import React from 'react';
-import './Footer.css';
-import { Button } from './Button';
-import { Link } from 'react-router-dom';
+import React from "react";
+import "./Footer.css";
+import { Button } from "./Button";
+import { Link } from "react-router-dom";
 
 function Footer() {
   return (
-    <div className='footer-container'>
-      <section className='footer-subscription'>
-        <p className='footer-subscription-heading'>
+    <div className="footer-container">
+      <section className="footer-subscription">
+        <p className="footer-subscription-heading heading-3">
           easy-to-use semantics analysis tool
         </p>
       </section>
-      <div class='footer-links'>
-        <div className='footer-link-wrapper'>
-        </div>
+      <div class="footer-links">
+        <div className="footer-link-wrapper"></div>
       </div>
-      <section class='social-media'>
-        <div class='social-media-wrap'>
-          <div class='footer-logo'>
-            <Link to='/' className='social-logo'>
+      <section class="social-media">
+        <div class="social-media-wrap">
+          <div class="footer-logo">
+            <Link to="/" className="social-logo">
               Tone Teller
-              <i class='fas fa-sms' />
+              <i class="fas fa-sms" />
             </Link>
           </div>
-          <small class='website-rights'>Hacked by Christina, Aniket, Ray, Julia, Trinity, Yui</small>
-          <small class='website-rights'>HackED © 2023</small>
+          <small class="website-rights">
+            Hacked by Christina, Aniket, Ray, Julia, Trinity, Yui
+          </small>
+          <small class="website-rights">HackED © 2023</small>
         </div>
       </section>
     </div>
   );
 }
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/frontend/tone-teller/src/components/Hero.js b/frontend/tone-teller/src/components/Hero.js
index 60d6c48..6b76378 100644
--- a/frontend/tone-teller/src/components/Hero.js
+++ b/frontend/tone-teller/src/components/Hero.js
@@ -6,13 +6,22 @@ export default function Hero() {
     <div className="landing-hero">
       <div class="hero-img">
         <img class="hero-img" src="/images/landing_image.png"></img>
-        <img class="hero-text" src="/images/landing_text.svg"></img>
       </div>
-      <p className="heading-7">
-        Tired of trying to decipher the tone of an email or text message? Do you
-        want to communicate with greater empathy and understanding?
-      </p>
-      <Link to="/toneteller" className="heading-6 primary-button" style={{ textDecoration: 'none' }}> Try Toneteller today</Link>
+
+      <div className="hero-heading-and-text">
+        <p className="heading-1">
+          Know what they <span className="highlighted heading-1">really </span>
+          mean
+        </p>
+        <p className="heading-7">
+          Tired of trying to decipher the tone of an email or text message? Do
+          you want to communicate with greater empathy and understanding?
+        </p>
+
+        <button className="heading-6 primary-button">
+          Try Toneteller today
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/frontend/tone-teller/src/components/Home.js b/frontend/tone-teller/src/components/Home.js
new file mode 100644
index 0000000..87556f9
--- /dev/null
+++ b/frontend/tone-teller/src/components/Home.js
@@ -0,0 +1,11 @@
+import Hero from "./Hero";
+import LandingContent from "./LandingContent";
+
+export default function Home() {
+  return (
+    <div>
+      <Hero></Hero>
+      <LandingContent></LandingContent>
+    </div>
+  );
+}
diff --git a/frontend/tone-teller/src/components/LandingContent.js b/frontend/tone-teller/src/components/LandingContent.js
index 371d4d8..a10069d 100644
--- a/frontend/tone-teller/src/components/LandingContent.js
+++ b/frontend/tone-teller/src/components/LandingContent.js
@@ -6,11 +6,11 @@ export default function Hero() {
   return (
     <div className="landing-content">
       <div className="what-is-toneteller-div">
-        <p className="overline-text">WHAT IS TONETELLER?</p>
-        <p className="heading-5">
+        <p className="overline-text p-60">WHAT IS TONETELLER?</p>
+        <p className="heading-5 p-60">
           The ultimate tool for understanding tone in written communication.
         </p>
-        <p className="body-text">
+        <p className="body-text p-60">
           Our application uses state-of-the-art artificial intelligence to
           analyze text and accurately detect the tone of a message, including,
           happy, sad, angry, and more. With Toneteller, you will never have to
@@ -20,43 +20,51 @@ export default function Hero() {
         <div className="what-is-toneteller-grid">
           <div className="what-is-toneteller-column">
             <div className="what-is-toneteller-img background-pink"></div>
-            <p className="heading-6">Refine your social skills</p>
-            <p className="body-text">
-              Our application uses state-of-the-art artificial intelligence to
-              analyze text and accurately detect the tone of a message,
-              including, happy, sad, angry, and more. With Toneteller, you will
-              never have to guess at someone’s tone again.
-            </p>
+            <div className="what-is-toneteller-text">
+              <p className="heading-6">Refine your social skills</p>
+              <p className="body-text">
+                Our application uses state-of-the-art artificial intelligence to
+                analyze text and accurately detect the tone of a message,
+                including, happy, sad, angry, and more. With Toneteller, you
+                will never have to guess at someone’s tone again.
+              </p>
+            </div>
           </div>
 
           <div className="what-is-toneteller-column">
             <div className="what-is-toneteller-img background-teal"></div>
-            <p className="heading-6">Pick up on the vibes</p>
-            <p className="body-text">
-              Are they serious, or are they only joking? Always be able to
-              accurately interpret the tone of communication with Toneteller.
-            </p>
+            <div className="what-is-toneteller-text">
+              <p className="heading-6">Pick up on the vibes</p>
+              <p className="body-text">
+                Are they serious, or are they only joking? Always be able to
+                accurately interpret the tone of communication with Toneteller.
+              </p>
+            </div>
           </div>
 
           <div className="what-is-toneteller-column">
             <div className="what-is-toneteller-img background-fuchsia"></div>
-            <p className="heading-6">Strengthen confidence in communicating</p>
-            <p className="body-text">
-              Gain the skills to understand the emotional context of any
-              conversation. With Toneteller, you'll have the ability to read
-              between the lines and understand the true emotion behind their
-              words.
-            </p>
+            <div className="what-is-toneteller-text">
+              <p className="heading-6">
+                Strengthen confidence in communicating
+              </p>
+              <p className="body-text">
+                Gain the skills to understand the emotional context of any
+                conversation. With Toneteller, you'll have the ability to read
+                between the lines and understand the true emotion behind their
+                words.
+              </p>
+            </div>
           </div>
         </div>
       </div>
 
       <div className="who-can-use-toneteller-div">
-        <p className="overline-text">WHO CAN USE TONETELLER?</p>
-        <p className="heading-5">
+        <p className="overline-text p-60">WHO CAN USE TONETELLER?</p>
+        <p className="heading-5 p-60">
           Developed by communicators, for communicators.
         </p>
-        <p className="body-text">
+        <p className="body-text p-60">
           Whether you're a business professional looking to better understand
           clients and colleagues, a student trying to improve your comprehension
           of written texts, or anyone who wants to communicate more effectively
@@ -66,39 +74,47 @@ export default function Hero() {
         <div className="what-is-toneteller-grid">
           <div className="what-is-toneteller-column">
             <div className="what-is-toneteller-img background-sky"></div>
-            <p className="heading-6">
-              Created for individuals who struggle with social interaction
-            </p>
-            <p className="body-text">
-              When it comes to communication, not everyone is on the same
-              playing field. can help users better understand the intentions and
-              emotions of others, which can be especially important in avoiding
-              misunderstandings or conflicts.
-            </p>
+            <div className="what-is-toneteller-text">
+              <p className="heading-6">
+                Created for individuals who struggle with social interaction
+              </p>
+              <p className="body-text">
+                When it comes to communication, not everyone is on the same
+                playing field. can help users better understand the intentions
+                and emotions of others, which can be especially important in
+                avoiding misunderstandings or conflicts.
+              </p>
+            </div>
           </div>
 
           <div className="what-is-toneteller-column">
             <div className="what-is-toneteller-img background-purple"></div>
-            <p className="heading-6">Designed for professionals and students</p>
-            <p className="body-text">
-              Knowing the tone of a written communication from a client or
-              colleague can help you respond appropriately and avoid
-              misunderstandings. Toneteller can also help students better
-              understand the tone of written texts they are reading for class,
-              which could improve their comprehension and analysis of the
-              material.
-            </p>
+            <div className="what-is-toneteller-text">
+              <p className="heading-6">
+                Designed for professionals and students
+              </p>
+              <p className="body-text">
+                Knowing the tone of a written communication from a client or
+                colleague can help you respond appropriately and avoid
+                misunderstandings. Toneteller can also help students better
+                understand the tone of written texts they are reading for class,
+                which could improve their comprehension and analysis of the
+                material.
+              </p>
+            </div>
           </div>
 
           <div className="what-is-toneteller-column">
             <div className="what-is-toneteller-img background-rose"></div>
-            <p className="heading-6">Built for readers and writers</p>
-            <p className="body-text">
-              Knowing the tone of a piece of writing can help writers craft more
-              effective and engaging content. Toneteller helps writers identify
-              the tone of their writing and was designed to be particularly
-              useful for those who are just starting out.
-            </p>
+            <div className="what-is-toneteller-text">
+              <p className="heading-6">Built for readers and writers</p>
+              <p className="body-text">
+                Knowing the tone of a piece of writing can help writers craft
+                more effective and engaging content. Toneteller helps writers
+                identify the tone of their writing and was designed to be
+                particularly useful for those who are just starting out.
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -118,9 +134,9 @@ export default function Hero() {
       <img className="banner" src="/images/banner.png"></img>
 
       <div className="how-does-it-work-div">
-        <p className="overline-text">YOU MIGHT BE WONDERING...</p>
-        <p className="heading-5">How exactly does Toneteller work?</p>
-        <p className="body-text">
+        <p className="overline-text p-60">YOU MIGHT BE WONDERING...</p>
+        <p className="heading-5 p-60">How exactly does Toneteller work?</p>
+        <p className="body-text p-60">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu
           turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec
           fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus
@@ -134,46 +150,56 @@ export default function Hero() {
         </p>
 
         <div className="what-is-toneteller-grid">
-          <div className="what-is-toneteller-column">
+          <div className="what-is-toneteller-column column-50">
             <div className="how-does-it-work-img">
               <img src="/images/step_one.png"></img>
             </div>
-            <p className="heading-6">Find a written communication to analyze</p>
-            <p className="body-text">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
-              vulputate libero et velit interdum, ac aliquet odio mattis.
-            </p>
+            <div className="what-is-toneteller-text">
+              <p className="heading-6">
+                Find a written communication to analyze
+              </p>
+              <p className="body-text">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                vulputate libero et velit interdum, ac aliquet odio mattis.
+              </p>
+            </div>
           </div>
 
-          <div className="what-is-toneteller-column">
+          <div className="what-is-toneteller-column column-50">
             <div className="how-does-it-work-img">
               <img src="/images/step_two.png"></img>
             </div>
-            <p className="heading-6">
-              Use the Toneteller web application or Google Chrome extension
-            </p>
-            <p className="body-text">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
-              vulputate libero et velit interdum, ac aliquet odio mattis.
-            </p>
+            <div className="what-is-toneteller-text">
+              <p className="heading-6">
+                Use the Toneteller web application or Google Chrome extension
+              </p>
+              <p className="body-text">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                vulputate libero et velit interdum, ac aliquet odio mattis.
+              </p>
+            </div>
           </div>
 
-          <div className="what-is-toneteller-column">
+          <div className="what-is-toneteller-column column-50">
             <div className="how-does-it-work-img">
               <img src="/images/step_three.png"></img>
             </div>
-            <p className="heading-6">And that's it!</p>
-            <p className="body-text">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
-              vulputate libero et velit interdum, ac aliquet odio mattis.
-            </p>
+            <div className="what-is-toneteller-text">
+              <p className="heading-6">And that's it!</p>
+              <p className="body-text">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                vulputate libero et velit interdum, ac aliquet odio mattis.
+              </p>
+            </div>
           </div>
         </div>
       </div>
 
       <div className="cta download-extension-div">
         <p className="overline-text">AVAILABLE NOW</p>
-        <p className="heading-2">DOWNLOAD OUR EXTENSION FOR GOOGLE CHROME</p>
+        <p className="heading-2 px-40">
+          DOWNLOAD OUR EXTENSION FOR GOOGLE CHROME
+        </p>
         <button className="primary-button heading-5">Download</button>
       </div>
       <div className="cta learn-more-div">
@@ -183,8 +209,10 @@ export default function Hero() {
       </div>
 
       <div className="meet-the-team-div">
-        <p className="overline-text">MADE WITH LOVE BY</p>
-        <p className="heading-3">THE TONETELLER TEAM</p>
+        <div className="meet-the-team-text">
+          <p className="overline-text">MADE WITH LOVE BY</p>
+          <p className="heading-3">THE TONETELLER TEAM</p>
+        </div>
 
         <div className="meet-the-team-grid">
           <div className="meet-the-team-row">
diff --git a/frontend/tone-teller/src/components/Toneteller.js b/frontend/tone-teller/src/components/Toneteller.js
new file mode 100644
index 0000000..a1b243e
--- /dev/null
+++ b/frontend/tone-teller/src/components/Toneteller.js
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import "./style/Toneteller.css";
+
+// display header and textbox when routed to the landing page
+export default function Toneteller() {
+  const [data, setData] = useState(null);
+  const [print, setPrint] = useState(false);
+  function getData(val) {
+    setData(val.target.value);
+    setPrint(false);
+    console.warn(val.target.value);
+  }
+  return (
+    // add textbox
+    <div className="toneteller-div">
+      {print ? <h1>{data}</h1> : null}
+
+      <div className="toneteller-input-div">
+        <input type="text" onChange={getData} />
+        <button
+          className="primary-button button-sm body-title"
+          onClick={() => setPrint(true)}
+        >
+          Analyze
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/tone-teller/src/components/pages/About.js b/frontend/tone-teller/src/components/pages/About.js
index bf851cb..03e4abe 100644
--- a/frontend/tone-teller/src/components/pages/About.js
+++ b/frontend/tone-teller/src/components/pages/About.js
@@ -1,15 +1,14 @@
-import React from 'react';
-import '../../App.css';
-import Cards from '../Cards';
-import Footer from '../Footer';
+import React from "react";
+import "../../App.css";
+import Cards from "../Cards";
+import Footer from "../Footer";
 
 export default function About() {
   console.log("About page");
   return (
     <>
-    <Cards/>
-    <Footer/>
+      <Cards />
+      <Footer />
     </>
   );
-  
-}
\ No newline at end of file
+}
diff --git a/frontend/tone-teller/src/components/pages/Toneteller.js b/frontend/tone-teller/src/components/pages/Toneteller.js
new file mode 100644
index 0000000..bb6d31d
--- /dev/null
+++ b/frontend/tone-teller/src/components/pages/Toneteller.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import '../../App.css';
+
+export default function ToneTeller() {
+  console.log("Tone Teller page");
+  return <h1 className='sign-up'>LIKE & SUBSCRIBE</h1>;
+}
\ No newline at end of file
diff --git a/frontend/tone-teller/src/components/style/Hero.css b/frontend/tone-teller/src/components/style/Hero.css
index 4620e2a..5054a81 100644
--- a/frontend/tone-teller/src/components/style/Hero.css
+++ b/frontend/tone-teller/src/components/style/Hero.css
@@ -13,6 +13,56 @@
     margin-bottom: 20px;
 }
 
-.landing-hero > p {
+.hero-heading-and-text > p {
     margin-bottom: 20px;
+}
+
+.hero-heading-and-text > .heading-1 {
+    margin-top: 30px;
+}
+
+.highlighted {
+    background-image: url("../../../public/images/loop.svg");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    background-position: center center;
+}
+
+
+@media screen and (min-width: 1024px) {
+    .landing-hero {
+        padding: 40px 80px !important;
+        display: flex;
+        flex-direction: row-reverse;
+        gap: 40px;
+        align-items: center;
+    }
+
+    .landing-hero > div {
+        width: 50%;
+    }
+
+    .hero-heading-and-text {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .hero-heading-and-text > .primary-button {
+        width: fit-content;
+    }
+}
+
+@media screen and (min-width: 768px) { 
+    .landing-hero {
+        padding-right: 40px;
+        padding-left: 40px;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    .hero-heading-and-text > .heading-1 {
+        font-size: 3.125rem;
+    }
 }
\ No newline at end of file
diff --git a/frontend/tone-teller/src/components/style/LandingContent.css b/frontend/tone-teller/src/components/style/LandingContent.css
index 80f87d8..cd03b23 100644
--- a/frontend/tone-teller/src/components/style/LandingContent.css
+++ b/frontend/tone-teller/src/components/style/LandingContent.css
@@ -1,9 +1,19 @@
+/*
+PADDING
+*/
+.what-is-toneteller-div, .who-can-use-toneteller-div, .meet-the-team-column, .cta, .meet-the-team-div, .how-does-it-work-div {
+    padding: 20px;
+}
+
+.text-center {
+    text-align: center;
+}
+
 /*
 WHAT IS TONETELLER?
 */
 .what-is-toneteller-div {
     background-color: var(--yellow-100);
-    padding: 20px;
 }
 
 .what-is-toneteller-grid {
@@ -18,7 +28,7 @@ WHAT IS TONETELLER?
     border: 2px solid #000000;
     border-radius: 10px;
     width: 120px;
-    height: auto;
+    height: 120px;
     aspect-ratio: 1 / 1;
     margin-bottom: 20px;
 }
@@ -27,7 +37,6 @@ WHAT IS TONETELLER?
 WHO CAN USE TONETELLER?
 */
 .who-can-use-toneteller-div {
-    padding: 20px;
     background-color: var(--yellow-50);
 }
 
@@ -45,7 +54,6 @@ BANNER
 CTA
 */
 .cta {
-    padding: 20px;
     padding-bottom: 40px;
     background-color: var(--yellow-400);
 }
@@ -54,10 +62,6 @@ CTA
 /*
 HOW DOES IT WORK
 */
-.how-does-it-work-div {
-    padding: 20px;
-}
-
 .how-does-it-work-img {
     border-radius: 10px;
     width: 100%;
@@ -89,7 +93,6 @@ LEARN MORE
 MEET THE TEAM
 */
 .meet-the-team-div {
-    padding: 20px;
     background-color: var(--yellow-200);
     padding-bottom: 40px;
 }
@@ -108,7 +111,6 @@ MEET THE TEAM
 }
 
 .meet-the-team-column {
-    padding: 20px;
     border: 4px solid #000000;
     box-shadow: 8px 8px 0px #000000;
     border-radius: 10px;
@@ -130,4 +132,144 @@ MEET THE TEAM
 .meet-the-team-img > img {
     padding: 20px;
     width: 100%;
+}
+
+@media screen and (min-width: 1440px) {
+    .cta > .overline-text {
+        margin-top: 80px;
+    }
+    
+    .cta > button {
+        margin-bottom: 80px;
+    }
+
+    .what-is-toneteller-grid {
+        flex-direction: row;
+    }
+
+    .what-is-toneteller-column {
+        width: calc(33.33333333333333333333333%);
+        flex-direction: column !important;
+    }
+
+    .column-50 > .how-does-it-work-img {
+        width: 75% !important;
+    }
+
+    .meet-the-team-div {
+        flex-direction: column !important;
+    }
+
+    .meet-the-team-div > div {
+        width: 100% !important;
+    }
+
+    .meet-the-team-grid {
+        flex-direction: row;
+    }
+
+    .meet-the-team-row {
+        width: 33.333333333333333333333%
+    }
+
+    .meet-the-team-column {
+        width: 50%;
+        padding: 20px !important;
+        margin-bottom: 40px;
+    }
+}
+
+@media screen and (min-width: 1024px) { 
+    .what-is-toneteller-div, .who-can-use-toneteller-div, .meet-the-team-column, .cta, .meet-the-team-div, .how-does-it-work-div {
+        padding: 40px;
+    }
+    
+    .what-is-toneteller-div, .who-can-use-toneteller-div, .cta, .meet-the-team-div, .how-does-it-work-div {
+        padding-left: 80px !important;
+        padding-right: 80px !important;
+    }   
+    
+    .meet-the-team-div > div {
+        width: 50%;
+    }
+
+    .px-40 {
+        padding-left:40px;
+        padding-right:40px;
+    }
+
+    .pb-80 {
+        padding-bottom: 80px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .p-60 {
+        width: 75%;
+    }
+
+    .what-is-toneteller-div, .who-can-use-toneteller-div, .cta, .meet-the-team-div, .how-does-it-work-div {
+        padding-left: 40px;
+        padding-right: 40px;
+    }    
+
+    .what-is-toneteller-column {
+        flex-direction: row;
+        display: flex;
+        gap: 20px;
+    }
+
+    .column-50 {
+        gap: 40px;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .column-50 > .how-does-it-work-img {
+        width: 40%;
+    }
+
+    .what-is-toneteller-text {
+        width: 80%;
+    }
+    
+    .meet-the-team-div {
+        display: flex;
+        flex-direction: row;
+        gap: 20px;
+    }
+
+
+    .meet-the-team-img {
+        width: 100%;
+    }
+
+    .meet-the-team-text {
+        width: fit-content;
+    }
+
+    .cta {
+        text-align: center;
+    }
+}
+
+@media screen and (max-width: 425px) {
+    .meet-the-team-row {
+        flex-direction: column;
+    }
+    
+    .meet-the-team-column {
+        width: 100%;
+    }
+
+    .meet-the-team-img {
+       height: auto;
+       aspect-ratio: 4/2;
+       justify-content: center;
+       display: flex;
+    }
+
+    .meet-the-team-img > img {
+        width: 50%;
+    }
 }
\ No newline at end of file
diff --git a/frontend/tone-teller/src/components/style/Toneteller.css b/frontend/tone-teller/src/components/style/Toneteller.css
new file mode 100644
index 0000000..fc1d658
--- /dev/null
+++ b/frontend/tone-teller/src/components/style/Toneteller.css
@@ -0,0 +1,14 @@
+.toneteller-div {
+    padding: 20px;
+}
+
+.toneteller-input-div {
+    display: flex;
+     gap: 10px;
+}
+
+.toneteller-input-div > input {
+    width: 100%;
+    border: 2px solid #000;
+    border-radius: 4px;
+}
\ No newline at end of file