diff --git a/components/firstpage.js b/components/firstpage.js
index 3896b20..925da4d 100644
--- a/components/firstpage.js
+++ b/components/firstpage.js
@@ -1,78 +1,88 @@
 import Image from "next/image";
 import Link from "next/link";
-
+import logo from "@/app/hero/logo.png";
 import React from "react";
 
 export default function FirstPage() {
   return (
     <div>
-      <nav className="bg-white shadow-md p-8 flex justify-between">
-        <div>Credit Buddy</div>
-        <ul className="flex justify-around gap-[24px]">
-          <li className="nav-item">
-            <a href="/" className="nav-link">
-              Home
-            </a>
-          </li>
-          <li className="nav-item">
-            <a href="/about" className="nav-link">
-              Caculate
-            </a>
-          </li>
-          <li className="nav-item">
-            <a href="/services" className="nav-link">
-              About us
-            </a>
-          </li>
-          <li className="nav-item">
-            <a href="/contact" className="nav-link">
-              Policy
-            </a>
-          </li>
-        </ul>
+      <nav className="bg-teal-500 shadow-md p-8 flex justify-between items-center">
+        <div className="text-4xl text-white font-bold">
+          {" "}
+          <Image src={logo} width={170} height={170} alt="Credit Card" />
+        </div>
+          <ul className="flex space-x-6 text-center justify-center items-center">
+            <li className="nav-item">
+              <a href="/" className="text-white text-lg hover:text-yellow-400">
+                Home
+              </a>
+            </li>
+            <li className="nav-item">
+              <a
+                href="/hero"
+                className="text-white text-lg hover:text-yellow-400"
+              >
+                คำนวณ
+              </a>
+            </li>
+            <li className="nav-item">
+              <a
+                href="/about"
+                className="text-white text-lg hover:text-yellow-400"
+              >
+                เกี่ยวกับ
+              </a>
+            </li>
+            <li className="nav-item">
+              <a
+                href="/policy"
+                className="text-white text-lg hover:text-yellow-400"
+              >
+                นโยบาย
+              </a>
+            </li>
+          </ul>
+       
+
+        <div className="text-white text-xl font-bold">User</div>
       </nav>
 
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <div className="flex flex-col itext-center justify-center items-center min-h-screen bg-gradient-to-r from-[#383838] to-[#9E9E9E]">
         <div className="text-center">
           ให้เหมาะกับสไตล์คุณ ผ่านเว็บไซต์ช่วยวางแผนการใช้บัตรเครดิต
         </div>
         <Link href="/hero">
           <div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 transition duration-300 ease-in-out shadow-lg transform hover:scale-105">
             About Us
-          </div>
+          </div> 
         </Link>
-        <div className="grid grid-cols-3 gap-[4px] p-1">
+        <div className="grid grid-cols-3 gap-[32px] p-1">
     <div className="flex items-center justify-center h-screen ">
-      <div className="bg-white shadow-lg rounded-lg p-8 h-[400px] w-[750px] text-center">
-        <h2 className="text-2xl font-bold mb-4">Louriepoiem</h2>
-        <p className="text-gray-700 mb-6">lorepium</p>
-        <Link href="/hero">
-          <div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
-            เข้าใช้บริการ
-          </div>
-        </Link>
+      <div className="bg-[#575757] rounded-lg p-[50px] h-[275px] w-[406px] text-center text-white">
+        <h2 className="text-2xl font-bold mb-4">จำนวนบัตรทั้งสิ้น</h2>
+        <p className="text-[#46A8A7] text-[32px] font-bold mb-6">26,332,679</p>
+<h2>ล้านใบ</h2>
+  
       </div>
     </div>
     <div className="flex items-center justify-center h-screen ">
-      <div className="bg-white shadow-lg rounded-lg p-8 h-[400px] w-[750px] text-center">
-        <h2 className="text-2xl font-bold mb-4">Louriepoiem</h2>
-        <p className="text-gray-700 mb-6">lorepium</p>
-        <Link href="/hero">
-          <div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
-            เข้าใช้บริการ
-          </div>
-        </Link>
+    <div className="flex items-center justify-center h-screen ">
+      <div className="bg-[#575757] rounded-lg p-[50px] h-[275px] w-[406px] text-center text-white">
+        <h2 className="text-2xl font-bold mb-4">จำนวนบัตรทั้งสิ้น</h2>
+        <p className="text-[#46A8A7] text-[32px] font-bold mb-6">26,332,679</p>
+<h2>ล้านใบ</h2>
+  
+      </div>
       </div>
     </div>
     <div className="flex items-center justify-center">
-      <div className="bg-white shadow-lg rounded-lg p-8 h-[400px] w-[750px] text-center">
-        <h2 className="text-2xl font-bold mb-4">Louriepoiem</h2>
-        <p className="text-gray-700 mb-6">lorepium</p>
-        <Link href="/hero">
-          <div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
-            เข้าใช้บริการ
-          </div>
-        </Link>
+    <div className="flex items-center justify-center h-screen ">
+      <div className="bg-[#575757] rounded-lg p-[50px] h-[275px] w-[406px] text-center text-white">
+        <h2 className="text-2xl font-bold mb-4">จำนวนบัตรทั้งสิ้น</h2>
+        <p className="text-[#46A8A7] text-[32px] font-bold mb-6">26,332,679</p>
+<h2>ล้านใบ</h2>
+  
+      </div>
       </div>
     </div>
   </div>
diff --git a/src/app/hero/logo.png b/src/app/hero/logo.png
new file mode 100644
index 0000000..1f2c547
Binary files /dev/null and b/src/app/hero/logo.png differ
diff --git a/src/app/hero/page.js b/src/app/hero/page.js
index bf106b9..572a5ef 100644
--- a/src/app/hero/page.js
+++ b/src/app/hero/page.js
@@ -16,6 +16,7 @@ import {
 } from "@mui/material";
 import React from "react";
 import Image from "next/image";
+import logo from "@/app/hero/logo.png";
 
 const recommendCard = (amount, creditCards) => {
   const suitableCards = creditCards.filter(
@@ -127,30 +128,44 @@ const App = () => {
   return (
     <div>
       <nav className="bg-teal-500 shadow-md p-8 flex justify-between items-center">
-        <div className="text-4xl text-white font-bold">Credit Buddy</div>
-        <ul className="flex space-x-6">
-          <li className="nav-item">
-            <a href="/" className="text-white text-lg">
-              Home
-            </a>
-          </li>
-          <li className="nav-item">
-            <a href="/calculate" className="text-white text-lg">
-              คำนวณ
-            </a>
-          </li>
-          <li className="nav-item">
-            <a href="/about" className="text-white text-lg">
-              เกี่ยวกับ
-            </a>
-          </li>
-          <li className="nav-item">
-            <a href="/policy" className="text-white text-lg">
-              นโยบาย
-            </a>
-          </li>
-        </ul>
-        <div className="text-white text-lg">Login</div>
+        <div className="text-4xl text-white font-bold">
+          {" "}
+          <Image src={logo} width={170} height={170} alt="Credit Card" />
+        </div>
+          <ul className="flex space-x-6">
+            <li className="nav-item">
+              <a href="/" className="text-white text-lg hover:text-yellow-400">
+                Home
+              </a>
+            </li>
+            <li className="nav-item">
+              <a
+                href="/calculate"
+                className="text-white text-lg hover:text-yellow-400"
+              >
+                คำนวณ
+              </a>
+            </li>
+            <li className="nav-item">
+              <a
+                href="/about"
+                className="text-white text-lg hover:text-yellow-400"
+              >
+                เกี่ยวกับ
+              </a>
+            </li>
+            <li className="nav-item">
+              <a
+                href="/policy"
+                className="text-white text-lg hover:text-yellow-400"
+              >
+                นโยบาย
+              </a>
+            </li>
+          </ul>
+       
+
+        <div className="text-white text-xl font-bold">User</div>
       </nav>
       <div className="bg-[#696969] text-white">
         <div className="flex gap-[8px] p-12 justify-center items-center">
@@ -272,7 +287,11 @@ const App = () => {
           </div>
 
           <div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
-            <Typography variant="h5" gutterBottom className="mt-10 mb-4 text-xl">
+            <Typography
+              variant="h5"
+              gutterBottom
+              className="mt-10 mb-4 text-xl"
+            >
               วันที่รูดบัตรนั้น
             </Typography>
             <Box component="form" noValidate autoComplete="off">
@@ -291,9 +310,13 @@ const App = () => {
                 onClick={() => {
                   const dayOfPurchase = new Date(purchaseDate).getDate();
                   if (dayOfPurchase <= 15) {
-                    setRecommendation("You should use Card 1 for this purchase.");
+                    setRecommendation(
+                      "You should use Card 1 for this purchase."
+                    );
                   } else {
-                    setRecommendation("You should use Card 2 for this purchase.");
+                    setRecommendation(
+                      "You should use Card 2 for this purchase."
+                    );
                   }
                 }}
                 className="mt-6"