diff --git a/public/SkinAI.html b/public/SkinAI.html
index ef1d214..2b56efc 100644
--- a/public/SkinAI.html
+++ b/public/SkinAI.html
@@ -1,171 +1,244 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SkinAi</title>
-    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
-
+    <title>SkAI</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@400;600;700&family=Special+Gothic+Expanded+One&display=swap" rel="stylesheet">
+    
     <style>
         * {
-            box-sizing: border-box;
             margin: 0;
             padding: 0;
+            box-sizing: border-box;
         }
 
         body {
-            background-color: #416f7e;
-            color: #000000;
-            font-family: 'Lato', sans-serif;
-            min-height: 100vh;
+            font-family: "Special Gothic Expanded One", sans-serif;
+            background: rgb(245, 245, 237);
+            background-size: cover;       /* Ensures the image covers the entire section */
+            background-repeat: no-repeat; /* Prevents the image from repeating */
+            background-position: center;  /* Centers the image within the section */
+            color: #333;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
         }
 
         header {
-            background-color: #515255;
-            padding: 20px;
+            background-color: #333;
+            padding: 20px 40px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             position: sticky;
             top: 0;
             z-index: 1000;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
         }
 
         header .logo {
             font-size: 36px;
             font-weight: bold;
-            color: white;
-            text-decoration: overline;
+            color: #fff;
+            text-decoration: none;
+            letter-spacing: 1px;
         }
 
         nav a {
-            color: white;
+            color: #fff;
             margin-left: 20px;
             text-decoration: none;
-            font-size: 16px;
+            font-size: 18px;
+            transition: color 0.3s;
+        }
+
+        nav a:hover {
+            color: #6e4b3a;
         }
 
