diff --git a/README.md b/README.md
index fae73af..8dee7b0 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,7 @@ pnpm wrangler d1 execute dev-certifine --local --file=db/schema/schema.sql
 pnpm nx serve api-auth
 
 VITE_GOOGLE_REDIRECT_URI=http://localhost:8788/api/auth/google/callback pnpm nx build web
+$Env:VITE_GOOGLE_REDIRECT_URI=http://localhost:8788/api/auth/google/callback pnpm nx build web
 pnpm wrangler pages dev dist/apps/web/deploy
 ```
 
diff --git a/apps/api/auth/src/main.ts b/apps/api/auth/src/main.ts
index 1f7f6dd..981471b 100644
--- a/apps/api/auth/src/main.ts
+++ b/apps/api/auth/src/main.ts
@@ -1,5 +1,5 @@
 import { Hono } from 'hono';
-import { D1Database } from '@cloudflare/workers-types';
+import { D1Database, R2Bucket } from '@cloudflare/workers-types';
 import { typeid } from 'typeid-js';
 
 interface ResponseWrapper<T, E> {
@@ -7,16 +7,17 @@ interface ResponseWrapper<T, E> {
   error: E;
 }
 
-const response = <T, E> (data: T, error ?: E): ResponseWrapper<T, E> => {
+const response = <T, E>(data: T, error?: E): ResponseWrapper<T, E> => {
   return {
     data,
-    error
+    error,
   };
 };
 
 type Bindings = {
   DB: D1Database;
-}
+  BUCKET: R2Bucket;
+};
 
 const app = new Hono<{ Bindings: Bindings }>();
 
@@ -45,7 +46,7 @@ app.get('/users', async (c) => {
       op.name 'provider',
       oa.created_at 'createdAt',
       oa.updated_at 'updatedAt'
-    FROM oauth_account as oa      
+    FROM oauth_account as oa
     JOIN user as u ON (oa.user_id = u.id)
     JOIN oauth_provider as op ON (oa.oauth_provider_id = op.id)
     WHERE u.id = ?1 AND oa.deleted_at IS NULL
@@ -74,11 +75,7 @@ interface User {
   deleted_at: number;
 }
 
-type CreateUserParams = Pick<User,
-  | 'username'
-  | 'firstName'
-  | 'lastName'
->;
+type CreateUserParams = Pick<User, 'username' | 'firstName' | 'lastName'>;
 
 interface CreateOAuthParams {
   oaid: string;
@@ -105,10 +102,7 @@ app.post('/users', async (c) => {
 
   const id = typeid('user').toString();
 
-  const results = await c.env.DB.batch([
-    createUserStatement.bind(id, body.username, body.firstName, body.lastName, Date.now()),
-    createOAuthAccountStatement.bind(body.oaid, id, body.provider, body.email, Date.now()),
-  ]);
+  const results = await c.env.DB.batch([createUserStatement.bind(id, body.username, body.firstName, body.lastName, Date.now()), createOAuthAccountStatement.bind(body.oaid, id, body.provider, body.email, Date.now())]);
 
   return c.json(response(results));
 });
@@ -121,9 +115,7 @@ interface OAuthProvider {
   deleted_at: number;
 }
 
-type CreateOAuthProviderParams = Pick<OAuthProvider,
-  | 'name'
->;
+type CreateOAuthProviderParams = Pick<OAuthProvider, 'name'>;
 
 app.get('/providers', async (c) => {
   const findOAuthProviderStatement = c.env.DB.prepare(`
@@ -155,4 +147,182 @@ app.post('/providers', async (c) => {
   return c.json(response(result));
 });
 
+interface Template {
+  id: string;
+  userId: string;
+  name: string;
+  createdAt: number;
+  updatedAt: number;
+  deletedAt: number;
+}
+
+type CreateTemplateParams = Pick<Template, 'name' | 'userId'>;
+
+type FindTemplateParams = Pick<Template, 'userId'>;
+
+interface TemplateDataParams {
+  data: JSON;
+}
+
+type UpdateTemplateParams = Pick<Template, 'name'>;
+
+type CreateTemplateRequest = CreateTemplateParams & TemplateDataParams;
+type UpdateTemplateRequest = UpdateTemplateParams & TemplateDataParams;
+
+app.post('/templates', async (c) => {
+  const body = await c.req.json<CreateTemplateRequest>();
+
+  const id = typeid('tmpl').toString();
+
+  const key = ['templates', body.userId, id].join('/');
+
+  const createTemplateStatement = c.env.DB.prepare(`
+    INSERT INTO template (id, user_id, name, created_at)
+    VALUES (?1, ?2, ?3, ?4)
+  `);
+
+  try {
+    await c.env.BUCKET.put(key, JSON.stringify(body.data));
+
+    const { results } = await createTemplateStatement.bind(id, body.userId, body.name, Date.now()).run();
+
+    return c.json(response(results));
+  } catch (e) {
+    return c.json(response(null, e));
+  }
+});
+
+app.get('/templates/:userId', async (c) => {
+  const { userId } = c.req.param() as FindTemplateParams;
+
+  const getTemplateStatement = c.env.DB.prepare(`
+    SELECT
+      t.id,
+      t.user_id 'userId',
+      t.key,
+      t.created_at 'createdAt',
+      t.updated_at 'updatedAt'
+    FROM template as t
+    WHERE t.user_id = ?1 AND t.deleted_at NOT NULL
+  `);
+
+  const { results } = await getTemplateStatement.bind(userId).all<Template>();
+
+  results.map((template) => {
+    template.id;
+  });
+
+  return c.json(response(results));
+});
+
+app.get('/templates/:userId/:id', async (c) => {
+  const { userId, id } = c.req.param();
+  const key = ['templates', userId, id].join('/');
+
+  try {
+    const objectRef = await c.env.BUCKET.get(key);
+    const data = objectRef.json();
+
+    return c.json(response(data));
+  } catch (e) {
+    return c.json(response(null, e));
+  }
+});
+
+app.put('/templates/:userId/:id', async (c) => {
+  const { userId, id } = c.req.param();
+  const { data, name } = (await c.req.json()) as UpdateTemplateRequest;
+
+  const key = ['templates', userId, id].join('/');
+
+  const updateTemplateStatement = c.env.DB.prepare(`
+    UPDATE template
+    SET name = ?1
+    WHERE id = ?2 AND deleted_at NOT NULL
+  `);
+
+  try {
+    await c.env.BUCKET.put(key, JSON.stringify(data));
+
+    const { results } = await updateTemplateStatement.bind(name, id).run();
+
+    return c.json(response(results));
+  } catch (e) {
+    return c.json(response(null, e));
+  }
+});
+
+interface Project {
+  id: string;
+  userId: string;
+  templateId: string;
+  name: string;
+  createdAt: number;
+  updatedAt: number;
+  deletedAt: number;
+}
+
+type CreateProjectRequest = Pick<Project, 'userId' | 'templateId' | 'name'>;
+
+type FindProjectRequest = Pick<Project, 'userId'>;
+
+type UpdateProjectRequest = Pick<Project, 'id' | 'name'>;
+
+app.post('/projects', async (c) => {
+  const body = await c.req.json<CreateProjectRequest>();
+
+  const createProjectStatement = c.env.DB.prepare(`
+    INSERT INTO project (id, user_id, template_id, name, created_at)
+    VALUES (?1, ?2, ?3, ?4, ?5)
+  `);
+
+  const id = typeid('proj').toString();
+
+  const result = createProjectStatement.bind(id, body.userId, body.templateId, body.name, Date.now()).run();
+
+  return c.json(response(result));
+});
+
+app.get('/projects', async (c) => {
+  const { userId } = c.req.query() as FindProjectRequest;
+
+  const getProjectStatement = c.env.DB.prepare(`
+    SELECT
+      p.id,
+      p.user_id 'userId',
+      p.template_id 'templateId',
+      p.created_at 'createdAt',
+      p.updated_at 'updatedAt'
+    FROM project as p
+    WHERE p.user_id = ?1 AND p.deleted_at NOT NULL
+  `);
+
+  const { results } = await getProjectStatement.bind(userId).all<Project>();
+
+  return c.json(response(results));
+});
+
+app.patch('/projects', async (c) => {
+  const body = await c.req.json<UpdateProjectRequest>();
+
+  const updateProjectStatement = c.env.DB.prepare(`
+    UPDATE project
+    SET name = ?1
+    WHERE id = ?2 AND deleted_at NOT NULL
+  `);
+
+  const { results } = await updateProjectStatement.bind(body.name, body.id).run();
+
+  return c.json(response(results));
+});
+
+// interface Generate {
+//   id: string;
+//   projectId: string;
+//   key: string;
+//   args: string;
+//   createdAt: number;
+//   deletedAt: number;
+// }
+
 export default app;
