diff --git a/public/vscode.svg b/public/vscode.svg
deleted file mode 100644
index 2c118fb..0000000
--- a/public/vscode.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1988.5" style="enable-background:new 0 0 2000 1988.5" xml:space="preserve"><defs><filter id="a" filterUnits="userSpaceOnUse" x="0" y="0" width="2000" height="1988.5"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="0" y="0" width="2000" height="1988.5" id="b"><path d="M1418.6 1980c31.5 12.3 67.4 11.5 99.2-3.8l411.5-198c43.2-20.8 70.7-64.6 70.7-112.6V322.9c0-48-27.5-91.8-70.7-112.6l-411.5-198c-41.7-20.1-90.5-15.2-127.1 11.5-5.2 3.8-10.2 8-14.9 12.7L588 755.2 244.8 494.7c-31.9-24.2-76.6-22.3-106.3 4.7l-110 100.2c-36.3 33-36.3 90.1-.1 123.2L326 994.2 28.4 1265.7c-36.2 33.1-36.2 90.2.1 123.2l110 100.1c29.7 27 74.3 29 106.3 4.7L588 1233.3l787.8 718.7c12.4 12.5 27.1 21.9 42.8 28zm82-1439.5L902.8 994.2l597.8 453.7V540.5z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff;filter:url(#a)"/></mask><g style="mask:url(#b)"><path d="M1929.3 210.6 1517.4 12.3c-47.7-23-104.6-13.3-142.1 24.1L27.2 1265.7c-36.3 33.1-36.2 90.2.1 123.2L137.4 1489c29.7 27 74.4 29 106.4 4.7L1867.3 262.1c54.5-41.3 132.7-2.5 132.7 65.9v-4.8c0-48-27.5-91.7-70.7-112.6z" style="fill:#0065a9"/><path d="m1929.3 1777.8-411.8 198.3c-47.7 23-104.6 13.3-142.1-24.1L27.2 722.7c-36.3-33.1-36.2-90.2.1-123.2l110.1-100.1c29.7-27 74.4-29 106.4-4.7l1623.6 1231.7c54.5 41.3 132.7 2.5 132.7-65.9v4.8c-.1 48-27.6 91.7-70.8 112.5z" style="fill:#007acc"/><path d="M1517.4 1976.2c-47.7 22.9-104.7 13.2-142.1-24.2 46.1 46.1 124.9 13.4 124.9-51.7V88.2c0-65.2-78.8-97.8-124.9-51.7 37.4-37.4 94.4-47.1 142.1-24.2l411.8 198c43.3 20.8 70.8 64.6 70.8 112.6v1342.7c0 48-27.5 91.8-70.8 112.6l-411.8 198z" style="fill:#1f9cf0"/><g style="opacity:.25"><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="999.392" y1="1990.482" x2="999.392" y2="2.002" gradientTransform="matrix(1 0 0 -1 0 1990.483)"><stop offset="0" style="stop-color:#fff"/><stop offset="1" style="stop-color:#fff;stop-opacity:0"/></linearGradient><path d="M1417.4 1980c31.5 12.3 67.4 11.5 99.2-3.8l411.5-198c43.2-20.8 70.7-64.6 70.7-112.6V322.9c0-48-27.5-91.8-70.7-112.6l-411.5-198c-41.7-20.1-90.5-15.2-127.1 11.5-5.2 3.8-10.2 8-14.9 12.7L586.7 755.2 243.6 494.7c-31.9-24.2-76.6-22.3-106.3 4.7L27.2 599.6c-36.3 33-36.3 90.1-.1 123.2l297.6 271.5-297.5 271.4c-36.2 33.1-36.2 90.2.1 123.2l110 100.1c29.7 27 74.3 29 106.3 4.7l343.1-260.5 787.8 718.7c12.5 12.6 27.1 22 42.9 28.1zm82-1439.5L901.6 994.2l597.8 453.7V540.5z" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#c)"/></g></g></svg>
\ No newline at end of file
diff --git a/src/components/Backers.tsx b/src/components/Backers.tsx
index f4e15de..2e39535 100644
--- a/src/components/Backers.tsx
+++ b/src/components/Backers.tsx
@@ -1,5 +1,9 @@
+import Image from "next/image";
 import { FC } from "react";
 
+import agoLogo from "../../public/agoranov.png";
+import efLogo from "../../public/ef.png";
+import ycLogo from "../../public/yc.svg";
 import styles from "../styles/Backers.module.css";
 
 const Backers: FC = () => {
@@ -8,14 +12,18 @@ const Backers: FC = () => {
       <p className={styles.subtitle}>Backed by</p>
       <div className={styles.logoGrid}>
         <a href="https://www.joinef.com/" className={styles.logoCard}>
-          <img src="/ef.png" alt="Entrepreneur First" className={styles.logo} />
+          <Image
+            src={efLogo}
+            alt="Entrepreneur First"
+            className={styles.logo}
+          />
         </a>
         <a href="https://www.ycombinator.com/" className={styles.logoCard}>
-          <img src="/yc.svg" alt="Y Combinator" className={styles.logo} />
+          <Image src={ycLogo} alt="Y Combinator" className={styles.logo} />
         </a>
 
         <a href="https://www.agoranov.com/" className={styles.logoCard}>
-          <img src="/agoranov.png" alt="Agoranov" className={styles.logo} />
+          <Image src={agoLogo} alt="Agoranov" className={styles.logo} />
         </a>
       </div>
     </section>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 6712c49..a24014f 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -5,8 +5,8 @@ import styles from "../styles/Footer.module.css";
 
 const Footer: FC = () => {
   return (
-    <footer>
-      <p>Copyright 2023 Quack AI</p>
+    <footer className={styles.footerContainer}>
+      <p>© 2023 Quack Labs, Inc.</p>
       <div className={styles.socialLinks}>
         <a
           href="https://discord.gg/E9rY3bVCWd"
@@ -30,34 +30,6 @@ const Footer: FC = () => {
           <FaTwitter className={styles.socialIcon} color="#1D9BF0" />
         </a>
       </div>
-      <style jsx>{`
-        footer {
-          width: 100%;
-          height: auto;
-          border-top: 1px solid #eaeaea;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 1rem; /* Adds some padding around the elements */
-        }
-        footer img {
-          margin-left: 0.5rem;
-        }
-        footer a {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          text-decoration: none;
-          color: inherit;
-        }
-        footer p {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          text-decoration: none;
-          color: inherit;
-        }
-      `}</style>
     </footer>
   );
 };
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 2d46f41..72e389a 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import { FC } from "react";
 import { FaDiscord } from "react-icons/fa";
+import { TbBrandVscode } from "react-icons/tb";
 import Typewriter from "typewriter-effect";
 
 import waveTop from "../../public/wave-top.svg";
@@ -45,15 +46,17 @@ const Hero: FC = () => {
           className={styles.card}
         >
           <h3 className={styles.cardTitle}>
-            <img src="/vscode.svg" alt="VSCode Icon" className={styles.icon} />{" "}
-            VSCode extension &rarr;
+            <TbBrandVscode className={styles.icon} color="#0066b8" /> VSCode
+            extension
+            <span className={styles.arrow}>&rarr;</span>
           </h3>
           <p>Let&apos;s get you started for your next contributions!</p>
         </a>
 
         <a href="https://discord.gg/E9rY3bVCWd" className={styles.card}>
           <h3 className={styles.cardTitle}>
-            <FaDiscord className={styles.icon} color="#5865F2" /> Discord &rarr;
+            <FaDiscord className={styles.icon} color="#5865F2" /> Discord
+            <span className={styles.arrow}>&rarr;</span>
           </h3>
           <p>Join other developers from the Quack community.</p>
         </a>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 102864d..38ae415 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,4 +1,6 @@
+import Image from "next/image";
 import { FC, useEffect, useState } from "react";
+import { FaGithub } from "react-icons/fa";
 
 import styles from "../styles/Navbar.module.css";
 
@@ -12,18 +14,23 @@ const Navbar: FC = () => {
   return (
     <nav className={styles.navbar}>
       <div className={styles.logoSection}>
-        <img src="/quack.png" alt="Quack AI" className={styles.logo} />
+        <Image
+          src="/quack.png"
+          alt="Quack AI"
+          width={64}
+          height={64}
+          className={styles.logo}
+        />
         <span className={styles.companyName}>Quack AI</span>
       </div>
       <div className={styles.ctaButton}>
         {isClient && (
           <a
-            className="github-button"
+            className={styles.githubButton}
             href="https://github.com/quack-ai/companion"
-            data-size="large"
-            data-show-count="false"
             aria-label="Star quack-ai/companion on GitHub"
           >
+            <FaGithub className={styles.githubLogo} />
             Star us on GitHub
           </a>
         )}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 49bbcae..93e81ec 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { Analytics } from "@vercel/analytics/react";
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import "../styles/globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 29a4f46..675cfa9 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -36,6 +36,10 @@ export default function Document() {
         <meta name="twitter:title" content={metaTitle} />
         <meta name="twitter:description" content={metaDescription} />
         <meta name="twitter:image" content={metaBanner} />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Onest:wght@400&family=Poppins:wght@300;400&display=swap"
+          rel="stylesheet"
+        ></link>
       </Head>
       <body>
         <Main />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ab92a34..a1219b0 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -28,28 +28,6 @@ const Home: FC = () => {
         <Backers />
       </main>
       <Footer />
-      <style jsx global>{`
-        html,
-        body {
-          padding: 0;
-          margin: 0;
-          font-family:
-            -apple-system,
-            BlinkMacSystemFont,
-            Segoe UI,
-            Roboto,
-            Oxygen,
-            Ubuntu,
-            Cantarell,
-            Fira Sans,
-            Droid Sans,
-            Helvetica Neue,
-            sans-serif;
-        }
-        * {
-          box-sizing: border-box;
-        }
-      `}</style>
     </div>
   );
 };
diff --git a/src/styles/Backers.module.css b/src/styles/Backers.module.css
index f016907..76b0d01 100644
--- a/src/styles/Backers.module.css
+++ b/src/styles/Backers.module.css
@@ -10,8 +10,8 @@
   display: flex;
   justify-content: center;
   flex-wrap: nowrap; /* Prevents the logos from wrapping into multiple lines */
-  max-width: 100%; /* Ensures that the grid takes the full width */
-  margin: 0 auto; /* Centers the grid */
+  max-width: 100%;
+  margin: 0 auto;
   margin-top: 10px;
 }
 
@@ -36,8 +36,8 @@
 .logo {
   height: 64px;
   width: auto;
-  filter: grayscale(100%); /* Makes the image grayscale */
-  transition: filter 0.3s ease; /* Smooth transition for the filter */
+  filter: grayscale(100%);
+  transition: filter 0.3s ease;
 }
 
 .subtitle {
diff --git a/src/styles/Footer.module.css b/src/styles/Footer.module.css
index c705eb2..8dcb5e7 100644
--- a/src/styles/Footer.module.css
+++ b/src/styles/Footer.module.css
@@ -1,3 +1,31 @@
+.footerContainer {
+  width: 100%;
+  height: auto;
+  border-top: 1px solid #eaeaea;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 5%;
+  background-color: rgba(255, 255, 255, 0.7);
+}
+.footerContainer img {
+  margin-left: 0.5rem;
+}
+.footerContainer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+.footerContainer p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+
 .socialLinks {
   display: flex;
   align-items: center;
@@ -10,9 +38,9 @@
   width: 32px;
   margin: 0 24px; /* Horizontal margin between icons */
   cursor: pointer; /* Makes the icon appear clickable */
-  transition: opacity 0.3s ease; /* Smooth transition for hover effect */
+  transition: opacity 0.3s ease;
 }
 
 .socialIcon:hover {
-  opacity: 0.7; /* Fades the icon slightly when hovered */
+  opacity: 0.7;
 }
diff --git a/src/styles/Hero.module.css b/src/styles/Hero.module.css
index d22b789..bf4a3a3 100644
--- a/src/styles/Hero.module.css
+++ b/src/styles/Hero.module.css
@@ -5,19 +5,11 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  min-height: 90vh; /* New Property */
+  min-height: 91vh;
   position: relative;
-  /* background-image: url('/background2.jpg'); */
-  background-image: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0.5),
-      rgba(255, 255, 255, 0.5)
-    ),
-    url("/background.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  background-color: white; /* Or any other color */
 }
 
 .cardTitle {
@@ -46,7 +38,7 @@
   transition:
     color 0.15s ease,
     border-color 0.15s ease;
-  background: rgba(255, 255, 255, 0.3); /* Semi-transparent white background */
+  background: rgba(255, 255, 255, 0.3);
 }
 
 .card:hover,
@@ -54,6 +46,7 @@
 .card:active {
   color: #9038ff;
   border-color: #9038ff;
+  background: rgba(255, 255, 255, 0.7);
 }
 
 .card h3 {
@@ -75,14 +68,14 @@
 }
 
 .icon {
-  margin-right: 10px; /* Space between the icon and the text */
-  height: 24px; /* Or any other size */
-  width: 24px; /* Or any other size */
-  filter: grayscale(100%) brightness(0); /* Make the icon black */
+  margin-right: 10px;
+  height: 24px;
+  width: 24px;
+  filter: grayscale(100%) brightness(0);
 }
 
 .card:hover .icon {
-  filter: grayscale(0%) brightness(1); /* Remove the grayscale filter */
+  filter: grayscale(0%) brightness(1);
 }
 
 .wave-top {
@@ -130,3 +123,13 @@
   line-height: 1.5;
   font-size: 1.5rem;
 }
+
+.arrow {
+  display: inline-block;
+  transition: transform 0.3s ease;
+  padding-left: 5px;
+}
+
+.card:hover .arrow {
+  transform: translateX(5px);
+}
diff --git a/src/styles/Navbar.module.css b/src/styles/Navbar.module.css
index 7429d03..0190c76 100644
--- a/src/styles/Navbar.module.css
+++ b/src/styles/Navbar.module.css
@@ -2,12 +2,19 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem 20px; /* Remove horizontal padding */
-  margin: 0; /* Add this to reset margin */
-  background-color: #ffffff;
-  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
-  width: 100%; /* Add this to ensure it takes the full width */
+  padding: 1rem 5%;
+  margin: 0;
+  width: 100%;
   max-height: 10vh;
+
+  /* Glassmorphism styling */
+  background-color: rgba(200, 200, 200, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+
+  /* Shadows and border */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  /* border-radius: 12px; */
 }
 
 .logoSection {
@@ -24,7 +31,8 @@
   font-size: 2.5rem;
   font-weight: bold;
   color: #9038ff;
-  font-family: "Helvetica", "Arial", sans-serif; /* Updated the font family */
+  font-family: "Poppins", "Segoe UI", "ui-sans-serif", "Helvetica", "Arial",
+    sans-serif;
 }
 
 .ctaButton {
@@ -45,3 +53,29 @@
     padding: 5px 8px;
   }
 }
+
+.githubButton {
+  background-color: #333333;
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 20px;
+  text-decoration: none;
+  font-size: 16px;
+  transition: background-color 0.3s;
+  box-shadow: 1px 5px 6px rgba(0, 0, 0, 0.2);
+}
+
+.githubButton:hover {
+  background-color: #555555; /* Slightly lighter grey on hover */
+}
+
+.githubLogo {
+  margin-right: 12px; /* Adjust this value based on your preference */
+  width: 24px;
+  height: 24px;
+  /* You can adjust the font-size to change the size of the icon, if needed */
+  font-size: 24px;
+}
diff --git a/src/styles/Workflow.module.css b/src/styles/Workflow.module.css
index a553fb8..804bf9a 100644
--- a/src/styles/Workflow.module.css
+++ b/src/styles/Workflow.module.css
@@ -5,8 +5,8 @@
   justify-content: center;
   align-items: center;
   width: 100%;
-  background: #9038ff; /* Background color of section */
-  padding: 20px; /* Padding to give space around blocks */
+  background: #9038ff;
+  padding: 20px;
   position: relative;
 }
 
@@ -24,23 +24,25 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 30%; /* Width of each block, change according to your needs */
-  padding: 20px; /* Padding inside each block */
+  justify-content: center;
+  width: 30%;
+  padding: 20px;
 }
 
 .workflowStep .stepTitle,
 .stepDescription {
-  color: white; /* Text color */
-  margin: 5px 0; /* Margin to separate title and description */
+  color: white;
+  margin: 5px 0;
 }
 
 .workflowStep .stepTitle {
-  font-size: 28px; /* Font size of the title */
-  font-weight: bold; /* Font weight of the title */
+  font-size: 28px;
+  font-weight: bold;
+  align-items: center;
 }
 
 .workflowStep .stepDescription {
-  font-size: 18px; /* Font size of the description */
+  font-size: 18px;
 }
 
 @media (max-width: 768px) {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index fbf4c07..a367a63 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,6 +3,7 @@ body {
   padding: 0;
   margin: 0;
   font-family:
+    Poppins,
     Inter,
     -apple-system,
     BlinkMacSystemFont,
@@ -15,6 +16,14 @@ body {
     Droid Sans,
     Helvetica Neue,
     sans-serif;
+  background-image: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.5),
+      rgba(255, 255, 255, 0.5)
+    ),
+    url("/background.jpg");
+  background-size: cover;
+  background-position: center center;
 }
 
 a {