-        .main-content {
-            max-width: 800px;
-            margin: 60px auto;
-            padding: 40px;
-            background-color: #4ea196;
-            border-radius: 10px;
+        .section {
             text-align: center;
+            padding: 80px 40px;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
         }
 
-        .main-content h1 {
+        .section h1 {
+            font-size: 60px;
             margin-bottom: 20px;
-            font-size: 36px;
         }
 
-        .main-content p {
-            margin-bottom: 12px;
-            font-size: 16px;
+        .section p {
+            font-size: 28px;
+            line-height: 1.6;
+            color: #555;
         }
 
-        form {
-            margin-top: 30px;
+        .button {
+            background-color: #6e4b3a;
+            color: white;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 30px;
+            font-size: 18px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.2s;
+        }
+
+        .button:hover {
+            background-color: #5c3e2a;
+            transform: scale(1.05);
         }
 
         .form-group {
+            margin-top: 30px;
             display: flex;
             justify-content: center;
-            align-items: center;
-            gap: 15px;
-            margin-top: 20px;
+            gap: 20px;
         }
 
         input[type="file"] {
-            color: white;
+            background-color: #ffffff20;
+            color: #333;
+            padding: 12px;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            width: 250px;
+        }
+
+        input[type="file"]:focus {
+            outline: none;
+            background-color: #ffffff40;
         }
 
         button {
-            background-color: #10173f;
+            background-color: #6e4b3a;
             color: white;
-            padding: 10px 20px;
+            padding: 12px 30px;
             border: none;
-            border-radius: 5px;
-            font-size: 16px;
+            border-radius: 30px;
+            font-size: 18px;
             cursor: pointer;
+            transition: background-color 0.3s, transform 0.2s;
         }
 
         button:hover {
-            background-color: #0b08ac;
+            background-color: #5c3e2a;
+            transform: scale(1.05);
         }
 
-        .divider {
-            margin: 40px auto;
-            width: 60%;
-            border: 0;
-            height: 64px;
-            opacity: 0;
-            background: #ffffff50; /* semi-transparent white */
-            border-radius: 5px;
-}
+        .faq-item button {
+            color: white;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 8px;
+            font-size: 18px;
+            cursor: pointer;
+            width: 100%;
+            text-align: left;
+        }
 
+        .faq-item button:hover {
+            background-color: #5c3e2a;
+        }
 
-        @media (max-width: 600px) {
-            .form-group {
-                flex-direction: column;
-            }
+        .answer {
+            display: none;
+            margin-top: 10px;
+            font-size: 16px;
+            color: #555;
+        }
 
-            nav a {
-                margin-left: 10px;
-            }
+        .divider {
+            margin-top: 50px;
+            border-top: 2px solid #ddd;
         }
     </style>
 </head>
+
 <body>
 
     <header>
-        <a href="#" class="logo">SkinAi</a>
+        <a href="#" class="logo">SkAI</a>
         <nav>
-            <a href="#">Home</a>
-            <a href="#">About</a>
-            <a href="#">Contact</a>
+            <a href="#home">Home</a>
+            <a href="#about">About</a>
+            <a href="#faq">FAQ</a>
         </nav>
     </header>
 
-    <div class="main-content">
-        <h1>SkinAi</h1>
-        <p><em>Analyze your skin condition with AI</em></p>
-        <p>Upload an image of your skin and get instant analysis.</p>
-        <p>Our AI model will analyze the image and provide feedback on your skin condition.</p>
-        <p>Please ensure the image is clear and well-lit for best results.</p>
+    <!-- Home Section -->
+    <div id="home" class="section">
+        <div class="main-content">
+            <h1>SkAI</h1>
+            <p>AI-powered Skin Analysis for a Healthier You.</p>
+        </div>
+    </div>
 
-        <hr class="divider">
+    <!-- About Section -->
+    <div id="about" class="section" style="background-color: #f0ece2;">
+        <h1>About SkAI</h1>
+        <p>SkAI is an advanced AI model designed to analyze your skin condition by analyzing images. It helps you monitor skin health by providing insightful feedback, from detecting acne to offering advice on hydration and skincare routines. Upload a clear image of your skin, and our AI will give you valuable insights.</p>
 
         <form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
             <div class="form-group">
                 <input type="file" name="image" accept="image/*" required>
-                <button type="submit">Upload</button>
+                <button type="submit">Upload Image for Analysis</button>
             </div>
         </form>
     </div>
 
+    <!-- FAQ Section -->
+    <div id="faq" class="section">
+        <h1>Frequently Asked Questions</h1>
+
+        <div class="faq-container">
+            <div class="faq-item">
+                <button onclick="toggleAnswer(1)">How does SkAI analyze my skin?</button>
+                <div id="answer1" class="answer">
+                    <p>SkAI uses AI algorithms to process the image of your skin and identify conditions such as acne, dryness, or inflammation.</p>
+                </div>
+            </div>
+
+            <div class="faq-item">
+                <button onclick="toggleAnswer(2)">What type of images are best for analysis?</button>
+                <div id="answer2" class="answer">
+                    <p>Clear, well-lit images taken in natural light work best. Avoid using filters or overly close-up shots.</p>
+                </div>
+            </div>
+
+            <div class="faq-item">
+                <button onclick="toggleAnswer(3)">What is SkAI?</button>
+                <div id="answer3" class="answer">
+                    <p>SkAI is an AI-powered website that takes pictures uploaded by users to analyze skin and inform the users weather it is a rash, pimple or clear skin. Using this information, it will make it easier for the students to get their skincare based on their skin type.</p>
+                </div>
+            </div>
+
+            <!-- <div class="faq-item">
+                <button onclick="toggleAnswer(4)">What type of images are best for analysis?</button>
+                <div id="answer4" class="answer">
+                    <p>.</p>
+                </div>
+            </div> -->
+        </div>
+    </div>
+
     <script>
-        const form = document.getElementById('uploadForm');
-        form.addEventListener('submit', async (event) => {
-            event.preventDefault();
-            const formData = new FormData(form);
-
-            try {
-                const response = await fetch('/upload', {
-                    method: 'POST',
-                    body: formData
-                });
-
-                if (response.ok) {
-                    const result = await response.json();
-                    alert('Analysis Result: ' + result.message);
-                } else {
-                    alert('Error uploading image.');
-                }
-            } catch (error) {
-                alert('An error occurred: ' + error.message);
-            }
-        });
+        function toggleAnswer(id) {
+            var answer = document.getElementById("answer" + id);
+            answer.style.display = (answer.style.display === "block") ? "none" : "block";
+        }
     </script>
+
 </body>
+
 </html>
diff --git a/public/src/beach for 481.jpg b/public/src/beach for 481.jpg
new file mode 100644
index 0000000..8fcd5ca
Binary files /dev/null and b/public/src/beach for 481.jpg differ
diff --git a/public/src/beach2 - 481.jpg b/public/src/beach2 - 481.jpg
new file mode 100644
index 0000000..9f9874b
Binary files /dev/null and b/public/src/beach2 - 481.jpg differ
diff --git a/public/src/img2 for 481.webp b/public/src/img2 for 481.webp
new file mode 100644
index 0000000..51ca5fb
Binary files /dev/null and b/public/src/img2 for 481.webp differ
diff --git a/public/src/pic for background- skin ai.jpg b/public/src/pic for background- skin ai.jpg
new file mode 100644
index 0000000..e1ffdbc
Binary files /dev/null and b/public/src/pic for background- skin ai.jpg differ