diff --git a/apps/web/src/root.tsx b/apps/web/src/root.tsx
index cf32695..5414b76 100644
--- a/apps/web/src/root.tsx
+++ b/apps/web/src/root.tsx
@@ -1,12 +1,18 @@
-import { component$, useServerData, useStyles$ } from '@builder.io/qwik';
+import { component$, useServerData, useStyles$, useVisibleTask$ } from '@builder.io/qwik';
 import { RouterHead } from './components/base';
 
 import styles from '@producktivity/ui/style.css?inline';
+import { initFlowbite } from 'flowbite';
+
 import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
 
 export default component$(() => {
   useStyles$(styles);
 
+  useVisibleTask$(() => {
+    initFlowbite();
+  });
+
   const nonce = useServerData<string | undefined>('nonce');
 
   return (
diff --git a/apps/web/src/routes/dashboard/[slug]/index.tsx b/apps/web/src/routes/dashboard/[slug]/index.tsx
index 6474764..09b43b5 100644
--- a/apps/web/src/routes/dashboard/[slug]/index.tsx
+++ b/apps/web/src/routes/dashboard/[slug]/index.tsx
@@ -1,9 +1,16 @@
 import { Box } from '@producktivity/ui';
-import { DashboardTab } from '../components/dashboard-tab';
-import { ProjectTab } from '../components/project-tab';
+import { DashboardTab } from '../components/dashboard/dashboard-tab';
+import { ProjectTab } from '../components/project/project-tab';
 import { TemplateTab } from '../components/template-tab';
-import { useLocation } from '@builder.io/qwik-city';
+import { routeLoader$, useLocation } from '@builder.io/qwik-city';
 import { component$ } from '@builder.io/qwik';
+import { ProjectFormProps } from '../components/project/create-project-modal';
+import { type InitialValues } from '@modular-forms/qwik';
+
+export const useFormLoader = routeLoader$<InitialValues<ProjectFormProps>>(() => ({
+  projectName: '',
+  templateId: '',
+}));
 
 export default component$(() => {
   const loc = useLocation();
diff --git a/apps/web/src/routes/dashboard/[slug]/layout.tsx b/apps/web/src/routes/dashboard/[slug]/layout.tsx
index b965e46..9da29a7 100644
--- a/apps/web/src/routes/dashboard/[slug]/layout.tsx
+++ b/apps/web/src/routes/dashboard/[slug]/layout.tsx
@@ -1,10 +1,11 @@
-import { component$, useStore, $, Slot } from '@builder.io/qwik';
+import { component$, useStore, $, Slot, useSignal, Fragment } from '@builder.io/qwik';
 import { DocumentHead, useNavigate } from '@builder.io/qwik-city';
 import { Box, Button, Text } from '@producktivity/ui';
 import { generateSeoConfig } from '../../../configs/seo';
 import { LuArrowUpCircle, LuPlusCircle } from '@qwikest/icons/lucide';
 import { PlanBadge } from '../components/plan-badge';
 import { useLocation } from '@builder.io/qwik-city';
+import { CreateProjectModal } from '../components/project/create-project-modal';
 
 interface DashboardTabsProps {
   id: number;
@@ -19,6 +20,7 @@ const dashboardTabs: DashboardTabsProps[] = [
 ];
 
 export default component$(() => {
+  const showSig = useSignal(false);
   const loc = useLocation();
   const currentActivePath = useStore({ path: '/' });
   const nav = useNavigate();
@@ -29,40 +31,43 @@ export default component$(() => {
   });
 
   return (
-    <Box height="full-screen" width="full-screen" align="top-left">
-      <Box paddingY="2" paddingX="4" width="full" direction="horizontal" align="between-center">
-        <Box direction="horizontal" gap="1">
-          {dashboardTabs.map((item: DashboardTabsProps) => (
-            <Button rounded="full" variant={loc.params.slug === item.path ? 'primary' : 'secondary'} key={item.id} onClick$={() => handleSwitchTab(item.path)}>
-              <Text theme={loc.params.slug === item.path ? 'surface' : 'secondary'}>{item.label}</Text>
-            </Button>
-          ))}
-        </Box>
-        <Button rounded="full">
-          <Box direction="horizontal" align="center" gap="0.5">
-            <Text theme="surface">
-              <LuPlusCircle />
-            </Text>
-            <Text theme="surface">Create new project</Text>
-          </Box>
-        </Button>
-      </Box>
-      <Box direction="horizontal" gap="0.5" paddingX="4">
-        <Text>Current Plan</Text>
-        <PlanBadge planType="Professional" />
-        <Button rounded="full" href="/pricing">
-          <Box direction="horizontal" align="center" gap="0.5">
-            <Text theme="surface">
-              <LuArrowUpCircle />
-            </Text>
-            <Text theme="surface" variant="small">
-              Upgrade
-            </Text>
+    <Fragment>
+      <Box width="full-screen" align="top-left">
+        <Box paddingY="2" paddingX="4" width="full" direction="horizontal" align="between-center">
+          <Box direction="horizontal" gap="1">
+            {dashboardTabs.map((item: DashboardTabsProps) => (
+              <Button rounded="full" variant={loc.params.slug === item.path ? 'primary' : 'secondary'} key={item.id} onClick$={() => handleSwitchTab(item.path)}>
+                <Text theme={loc.params.slug === item.path ? 'surface' : 'secondary'}>{item.label}</Text>
+              </Button>
+            ))}
           </Box>
-        </Button>
+          <Button rounded="full" onClick$={() => (showSig.value = true)}>
+            <Box direction="horizontal" align="center" gap="0.5">
+              <Text theme="surface">
+                <LuPlusCircle />
+              </Text>
+              <Text theme="surface">Create new project</Text>
+            </Box>
+          </Button>
+        </Box>
+        <Box direction="horizontal" gap="0.5" paddingX="4">
+          <Text>Current Plan</Text>
+          <PlanBadge planType="Professional" />
+          <Button rounded="full" href="/pricing">
+            <Box direction="horizontal" align="center" gap="0.5">
+              <Text theme="surface">
+                <LuArrowUpCircle />
+              </Text>
+              <Text theme="surface" variant="small">
+                Upgrade
+              </Text>
+            </Box>
+          </Button>
+        </Box>
+        <Slot />
       </Box>
-      <Slot />
-    </Box>
+      <CreateProjectModal showModal={showSig} />
+    </Fragment>
   );
 });
 
diff --git a/apps/web/src/routes/dashboard/components/dashboard-tab.tsx b/apps/web/src/routes/dashboard/components/dashboard/dashboard-tab.tsx
similarity index 50%
rename from apps/web/src/routes/dashboard/components/dashboard-tab.tsx
rename to apps/web/src/routes/dashboard/components/dashboard/dashboard-tab.tsx
index 084d1d6..7431d26 100644
--- a/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
+++ b/apps/web/src/routes/dashboard/components/dashboard/dashboard-tab.tsx
@@ -1,96 +1,12 @@
 import { component$ } from '@builder.io/qwik';
 import { Box, Text } from '@producktivity/ui';
-import { Credit } from './credit';
+import { Credit } from '../credit';
 import { DashboardTable } from './dashboard-table';
-
-export interface TaskMemberProps {
-  name: string;
-}
-
-export type TaskStatus = 'in progress' | 'failed' | 'success';
-
-export interface TaskProps {
-  id: number;
-  title: string;
-  status: TaskStatus;
-  member: TaskMemberProps[];
-  createdWhen: Date;
-  finishedWhen?: Date;
-}
-
-const MockDashboardTasks: TaskProps[] = [
-  {
-    id: 0,
-    title: 'KMITL Volunteering',
-    status: 'failed',
-    createdWhen: new Date('02-11-2024'),
-    member: [
-      {
-        name: 'Boonpongkrong Narongrich',
-      },
-    ],
-    finishedWhen: new Date('02-11-2024'),
-  },
-  {
-    id: 0,
-    title: 'KMITL Adhoc Staff',
-    status: 'failed',
-    createdWhen: new Date('02-17-2024'),
-    member: [
-      {
-        name: 'Sainan Anannarongdech',
-      },
-    ],
-    finishedWhen: new Date('11-02-2024'),
-  },
-  {
-    id: 2,
-    title: 'IT Open house participants',
-    status: 'success',
-    createdWhen: new Date('03-21-2024'),
-    member: [
-      {
-        name: 'Rafah Pipatpong',
-      },
-      {
-        name: 'Sainan Anannarongdech',
-      },
-      {
-        name: 'Boonpradab Narongrich',
-      },
-    ],
-    finishedWhen: new Date('03-21-2024'),
-  },
-  {
-    id: 3,
-    title: 'Tobe IT Bootcamp',
-    status: 'in progress',
-    createdWhen: new Date(),
-    member: [
-      {
-        name: 'Thitipat Pipatpong',
-      },
-      {
-        name: 'Boonnarong Kiatnakin',
-      },
-    ],
-  },
-  {
-    id: 4,
-    title: 'Tobe IT Staff',
-    status: 'in progress',
-    createdWhen: new Date(),
-    member: [
-      {
-        name: 'Boonnarong Kiatnakin',
-      },
-    ],
-  },
-];
+import { MockDashboardTasks } from '../../constant/mock-data';
 
 export const DashboardTab = component$(() => {
   return (
-    <Box paddingX="4" direction="horizontal" width="full" align="top">
+    <Box height="full-screen" paddingX="4" direction="horizontal" width="full" align="top">
       <Box paddingX="4" paddingY="2" width="3/4" variant="surface" rounded="md">
         <Box direction="horizontal" width="full" align="between-center">
           <Box>
diff --git a/apps/web/src/routes/dashboard/components/dashboard-table.tsx b/apps/web/src/routes/dashboard/components/dashboard/dashboard-table.tsx
similarity index 83%
rename from apps/web/src/routes/dashboard/components/dashboard-table.tsx
rename to apps/web/src/routes/dashboard/components/dashboard/dashboard-table.tsx
index baba62a..57c57c1 100644
--- a/apps/web/src/routes/dashboard/components/dashboard-table.tsx
+++ b/apps/web/src/routes/dashboard/components/dashboard/dashboard-table.tsx
@@ -1,16 +1,17 @@
 import { Component, component$ } from '@builder.io/qwik';
 import { createColumnHelper, getCoreRowModel, flexRender, useQwikTable } from '@tanstack/qwik-table';
-import { TaskMemberProps, TaskProps, TaskStatus } from './dashboard-tab';
-import { Box, Button } from '@producktivity/ui';
-import { Link } from '@builder.io/qwik-city';
+import { Box, Button, Text } from '@producktivity/ui';
+// import { Link } from '@builder.io/qwik-city';
+import { TaskProps, TaskMemberProps, TaskStatus } from '../../constant/mock-data';
 
 const columnHelper = createColumnHelper<TaskProps>();
 
 function getTaskDetail(row: string) {
   return (
-    <Link style={{ textDecoration: 'underline' }} href={`/dashboard/project/${row.split(' ').join('-').toLowerCase()}`}>
-      {row}
-    </Link>
+    // <Link style={{ textDecoration: 'underline' }} href={`/dashboard/project/${row.split(' ').join('-').toLowerCase()}`}>
+    //   {row}
+    // </Link>
+    <Text>{row}</Text>
   );
 }
 
@@ -67,7 +68,7 @@ export const DashboardTable: Component<DashboardTableProps> = component$(({ data
   return (
     <Box width="full" paddingTop="2" paddingLeft="3">
       <table class="w-full table-fixed text-sm text-left text-gray-500 dark:text-gray-400">
-        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase">
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
@@ -80,7 +81,7 @@ export const DashboardTable: Component<DashboardTableProps> = component$(({ data
         </thead>
         <tbody>
           {table.getRowModel().rows.map((row) => (
-            <tr key={row.id} class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+            <tr key={row.id} class="border-b dark:bg-gray-800 dark:border-gray-700">
               {row.getVisibleCells().map((cell) => (
                 <td key={cell.id} class="py-2">
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/apps/web/src/routes/dashboard/components/project-tab.tsx b/apps/web/src/routes/dashboard/components/project-tab.tsx
deleted file mode 100644
index dc786d9..0000000
--- a/apps/web/src/routes/dashboard/components/project-tab.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { component$ } from '@builder.io/qwik';
-import { Box } from '@producktivity/ui';
-
-export const ProjectTab = component$(() => {
-  return (
-    <Box width="full">
-      <Box padding="2">project tab</Box>
-    </Box>
-  );
-});
diff --git a/apps/web/src/routes/dashboard/components/project/create-project-modal.tsx b/apps/web/src/routes/dashboard/components/project/create-project-modal.tsx
new file mode 100644
index 0000000..56c8c37
--- /dev/null
+++ b/apps/web/src/routes/dashboard/components/project/create-project-modal.tsx
@@ -0,0 +1,60 @@
+import { Signal, component$, $ } from '@builder.io/qwik';
+import { type DocumentHead } from '@builder.io/qwik-city';
+import { useForm, required } from '@modular-forms/qwik';
+import { Box, TextInput, UIModal, UISelect } from '@producktivity/ui';
+import { useFormLoader } from '../../[slug]';
+
+interface CreateProjectModalProps {
+  showModal: Signal<boolean>;
+}
+
+export type ProjectFormProps = {
+  projectName: string;
+  templateId: string;
+};
+
+const data = [
+  {
+    id: '1',
+    userId: '1',
+    name: 'Kmitl Template',
+  },
+  {
+    id: '2',
+    userId: '2',
+    name: 'IT Innovation',
+  },
+];
+
+export const CreateProjectModal = component$(({ showModal }: CreateProjectModalProps) => {
+  const [projectForm, { Form, Field }] = useForm<ProjectFormProps>({
+    loader: useFormLoader(),
+  });
+
+  const confirmAction = $((values: unknown) => {
+    console.log(values);
+  });
+
+  const cancelAction = $(() => {
+    showModal.value = false;
+  });
+
+  return (
+    <Form onSubmit$={(values) => confirmAction(values)}>
+      <UIModal width="1/3" rounded="md" cancelLabel="Cancel" confirmLabel="Create" showModal={showModal} title="Create new project" confirmAction={$((v) => confirmAction(v))} cancelAction={cancelAction}>
+        <Box gap="1" width="full">
+          <Field name="projectName" validate={required<string>('Please enter your name.')}>
+            {(field, props) => <TextInput {...props} value={field.value} error={field.error} type="text" label="Project name" placeholder="John Doe" required />}
+          </Field>
+          <Field name="templateId" validate={required<string>('Please select the payment type.')}>
+            {(field, props) => <UISelect {...props} value={field.value} options={data} error={field.error} label="Template" placeholder="Select Template" required />}
+          </Field>
+        </Box>
+      </UIModal>
+    </Form>
+  );
+});
+
+export const head: DocumentHead = {
+  title: 'Create Project form',
+};
diff --git a/apps/web/src/routes/dashboard/components/project/project-preview.tsx b/apps/web/src/routes/dashboard/components/project/project-preview.tsx
new file mode 100644
index 0000000..1578bff
--- /dev/null
+++ b/apps/web/src/routes/dashboard/components/project/project-preview.tsx
@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+import { Box, Button, Text } from '@producktivity/ui';
+import { TaskProps } from '../../constant/mock-data';
+
+interface ProjectPreviewProps {
+  project: TaskProps;
+}
+
+export const ProjectPreview = component$(({ project }: ProjectPreviewProps) => {
+  return (
+    <Button variant="surface" href={`/dashboard/project/${project.id}`}>
+      <Box gap="1">
+        <Box padding="3" variant="surface" rounded="md">
+          <img src="https://i0.wp.com/vat.or.th/wp-content/uploads/2021/03/placeholder.png?ssl=1" />
+        </Box>
+        <Text variant="h3" weight="semibold">
+          {project.title}
+        </Text>
+        <Text variant="small" theme="secondary">
+          {project.createdWhen.toLocaleDateString()}
+        </Text>
+      </Box>
+    </Button>
+  );
+});
diff --git a/apps/web/src/routes/dashboard/components/project/project-tab.tsx b/apps/web/src/routes/dashboard/components/project/project-tab.tsx
new file mode 100644
index 0000000..d3965e9
--- /dev/null
+++ b/apps/web/src/routes/dashboard/components/project/project-tab.tsx
@@ -0,0 +1,19 @@
+import { component$ } from '@builder.io/qwik';
+import { Box, Text } from '@producktivity/ui';
+import { ProjectPreview } from './project-preview';
+import { MockDashboardTasks, TaskProps } from '../../constant/mock-data';
+
+export const ProjectTab = component$(() => {
+  return (
+    <Box paddingX="4" gap="4" width="full" align="top-left">
+      <Text variant="title" weight="bold">
+        Recent Projects
+      </Text>
+      <Box gridCols="3" gap="2">
+        {MockDashboardTasks.map((item: TaskProps) => (
+          <ProjectPreview project={item} key={item.id} />
+        ))}
+      </Box>
+    </Box>
+  );
+});
diff --git a/apps/web/src/routes/dashboard/constant/mock-data.tsx b/apps/web/src/routes/dashboard/constant/mock-data.tsx
new file mode 100644
index 0000000..66c6f79
--- /dev/null
+++ b/apps/web/src/routes/dashboard/constant/mock-data.tsx
@@ -0,0 +1,90 @@
+export interface TaskMemberProps {
+  name: string;
+}
+
+export type TaskStatus = 'in progress' | 'failed' | 'success';
+
+export interface TaskProps {
+  id: number;
+  title: string;
+  status: TaskStatus;
+  member: TaskMemberProps[];
+  createdWhen: Date;
+  finishedWhen?: Date;
+}
+
+export const MockDashboardTasks: TaskProps[] = [
+  {
+    id: 0,
+    title: 'KMITL Volunteering',
+    status: 'failed',
+    createdWhen: new Date('02-11-2024'),
+    member: [
+      {
+        name: 'Boonpongkrong Narongrich',
+      },
+    ],
+    finishedWhen: new Date('02-11-2024'),
+  },
+  {
+    id: 1,
+    title: 'KMITL Adhoc Staff',
+    status: 'failed',
+    createdWhen: new Date('02-17-2024'),
+    member: [
+      {
+        name: 'Sainan Anannarongdech',
+      },
+    ],
+    finishedWhen: new Date('11-02-2024'),
+  },
+  {
+    id: 2,
+    title: 'IT Open house participants',
+    status: 'success',
+    createdWhen: new Date('03-21-2024'),
+    member: [
+      {
+        name: 'Rafah Pipatpong',
+      },
+      {
+        name: 'Sainan Anannarongdech',
+      },
+      {
+        name: 'Boonpradab Narongrich',
+      },
+    ],
+    finishedWhen: new Date('03-21-2024'),
+  },
+  {
+    id: 3,
+    title: 'Tobe IT Bootcamp',
+    status: 'in progress',
+    createdWhen: new Date(),
+    member: [
+      {
+        name: 'Thitipat Pipatpong',
+      },
+      {
+        name: 'Boonnarong Kiatnakin',
+      },
+    ],
+  },
+  {
+    id: 4,
+    title: 'Tobe IT Staff',
+    status: 'in progress',
+    createdWhen: new Date(),
+    member: [
+      {
+        name: 'Boonnarong Kiatnakin',
+      },
+    ],
+  },
+];
+
+export interface ProjectProps {
+  id: number;
+  title: string;
+  latestUpdate: Date;
+}
diff --git a/apps/web/src/routes/dashboard/project/[id]/index.tsx b/apps/web/src/routes/dashboard/project/[id]/index.tsx
new file mode 100644
index 0000000..d7ab590
--- /dev/null
+++ b/apps/web/src/routes/dashboard/project/[id]/index.tsx
@@ -0,0 +1,52 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Box, Button, Text } from '@producktivity/ui';
+import { LuPenLine } from '@qwikest/icons/lucide';
+import { DashboardTable } from '../../components/dashboard/dashboard-table';
+import { MockDashboardTasks, TaskProps } from '../../constant/mock-data';
+import { useLocation } from '@builder.io/qwik-city';
+
+export default component$(() => {
+  const loc = useLocation();
+  const currentProject = useSignal<TaskProps>();
+
+  const findCurrentProject = () => {
+    const tempArr = MockDashboardTasks.filter((v) => {
+      return v.id === parseInt(loc.params.id);
+    });
+    currentProject.value = tempArr[0];
+  };
+
+  findCurrentProject();
+
+  return (
+    <Box padding="4" align="top-left" width="full" gap="2">
+      <Button href="/dashboard/projects" rounded="full" variant="secondary">
+        <Text theme="secondary">Back</Text>
+      </Button>
+      <Box width="full" align="center" gap="2">
+        <Box direction="horizontal" gap="1" align="left" width="full">
+          <Text variant="title" weight="bold">
+            {currentProject.value?.title}
+          </Text>
+          <Text variant="h1" theme="secondary">
+            <LuPenLine />
+          </Text>
+        </Box>
+        <Box padding="3" variant="surface" rounded="md">
+          <img src="https://i0.wp.com/vat.or.th/wp-content/uploads/2021/03/placeholder.png?ssl=1" />
+        </Box>
+      </Box>
+      <Box width="full" gap="2">
+        <Text variant="title" weight="bold">
+          History
+        </Text>
+        <Box width="full" paddingX="4" paddingY="2" variant="surface" rounded="md">
+          <DashboardTable data={MockDashboardTasks} />
+        </Box>
+        <Box width="full" align="right">
+          <Button rounded="md">Generate New</Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+});
diff --git a/apps/web/src/routes/dashboard/project/index.tsx b/apps/web/src/routes/dashboard/project/index.tsx
new file mode 100644
index 0000000..8ec7ba5
--- /dev/null
+++ b/apps/web/src/routes/dashboard/project/index.tsx
@@ -0,0 +1,16 @@
+import { component$ } from '@builder.io/qwik';
+import { DocumentHead } from '@builder.io/qwik-city';
+import { Text } from '@producktivity/ui';
+import { generateSeoConfig } from '../../../configs/seo';
+
+export default component$(() => {
+  return (
+    <>
+      <Text variant="title" weight="bold">
+        Project Details
+      </Text>
+    </>
+  );
+});
+
+export const head: DocumentHead = generateSeoConfig({ title: 'Project Details' });
diff --git a/apps/web/src/routes/layout.tsx b/apps/web/src/routes/layout.tsx
index 32fa88b..81b0d21 100644
--- a/apps/web/src/routes/layout.tsx
+++ b/apps/web/src/routes/layout.tsx
@@ -1,6 +1,6 @@
 import { $, Slot, component$, useOnWindow } from '@builder.io/qwik';
 import { routeLoader$, type RequestHandler } from '@builder.io/qwik-city';
-// import { isDev } from '@builder.io/qwik/build';
+import { isDev } from '@builder.io/qwik/build';
 import { verifyRequestOrigin } from 'lucia';
 import { Env, User, initializeLucia } from '../configs/auth';
 
@@ -9,6 +9,8 @@ export const useUser = routeLoader$(({ sharedMap }) => {
 });
 
 export const onRequest: RequestHandler = async ({ platform, next, cookie, method, headers, sharedMap }) => {
+  if (isDev) return;
+
   const { DB } = platform.env as Env;
   const lucia = initializeLucia(DB);
 
diff --git a/db/schema/schema.sql b/db/schema/schema.sql
index 4410da1..92b4b4c 100644
--- a/db/schema/schema.sql
+++ b/db/schema/schema.sql
@@ -39,3 +39,37 @@ CREATE TABLE IF NOT EXISTS oauth_account (
     FOREIGN KEY (user_id) REFERENCES user (id),
     FOREIGN KEY (oauth_provider_id) REFERENCES oauth_provider (id)
 );
+
+CREATE TABLE IF NOT EXISTS template (
+    id TEXT PRIMARY KEY,
+    user_id TEXT NOT NULL,
+    name TEXT NOT NULL,
+    created_at INTEGER NOT NULL,
+    updated_at INTEGER,
+    deleted_at INTEGER,
+
+    FOREIGN KEY (user_id) REFERENCES user (id)
+);
+
+CREATE TABLE IF NOT EXISTS project (
+    id TEXT PRIMARY KEY,
+    user_id TEXT NOT NULL,
+    template_id TEXT NOT NULL,
+    name TEXT NOT NULL,
+    created_at INTEGER NOT NULL,
+    updated_at INTEGER,
+    deleted_at INTEGER,
+
+    FOREIGN KEY (user_id) REFERENCES user (id),
+    FOREIGN KEY (template_id) REFERENCES template (id)
+);
+
+CREATE TABLE IF NOT EXISTS generate (
+    id TEXT PRIMARY KEY,
+    project_id TEXT NOT NULL,
+    args TEXT,
+    created_at INTEGER NOT NULL,
+    deleted_at INTEGER,
+
+    FOREIGN KEY (project_id) REFERENCES project (id)
+);
diff --git a/libs/web/dashboard/editor/src/lib/sidebar.tsx b/libs/web/dashboard/editor/src/lib/sidebar.tsx
index 9406f5b..e4a4840 100644
--- a/libs/web/dashboard/editor/src/lib/sidebar.tsx
+++ b/libs/web/dashboard/editor/src/lib/sidebar.tsx
@@ -1,7 +1,7 @@
 import { component$, useContext, $ } from '@builder.io/qwik';
 import { Box, Button } from '@producktivity/ui';
 import { Frame } from './context';
-import { Textbox, Rect, Circle } from 'fabric';
+import { Textbox, Rect, Circle, FabricImage } from 'fabric';
 
 export default component$(() => {
   const { frame } = useContext(Frame);
@@ -53,12 +53,38 @@ export default component$(() => {
     frame.add(circle);
   });
 
+  const addImage = $(async (e: Event) => {
+    const target = e.currentTarget as HTMLInputElement;
+    const file = target?.files?.[0];
+
+    if (!file) return;
+
+    const fileType = file.type;
+    if (!(fileType === 'image/png' || fileType === 'image/svg+xml')) return;
+
+    const url = URL.createObjectURL(file);
+    const imageObject = await FabricImage.fromURL(url);
+    imageObject.scaleToWidth(180);
+    imageObject.scaleToHeight(180);
+    frame.add(imageObject);
+    frame.renderAll();
+  });
+
+  const addImageHandler = $(() => {
+    const inputElement = document.createElement('input');
+    inputElement.type = 'file';
+    inputElement.accept = 'image/*';
+    inputElement.addEventListener('change', async (e) => await addImage(e));
+    inputElement.click();
+  });
+
   return (
     <Box width="half" height="full" variant="surface" direction="horizontal">
       <Box width="full" height="full" align="top" direction="vertical" gap="1">
         <Button onClick$={addText}>Add Text</Button>
         <Button onClick$={addSquare}>Add Square</Button>
         <Button onClick$={addCircle}>Add Circle</Button>
+        <Button onClick$={addImageHandler}>Add Image</Button>
       </Box>
     </Box>
   );
diff --git a/libs/web/dashboard/editor/src/lib/toolbar.tsx b/libs/web/dashboard/editor/src/lib/toolbar.tsx
index 44c7ad1..727fd32 100644
--- a/libs/web/dashboard/editor/src/lib/toolbar.tsx
+++ b/libs/web/dashboard/editor/src/lib/toolbar.tsx
@@ -5,7 +5,7 @@ import { Frame } from './context';
 export default component$(() => {
   const { frame } = useContext(Frame);
 
-  const exportObject = $(() => {
+  const saveTemplate = $(() => {
     if (!frame) return;
 
     console.log(frame.toObject());
@@ -15,7 +15,7 @@ export default component$(() => {
     <Navigation.Bar>
       <Box></Box>
       <Box>
-        <Navigation.Action onClick$={exportObject}>Export</Navigation.Action>
+        <Navigation.Action onClick$={saveTemplate}>Save</Navigation.Action>
       </Box>
     </Navigation.Bar>
   );
diff --git a/libs/web/landing/footer/src/lib/footer.tsx b/libs/web/landing/footer/src/lib/footer.tsx
index 15f20d6..fbd9bc4 100644
--- a/libs/web/landing/footer/src/lib/footer.tsx
+++ b/libs/web/landing/footer/src/lib/footer.tsx
@@ -10,6 +10,12 @@ export default component$(() => {
   return (
     <Box width="full" align="between-center" direction="horizontal" paddingX="2" paddingY="0.5">
       <Text theme="secondary">&copy; 2023-2024 Produckians</Text>
+      <Button variant="surface" href="/privacy">
+          <Text theme="secondary">Privacy</Text>
+      </Button>
+      <Button variant="surface" href="/terms">
+          <Text theme="secondary">Terms</Text>
+      </Button>
       <Box direction="horizontal" gap="2">
         <Button onClick$={toDarkMode} variant="tertiary">
           <Text theme="tertiary">Dark</Text>
@@ -20,4 +26,4 @@ export default component$(() => {
       </Box>
     </Box>
   );
-});
+});
\ No newline at end of file
diff --git a/libs/web/shared/ui/src/lib/index.ts b/libs/web/shared/ui/src/lib/index.ts
index d24eb80..8965262 100644
--- a/libs/web/shared/ui/src/lib/index.ts
+++ b/libs/web/shared/ui/src/lib/index.ts
@@ -1,5 +1,7 @@
 export * from './box';
 export * from './button';
+export * from './modal';
+export * from './select';
 export * from './input';
 export * from './navigation';
 export * from './pricing/card';
diff --git a/libs/web/shared/ui/src/lib/input/input.tsx b/libs/web/shared/ui/src/lib/input/input.tsx
index 8acd819..ed52b85 100644
--- a/libs/web/shared/ui/src/lib/input/input.tsx
+++ b/libs/web/shared/ui/src/lib/input/input.tsx
@@ -1,10 +1,27 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { Box } from '..';
 import { PropsBuilder } from '../props/props';
 import type { ContainerVariant, TextInputProps } from './input.props';
+import { isBrowser } from '@builder.io/qwik/build';
+
+type InputLabelProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+};
+
+export const InputLabel = component$(({ name, label, required }: InputLabelProps) => (
+  <>
+    {label && (
+      <label for={name}>
+        {label} {required && <span class="ml-1 text-red-600 dark:text-red-400">*</span>}
+      </label>
+    )}
+  </>
+));
 
 export const TextInput = component$<TextInputProps>((props) => {
-  const { label = '', name, required, error, variant = 'primary', disabled, ...rest } = props;
+  const { label, required = true, name, error, variant = 'primary', disabled, ...rest } = props;
 
   const ContainerVariants = {
     primary: 'text-primary focus:ring-primary',
@@ -16,13 +33,9 @@ export const TextInput = component$<TextInputProps>((props) => {
   const additionalProps = new PropsBuilder(props).withSize().withPadding().withBorderRadius().build();
 
   return (
-    <Box width="auto">
-      {label && (
-        <label for={name}>
-          {label} {required && <span>*</span>}
-        </label>
-      )}
-      <input {...rest} class={['border border-gray-200 px-3.5 py-2 ring-1 ring-gray-100/20 placeholder:text-gray-400 focus:ring-2 focus:ring-inset', ContainerVariants[variant], additionalProps]} disabled={disabled} aria-errormessage={`${name}-error`} />
+    <Box width="full">
+      <InputLabel name={name} label={label} required={required} />
+      <input {...rest} class={['border border-gray-200 px-3.5 py-2 ring-1 ring-gray-100/20 placeholder:text-gray-400 focus:ring-2 focus:ring-inset w-full', ContainerVariants[variant], additionalProps]} disabled={disabled} aria-errormessage={`${name}-error`} />
       {error && (
         <div id={`${name}-error`} class="text-error text-sm">
           {error}
@@ -31,3 +44,30 @@ export const TextInput = component$<TextInputProps>((props) => {
     </Box>
   );
 });
+
+type InputErrorProps = {
+  name: string;
+  error?: string;
+};
+
+export const InputError = component$(({ name, error }: InputErrorProps) => {
+  const frozenError = useSignal<string>();
+
+  useTask$(({ track, cleanup }) => {
+    const nextError = track(() => error);
+    if (isBrowser && !nextError) {
+      const timeout = setTimeout(() => (frozenError.value = nextError), 200);
+      cleanup(() => clearTimeout(timeout));
+    } else {
+      frozenError.value = nextError;
+    }
+  });
+
+  return (
+    <div class={!error ? 'block' : 'hidden'}>
+      <div class="pt-4 text-sm text-red-500 dark:text-red-400 md:text-base lg:pt-5 lg:text-lg" id={`${name}-error`}>
+        {frozenError.value}
+      </div>
+    </div>
+  );
+});
diff --git a/libs/web/shared/ui/src/lib/modal/index.ts b/libs/web/shared/ui/src/lib/modal/index.ts
new file mode 100644
index 0000000..234260e
--- /dev/null
+++ b/libs/web/shared/ui/src/lib/modal/index.ts
@@ -0,0 +1,2 @@
+export * from './modal';
+export * from './modal.props';
diff --git a/libs/web/shared/ui/src/lib/modal/modal.props.ts b/libs/web/shared/ui/src/lib/modal/modal.props.ts
new file mode 100644
index 0000000..5ea2bea
--- /dev/null
+++ b/libs/web/shared/ui/src/lib/modal/modal.props.ts
@@ -0,0 +1,17 @@
+import type { QRL, QwikIntrinsicElements, Signal } from '@builder.io/qwik';
+import type { BorderSizeProps, MarginProps, PaddingProps, SizeProps } from '../props';
+import type { GapProps } from '../props/gap.props';
+import type { GridProps } from '../props/grid.props';
+import type { ShadowProps } from '../props/shadow.props';
+
+type NativeDiv = QwikIntrinsicElements['div'];
+
+export interface ModalProps extends NativeDiv, PaddingProps, MarginProps, SizeProps, BorderSizeProps, ShadowProps, GapProps, GridProps {
+  prose?: boolean;
+  showModal: Signal<boolean>;
+  title: string;
+  cancelLabel: string;
+  confirmLabel: string;
+  cancelAction: QRL<() => void>;
+  confirmAction: QRL<(values: unknown) => void>;
+}
diff --git a/libs/web/shared/ui/src/lib/modal/modal.tsx b/libs/web/shared/ui/src/lib/modal/modal.tsx
new file mode 100644
index 0000000..ab050c5
--- /dev/null
+++ b/libs/web/shared/ui/src/lib/modal/modal.tsx
@@ -0,0 +1,35 @@
+import { Slot, component$ } from '@builder.io/qwik';
+import { PropsBuilder } from '../props/props';
+import type { ModalProps } from './modal.props';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+import { LuXCircle } from '@qwikest/icons/lucide';
+import { Button, Text } from '..';
+
+export const UIModal = component$<ModalProps>((props) => {
+  const { showModal, title, cancelLabel, confirmLabel, cancelAction, confirmAction } = props;
+
+  const additionalProps = new PropsBuilder(props).withSize().withPadding().withMargin().withBorderRadius().withGrid().withGap().withShadow().build();
+
+  return (
+    <Modal bind:show={showModal} class={[additionalProps, 'bg-surface text-primary rounded-md max-w-[25rem] p-[35px] shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100']}>
+      <ModalHeader>
+        <h2 class="text-lg font-bold">{title}</h2>
+      </ModalHeader>
+      <ModalContent class="mb-2 pb-4 pt-2">
+        <Slot />
+      </ModalContent>
+      <ModalFooter class="flex justify-end gap-4">
+        <Button rounded="md" variant="secondary" onClick$={cancelAction}>
+          <Text theme="secondary">{cancelLabel}</Text>
+        </Button>
+        <Button rounded="md" variant="primary" onClick$={confirmAction}>
+          <Text theme="surface">{confirmLabel}</Text>
+        </Button>
+      </ModalFooter>
+      <button onClick$={() => (showModal.value = false)} class="absolute right-6 top-[26px]">
+        <LuXCircle />
+      </button>
+    </Modal>
+  );
+});
+// () => (showModal.value = false);
diff --git a/libs/web/shared/ui/src/lib/select/index.ts b/libs/web/shared/ui/src/lib/select/index.ts
new file mode 100644
index 0000000..e50cbe9
--- /dev/null
+++ b/libs/web/shared/ui/src/lib/select/index.ts
@@ -0,0 +1,2 @@
+export * from './select';
+export * from './select.props';
diff --git a/libs/web/shared/ui/src/lib/select/select.props.ts b/libs/web/shared/ui/src/lib/select/select.props.ts
new file mode 100644
index 0000000..71b4d68
--- /dev/null
+++ b/libs/web/shared/ui/src/lib/select/select.props.ts
@@ -0,0 +1,26 @@
+import type { QRL } from '@builder.io/qwik';
+import type { BorderSizeProps, SizeProps } from '../props';
+
+export interface TemplateSelectProps {
+  id: string;
+  userId: string;
+  name: string;
+}
+
+export interface SelectInputProps extends BorderSizeProps, SizeProps {
+  disabled?: boolean;
+  ref: QRL<(element: HTMLSelectElement) => void>;
+  name: string;
+  value: string | string[] | null | undefined;
+  onInput$: (event: Event, element: HTMLSelectElement) => void;
+  onChange$: (event: Event, element: HTMLSelectElement) => void;
+  onBlur$: (event: Event, element: HTMLSelectElement) => void;
+  options: TemplateSelectProps[];
+  multiple?: boolean;
+  size?: number;
+  placeholder?: string;
+  required?: boolean;
+  class?: string;
+  label?: string;
+  error?: string;
+}
diff --git a/libs/web/shared/ui/src/lib/select/select.tsx b/libs/web/shared/ui/src/lib/select/select.tsx
new file mode 100644
index 0000000..9785597
--- /dev/null
+++ b/libs/web/shared/ui/src/lib/select/select.tsx
@@ -0,0 +1,33 @@
+import { component$, useSignal, useTask$ } from '@builder.io/qwik';
+import type { SelectInputProps } from './select.props';
+import { InputError, InputLabel } from '../input';
+import { Box } from '../box';
+
+export const UISelect = component$<SelectInputProps>(({ value, options, label, error, ...props }: SelectInputProps) => {
+  const { name, required, placeholder } = props;
+
+  const values = useSignal<string[]>();
+  useTask$(({ track }) => {
+    track(() => value);
+    values.value = Array.isArray(value) ? value : value && typeof value === 'string' ? [value] : [];
+  });
+
+  return (
+    <Box width="full">
+      <InputLabel name={name} label={label} required={required} />
+      <div class="relative flex items-center w-full">
+        <select {...props} class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary dark:focus:border-primary" id={name} aria-invalid={!!error} aria-errormessage={`${name}-error`}>
+          <option value="" disabled hidden selected={!value}>
+            {placeholder}
+          </option>
+          {options.map(({ id, name }) => (
+            <option key={id} value={id} selected={values.value?.includes(id)}>
+              {name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <InputError name={name} error={error} />
+    </Box>
+  );
+});
diff --git a/libs/web/shared/ui/tailwind.config.ts b/libs/web/shared/ui/tailwind.config.ts
index 46fdbad..094f5ce 100644
--- a/libs/web/shared/ui/tailwind.config.ts
+++ b/libs/web/shared/ui/tailwind.config.ts
@@ -5,7 +5,7 @@ import typography from '@tailwindcss/typography';
 import { fontFamily } from 'tailwindcss/defaultTheme';
 
 export default {
-  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')],
+  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'), './node_modules/flowbite/**/*.js'],
   darkMode: ['class', "[data-mode='dark']"],
   theme: {
     fontFamily: {
@@ -148,9 +148,8 @@ export default {
             },
           ],
         },
-
       },
     },
   },
-  plugins: [typography],
+  plugins: [typography, require('flowbite/plugin')],
 } satisfies Config;
diff --git a/libs/web/shared/ui/tsconfig.json b/libs/web/shared/ui/tsconfig.json
index 0e7f339..057c6c2 100644
--- a/libs/web/shared/ui/tsconfig.json
+++ b/libs/web/shared/ui/tsconfig.json
@@ -19,19 +19,19 @@
     "incremental": true,
     "isolatedModules": true,
     "noEmit": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
   },
   "files": [],
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.lib.json"
+      "path": "./tsconfig.lib.json",
     },
     {
-      "path": "./tsconfig.spec.json"
+      "path": "./tsconfig.spec.json",
     },
     {
-      "path": "./tsconfig.storybook.json"
-    }
-  ]
+      "path": "./tsconfig.storybook.json",
+    },
+  ],
 }
diff --git a/package.json b/package.json
index acd53cb..80768b2 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
     "@builder.io/qwik": "~1.4.2",
     "@builder.io/qwik-city": "~1.4.2",
     "@cloudflare/workers-types": "^4.20231218.0",
+    "@headlessui/react": "^1.7.18",
     "@lucia-auth/adapter-sqlite": "^3.0.1",
+    "@modular-forms/qwik": "^0.23.1",
     "@nx/devkit": "17.2.8",
     "@nx/eslint": "17.2.8",
     "@nx/eslint-plugin": "17.2.8",
@@ -21,6 +23,7 @@
     "@nx/vite": "17.2.8",
     "@nx/workspace": "17.2.8",
     "@playwright/test": "^1.36.0",
+    "@qwik-ui/headless": "^0.3.3",
     "@qwikest/icons": "^0.0.13",
     "@storybook/addon-a11y": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",
@@ -45,6 +48,9 @@
     "eslint-plugin-playwright": "^0.22.1",
     "eslint-plugin-qwik": "~1.4.2",
     "fabric": "6.0.0-beta18",
+    "flowbite": "^2.3.0",
+    "headless": "^1.2.0",
+    "headlessui": "^0.0.0",
     "hono": "^4.1.0",
     "husky": "^9.0.6",
     "jest": "^29.4.1",
@@ -58,6 +64,7 @@
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
     "qwik-nx": "^2.0.2",
+    "react": "^18.2.0",
     "rxjs": "^7.8.0",
     "storybook-framework-qwik": "^0.2.5",
     "tailwindcss": "^3.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 66b58de..add92f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,9 +17,15 @@ importers:
       '@cloudflare/workers-types':
         specifier: ^4.20231218.0
         version: 4.20240117.0
+      '@headlessui/react':
+        specifier: ^1.7.18
+        version: 1.7.18(react-dom@18.2.0)(react@18.2.0)
       '@lucia-auth/adapter-sqlite':
         specifier: ^3.0.1
         version: 3.0.1(lucia@3.1.1)
+      '@modular-forms/qwik':
+        specifier: ^0.23.1
+        version: 0.23.1(@builder.io/qwik-city@1.4.2)(@builder.io/qwik@1.4.2)
       '@nx/devkit':
         specifier: 17.2.8
         version: 17.2.8(nx@17.2.8)
@@ -50,6 +56,9 @@ importers:
       '@playwright/test':
         specifier: ^1.36.0
         version: 1.41.1
+      '@qwik-ui/headless':
+        specifier: ^0.3.3
+        version: 0.3.3(@builder.io/qwik@1.4.2)
       '@qwikest/icons':
         specifier: ^0.0.13
         version: 0.0.13(@builder.io/qwik@1.4.2)
@@ -122,6 +131,15 @@ importers:
       fabric:
         specifier: 6.0.0-beta18
         version: 6.0.0-beta18
+      flowbite:
+        specifier: ^2.3.0
+        version: 2.3.0
+      headless:
+        specifier: ^1.2.0
+        version: 1.2.0
+      headlessui:
+        specifier: ^0.0.0
+        version: 0.0.0
       hono:
         specifier: ^4.1.0
         version: 4.1.1
@@ -161,6 +179,9 @@ importers:
       qwik-nx:
         specifier: ^2.0.2
         version: 2.0.2(@types/node@20.11.9)(eslint@8.56.0)(nx@17.2.8)(typescript@5.3.3)(vite@5.0.12)(vitest@1.2.2)
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
       rxjs:
         specifier: ^7.8.0
         version: 7.8.1
@@ -2353,6 +2374,19 @@ packages:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
     dev: true
 
+  /@headlessui/react@1.7.18(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16 || ^17 || ^18
+      react-dom: ^16 || ^17 || ^18
+    dependencies:
+      '@tanstack/react-virtual': 3.2.0(react-dom@18.2.0)(react@18.2.0)
+      client-only: 0.0.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -2966,7 +3000,15 @@ packages:
   /@microsoft/tsdoc@0.14.2:
     resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
     dev: true
-
+  /@modular-forms/qwik@0.23.1(@builder.io/qwik-city@1.4.2)(@builder.io/qwik@1.4.2):
+    resolution: {integrity: sha512-oiXMdbH0HNotc9LMUwoEwZSJkY7/SObyQCgAZHsAPIQOyQrDhG2W8rEJVy0zFtSOCxk6NZjLiMcXfcI5glKU8A==}
+    peerDependencies:
+      '@builder.io/qwik': ^1.4.0
+      '@builder.io/qwik-city': ^1.4.0
+    dependencies:
+      '@builder.io/qwik': 1.4.2(@types/node@20.11.9)(lightningcss@1.23.0)(undici@5.28.2)
+      '@builder.io/qwik-city': 1.4.2(@types/node@20.11.9)(lightningcss@1.23.0)
+    dev: true
   /@napi-rs/wasm-runtime@0.1.1:
     resolution: {integrity: sha512-ATj9ua659JgrkICjJscaeZdmPr44cb/KFjNWuD0N6pux0SpzaM7+iOuuK11mAnQM2N9q0DT4REu6NkL8ZEhopw==}
     requiresBuild: true
@@ -4238,6 +4280,17 @@ packages:
   /@polka/url@1.0.0-next.24:
     resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
     dev: true
+  /@popperjs/core@2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+    dev: true
+  /@qwik-ui/headless@0.3.3(@builder.io/qwik@1.4.2):
+    resolution: {integrity: sha512-/d3r3DbfbTLCM1FkC52dU2xMGiKijyY33DYTwSnBn94G+GUaMf9/fjr+IUA+sbL2f08LsvOt5VgE0hweqi4aeg==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      '@builder.io/qwik': ^1.4.0
+    dependencies:
+      '@builder.io/qwik': 1.4.2(@types/node@20.11.9)(lightningcss@1.23.0)(undici@5.28.2)
+    dev: true
 
   /@qwikest/icons@0.0.13(@builder.io/qwik@1.4.2):
     resolution: {integrity: sha512-e0wY8vmx0nDSUiuCATlk+ojTvdBV4txIGHHWjZW5SRkv4XB8H9+3WSDcLPz0ItUdRyzcrohE9k2jtQI/98aRPA==}
@@ -5527,11 +5580,26 @@ packages:
       '@tanstack/table-core': 8.14.0
     dev: true
 
+  /@tanstack/react-virtual@3.2.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@tanstack/virtual-core': 3.2.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
   /@tanstack/table-core@8.14.0:
     resolution: {integrity: sha512-wDhpKJahGHWhmRt4RxtV3pES63CoeadljGWS/xeS9OJr1HBl2NB+OO44ht3sxDH5j5TRDAbQzC0NvSlsUfn7lQ==}
     engines: {node: '>=12'}
     dev: true
 
+  /@tanstack/virtual-core@3.2.0:
+    resolution: {integrity: sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==}
+    dev: true
+
   /@tootallnate/once@2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -6971,6 +7039,10 @@ packages:
       string-width: 7.1.0
     dev: true
 
+  /client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    dev: true
+
   /cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -8327,6 +8399,13 @@ packages:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
     dev: true
 
+  /flowbite@2.3.0:
+    resolution: {integrity: sha512-pm3JRo8OIJHGfFYWgaGpPv8E+UdWy0Z3gEAGufw+G/1dusaU/P1zoBLiQpf2/+bYAi+GBQtPVG86KYlV0W+AFQ==}
+    dependencies:
+      '@popperjs/core': 2.11.8
+      mini-svg-data-uri: 1.4.4
+    dev: true
+
   /follow-redirects@1.15.5:
     resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
     engines: {node: '>=4.0'}
@@ -8745,6 +8824,15 @@ packages:
     hasBin: true
     dev: true
 
+  /headless@1.2.0:
+    resolution: {integrity: sha512-KY721osnVJ/hU8w2Gpsu1znT16mjWsIVl3qpJUvKj3U3xfPq1N6hHIDRGRyahYYPZbTBbVtOPuBVCW7Mi83bCg==}
+    engines: {node: '>=0.6'}
+    dev: true
+
+  /headlessui@0.0.0:
+    resolution: {integrity: sha512-CHvacVPbl8AqIg2sBNKySUmumu7o15jSrCaTrIh9GW2Eq4y/krCN/vZFOsKCwlrhWQbO4267a8xvvP8bs+qREQ==}
+    dev: true
+
   /hono@4.1.1:
     resolution: {integrity: sha512-+ljwSwMby5vYaA1ZmP8iQSq/bF5wb8gGwFdybJk3A4yNwtn4X0zuyim49VNCYHBUi/jfY0bnzwntth4/eX6NHw==}
     engines: {node: '>=16.0.0'}
@@ -10709,6 +10797,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+    dev: true
+
   /miniflare@3.20231218.4:
     resolution: {integrity: sha512-2mpxvDiRBxGGGVnTKC0SZy0FtTXxFs3tM1ol67EoIJABGzvWFf33GThwh+/dRmaHSjKKId/FI8rEl5JxXXXZgQ==}
     engines: {node: '>=16.13'}
diff --git a/wrangler.toml b/wrangler.toml
index 50ad3ef..2a12262 100644
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -10,6 +10,9 @@ workers_dev = true
 d1_databases = [
   { binding = "DB", database_name = "dev-certifine", database_id = "ba778eb8-bf82-4984-a21a-88dc8913f2fe" }  
 ]
+r2_buckets = [
+  { binding = "BUCKET", bucket_name = "dev-certifine" }
+]
 
 [env.staging]
 vars = { ENVIRONMENT = "staging" }
@@ -20,6 +23,9 @@ workers_dev = true
 d1_databases = [
   { binding = "DB", database_name = "staging-certifine", database_id = "c0534c42-4517-4068-af84-a458e02866b0" }  
 ]
+r2_buckets = [
+  { binding = "BUCKET", bucket_name = "staging-certifine" }
+]
 
 [env.production]
 vars = { ENVIRONMENT = "production" }
@@ -31,3 +37,6 @@ workers_dev = false
 d1_databases = [
   { binding = "DB", database_name = "certifine", database_id = "fae83b0b-b945-4a5b-ad5f-23d3b13dd581" }  
 ]
+r2_buckets = [
+  { binding = "BUCKET", bucket_name = "certifine" }
+]