diff --git a/app/(payment)/pay/page.tsx b/app/(payment)/pay/page.tsx
new file mode 100644
index 0000000..3652ef0
--- /dev/null
+++ b/app/(payment)/pay/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function page() {
+  return (
+    <div>page</div>
+  )
+}
+
+export default page
\ No newline at end of file
diff --git a/app/account/page.tsx b/app/account/page.tsx
index 393a3c0..e41dc5d 100644
--- a/app/account/page.tsx
+++ b/app/account/page.tsx
@@ -1,19 +1,45 @@
-import { DarkModeToggle} from "@/components/ThemeToggle";
+import { DarkModeToggle } from "@/components/ThemeToggle";
 import SignOutButton from "@/components/signOutButton";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import React from "react";
-import {getKindeServerSession} from "@kinde-oss/kinde-auth-nextjs/server";
+import Image from "next/image";
+import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
+import { Label } from "@/components/ui/label";
+import { db } from "@/lib/db";
+import { Lightbulb } from "lucide-react";
 
 export default async function account() {
-  const {getUser} = getKindeServerSession();
+  const { getUser } = getKindeServerSession();
   const user = await getUser();
+  const dbUser = await db.user.findFirst({
+    where: {
+      id: user.id as string,
+    },
+})
+
+if (!dbUser) {
+    // create user in db
+    await db.user.create({
+      data: {
+        id: user.id as string,
+        email: user.email as string,
+      },
+    })
+}
   return (
     <div className="relative flex min-h-full flex-col gap-3 bg-neutral-100 p-3 dark:bg-neutral-800">
       <div className="flex h-full min-h-full items-center justify-center rounded-md bg-white p-3 dark:bg-neutral-900">
         {user ? (
           <div className="flex flex-col gap-3 items-center justify-center">
             Hi {user.given_name}
+            <Image
+              className="rounded-xl"
+              src={user.picture as string}
+              alt="Profile Image"
+              width={100}
+              height={100}
+            />
           </div>
         ) : (
           <div className="flex flex-col">You are not Logged In</div>
@@ -27,6 +53,11 @@ export default async function account() {
           <div className="flex w-full justify-center">
             <SignOutButton />
           </div>
+          <div className="flex w-full justify-center">
+            <div className="flex h-10 w-2/3 flex-row items-center justify-center rounded-md border-[1px] border-black bg-white px-2 shadow-2xl dark:bg-black lg:w-48">
+              <span className="flex flex-row items-center justify-center">Balance: {dbUser?.balance} <Lightbulb size={24} strokeWidth={2} /></span>
+            </div>
+          </div>
         </div>
       ) : (
         <div className="flex h-full min-h-full items-center justify-center rounded-md bg-white p-3 dark:bg-neutral-900">
@@ -37,4 +68,4 @@ export default async function account() {
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/api/auth/[kindeAuth]/route.js b/app/api/auth/[kindeAuth]/route.js
deleted file mode 100644
index 7db2fbe..0000000
--- a/app/api/auth/[kindeAuth]/route.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {handleAuth} from "@kinde-oss/kinde-auth-nextjs/server";
-
-export async function GET(request, {params}) {
-	const endpoint = params.kindeAuth;
-	return handleAuth(request, endpoint);
-}
\ No newline at end of file
diff --git a/app/api/auth/[kindeAuth]/route.ts b/app/api/auth/[kindeAuth]/route.ts
new file mode 100644
index 0000000..411d0b6
--- /dev/null
+++ b/app/api/auth/[kindeAuth]/route.ts
@@ -0,0 +1,10 @@
+import { handleAuth } from '@kinde-oss/kinde-auth-nextjs/server'
+import { NextRequest } from 'next/server'
+
+export async function GET(
+  request: NextRequest,
+  { params }: any
+) {
+  const endpoint = params.kindeAuth
+  return handleAuth(request, endpoint)
+}
\ No newline at end of file
diff --git a/app/api/shopping/balance/route.ts b/app/api/shopping/balance/route.ts
new file mode 100644
index 0000000..8181964
--- /dev/null
+++ b/app/api/shopping/balance/route.ts
@@ -0,0 +1,32 @@
+import {NextResponse} from "next/server";
+import {getKindeServerSession} from "@kinde-oss/kinde-auth-nextjs/server";
+import { db } from "@/lib/db";
+
+export async function GET() {
+    const {getUser, isAuthenticated} = getKindeServerSession();
+
+    if (await !isAuthenticated()) {
+        return new Response("Unauthorized", {status: 401});
+    }
+    const user = await getUser();
+    const dbUser = await db.user.findFirst({
+        where: {
+          id: user.id as string,
+        },
+    })
+  
+    if (!dbUser) {
+        // create user in db
+        const dbUser = await db.user.create({
+          data: {
+            id: user.id as string,
+            email: user.email as string,
+          },
+        })
+    }
+
+    
+    const data = {message: "Hello User", id: user.id, balance: dbUser?.balance};
+
+    return NextResponse.json({data});
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index f6db098..2d0c417 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -30,7 +30,7 @@ export default async function RootLayout({
           defaultTheme="light"
           disableTransitionOnChange
         >
-          <main className="h-full flex-[1] overflow-scroll">{children}</main>
+          <main className="h-full flex-[1] overflow-scroll bg-neutral-100 dark:bg-neutral-800">{children}</main>
           <footer className="grid h-16 w-full grid-cols-3 grid-rows-1 dark:bg-neutral-900 bg-white shadow-2xl">
             <Link
               href="/"
diff --git a/middleware.js b/middleware.js
deleted file mode 100644
index ebc1c79..0000000
--- a/middleware.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {authMiddleware} from "@kinde-oss/kinde-auth-nextjs/server";
-
-export const config = {
-    matcher: [
-        /*
-         * Match all request paths except for the ones starting with:
-         * - api (API routes)
-         * - _next/static (static files)
-         * - _next/image (image optimization files)
-         * - favicon.ico (favicon file)
-         */
-
-    ]
-};
-
-export default authMiddleware;
\ No newline at end of file
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..b1e17ff
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,7 @@
+import { authMiddleware } from '@kinde-oss/kinde-auth-nextjs/server'
+
+export const config = {
+  matcher: ['/dashboard/:path*', '/auth-callback'],
+}
+
+export default authMiddleware
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index e1b8cad..7b38c2b 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -10,7 +10,7 @@ model User {
   id            String    @id @unique
   name          String?
   email         String?   @unique
-  image         String?
+  balance       Int? @default(0)
 
   @@map("users")
 }
\ No newline at end of file