diff --git a/app.py b/app.py
index 78d8b93..727704f 100644
--- a/app.py
+++ b/app.py
@@ -774,12 +774,13 @@ async def chat_title(request: ChatRequest, token_info: dict = Depends(verify_tok
         # Get the chat model from the request and create the corresponding chat instance
         chat_config = model_company_mapping.get("gpt-4o-mini")
 
-        if chat_config['premium']:
-            if not verify_active_subscription(token_info):
-                raise HTTPException(
-                    status_code=status.HTTP_403_FORBIDDEN,
-                    detail="Forbidden",
-                )
+        # check the number of generations left for the user
+        generations_left = get_generations(token_info)
+        if generations_left == 0:
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail="Generations limit exceeded",
+            )
         
         chat = chat_config['model'](
             model_name="gpt-4o-mini",
@@ -817,6 +818,9 @@ async def chat_title(request: ChatRequest, token_info: dict = Depends(verify_tok
         # Handle validation errors specifically for better user feedback
         logging.error("Validation error: %s", ve)
         raise HTTPException(status_code=400, detail="Invalid request data") from ve
+    except HTTPException as he:
+        # Handle HTTP exceptions specifically for better user feedback
+        raise he
     except Exception as e:
         # Log and handle generic exceptions gracefully
         logging.error("Error processing chat request: %s", e)
diff --git a/web/public/index.html b/web/public/index.html
index e1f1a93..a6b91f9 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Chat-with-LLMs is your one-stop destination to try out and compare the latest large language models from leading AI providers."
+      content="Unleash the power of AI conversation with Chat-with-LLMs! Our innovative platform lets you chat with a variety of Large Language Models (LLMs) from leading providers like OpenAI, Anthrophic, and Google. Go beyond a single model - switch seamlessly between them mid-conversation to explore diverse capabilities.  It's like having multiple AI experts at your fingertips, all in one place. Discover the power of choice in AI conversation with Chat-with-LLMs."
     />
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
diff --git a/web/src/App.js b/web/src/App.js
index 81d0ed4..4984cc3 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -4,6 +4,8 @@ import { LoginPage } from "./pages/LoginPage";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { ProtectedPage } from "./pages/ProtectedPage";
 import { DashboardV2 } from "./pages/DashboardV2";
+import TermsAndConditions from "./components/TermsAndConditions";
+import PrivacyPolicy from "./components/PrivacyPolicy";
 
 
 
@@ -48,6 +50,12 @@ function App() {
                 <Dashboard />
               </ProtectedPage>
           } /> */}
+          <Route path="/terms-and-conditions" element={
+            <TermsAndConditions />
+          } />
+          <Route path="/privacy" element={
+            <PrivacyPolicy />
+          } />
           <Route path="/chat" 
           element={
             <ProtectedPage>
diff --git a/web/src/components/AiCard.js b/web/src/components/AiCard.js
index d2e6f65..e394233 100644
--- a/web/src/components/AiCard.js
+++ b/web/src/components/AiCard.js
@@ -1,16 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Card, CardBody, CardFooter } from "@nextui-org/react";
-import { AiOutlineCopy, AiOutlineCheck } from 'react-icons/ai'; // Import AiOutlineReload for the retry icon
+import { AiOutlineCopy, AiOutlineCheck } from 'react-icons/ai';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { useTheme } from '../components/ThemeContext';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 export const AiCard = ({ message, retryComponent }) => {
   const [copied, setCopied] = useState(false);
   const [codeToCopy, setCodeToCopy] = useState('');
-  const { theme } = useTheme();
 
   const handleCopy = async () => {
     try {
@@ -32,77 +30,77 @@ export const AiCard = ({ message, retryComponent }) => {
     }
   };
 
+  const renderedMarkdown = useMemo(() => (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      children={message}
+      components={{
+        code({ children, className, node, ...rest }) {
+          const match = /language-(\w+)/.exec(className || '');
+          const code = String(children).replace(/\n$/, '');
+          return match ? (
+            <div className="relative">
+              <SyntaxHighlighter
+                {...rest}
+                PreTag="div"
+                children={code}
+                language={match[1]}
+                style={okaidia}
+              />
+              <button
+                className={`absolute top-2 right-2 flex items-center gap-2 p-2 rounded transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800`}
+                onClick={() => handleCodeCopy(code)}
+              >
+                {codeToCopy === code ? (
+                  <>
+                    <AiOutlineCheck className="text-green-600" />
+                    <span className="text-green-600">Copied</span>
+                  </>
+                ) : (
+                  <>
+                    <AiOutlineCopy />
+                    <span>Copy Code</span>
+                  </>
+                )}
+              </button>
+            </div>
+          ) : (
+            <code {...rest} className={className}>
+              {children}
+            </code>
+          );
+        },
+      }}
+    />
+  ), [message, codeToCopy]); // Memoize based on the message and codeToCopy
+
+  const renderedCopyButton = useMemo(() => (
+    <button
+      className={`flex items-center gap-2 dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800 p-2 rounded transition duration-300 ease-in-out`}
+      onClick={handleCopy}
+    >
+      {copied ? (
+        <>
+          <AiOutlineCheck className="text-green-600" />
+          <span className="text-green-600">Copied</span>
+        </>
+      ) : (
+        <>
+          <AiOutlineCopy />
+          <span>Copy</span>
+        </>
+      )}
+    </button>
+  ), [copied]); // Memoize the copy button based on the copied state
+
   return (
     <Card className={`max-w-max dark:bg-gray-700 dark:text-gray-200 bg-white text-gray-800`}>
       <CardBody>
-        <ReactMarkdown
-          remarkPlugins={[remarkGfm]}
-          children={message}
-          components={{
-            code({ children, className, node, ...rest }) {
-              const match = /language-(\w+)/.exec(className || '');
-              const code = String(children).replace(/\n$/, '');
-              return match ? (
-                <div className="relative">
-                  <SyntaxHighlighter
-                    {...rest}
-                    PreTag="div"
-                    children={code}
-                    language={match[1]}
-                    style={okaidia}
-                  />
-                  <button
-                    className={`absolute top-2 right-2 flex items-center gap-2 p-2 rounded transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800}`} 
-                    onClick={() => handleCodeCopy(code)}
-                  >
-                    {codeToCopy === code ? (
-                      <>
-                        <AiOutlineCheck className="text-green-600" />
-                        <span className="text-green-600">Copied</span>
-                      </>
-                    ) : (
-                      <>
-                        <AiOutlineCopy />
-                        <span>Copy Code</span>
-                      </>
-                    )}
-                  </button>
-                </div>
-              ) : (
-                <code {...rest} className={className}>
-                  {children}
-                </code>
-              );
-            },
-          }}
-        />
+        {renderedMarkdown}
       </CardBody>
       <CardFooter className="flex justify-end items-center p-2">
-        {/* {showRetry && (
-          <button
-            className="flex items-center gap-2 text-gray-600 hover:text-gray-800 p-2 rounded transition duration-300 ease-in-out"
-            onClick={handleRetry}
-          >
-            <AiOutlineReload />
-          </button>
-        )} */}
         {retryComponent}
-        <button
-          className={`flex items-center gap-2 dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800 p-2 rounded transition duration-300 ease-in-out`}
-          onClick={handleCopy}
-        >
-          {copied ? (
-            <>
-              <AiOutlineCheck className="text-green-600" />
-              <span className="text-green-600">Copied</span>
-            </>
-          ) : (
-            <>
-              <AiOutlineCopy />
-              <span>Copy</span>
-            </>
-          )}
-        </button>
+        {renderedCopyButton}
       </CardFooter>
     </Card>
   );
diff --git a/web/src/components/Footer.js b/web/src/components/Footer.js
index e1291a3..6a0acee 100644
--- a/web/src/components/Footer.js
+++ b/web/src/components/Footer.js
@@ -9,10 +9,7 @@ export const Footer = () => {
         © 2024 chat-with-llms. All rights reserved. This is an open-source project.
       </p>
       <nav className="sm:ml-auto flex gap-4 sm:gap-6">
-        <Link className="text-xs hover:underline underline-offset-4" href="#">
-          Terms of Service
-        </Link>
-        <Link className="text-xs hover:underline underline-offset-4" href="#">
+        <Link className="text-xs hover:underline underline-offset-4" to="/privacy">
           Privacy
         </Link>
         <a
diff --git a/web/src/components/LandingPageDescription.js b/web/src/components/LandingPageDescription.js
index 180ac7f..ca85777 100644
--- a/web/src/components/LandingPageDescription.js
+++ b/web/src/components/LandingPageDescription.js
@@ -1,18 +1,32 @@
 import React from 'react';
 import { Button } from '@nextui-org/react';
+import { useGoogleLogin } from '@react-oauth/google';
+import { useGoogleAuth } from '../utils/useGoogleAuth';
+import { verifyGoogleAuth } from '../utils/verifyGoogleAuth';
+import { useNavigate } from 'react-router-dom';
+
+
+export const LandingPageDescription = React.forwardRef((props, ref) => {
+  const navigate = useNavigate();
+  const { handleGoogleSuccess, handleGoogleFailure } = useGoogleAuth();
+  let model = "gpt-4o-mini";
+
+  const login =
+     useGoogleLogin({
+      onSuccess: (response) => handleGoogleSuccess(response, model),
+      onFailure: (error) => handleGoogleFailure(error),
+    });
 
-export const LandingPageDescription = () => {
   return (
     <React.Fragment>
-      <div className="w-full pb-12 md:pb-24 lg:pb-32 border-b border-gray-200 my-8 md:col-span-2"></div>
+      <div ref={ref} className="w-full pb-12 md:pb-24 lg:pb-32 border-b border-gray-200 my-8 md:col-span-2"></div>
       <div className="flex flex-col items-center justify-center space-y-4 text-center px-4 sm:px-0">
         <div className="inline-block rounded-lg text-md bg-gray-100 px-3 py-1 text-sm dark:bg-gray-800">
           Try Different LLMs
         </div>
         <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Explore the Latest Language Models</h2>
         <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
-          Chat-with-LLMs allows you to try out and compare the most popular large language models, including
-          GPT, Gemini, Perplexity, Mistral, and Anthropic, all in one place.
+        Unleash the power of AI conversation with Chat-with-LLMs! Our innovative platform lets you chat with a variety of Large Language Models (LLMs) from leading providers like OpenAI, Anthrophic, and Google. Go beyond a single model - switch seamlessly between them mid-conversation to explore diverse capabilities.  It's like having multiple AI experts at your fingertips, all in one place. Discover the power of choice in AI conversation with Chat-with-LLMs.
         </p>
       </div>
       <div className="mx-auto justify-center grid items-start gap-8 sm:max-w-4xl sm:grid-cols-2 md:gap-12 lg:max-w-5xl lg:grid-cols-3 mt-16 px-4 sm:px-0">
@@ -21,30 +35,62 @@ export const LandingPageDescription = () => {
           <p className="text-sm text-gray-500 dark:text-gray-400">
             The original large language model, developed by OpenAI.
           </p>
-          <Button className="justify-start" variant="link">
+          <Button className="justify-start" variant="link" onClick={async () => {
+            const isVerified = await verifyGoogleAuth();
+            if (isVerified) navigate('/chat', { state: { userModel: "gpt-4o" } });
+
+            else {
+              model = "gpt-4o";
+              login();
+            }
+          }}>
             Try GPT
           </Button>
         </div>
         <div className="grid gap-1">
           <h3 className="text-lg font-bold">Gemini</h3>
-          <p className="text-sm text-gray-500 dark:text-gray-400">A powerful language model from Anthropic.</p>
-          <Button className="justify-start" variant="link">
+          <p className="text-sm text-gray-500 dark:text-gray-400">A powerful language model from Google.</p>
+          <Button className="justify-start" variant="link" onClick={async () => {
+            const isVerified = await verifyGoogleAuth();
+            if (isVerified) navigate('/chat', { state: { userModel: "gemini-1.5-flash-latest" } });
+
+            else {
+              model = "gemini-1.5-flash-latest";
+              login();
+            }
+          }}>
             Try Gemini
           </Button>
         </div>
         <div className="grid gap-1">
           <h3 className="text-lg font-bold">Perplexity</h3>
-          <p className="text-sm text-gray-500 dark:text-gray-400">A versatile language model from Anthropic.</p>
-          <Button className="justify-start" variant="link">
+          <p className="text-sm text-gray-500 dark:text-gray-400">A versatile language model from Perplexity.</p>
+          <Button className="justify-start" variant="link" onClick={async () => {
+            const isVerified = await verifyGoogleAuth();
+            if (isVerified) navigate('/chat', { state: { userModel: "sonar-medium-online" } });
+
+            else {
+              model = "sonar-medium-online";
+              login();
+            }
+          }}>
             Try Perplexity
           </Button>
         </div>
         <div className="grid gap-1">
           <h3 className="text-lg font-bold">Mistral</h3>
           <p className="text-sm text-gray-500 dark:text-gray-400">
-            A cutting-edge language model from Anthropic.
+            A cutting-edge language model from Mistral.
           </p>
-          <Button className="justify-start" variant="link">
+          <Button className="justify-start" variant="link" onClick={async () => {
+            const isVerified = await verifyGoogleAuth();
+            if (isVerified) navigate('/chat', { state: { userModel: "mistral-large-2402" } });
+
+            else {
+              model = "mistral-large-2402";
+              login();
+            }
+          }}>
             Try Mistral
           </Button>
         </div>
@@ -53,7 +99,15 @@ export const LandingPageDescription = () => {
           <p className="text-sm text-gray-500 dark:text-gray-400">
             Explore Anthropic's suite of language models.
           </p>
-          <Button className="justify-start" variant="link">
+          <Button className="justify-start" variant="link" onClick={async () => {
+            const isVerified = await verifyGoogleAuth();
+            if (isVerified) navigate('/chat', { state: { userModel: "claude-3-5-sonnet-20240620" } });
+
+            else {
+              model = "claude-3-5-sonnet-20240620";
+              login();
+            }
+          }}>
             Try Anthropic
           </Button>
         </div>
@@ -62,11 +116,19 @@ export const LandingPageDescription = () => {
           <p className="text-sm text-gray-500 dark:text-gray-400">
             Check back often for updates on new language models.
           </p>
-          <Button className="justify-start" variant="link">
+          <Button className="justify-start" variant="link" onClick={async () => {
+            const isVerified = await verifyGoogleAuth();
+            if (isVerified) navigate('/chat', { state: { userModel: "meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo" } });
+
+            else {
+              model = "meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo";
+              login();
+            }
+          }}>
             Explore More
           </Button>
         </div>
       </div>
     </React.Fragment>
   )
-}
+});
diff --git a/web/src/components/LandingPageIntro.js b/web/src/components/LandingPageIntro.js
index 0856fea..9f645b2 100644
--- a/web/src/components/LandingPageIntro.js
+++ b/web/src/components/LandingPageIntro.js
@@ -1,35 +1,58 @@
-import React from 'react'
+import React from 'react';
 import { Button } from '@nextui-org/react';
-import { Link } from 'react-router-dom';
 import aiMind from '../images/ai-mind.svg'; 
+import { useGoogleLogin } from '@react-oauth/google';
+import { useGoogleAuth } from '../utils/useGoogleAuth';
+import { verifyGoogleAuth } from '../utils/verifyGoogleAuth';
+import { useNavigate } from 'react-router-dom';
+
+export const LandingPageIntro = ({ descriptionRef }) => {
+  const navigate = useNavigate();
+  const { handleGoogleSuccess, handleGoogleFailure } = useGoogleAuth();
+
+  const login = useGoogleLogin({
+    onSuccess: handleGoogleSuccess,
+    onFailure: handleGoogleFailure,
+  });
+
+  const handleLearnMoreClick = () => {
+    if (descriptionRef.current) {
+      descriptionRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
 
-export const LandingPageIntro = () => {
   return (
     <div className="grid max-w-[1300px] mx-auto gap-4 px-4 sm:px-6 md:px-10 md:gap-16 md:grid-cols-2 pt-32">
-          <div className='justify-center'>
-            <h1 className='lg:leading-tighter text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl xl:text-[3.4rem] 2xl:text-[3.75rem] dark:text-teal-400'>Explore the Power of Large Language Models</h1>
-            <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-300 mt-4">
-                  Chat-with-LLMs is your one-stop destination to try out and compare the latest large language models
-                  from leading AI providers.
-                </p>
-                <div className="space-x-4 mt-8">
-                  <Button
-                    className="inline-flex h-9 items-center justify-center rounded-md px-4 py-2 text-sm font-medium shadow transition-colors dark:bg-violet-600 dark:text-gray-100 dark:hover:bg-violet-700"
-                    variant="primary"
-                  >
-                    Get Started
-                  </Button>
-                  <Link
-                    className="inline-flex h-9 items-center justify-center rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:focus-visible:ring-gray-600"
-                    href="#"
-                  >
-                    Learn More
-                  </Link>
-                </div>
-          </div>
-          <div className='justify-center'>
-            <img src={aiMind} alt="ai-mind" className="mx-auto overflow-hidden rounded-xl object-cover sm:size-80 size-60" />
-          </div>
+      <div className='justify-center'>
+        <h1 className='lg:leading-tighter text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl xl:text-[3.4rem] 2xl:text-[3.75rem] dark:text-teal-400'>Explore the Power of Large Language Models</h1>
+        <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-300 mt-4">
+          Chat-with-LLMs is your one-stop destination to try out and compare the latest large language models
+          from leading AI providers.
+        </p>
+        <div className="space-x-4 mt-8">
+          <Button
+            className="inline-flex h-9 items-center justify-center rounded-md px-4 py-2 text-sm font-medium shadow transition-colors dark:bg-violet-600 dark:text-gray-100 dark:hover:bg-violet-700"
+            variant="primary"
+            onClick={async () => {
+              const isVerified = await verifyGoogleAuth();
+              if (isVerified)  navigate('/chat');
+
+              else login();
+            }}
+          >
+            Get Started
+          </Button>
+          <Button
+            className="inline-flex h-9 items-center justify-center rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:focus-visible:ring-gray-600"
+            onClick={handleLearnMoreClick}
+          >
+            Learn More
+          </Button>
+        </div>
+      </div>
+      <div className='justify-center'>
+        <img src={aiMind} alt="ai-mind" className="mx-auto overflow-hidden rounded-xl object-cover sm:size-80 size-60" />
       </div>
-  )
-};
\ No newline at end of file
+    </div>
+  );
+};
diff --git a/web/src/components/LandingPagePromotion.js b/web/src/components/LandingPagePromotion.js
index 0f192d6..db148f8 100644
--- a/web/src/components/LandingPagePromotion.js
+++ b/web/src/components/LandingPagePromotion.js
@@ -45,8 +45,8 @@ export const LandingPagePromotion = () => {
           </Button>
           <p className="text-xs text-gray-500 dark:text-gray-400">
             By signing in, you agree to our{" "}
-            <Link className="underline underline-offset-2" href="#">
-              Terms of Service
+            <Link className="underline underline-offset-2" to="/terms-and-conditions">
+              Terms And Conditions
             </Link>
             .
           </p>
diff --git a/web/src/components/PlansModal.js b/web/src/components/PlansModal.js
index e7c1127..7589451 100644
--- a/web/src/components/PlansModal.js
+++ b/web/src/components/PlansModal.js
@@ -108,7 +108,6 @@ export const PlansModal = ({ isOpen, onClose }) => {
         body: JSON.stringify(paymentRequest),
       });
       const data = await response.json();
-      console.log(data);
     } catch (error) {
       console.error("Error:", error);
     }
diff --git a/web/src/components/PrivacyPolicy.js b/web/src/components/PrivacyPolicy.js
new file mode 100644
index 0000000..a38c8c3
--- /dev/null
+++ b/web/src/components/PrivacyPolicy.js
@@ -0,0 +1,117 @@
+import React from "react";
+import { Card } from "@nextui-org/react";
+
+const PrivacyPolicy = () => {
+
+  return (
+    <div className="flex flex-col items-center p-4 min-h-screen bg-gray-100 dark:bg-gray-900">
+      <Card className="w-full max-w-3xl p-6 bg-white dark:bg-gray-800 shadow-lg">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100">
+            Privacy Policy
+          </h2>
+          
+        </div>
+        <div className="text-gray-700 dark:text-gray-300 space-y-6">
+          <section>
+            <h3 className="text-xl font-semibold">Introduction</h3>
+            <p>
+              Welcome to <strong>Chat-with-LLMs</strong>. This Privacy Policy
+              explains how we collect, use, disclose, and safeguard your
+              information when you visit our website. By using our website, you
+              consent to the data practices described in this policy.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Information We Collect</h3>
+            <p>
+              We collect information directly from you when you create an
+              account, such as:
+            </p>
+            <ul className="list-disc ml-5">
+              <li>Name</li>
+              <li>Email Address</li>
+              <li>Google ID</li>
+              <li>Profile Picture</li>
+              <li>Chat History</li>
+            </ul>
+            <p>
+              This information is essential to provide you with our services and
+              enhance your user experience.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">How We Use Your Information</h3>
+            <p>
+              We use the information we collect to:
+            </p>
+            <ul className="list-disc ml-5">
+              <li>Provide and manage your access to our website</li>
+              <li>Process your transactions</li>
+              <li>Enhance your user experience</li>
+              <li>Understand how you use our services</li>
+              <li>Communicate with you regarding updates or issues</li>
+            </ul>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Sharing Your Information</h3>
+            <p>
+              We do not sell or trade your personal information. However, we may
+              share your data with third-party service providers for:
+            </p>
+            <ul className="list-disc ml-5">
+              <li>Payment processing (e.g., Razorpay)</li>
+              <li>Authentication (e.g., Google Login)</li>
+              <li>Analytics and usage data tracking</li>
+            </ul>
+            <p>
+              These providers are obligated to keep your information secure and
+              use it only for the services they provide to us.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Security</h3>
+            <p>
+              We implement various security measures to protect your personal
+              information. However, please be aware that no method of
+              transmission over the internet or method of electronic storage is
+              100% secure.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Your Rights</h3>
+            <p>
+              You have the right to access, correct, or delete the personal
+              information we hold about you. If you wish to exercise these
+              rights, please contact us at [Insert Contact Information].
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Changes to This Policy</h3>
+            <p>
+              We may update this Privacy Policy from time to time. Any changes
+              will be posted on this page, and your continued use of the website
+              constitutes acceptance of the updated terms.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Contact Us</h3>
+            <p>
+              If you have any questions about this Privacy Policy, please
+              contact us at [Insert Contact Information].
+            </p>
+          </section>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default PrivacyPolicy;
diff --git a/web/src/components/SettingsModal.js b/web/src/components/SettingsModal.js
index c4bf75c..1f08bc1 100644
--- a/web/src/components/SettingsModal.js
+++ b/web/src/components/SettingsModal.js
@@ -30,14 +30,12 @@ export const SettingsModal = ({ isOpen, onClose }) => {
   // Function to apply the theme to the document
   const applyTheme = (selectedTheme) => {
     const root = document.documentElement;
-    console.log(`Applying theme: ${selectedTheme}`);
   
     if (selectedTheme === 'dark') {
       root.classList.add('dark');
       root.classList.remove('light');
     } else if (selectedTheme === 'system') {
       const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      console.log(`System prefers dark: ${isSystemDark}`);
       if (isSystemDark) {
         root.classList.add('dark');
         root.classList.remove('light');
diff --git a/web/src/components/TermsAndConditions.js b/web/src/components/TermsAndConditions.js
new file mode 100644
index 0000000..96ff4c3
--- /dev/null
+++ b/web/src/components/TermsAndConditions.js
@@ -0,0 +1,120 @@
+import React from "react";
+import { Card} from "@nextui-org/react";
+
+const TermsAndConditions = () => {
+
+  return (
+    <div className="flex flex-col items-center p-4 min-h-screen bg-gray-100 dark:bg-gray-900">
+      <Card className="w-full max-w-3xl p-6 bg-white dark:bg-gray-800 shadow-lg">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100">
+            Terms and Conditions
+          </h2>
+        </div>
+        <div className="text-gray-700 dark:text-gray-300 space-y-6">
+          <section>
+            <h3 className="text-xl font-semibold">Introduction</h3>
+            <p>
+              Welcome to <strong>Chat-with-LLMs</strong>. By accessing or using
+              our website, you agree to comply with and be bound by these Terms
+              and Conditions. If you do not agree with these terms, you should
+              not use our website.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Accounts and Registration</h3>
+            <p>
+              To access the features of <strong>Chat-with-LLMs</strong>, you
+              must create an account using your Google credentials. By
+              registering, you agree to provide accurate and complete
+              information. We store your name, email, Google ID, profile
+              picture, and chat history. You are responsible for maintaining the
+              confidentiality of your account credentials and for all activities
+              that occur under your account.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Pricing and Payment</h3>
+            <p>
+              Our services are offered through different subscription plans:
+            </p>
+            <ul className="list-disc ml-5">
+              <li>Basic: ₹420 for 50 Generations on all models</li>
+              <li>Standard: ₹840 for 250 Generations on all models</li>
+              <li>Premium: ₹1680 for 500 Generations on all models</li>
+            </ul>
+            <p>
+              Payments are processed securely through Razorpay. All fees are
+              non-refundable except as required by law.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">User Responsibilities</h3>
+            <p>
+              You agree to use our services for lawful purposes only. You are
+              prohibited from:
+            </p>
+            <ul className="list-disc ml-5">
+              <li>Advertising or offering to sell goods or services.</li>
+              <li>Selling or transferring your account to another person.</li>
+              <li>
+                Engaging in any activity that disrupts or interferes with the
+                functionality of the website.
+              </li>
+            </ul>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Privacy Policy</h3>
+            <p>
+              We are committed to protecting your privacy. Please refer to our
+              Privacy Policy for information on how we collect, use, and
+              disclose your personal data.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Dispute Resolution</h3>
+            <p>
+              Any disputes arising from your use of our services will first be
+              resolved through informal negotiations. If these negotiations
+              fail, disputes will be resolved by arbitration as per the rules of
+              the relevant jurisdiction.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Termination</h3>
+            <p>
+              We reserve the right to suspend or terminate your access to{" "}
+              <strong>Chat-with-LLMs</strong> at our sole discretion, without
+              notice, if you violate any of these terms.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Modifications to Terms</h3>
+            <p>
+              We may modify these Terms and Conditions at any time. Any changes
+              will be posted on our website, and your continued use of the
+              service constitutes acceptance of the updated terms.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-xl font-semibold">Contact Information</h3>
+            <p>
+              If you have any questions about these Terms and Conditions, please
+              contact us at [Insert Contact Information].
+            </p>
+          </section>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default TermsAndConditions;
\ No newline at end of file
diff --git a/web/src/components/UserCard.js b/web/src/components/UserCard.js
index dd911b9..56a0c34 100644
--- a/web/src/components/UserCard.js
+++ b/web/src/components/UserCard.js
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { memo, useMemo } from 'react';
 import { Card, CardHeader, CardBody, Avatar } from "@nextui-org/react";
 
-export const UserCard = ({ message, profilePicture }) => {
-  return (
+export const UserCard = memo(({ message, profilePicture }) => {
+  const renderedCard = useMemo(() => (
     <Card className={`max-w-max dark:bg-gray-800 dark:text-gray-200 bg-gray-100 text-gray-800`}>
       <CardHeader className="justify-between">
         <Avatar isBordered radius="full" size="md" src={profilePicture} />
@@ -11,5 +11,7 @@ export const UserCard = ({ message, profilePicture }) => {
         {message}
       </CardBody>
     </Card>
-  )
-};
+  ), [message, profilePicture]);
+
+  return renderedCard;
+});
diff --git a/web/src/pages/DashboardV2.js b/web/src/pages/DashboardV2.js
index f9f7dc7..801509e 100644
--- a/web/src/pages/DashboardV2.js
+++ b/web/src/pages/DashboardV2.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback, useRef } from "react";
 import { GiHamburgerMenu } from "react-icons/gi";
 import { TbPremiumRights } from "react-icons/tb";
 import { LuPlus } from "react-icons/lu";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams, useLocation } from "react-router-dom";
 import { Tooltip, Spinner, Avatar, Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Select, SelectItem } from "@nextui-org/react";
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { MdExpandMore } from "react-icons/md";
@@ -22,7 +22,12 @@ import { AiOutlineReload } from 'react-icons/ai';
 import LoadingSpinner from '../components/LoadingSpinner';
 import { PlansModal } from "../components/PlansModal";
 
+
 export const DashboardV2 = () => {
+    const location = useLocation();
+    const { userModel } = location.state || {};
+    
+
     const { chatIdParams } = useParams();
     const API_HOST = process.env.REACT_APP_API_HOST || "http://localhost:5000";
 
@@ -35,7 +40,7 @@ export const DashboardV2 = () => {
     const accessToken = localStorage.getItem("accessToken");
     const [modal, setModal] = useState(null);
     const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-    const [selectedModel, setSelectedModel] = useState(modelOptions[0]);
+    const [selectedModel, setSelectedModel] = useState( modelOptions.find((model) => model.value === userModel) || modelOptions[0]);
     const [messages, setMessages] = useState([]);
     let previousModel = null;
     let profilePicture = localStorage.getItem("profilePicture");
@@ -92,10 +97,6 @@ export const DashboardV2 = () => {
     };
 
 
-    useEffect(() => {
-        console.log("Modal: ", modal);
-    }, [modal]);
-
     const getTitle = async (userHistory, chatId) => {
         try {
             const requestData = {
@@ -172,9 +173,9 @@ export const DashboardV2 = () => {
                        
                         if (response.status === 403){
                             setGenerationsLeft(0);
-                            console.log("Generations left exhausted");
                             // open the plans modal
                             setModal('plans');
+                            onOpen();
                         }
                         setShowRetry(true);
                         console.error("Failed to establish event source connection, status: ", response.status);
diff --git a/web/src/pages/LoginPage.js b/web/src/pages/LoginPage.js
index 520447e..567e497 100644
--- a/web/src/pages/LoginPage.js
+++ b/web/src/pages/LoginPage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { GoogleOAuthProvider } from '@react-oauth/google';
 import { LandingPageNavBar } from '../components/LandingPageNavBar';
 import { LandingPageIntro } from '../components/LandingPageIntro';
@@ -6,15 +6,15 @@ import { LandingPageDescription } from '../components/LandingPageDescription';
 import { LandingPagePromotion } from '../components/LandingPagePromotion';
 import { Footer } from '../components/Footer';
 
-
 export const LoginPage = () => {
   const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+  const descriptionRef = useRef(null);
 
   return (
     <GoogleOAuthProvider clientId={clientId}>
       <LandingPageNavBar />
-      <LandingPageIntro />
-      <LandingPageDescription />
+      <LandingPageIntro descriptionRef={descriptionRef} />
+      <LandingPageDescription ref={descriptionRef} />
       <LandingPagePromotion />
       <Footer />
     </GoogleOAuthProvider>
diff --git a/web/src/utils/useGoogleAuth.js b/web/src/utils/useGoogleAuth.js
index 00af944..99fc7af 100644
--- a/web/src/utils/useGoogleAuth.js
+++ b/web/src/utils/useGoogleAuth.js
@@ -5,7 +5,7 @@ export const useGoogleAuth = () => {
 
   const API_HOST = process.env.REACT_APP_API_HOST || 'http://localhost:5000';
 
-  const handleGoogleSuccess = async (tokenResponse) => {
+  const handleGoogleSuccess = async (tokenResponse, model="gpt-4o-mini") => {
 
     const idToken = tokenResponse.access_token;
 
@@ -24,7 +24,7 @@ export const useGoogleAuth = () => {
         localStorage.setItem('accessToken', accessToken);
         localStorage.setItem('profilePicture', profilePicture);
         localStorage.setItem('username', username);
-        navigate('/chat');
+        navigate('/chat', { state: { userModel: model } });
       } else {
         console.error('Google authentication failed');
       }