diff --git a/README.md b/README.md
index 617cc07..9e029dc 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,6 @@
+# OpenBooking
 
-![tw-banner](https://github.com/thirdweb-example/next-starter/assets/57885104/20c8ce3b-4e55-4f10-ae03-2fe4743a5ee8)
-
-# thirdweb-next-starter
-
-Starter template to build an onchain react native app with [thirdweb](https://thirdweb.com/) and [next](https://nextjs.org/).
+## Overview
 
 ## Installation
 
@@ -19,7 +16,7 @@ To run this project, you will need to add the following environment variables to
 
 `CLIENT_ID`
 
-To learn how to create a client ID, refer to the [client documentation](https://portal.thirdweb.com/typescript/v5/client). 
+To learn how to create a client ID, refer to the [client documentation](https://portal.thirdweb.com/typescript/v5/client).
 
 ## Run locally
 
diff --git a/src/app/customer/checkin/page.tsx b/src/app/customer/checkin/page.tsx
new file mode 100644
index 0000000..0e79da8
--- /dev/null
+++ b/src/app/customer/checkin/page.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useSearchParams, useRouter } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import {
+    ConnectButton,
+    TransactionButton,
+    useActiveAccount,
+} from "thirdweb/react";
+import { client, contract } from "../../client";
+import { prepareContractCall } from "thirdweb";
+
+function CheckInInnerPage() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [reservationId, setReservationId] = useState<string | null>(null);
+    const address = useActiveAccount();
+
+    useEffect(() => {
+        const id = searchParams.get("id");
+        if (id) {
+            setReservationId(id);
+            console.log(id);
+        }
+    }, [searchParams]);
+
+    const handleFinalizePayment = async () => {
+        if (!reservationId) throw new Error("Reservation ID is not found.");
+
+        return prepareContractCall({
+            contract,
+            method: "finalizePayment",
+            params: [BigInt(reservationId)],
+        });
+    };
+
+    if (!reservationId) {
+        return <div>Now Loading...</div>;
+    }
+
+    return (
+        <main className="p-4 container mx-auto">
+            <h1 className="text-2xl font-bold mb-4">Service Confirmation</h1>
+            <p className="mb-4">Reservation ID: {reservationId}</p>
+            <div className="flex flex-col items-center space-y-4">
+                <ConnectButton
+                    client={client}
+                    appMetadata={{
+                        name: "Example App",
+                        url: "https://example.com",
+                    }}
+                />
+                {address && (
+                    <TransactionButton
+                        transaction={handleFinalizePayment}
+                        onTransactionSent={(result) => {
+                            console.log("Sent Transaction:", result.transactionHash);
+                        }}
+                        onTransactionConfirmed={(receipt) => {
+                            console.log("Confirmed Transaction:", receipt.transactionHash);
+                            router.push("/customer");
+                        }}
+                        onError={(error) => {
+                            console.error("Transaction Error has occured:", error);
+                        }}
+                    >
+                        Confirm the Service
+                    </TransactionButton>
+                )}
+            </div>
+        </main>
+    );
+}
+
+export default function CheckInPage() {
+    return (
+        <Suspense>
+            <CheckInInnerPage />
+        </Suspense>
+    );
+}
diff --git a/src/app/customer/confirm-service/page.tsx b/src/app/customer/confirm-service/page.tsx
deleted file mode 100644
index ae43660..0000000
--- a/src/app/customer/confirm-service/page.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import { useSearchParams, useRouter } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
-import {
-  ConnectButton,
-  TransactionButton,
-  useActiveAccount,
-} from "thirdweb/react";
-import { client, contract } from "../../../app/client";
-import { prepareContractCall } from "thirdweb";
-
-function ConfirmServiceInnerPage() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [reservationId, setReservationId] = useState<string | null>(null);
-  const address = useActiveAccount();
-
-  useEffect(() => {
-    const id = searchParams.get("id");
-    if (id) {
-      setReservationId(id);
-      console.log(id);
-    }
-  }, [searchParams]);
-
-  const handleFinalizePayment = async () => {
-    if (!reservationId) throw new Error("Reservation ID is not found.");
-
-    return prepareContractCall({
-      contract,
-      method: "finalizePayment",
-      params: [BigInt(reservationId)],
-    });
-  };
-
-  if (!reservationId) {
-    return <div>Now Loading...</div>;
-  }
-
-  return (
-    <main className="p-4 container mx-auto">
-      <h1 className="text-2xl font-bold mb-4">Service Confirmation</h1>
-      <p className="mb-4">Reservation ID: {reservationId}</p>
-      <div className="flex flex-col items-center space-y-4">
-        <ConnectButton
-          client={client}
-          appMetadata={{
-            name: "Example App",
-            url: "https://example.com",
-          }}
-        />
-        {address && (
-          <TransactionButton
-            transaction={handleFinalizePayment}
-            onTransactionSent={(result) => {
-              console.log("Sent Transaction:", result.transactionHash);
-            }}
-            onTransactionConfirmed={(receipt) => {
-              console.log("Confirmed Transaction:", receipt.transactionHash);
-              router.push("/customer");
-            }}
-            onError={(error) => {
-              console.error("Transaction Error has occured:", error);
-            }}
-          >
-            Confirm the Service
-          </TransactionButton>
-        )}
-      </div>
-    </main>
-  );
-}
-
-export default function ConfirmServicePage() {
-  return (
-    <Suspense>
-      <ConfirmServiceInnerPage />
-    </Suspense>
-  );
-}
diff --git a/src/app/customer/page.tsx b/src/app/customer/page.tsx
index fad2af7..5eab81c 100644
--- a/src/app/customer/page.tsx
+++ b/src/app/customer/page.tsx
@@ -21,15 +21,20 @@ export default function CustomerPage() {
   }
 
   return (
-    <main className="p-4 container mx-auto ">
+    <main className="p-4 container mx-auto relative">
+      <div className="absolute top-4 right-4">
+        <ConnectButton
+          client={client}
+          appMetadata={{
+            name: "OpenBooking",
+            url: "https://openbooking.vercel.app",
+          }}
+        />
+      </div>
+
       <h1 className="text-2xl font-bold mb-4">Customer Page</h1>
-      <ConnectButton
-        client={client}
-        appMetadata={{
-          name: "Example App",
-          url: "https://example.com",
-        }}
-      />
+      <h2 className="text-xl font-semibold mb-6">Select a store</h2>
+
       <StoreSelector
         onSelectStore={(storeId: number) => setSelectedStore(storeId)}
       />
@@ -85,98 +90,4 @@ export default function CustomerPage() {
       </div>
     </main>
   );
-}
-
-// export default function Home() {
-//   return (
-//     <main className="p-4 pb-10 min-h-[100vh] flex items-center justify-center container max-w-screen-lg mx-auto">
-//       <div className="py-20">
-//         <Header />
-
-//         <div className="flex justify-center mb-20">
-//           <ConnectButton
-//             client={client}
-//             appMetadata={{
-//               name: "Example App",
-//               url: "https://example.com",
-//             }}
-//           />
-//         </div>
-
-//         <ThirdwebResources />
-//       </div>
-//     </main>
-//   );
-// }
-
-function Header() {
-  return (
-    <header className="flex flex-col items-center mb-20 md:mb-20">
-      <Image
-        src={thirdwebIcon}
-        alt=""
-        className="size-[150px] md:size-[150px]"
-        style={{
-          filter: "drop-shadow(0px 0px 24px #a726a9a8)",
-        }}
-      />
-
-      <h1 className="text-2xl md:text-6xl font-semibold md:font-bold tracking-tighter mb-6 text-zinc-100">
-        thirdweb SDK
-        <span className="text-zinc-300 inline-block mx-1"> + </span>
-        <span className="inline-block -skew-x-6 text-blue-500"> Next.js </span>
-      </h1>
-
-      <p className="text-zinc-300 text-base">
-        Read the{" "}
-        <code className="bg-zinc-800 text-zinc-300 px-2 rounded py-1 text-sm mx-1">
-          README.md
-        </code>{" "}
-        file to get started.
-      </p>
-    </header>
-  );
-}
-
-function ThirdwebResources() {
-  return (
-    <div className="grid gap-4 lg:grid-cols-3 justify-center">
-      <ArticleCard
-        title="thirdweb SDK Docs"
-        href="https://portal.thirdweb.com/typescript/v5"
-        description="thirdweb TypeScript SDK documentation"
-      />
-
-      <ArticleCard
-        title="Components and Hooks"
-        href="https://portal.thirdweb.com/typescript/v5/react"
-        description="Learn about the thirdweb React components and hooks in thirdweb SDK"
-      />
-
-      <ArticleCard
-        title="thirdweb Dashboard"
-        href="https://thirdweb.com/dashboard"
-        description="Deploy, configure, and manage your smart contracts from the dashboard."
-      />
-    </div>
-  );
-}
-
-function ArticleCard(props: {
-  title: string;
-  href: string;
-  description: string;
-}) {
-  return (
-    <a
-      href={props.href + "?utm_source=next-template"}
-      target="_blank"
-      className="flex flex-col border border-zinc-800 p-4 rounded-lg hover:bg-zinc-900 transition-colors hover:border-zinc-700"
-    >
-      <article>
-        <h2 className="text-lg font-semibold mb-2">{props.title}</h2>
-        <p className="text-sm text-zinc-400">{props.description}</p>
-      </article>
-    </a>
-  );
-}
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7ee3910..b40cd6a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,29 +2,29 @@ import Link from 'next/link';
 import Image from 'next/image';
 
 export default function Home() {
-  return (
-    <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
-      <div className="bg-white p-8 rounded-xl shadow-2xl max-w-2xl w-full">
-        <h1 className="text-4xl font-bold mb-6 text-center text-gray-800">Reservation System</h1>
-        <div className="flex flex-col space-y-6">
-          <Link href="/customer" className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-6 rounded-lg text-center transition duration-300 ease-in-out transform hover:scale-105">
-            Customer Page
-          </Link>
-          <Link href="/store" className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-6 rounded-lg text-center transition duration-300 ease-in-out transform hover:scale-105">
-            Store Management Page
-          </Link>
-        </div>
-        <div className="mt-12 text-center">
-          <Image
-            src="/thirdweb.svg"
-            alt="Thirdweb Logo"
-            width={100}
-            height={100}
-            className="mx-auto mb-4"
-          />
-          <p className="text-gray-600">Powered by Thirdweb</p>
-        </div>
-      </div>
-    </main>
-  );
+    return (
+        <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+            <div className="bg-white p-8 rounded-xl shadow-2xl max-w-2xl w-full">
+                <h1 className="text-4xl font-bold mb-6 text-center text-gray-800">OpenBooking</h1>
+                <div className="flex flex-col space-y-6">
+                    <Link href="/customer" className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-6 rounded-lg text-center transition duration-300 ease-in-out transform hover:scale-105">
+                        Customer Page
+                    </Link>
+                    <Link href="/store" className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-6 rounded-lg text-center transition duration-300 ease-in-out transform hover:scale-105">
+                        Store Management Page
+                    </Link>
+                </div>
+                <div className="mt-12 text-center">
+                    <Image
+                        src="/thirdweb.svg"
+                        alt="Thirdweb Logo"
+                        width={100}
+                        height={100}
+                        className="mx-auto mb-4"
+                    />
+                    <p className="text-gray-600">Powered by Thirdweb</p>
+                </div>
+            </div>
+        </main>
+    );
 }
\ No newline at end of file
diff --git a/src/app/store/page.tsx b/src/app/store/page.tsx
index 59f35f5..313f3e8 100644
--- a/src/app/store/page.tsx
+++ b/src/app/store/page.tsx
@@ -35,7 +35,17 @@ export default function StorePage() {
 
   return (
     <main className="p-8 container mx-auto relative">
-      <h1 className="text-3xl font-bold mb-8">Store Page</h1>
+      <div className="absolute top-4 right-4">
+        <ConnectButton
+          client={client}
+          appMetadata={{
+            name: "Example App",
+            url: "https://example.com",
+          }}
+        />
+      </div>
+
+      <h1 className="text-3xl font-bold mb-8">ストアページ</h1>
 
       <div className="mb-8 p-4 bg-blue-50 rounded-lg shadow-sm">
         <h2 className="text-lg font-semibold text-blue-800 mb-2">
@@ -55,57 +65,43 @@ export default function StorePage() {
         )}
       </div>
 
-      <div className="mb-8">
-        <ConnectButton
-          client={client}
-          appMetadata={{
-            name: "Example App",
-            url: "https://example.com",
-          }}
-        />
-      </div>
-
       <div className="mb-8">
         <div className="tabs flex justify-around border-b-2">
           <button
             onClick={() => setActiveTab("storeList")}
-            className={`py-3 px-6 focus:outline-none text-lg ${
-              activeTab === "storeList"
-                ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
+            className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "storeList"
+              ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
+              : "text-gray-500 hover:text-gray-700"
+              }`}
           >
             List of owned stores
           </button>
           <button
             onClick={() => setActiveTab("newService")}
             disabled={!selectedStore}
-            className={`py-3 px-6 focus:outline-none text-lg ${
-              activeTab === "newService"
-                ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
+            className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "newService"
+              ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
+              : "text-gray-500 hover:text-gray-700"
+              }`}
           >
             Create new Services
           </button>
           <button
             onClick={() => setActiveTab("serviceList")}
             disabled={!selectedStore}
-            className={`py-3 px-6 focus:outline-none text-lg ${
-              activeTab === "serviceList"
-                ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
+            className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "serviceList"
+              ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
+              : "text-gray-500 hover:text-gray-700"
+              }`}
           >
             List of Services
           </button>
           <button
             onClick={() => setActiveTab("loyaltyProgram")}
-            className={`py-3 px-6 focus:outline-none text-lg ${
-              activeTab === "loyaltyProgram"
-                ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
+            className={`py-3 px-6 focus:outline-none text-lg ${activeTab === "loyaltyProgram"
+              ? "border-b-4 border-blue-500 text-blue-500 font-semibold"
+              : "text-gray-500 hover:text-gray-700"
+              }`}
           >
             Loyalty Program Setting
           </button>
diff --git a/src/components/QRCodeGenerator.tsx b/src/components/QRCodeGenerator.tsx
index f9082b4..791880b 100644
--- a/src/components/QRCodeGenerator.tsx
+++ b/src/components/QRCodeGenerator.tsx
@@ -1,8 +1,15 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import QRCode from "qrcode.react";
 
 const QRCodeGenerator: React.FC<{ reservationId: bigint | null }> = ({ reservationId }) => {
     const [showQR, setShowQR] = useState(false);
+    const [baseUrl, setBaseUrl] = useState(process.env.NEXT_PUBLIC_VERCEL_URL || process.env.NEXT_PUBLIC_BASE_URL);
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setBaseUrl(`${window.location.protocol}//${window.location.host}`);
+        }
+    }, []);
 
     return (
         <div>
@@ -22,7 +29,7 @@ const QRCodeGenerator: React.FC<{ reservationId: bigint | null }> = ({ reservati
                         {
                             (() => {
                                 if (reservationId != null) {
-                                    let url = `http://localhost:3000/customer/confirm-service?id=${reservationId.toString()}`
+                                    let url = `${baseUrl}/customer/checkin?id=${reservationId.toString()}`
                                     return (
                                         <div className="mt-4 flex flex-col items-center">
                                             <a href={url} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-600 hover:underline mb-2">