diff --git a/.env b/.env
index 2bb19b6..b4769f9 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
 VITE_SUPABASE_URL=http://127.0.0.1:54321
-VITE_SUPABASE_ANON_KEY=
+VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index e4b276f..0356e67 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -18,6 +18,7 @@ import { Route as MapIndexImport } from './routes/map/index'
 import { Route as EventsIndexImport } from './routes/events/index'
 import { Route as DinnerIndexImport } from './routes/dinner/index'
 import { Route as CalendarIndexImport } from './routes/calendar/index'
+import { Route as SalesAddsellImport } from './routes/sales/add_sell'
 import { Route as HomeInfoCardImport } from './routes/home/infoCard'
 import { Route as EventsCreateImport } from './routes/events/create'
 import { Route as EventsEventIdImport } from './routes/events/$eventId'
@@ -59,6 +60,11 @@ const CalendarIndexRoute = CalendarIndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const SalesAddsellRoute = SalesAddsellImport.update({
+  path: '/sales/add_sell',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const HomeInfoCardRoute = HomeInfoCardImport.update({
   path: '/home/infoCard',
   getParentRoute: () => rootRoute,
@@ -113,6 +119,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof HomeInfoCardImport
       parentRoute: typeof rootRoute
     }
+    '/sales/add_sell': {
+      id: '/sales/add_sell'
+      path: '/sales/add_sell'
+      fullPath: '/sales/add_sell'
+      preLoaderRoute: typeof SalesAddsellImport
+      parentRoute: typeof rootRoute
+    }
     '/calendar/': {
       id: '/calendar/'
       path: '/calendar'
@@ -159,6 +172,7 @@ export interface FileRoutesByFullPath {
   '/events/$eventId': typeof EventsEventIdRoute
   '/events/create': typeof EventsCreateRoute
   '/home/infoCard': typeof HomeInfoCardRoute
+  '/sales/add_sell': typeof SalesAddsellRoute
   '/calendar': typeof CalendarIndexRoute
   '/dinner': typeof DinnerIndexRoute
   '/events': typeof EventsIndexRoute
@@ -172,6 +186,7 @@ export interface FileRoutesByTo {
   '/events/$eventId': typeof EventsEventIdRoute
   '/events/create': typeof EventsCreateRoute
   '/home/infoCard': typeof HomeInfoCardRoute
+  '/sales/add_sell': typeof SalesAddsellRoute
   '/calendar': typeof CalendarIndexRoute
   '/dinner': typeof DinnerIndexRoute
   '/events': typeof EventsIndexRoute
@@ -186,6 +201,7 @@ export interface FileRoutesById {
   '/events/$eventId': typeof EventsEventIdRoute
   '/events/create': typeof EventsCreateRoute
   '/home/infoCard': typeof HomeInfoCardRoute
+  '/sales/add_sell': typeof SalesAddsellRoute
   '/calendar/': typeof CalendarIndexRoute
   '/dinner/': typeof DinnerIndexRoute
   '/events/': typeof EventsIndexRoute
@@ -201,6 +217,7 @@ export interface FileRouteTypes {
     | '/events/$eventId'
     | '/events/create'
     | '/home/infoCard'
+    | '/sales/add_sell'
     | '/calendar'
     | '/dinner'
     | '/events'
@@ -213,6 +230,7 @@ export interface FileRouteTypes {
     | '/events/$eventId'
     | '/events/create'
     | '/home/infoCard'
+    | '/sales/add_sell'
     | '/calendar'
     | '/dinner'
     | '/events'
@@ -225,6 +243,7 @@ export interface FileRouteTypes {
     | '/events/$eventId'
     | '/events/create'
     | '/home/infoCard'
+    | '/sales/add_sell'
     | '/calendar/'
     | '/dinner/'
     | '/events/'
@@ -239,6 +258,7 @@ export interface RootRouteChildren {
   EventsEventIdRoute: typeof EventsEventIdRoute
   EventsCreateRoute: typeof EventsCreateRoute
   HomeInfoCardRoute: typeof HomeInfoCardRoute
+  SalesAddsellRoute: typeof SalesAddsellRoute
   CalendarIndexRoute: typeof CalendarIndexRoute
   DinnerIndexRoute: typeof DinnerIndexRoute
   EventsIndexRoute: typeof EventsIndexRoute
@@ -252,6 +272,7 @@ const rootRouteChildren: RootRouteChildren = {
   EventsEventIdRoute: EventsEventIdRoute,
   EventsCreateRoute: EventsCreateRoute,
   HomeInfoCardRoute: HomeInfoCardRoute,
+  SalesAddsellRoute: SalesAddsellRoute,
   CalendarIndexRoute: CalendarIndexRoute,
   DinnerIndexRoute: DinnerIndexRoute,
   EventsIndexRoute: EventsIndexRoute,
@@ -276,6 +297,7 @@ export const routeTree = rootRoute
         "/events/$eventId",
         "/events/create",
         "/home/infoCard",
+        "/sales/add_sell",
         "/calendar/",
         "/dinner/",
         "/events/",
@@ -298,6 +320,9 @@ export const routeTree = rootRoute
     "/home/infoCard": {
       "filePath": "home/infoCard.tsx"
     },
+    "/sales/add_sell": {
+      "filePath": "sales/add_sell.tsx"
+    },
     "/calendar/": {
       "filePath": "calendar/index.tsx"
     },
diff --git a/src/routes/sales/add_sell.tsx b/src/routes/sales/add_sell.tsx
new file mode 100644
index 0000000..26cf916
--- /dev/null
+++ b/src/routes/sales/add_sell.tsx
@@ -0,0 +1,132 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { Header } from '../../components';
+import { BasicIcon } from '../../components/icons/BasicIcon';
+import { AuthGuard } from '../../utils/auth';
+import { supabase } from '../../utils/supabase';
+
+const styles = {
+  container: {
+    flex: 1,
+    backgroundColor: '#333',
+  },
+  searchSection: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: 4,
+    backgroundColor: '#333',
+  },
+  searchInput: {
+    flex: 1,
+    marginLeft: 8,
+    marginRight: 8,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 5,
+    padding: 4,
+  },
+  categories: {
+    display: 'inline',
+    padding: 5,
+  },
+  categoryButton: {
+    paddingLeft: 8,
+    paddingRight: 8,
+    margin: 2,
+    backgroundColor: '#888',
+    borderRadius: 12,
+    color: 'black',
+  },
+  grid: {
+    padding: 10,
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: 10,
+  },
+  card: {
+    width: '50%',
+    marginBottom: 10,
+    padding: 10,
+    backgroundColor: '#555',
+    borderRadius: 10,
+    color: 'white',
+  },
+  productName: {
+    fontSize: 16,
+    color: 'white',
+  },
+  productInfo: {
+    fontSize: 14,
+    color: 'gray',
+  },
+  icon: {
+    alignSelf: 'flex-end',
+  },
+  fab: {
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+    backgroundColor: '#6200ee',
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+};
+  
+export const Route = createFileRoute('/sales/add_sell')({
+    beforeLoad: AuthGuard,
+    loader: async () => {
+      const { data, error } = await supabase
+        .from('sales')
+        .select('*')
+      if (error !== null) {
+        throw error
+      }
+  
+      return { sales: data }
+    },
+    component: EventSale
+})
+function EventSale() {
+    const { sales } = Route.useLoaderData()
+    return (
+      <>
+        <Header />
+        <div style={styles.container}>
+          <div style={styles.searchSection}>
+            <BasicIcon size={24}>
+              <circle cx="12" cy="12" r="14" />
+            </BasicIcon>
+              <input style={styles.searchInput} placeholder="搜尋" />
+            <BasicIcon size={24}>
+              <circle cx="12" cy="12" r="14" />
+            </BasicIcon>
+          </div>
+          <div style={styles.categories}>
+            <button style={styles.categoryButton}>全部</button>
+            <button style={styles.categoryButton}>五金</button>
+            <button style={styles.categoryButton}>飲料</button>
+            <button style={styles.categoryButton}>贈品</button>
+          </div>
+          <div style={styles.grid}>
+            {
+              sales.map((p) => (
+                <div key={p.id} style={styles.card}>
+                  <h1 style={styles.productName}>{p.product}</h1>
+                  <p style={styles.productInfo}>價格: {p.price} 元</p>
+                </div>
+              ))
+            }{
+              sales.map((p) => (
+                <div key={p.id} style={styles.card}>
+                  <h1 style={styles.productName}>{p.product}</h1>
+                  <p style={styles.productInfo}>價格: {p.price} 元</p>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </>
+    )
+  }
+  
\ No newline at end of file