diff --git a/legal-ai/src/App.js b/legal-ai/src/App.js
index 4ecf8af..f3d44b3 100644
--- a/legal-ai/src/App.js
+++ b/legal-ai/src/App.js
@@ -26,10 +26,10 @@ function App() {
   return (
     <div className="relative bg-primary overflow-y-auto w-full">
       <SpaceBackground />
-      <ChatbotButton setActiveSection={setActiveSection} />
+      <ChatbotButton setActiveSection={setActiveSection} activeSection={activeSection}/>
       <div className=' pt-6 min-h-screen w-full'>
         <Header setActiveSection={setActiveSection} language={language} setLanguage={setLanguage} />
-        <div className="pt-[100px] w-full">
+        <div className="pt-[100px] w-full flex flex-row justify-center">
           {activeSection === "home" && <Home setActiveSection={setActiveSection} language={language} />}
           {activeSection === "about" && <About language={language} />}
           {activeSection === "chatbot" && <Chatbot userInfo={userInfo} />}
@@ -38,9 +38,10 @@ function App() {
           {activeSection === "Template" && <Template />}
           {activeSection === "experience" && <ExperienceComponent language={language} />}
         </div>
+        <Footer />
         
       </div>
-      <Footer />
+      
     </div>
   );
 }
diff --git a/legal-ai/src/components/ChatbotButton.js b/legal-ai/src/components/ChatbotButton.js
index 89a4358..f8600e3 100644
--- a/legal-ai/src/components/ChatbotButton.js
+++ b/legal-ai/src/components/ChatbotButton.js
@@ -1,15 +1,12 @@
 "use client";
-import { useState, useRef, useEffect } from "react";
-
+import { useState, useEffect } from "react";
 
 import icon1 from "./icons/1.png";
 import icon2 from "./icons/2.png";
 // import icon3 from "./icons/3.png";
 // import icon4 from "./icons/4.png";
 
-
-const ChatbotButton = ({setActiveSection}) => {
-
+const ChatbotButton = ({ setActiveSection, activeSection }) => {
     const [iconSrc, setIconSrc] = useState(icon1);
     const images = [icon1, icon2];
 
@@ -23,26 +20,28 @@ const ChatbotButton = ({setActiveSection}) => {
         }, 500);
 
         return () => clearInterval(interval); // Cleanup interval on component unmount
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    // Conditionally render the component
+    if (activeSection === "chatbot") {
+        return null; // Don't render anything if activeSection is "chatbot"
+    }
 
     return (
         <div className="fixed z-20 bottom-4 right-4">
-                <div>
-                    <img
-                        src={iconSrc}
-                        alt="icon"
-                        width={64}
-                        height={64}
-                        quality={100}
-                        className="w-auto h-auto cursor-pointer float-right"
-                        onClick={() => setActiveSection("questions")}
-                    />
-                </div>
-            
+            <div>
+                <img
+                    src={iconSrc}
+                    alt="icon"
+                    width={64}
+                    height={64}
+                    quality={100}
+                    className="w-auto h-auto cursor-pointer float-right"
+                    onClick={() => setActiveSection("questions")}
+                />
+            </div>
         </div>
     );
 };
 
-export default ChatbotButton;
\ No newline at end of file
+export default ChatbotButton;
diff --git a/legal-ai/src/components/Header.js b/legal-ai/src/components/Header.js
index b473b69..f99f3ec 100644
--- a/legal-ai/src/components/Header.js
+++ b/legal-ai/src/components/Header.js
@@ -38,7 +38,7 @@ const Header = ({ setActiveSection, language, setLanguage }) => {
           {translations[language].legalAI}
         </h1>
       </div>
-      <nav className="md:flex hidden space-x-6 mx-auto">
+      <nav className="middle lg:flex hidden absolute left-1/2 transform -translate-x-1/2 space-x-6">
         <button
           className="text-purple-300 hover:opacity-80 duration-300 "
           onClick={() => setActiveSection("home")}
diff --git a/legal-ai/src/components/Home.js b/legal-ai/src/components/Home.js
index 529d486..c444ceb 100644
--- a/legal-ai/src/components/Home.js
+++ b/legal-ai/src/components/Home.js
@@ -27,7 +27,7 @@ const Home = ({ setActiveSection, language }) => {
   // }, [text]);
 
   return (
-    <section className="min-h-screen bg-primary text-textPrimary flex flex-col justify-center items-center text-center space-y-8">
+    <section className="min-h-screen bg-primary text-textPrimary flex flex-col justify-center items-center text-center space-y-8 w-full">
 
       <div className='flex flex-col lg:flex-row h-auto lg:min-h-screen w-full lg:justify-center lg:items-start'>
         <motion.div
@@ -137,9 +137,9 @@ const Home = ({ setActiveSection, language }) => {
       </motion.div>
 
       <About language={language} />
-      <Uses/>
+      <Uses language={language} />
       <div  className='bg-white w-full text-center text-lg-start text-muted'>
-        <section className='d-flex justify-content-center justify-content-lg-between p-4 border-bottom'>
+        {/* <section className='d-flex justify-content-center justify-content-lg-between p-4 border-bottom'>
           <div className='mb-2 d-none d-lg-block'>
             <span>Get connected with us on social networks:</span>
           </div>
@@ -148,9 +148,9 @@ const Home = ({ setActiveSection, language }) => {
             <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/2048px-Instagram_logo_2016.svg.png" alt="Instagram" className="w-6 h-6 hover:opacity-75" />
           </a>
             
-        </section>
+        </section> */}
 
-        <section className=' bg-white w-full'>
+        <section className=' bg-white w-full mt-16'>
           <div className='bg-white w-full text-center text-md-start mt-5'>
             <div className='flex flex-row mt-3'>
               <div className=' flex flex-col mx-auto mb-4'>
@@ -211,7 +211,7 @@ const Home = ({ setActiveSection, language }) => {
               </div> */}
 
               <div className='flex flex-col mx-auto mb-md-0 mb-4'>
-                <h6 className='text-uppercase fw-bold mb-4'>Contact</h6>
+                <h6 className='text-uppercase font-bold mb-2'>Contact</h6>
                 <p>
                   {/* <MDBIcon icon="home" className="me-2" /> */}
                   800 W Campbell Rd, Richardson, TX
@@ -224,6 +224,9 @@ const Home = ({ setActiveSection, language }) => {
                   {/* <MDBIcon icon="print" className="me-3" />  */}
                   + 1 469 947 4379
                 </p>
+                <a className='text-center me-4 flex items-center justify-center w-full  ' href="https://www.instagram.com/legal.ai_" target="_blank" rel="noopener noreferrer">
+                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/2048px-Instagram_logo_2016.svg.png" alt="Instagram" className="w-6 h-6 hover:opacity-75" />
+                </a>
               </div>
             </div>
           </div>
diff --git a/legal-ai/src/components/Questions.js b/legal-ai/src/components/Questions.js
index 054cffe..ebc84ce 100644
--- a/legal-ai/src/components/Questions.js
+++ b/legal-ai/src/components/Questions.js
@@ -149,6 +149,11 @@ const Questions = ({ isOpen, onClose, handleSubmit }) => {
                                         onClick={() => setBackground('married_with_issues')}>
                                         Married with Issues
                                     </button>
+                                    <button
+                                        className={`py-3 px-6 rounded-lg text-md ${background === 'married_with_issues' ? 'bg-purple-300' : 'bg-gray-200'} hover:bg-purple-400 transition-all`}
+                                        onClick={() => setBackground('immigrant')}>
+                                        Immigrant
+                                    </button>
                                     <button
                                         className={`py-3 px-6 rounded-lg text-md ${background === 'employed_with_issues' ? 'bg-purple-300' : 'bg-gray-200'} hover:bg-purple-400 transition-all`}
                                         onClick={() => setBackground('employed_with_issues')}>
@@ -157,7 +162,7 @@ const Questions = ({ isOpen, onClose, handleSubmit }) => {
                                     <button
                                         className={`py-3 px-6 rounded-lg text-md ${background === 'seeking_advice' ? 'bg-purple-300' : 'bg-gray-200'} hover:bg-purple-400 transition-all`}
                                         onClick={() => setBackground('seeking_advice')}>
-                                        Seeking Legal Advice
+                                        Seeking legal advice for business
                                     </button>
                                     <button
                                         className={`py-3 px-6 rounded-lg text-md ${background === 'others' ? 'bg-purple-300' : 'bg-gray-200'} hover:bg-purple-400 transition-all`}
diff --git a/legal-ai/src/components/Uses.js b/legal-ai/src/components/Uses.js
index b12f1c0..78924d2 100644
--- a/legal-ai/src/components/Uses.js
+++ b/legal-ai/src/components/Uses.js
@@ -1,43 +1,61 @@
 import React, { useState, useEffect, useRef } from "react";
 import { motion, useAnimation } from "framer-motion";
 import './index.css';
-const sections = {
-    "Students": (
-        <div>
-            <h2 className="text-white text-3xl font-bold mb-4">LegalAI for students</h2>
-            <p className="text-purple-300 ">
-                Description of how it will be useful
-            </p>
-        </div>
-    ),
-    "Workers": (
-        <div>
-            <h2 className="text-white text-3xl font-bold mb-4">LegalAI for workers</h2>
-            <p className="text-purple-300 ">
-                Description of how it will be useful
-            </p>
-        </div>
-    ),
-    "Couples": (
-        <div>
-            <h2 className="text-white text-3xl font-bold mb-4">LegalAI for couples</h2>
-            <p className="text-purple-300 ">
-                Description of how it will be useful
-            </p>
-        </div>
-    ),
-    "Businesses": (
-        <div>
-            <h2 className="text-white text-3xl font-bold mb-4">LegalAI for businesses</h2>
-            <p className="text-purple-300 ">
-                Description of how it will be useful
-            </p>
-        </div>
-    ),
-};
+import translations from '../translations'; // Import translations
 
-const App = () => {
-    const [activeSection, setActiveSection] = useState("Students");
+
+const App = ({language}) => {
+    const sections = {
+        "Individuals": (
+            <div className="">
+                <h2 className="text-white text-3xl font-bold mb-4">{translations[language].individualsHeader}</h2>
+                <p className="text-purple-300 ">
+                    {translations[language].individuals}
+                </p>
+            </div>
+        ),
+        "Students": (
+            <div>
+                <h2 className="text-white text-3xl font-bold mb-4">LegalAI for students</h2>
+                <p className="text-purple-300 ">
+                    Students often encounter legal questions related to academic integrity, housing rights, and student loans. LegalAI can help students understand their rights in educational settings and provide insights into financial agreements. This ensures they are well-informed, enabling them to focus on their studies while being aware of their legal protections.
+                </p>
+            </div>
+        ),
+        "Workers": (
+            <div>
+                <h2 className="text-white text-3xl font-bold mb-4">LegalAI for workers</h2>
+                <p className="text-purple-300 ">
+                    Workers can benefit significantly from LegalAI when it comes to understanding their employment rights, such as wage disputes, workplace harassment, and benefits. This chatbot can help employees identify their rights and provide information on how to address workplace issues. With LegalAI, workers are empowered to stand up for themselves and seek justice in the workplace.
+                </p>
+            </div>
+        ),
+        "Immigrants": (
+            <div>
+                <h2 className="text-white text-3xl font-bold mb-4">LegalAI for immigrants</h2>
+                <p className="text-purple-300 ">
+                    For those navigating the complexities of immigration law, LegalAI can offer vital information on visas, green cards, and citizenship processes. It helps users understand the requirements and documents needed for their immigration journey, providing peace of mind during what can be a stressful and uncertain time.
+                </p>
+            </div>
+        ),
+        "Couples": (
+            <div>
+                <h2 className="text-white text-3xl font-bold mb-4">LegalAI for couples</h2>
+                <p className="text-purple-300 ">
+                    For couples, understanding legal implications in areas like marriage, divorce, and property rights is essential. LegalAI can provide guidance on prenuptial agreements, custody arrangements, and division of assets. This resource helps couples navigate their legal responsibilities and rights, fostering better communication and planning for their future together.
+                </p>
+            </div>
+        ),
+        "Businesses": (
+            <div>
+                <h2 className="text-white text-3xl font-bold mb-4">LegalAI for businesses</h2>
+                <p className="text-purple-300 ">
+                    For small business owners, LegalAI is an invaluable resource for understanding compliance, contracts, and employment law. It can answer common questions about business formation, licensing, and intellectual property, allowing entrepreneurs to focus on growing their businesses with confidence, knowing they have access to legal support when needed.
+                </p>
+            </div>
+        ),
+    };
+    const [activeSection, setActiveSection] = useState("Individuals");
     const controls = useAnimation();
     const ref = useRef(null);
 
diff --git a/legal-ai/src/components/chatbot.js b/legal-ai/src/components/chatbot.js
index 74459cf..70ab7a1 100644
--- a/legal-ai/src/components/chatbot.js
+++ b/legal-ai/src/components/chatbot.js
@@ -154,9 +154,10 @@ const Chatbot = ({ userInfo }) => {
   };
 
   return (
-    <section className="mb-14 flex justify-center items-center w-screen">
-      <div className="bg-transparent shadow-lg rounded-lg px-8 w-full flex justify-center items-center flex-col">
-        <div className="flex items-center justify-center flex-col">
+    <section className="mb-14 flex justify-center items-center w-[90vw]">
+      <div className="bg-transparent shadow-lg rounded-lg w-full flex justify-center items-center flex-col">
+        <div className="flex w-full items-center justify-center flex-col">
+
           <img src="/logo.png" alt="logo" className="h-8 w-8" />
           <p className="text-white">Mike</p>
           <p className="text-white opacity-70 text-[12px]">By Shower Champions</p>
diff --git a/legal-ai/src/components/index.css b/legal-ai/src/components/index.css
index b4b4d77..e8bc561 100644
--- a/legal-ai/src/components/index.css
+++ b/legal-ai/src/components/index.css
@@ -6,31 +6,6 @@
 @tailwind utilities;
 
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: "Poppins", sans-serif;
-}
-
-.App {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-body {
-        padding: 0;
-        margin: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 100vh;
-        background: #ecf0f3;
-        /* background: #f295c3; */
-    }
 
     .container {
         @apply rounded-lg;
@@ -38,138 +13,4 @@ body {
         /* box-shadow: 13px 13px 20px #e8afcc, -13px -13px 20px #e8afcc; */
 
     }
-    .row button {
-        width: 84px;
-        height: 30px;
-        
-        border: none;
-        outline: none;
-        margin: 5px;
-        border-radius: 4px;
-        transition: .1s;
-        box-shadow: 5px 5px 8px #00000020, -5px -5px 8px #D8B4FE;
-
-        /* box-shadow: 5px 5px 8px #00000020,-5px -5px 8px #e8afcc; */
-    }
-
-    .row button:hover {
-        box-shadow: inset 5px 5px 8px rgba(16, 16, 16, .1),
-            inset -5px -5px 8px #fff;
-        background: #fff;
-    }
-    /* .btn_num button{
-        background:#cbd5e1 ;
-    }
-
-    .btn_num button:hover{
-        background:#262729 ;
-        color: white;
-        box-shadow: none;
-    } */
-    /* Responsive styles for .container */
-    /* @media (min-width: 0px) { 
-        .container {
-            @apply w-[290px] px-1 py-1; 
-        }
-    }
-
-    @media (min-width: 600px) { 
-        .container {
-            @apply w-[400px] px-5 py-4; 
-        }
-    } */
-
-    .content {
-        width: 100%;
-        margin-top: 1.7em;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    
-
-    .display #screen {
-        margin-bottom: .5em;
-        /* width: 100%;
-        height: 70px; */
-        font-size: 35px;
-        outline: none;
-        border: none;
-        text-align: right;
-        padding-right: .5em;
-        background: #ecf0f3;
-        border-radius: 6px;
-        box-shadow: inset 8px 8px 8px #cbced1,
-            inset -8px -8px 8px #ffffff;
-    }
 
-    #eval {
-        background: #33ccff;
-        color: #fff;
-        box-shadow: inset 5px 5px 8px #66d9ff,
-            inset -5px -5px 8px #00ace6;
-    }
-
-    #eval:hover {
-        box-shadow: inset 5px 5px 8px #00ace6,
-            inset -5px -5px 8px #00ace6;
-    }
-
-    #ac {
-        background: #33cc33;
-        color: #fff;
-    }
-
-    #ac:hover {
-        box-shadow: inset 5px 5px 8px #2eb82e,
-            inset -5px -5px 8px #33cc33;
-    }
-
-    #ce {
-        background: #ff3399;    
-        color: #fff;
-    }
-
-    #ce:hover {
-        box-shadow: inset 5px 5px 8px #e60073,
-            inset -5px -5px 8px #ff3399;
-    }
-
-    /* Assuming this is in your main CSS file or Messages.css */
-
-.thinking-animation {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-top: 10px;
-  }
-  
-  .dot {
-    height: 8px;
-    width: 8px;
-    margin: 0 2px;
-    background-color: white;
-    border-radius: 50%;
-    display: inline-block;
-    animation: bounce 1.4s infinite both;
-  }
-  
-  .dot:nth-child(1) {
-    animation-delay: -0.32s;
-  }
-  
-  .dot:nth-child(2) {
-    animation-delay: -0.16s;
-  }
-  
-  @keyframes bounce {
-    0%, 80%, 100% {
-      transform: scale(0);
-    }
-    40% {
-      transform: scale(1);
-    }
-  }
-  
\ No newline at end of file
diff --git a/legal-ai/src/translations.js b/legal-ai/src/translations.js
index a044707..a32dbd9 100644
--- a/legal-ai/src/translations.js
+++ b/legal-ai/src/translations.js
@@ -22,7 +22,11 @@ const translations = {
         detailsHead: "Hackathon Details",
         detailsDescription: "We recently participated in a 48-hour hackathon, developing an AI-powered chatbot designed to provide quick legal advice. This project showcases our commitment to leveraging technology to make legal assistance accessible.",
 
-        team:"Meet the Team",
+        team: "Meet the Team",
+        studentsHeader: "LegalAI for students",
+        individualsHeader: "LegalAI for individuals",
+
+        individuals:"LegalAI can provide instant access to legal information, helping individuals understand their rights and responsibilities. Whether it's a question about family law, tenant rights, or personal injury claims, LegalAI offers reliable guidance to help users navigate their legal situations effectively. This empowers individuals to make informed decisions without the stress of prolonged legal consultations.",
     },
     es: {
         home: "Inicio",
@@ -46,6 +50,10 @@ const translations = {
         detailsHead: "Detalles del hackatón",
         detailsDescription: "Recientemente participamos en un hackathon de 48 horas, desarrollando un chatbot con tecnología de inteligencia artificial diseñado para brindar asesoramiento legal rápido. Este proyecto muestra nuestro compromiso de aprovechar la tecnología para hacer que la asistencia legal sea accesible.",
         team:"Conoce al equipo",
+        studentsHeader:"IA legal para estudiantes",
+
+        individualsHeader: "IA legal para particulares",
+        individuals:"LegalAI puede proporcionar acceso instantáneo a información legal, ayudando a las personas a entender sus derechos y responsabilidades. Ya sea una pregunta sobre derecho familiar, derechos de los inquilinos o reclamos por lesiones personales, LegalAI ofrece orientación confiable para ayudar a los usuarios a navegar sus situaciones legales de manera efectiva. Esto empodera a las personas para que tomen decisiones informadas sin el estrés de consultas legales prolongadas.",
     },
 };