diff --git a/src/app/customer/page.tsx b/src/app/customer/page.tsx
index 3ddbaa7..1c76416 100644
--- a/src/app/customer/page.tsx
+++ b/src/app/customer/page.tsx
@@ -22,67 +22,74 @@ export default function CustomerPage() {
   }, [selectedStore]);
 
   return (
-    <main className="p-4 container mx-auto relative">
-      <div className="absolute top-4 right-4">
-        <MyConnectButton />
-      </div>
+    <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex flex-col items-center justify-center p-8">
+      <div className="bg-white p-8 rounded-xl shadow-2xl max-w-6xl w-full">
+        <div className="absolute top-4 right-4">
+          <MyConnectButton />
+        </div>
 
-      <h1 className="text-2xl font-bold mb-4">Customer Page</h1>
-      <h2 className="text-xl font-semibold mb-6">Select a store</h2>
+        <h1 className="text-3xl font-bold mb-8 text-gray-800">Customer Page</h1>
+        <h2 className="text-xl font-semibold mb-6 text-gray-700">Select a store</h2>
 
-      <StoreSelector
-        selectedStore={selectedStore}
-        setSelectedStore={setSelectedStore}
-      />
-      {selectedStore !== null && (
-        <TimeSlotSelector
-          storeId={selectedStore}
-          onSelectTimeSlot={(reservationId: number) => {
-            setSelectedReservationId(reservationId);
-          }}
+        <StoreSelector
+          selectedStore={selectedStore}
+          setSelectedStore={setSelectedStore}
         />
-      )}
-      {selectedStore !== null && selectedReservationId !== null && (
-        <TransactionButton
-          transaction={() => {
-            // TODO: replace with actual reservation ID
-            const tx = bookReservation(selectedReservationId);
-            return tx;
-          }}
-          onTransactionSent={(result) => {
-            console.log("Transaction submitted", result.transactionHash);
-          }}
-          onTransactionConfirmed={(receipt) => {
-            console.log("Transaction confirmed", receipt.transactionHash);
-            window.location.reload();
-          }}
-          onError={(error) => {
-            console.error("Transaction error", error);
-          }}
-        >
-          Make a Reservatinon
-        </TransactionButton>
-      )}
-      <div className="mt-8 flex justify-center">
-        <Link
-          href="/store"
-          className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 flex items-center"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-5 w-5 mr-2"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fillRule="evenodd"
-              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-              clipRule="evenodd"
+        {selectedStore !== null && (
+          <div className="mb-8">
+            <h2 className="text-xl font-semibold mb-4 text-gray-700">Select a Time Slot</h2>
+            <TimeSlotSelector
+              storeId={selectedStore}
+              onSelectTimeSlot={(reservationId: number) => {
+                setSelectedReservationId(reservationId);
+              }}
             />
-          </svg>
-          To Store Page
-        </Link>
+          </div>
+        )}
+        {selectedStore !== null && selectedReservationId !== null && (
+          <div className="mb-8 flex justify-center">
+            <TransactionButton
+              transaction={() => {
+                // TODO: replace with actual reservation ID
+                const tx = bookReservation(selectedReservationId);
+                return tx;
+              }}
+              onTransactionSent={(result) => {
+                console.log("Transaction submitted", result.transactionHash);
+              }}
+              onTransactionConfirmed={(receipt) => {
+                console.log("Transaction confirmed", receipt.transactionHash);
+                window.location.reload();
+              }}
+              onError={(error) => {
+                console.error("Transaction error", error);
+              }}
+            >
+              Make a Reservatinon
+            </TransactionButton>
+          </div>
+        )}
+        <div className="mt-12 flex justify-center">
+          <Link
+            href="/store"
+            className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-8 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 flex items-center text-lg"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6 mr-3"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+            To Store Page
+          </Link>
+        </div>
       </div>
     </main>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/store/page.tsx b/src/app/store/page.tsx
index 34f98eb..7c033ab 100644
--- a/src/app/store/page.tsx
+++ b/src/app/store/page.tsx
@@ -34,96 +34,98 @@ export default function StorePage() {
   };
 
   return (
-    <main className="p-8 container mx-auto relative">
-      <div className="absolute top-4 right-4">
-        <MyConnectButton />
-      </div>
+    <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex flex-col items-center justify-center p-8">
+      <div className="bg-white p-8 rounded-xl shadow-2xl max-w-6xl w-full">
+        <div className="absolute top-4 right-4">
+          <MyConnectButton />
+        </div>
 
-      <h1 className="text-3xl font-bold mb-8">Store Page</h1>
+        <h1 className="text-3xl font-bold mb-8 text-gray-800">Store Management Page</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">
-          Store of choice
-        </h2>
-        {selectedStore ? (
-          <>
-            <p className="text-blue-600 text-base mb-1">
-              Store Name: {selectedStore.storeName}
-            </p>
-            <p className="text-blue-600 text-base">
-              Store ID: {selectedStore.storeId.toString()}
-            </p>
-          </>
-        ) : (
-          <p className="text-gray-600 text-base">Store is not selected.</p>
-        )}
-      </div>
+        <div className="mb-8 p-4 bg-blue-50 rounded-lg shadow-sm">
+          <h2 className="text-lg font-semibold text-blue-800 mb-2">
+            Selected Store
+          </h2>
+          {selectedStore ? (
+            <>
+              <p className="text-blue-600 text-base mb-1">
+                Store Name: {selectedStore.storeName}
+              </p>
+              <p className="text-blue-600 text-base">
+                Store ID: {selectedStore.storeId.toString()}
+              </p>
+            </>
+          ) : (
+            <p className="text-gray-600 text-base">No store selected.</p>
+          )}
+        </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"
-              }`}
-          >
-            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"
-              }`}
-          >
-            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"
-              }`}
-          >
-            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"
-              }`}
-          >
-            Loyalty Program Setting
-          </button>
+        <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"
+                }`}
+            >
+              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"
+                }`}
+            >
+              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"
+                }`}
+            >
+              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"
+                }`}
+            >
+              Loyalty Program Setting
+            </button>
+          </div>
         </div>
