diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx
index fd44a7a..0ca1c0a 100644
--- a/packages/nextjs/components/Card.tsx
+++ b/packages/nextjs/components/Card.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router"
 export default function Card({domain} : {domain: string}) {
     const router = useRouter()
     return <>
-    <div className="flex flex-col justify-around items-center w-[400px] h-[400px] border-[7px] rounded-[15px] text-[40px] mx-auto">
+    <div className="flex flex-col justify-around items-center w-[400px] h-[400px] border-[7px] border-[#3DB9CF] rounded-[15px] text-[40px] mx-auto">
         <Image src={logo} alt="NFT Image" width={150}/>
         <h1 className="hover:cursor-pointer" onClick={() => router.push("/cards/" + domain)}>{domain}</h1>
     </div>
diff --git a/packages/nextjs/components/Navbar.tsx b/packages/nextjs/components/Navbar.tsx
index 5a9eeab..7771afa 100644
--- a/packages/nextjs/components/Navbar.tsx
+++ b/packages/nextjs/components/Navbar.tsx
@@ -1,7 +1,18 @@
-export default function Navbar() {
-    return <>
-    <div className="sticky top-0 w-full h-32">
-        
+import Image from "next/image";
+import logo from "../public/logo.png";
+
+export default function Navbar({
+  extraComponent,
+}: {
+  extraComponent?: JSX.Element;
+}) {
+  return (
+    <div className="sticky top-0 w-full h-32 bg-white mb-4">
+      <div className="w-full h-full flex justify-end items-center px-10">
+        {extraComponent}
+        <Image src={logo} alt="logo" width={50} />
+      </div>
+      <div className="h-[1px] w-11/12 mx-auto bg-black"></div>
     </div>
-    </>
-}
\ No newline at end of file
+  );
+}
diff --git a/packages/nextjs/pages/cards/[domain].tsx b/packages/nextjs/pages/cards/[domain].tsx
index 4679ea2..425784e 100644
--- a/packages/nextjs/pages/cards/[domain].tsx
+++ b/packages/nextjs/pages/cards/[domain].tsx
@@ -1,14 +1,33 @@
-import { useRouter } from "next/router"
+import { useRouter } from "next/router";
 import Navbar from "@/components/Navbar";
+import Card from "@/components/Card";
 
 export default function CardPage() {
-
-    const router = useRouter();
-    const { domain } = router.query;
-    return(<>
-    <div>
+  const router = useRouter();
+  const { domain } = router.query;
+  return (
+    <>
+      <div className="h-screen w-full">
         <Navbar />
-        {domain}
-    </div>
-    </>)
-}
\ No newline at end of file
+        <div className="w-full h-screen flex justify-center items-center">
+          <div className="flex w-full gap-12 items-center justify-center">
+            <div>
+              <Card domain={domain as string} />
+            </div>
+            <div className="flex flex-col w-1/2">
+                <p className="border-b-2 border-black text-[45px]">
+                    OWNER:
+                </p>
+                <p className="border-b-2 border-black text-[45px]">
+                    EXPIRE TIME: 
+                </p>
+                <p className="border-b-2 border-black text-[45px]">
+                    PRICE:
+                </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/packages/nextjs/pages/chat.tsx b/packages/nextjs/pages/chat.tsx
index 36f2002..0684bb3 100644
--- a/packages/nextjs/pages/chat.tsx
+++ b/packages/nextjs/pages/chat.tsx
@@ -20,7 +20,7 @@ export const ChatSupportTest = () => {
       account='0xFe6C8E9e25f7bcF374412c5C81B2578aC473C0F7'
       supportAddress="0xFe6C8E9e25f7bcF374412c5C81B2578aC473C0F7"
       apiKey="tAWEnggQ9Z.UaDBNjrvlJZx3giBTIQDcT8bKQo1O1518uF1Tea7rPwfzXv2ouV5rX9ViwgJUrXm"
-      env='staging'
+      env='ENV'
       theme={theme}
     />
   );
diff --git a/packages/nextjs/pages/connect/index.tsx b/packages/nextjs/pages/connect/index.tsx
index bb9bb82..d78bb73 100644
--- a/packages/nextjs/pages/connect/index.tsx
+++ b/packages/nextjs/pages/connect/index.tsx
@@ -57,6 +57,7 @@ export default function Connect() {
               return (
                 <div style={{ display: 'flex', gap: 12 }}>
                   <button
+                    className="w-[490px] h-[93px] bg-[#3DB9CF] hover:bg-[#19D9CF] rounded-[25px] text-white text-[35px] flex justify-center items-center"
                     onClick={openChainModal}
                     style={{ display: 'flex', alignItems: 'center' }}
                     type="button"
@@ -84,7 +85,7 @@ export default function Connect() {
                     {chain.name}
                   </button>
 
-                  <button onClick={openAccountModal} type="button">
+                  <button onClick={openAccountModal} type="button" className="w-[490px] h-[93px] bg-[#3DB9CF] hover:bg-[#19D9CF] rounded-[25px] text-white text-[35px]">
                     {account.displayName}
                     {account.displayBalance
                       ? ` (${account.displayBalance})`
diff --git a/packages/nextjs/pages/market/index.tsx b/packages/nextjs/pages/market/index.tsx
index 0ace1fc..ae604d5 100644
--- a/packages/nextjs/pages/market/index.tsx
+++ b/packages/nextjs/pages/market/index.tsx
@@ -1,8 +1,10 @@
 import CardContainer from "@/components/CardContainer";
+import Navbar from "@/components/Navbar";
 
 export default function Market() {
   return (
     <>
+      <Navbar />
       <CardContainer />
     </>
   );