-      </div>
 
-      <div className="tab-content mt-8">{renderTabContent()}</div>
+        <div className="tab-content mt-8">{renderTabContent()}</div>
 
-      <div className="mt-12 flex justify-center">
-        <Link
-          href="/customer"
-          className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-8 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 flex items-center text-lg"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-6 w-6 mr-3"
-            viewBox="0 0 20 20"
-            fill="currentColor"
+        <div className="mt-12 flex justify-center">
+          <Link
+            href="/customer"
+            className="bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-8 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 flex items-center text-lg"
           >
-            <path
-              fillRule="evenodd"
-              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            />
-          </svg>
-          To Customer Page
-        </Link>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6 mr-3"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+            To Customer Page
+          </Link>
+        </div>
       </div>
     </main>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/StoreSelector.tsx b/src/components/StoreSelector.tsx
index 5cb3a5f..73881e9 100644
--- a/src/components/StoreSelector.tsx
+++ b/src/components/StoreSelector.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import { Store } from "@/utils/type";
 import { useActiveAccount } from "thirdweb/react";
 import { listReservations, listStores } from "@/utils/store/management";
-import { getContract, readContract } from "thirdweb";
+import { ZERO_ADDRESS, getContract, readContract } from "thirdweb";
 import { chain, client, erc20Abi, loyaltyLogicContractAbi } from "@/app/client";
 
 export default function StoreSelector({
@@ -29,7 +29,7 @@ export default function StoreSelector({
           store.maxFee = fees.length ? Math.max(...fees) : 0;
           store.minFee = fees.length ? Math.min(...fees) : 0;
 
-          if (store.loyaltyLogicContractAddress !== "0x0000000000000000000000000000000000000000") {
+          if (store.loyaltyLogicContractAddress !== ZERO_ADDRESS) {
             // TODO: Do this in listStores
             // get loyalty logic contract address
             const loyaltyLogicContract = getContract({