diff --git a/apps/backoffice/public/logos/simple.svg b/apps/backoffice/public/logos/simple.svg
new file mode 100644
index 0000000..0fd70f3
--- /dev/null
+++ b/apps/backoffice/public/logos/simple.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/apps/backoffice/src/app/dashboard/layout.tsx b/apps/backoffice/src/app/dashboard/layout.tsx
new file mode 100644
index 0000000..0f4db25
--- /dev/null
+++ b/apps/backoffice/src/app/dashboard/layout.tsx
@@ -0,0 +1,18 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
+
+export const AppLayout: FC = (): ReactElement => {
+ return (
+
+ );
+};
+
+export default AppLayout;
diff --git a/apps/backoffice/src/app/dashboard/page.tsx b/apps/backoffice/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..21b343c
--- /dev/null
+++ b/apps/backoffice/src/app/dashboard/page.tsx
@@ -0,0 +1,133 @@
+import { FC, ReactElement } from 'react';
+
+export const Components: FC = (): ReactElement => {
+ return (
+
+ {/* Dashboard Header */}
+
+
Dashboard
+
+
+ {/* Summary Section */}
+
+
Summary
+
+ {/* Summary Cards */}
+ {[1, 2, 3, 4].map((item) => (
+
+
+
+
1000
+
Total Participants
+
+
+ ))}
+
+
+
+ {/* Gacha Items Section */}
+
+
+
Gacha Items
+
+
+
+ {/* Gacha Items List */}
+
+ {[1, 2, 3, 4].map((item) => (
+
+
+

+
+
Lanyard IMPHNEN
+
+ Prize {item}
+ •
+ Chance Rate: (1%)
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+ {/* Right side illustration */}
+
+
+ );
+};
+
+export default Components;
diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
new file mode 100644
index 0000000..bd2e665
--- /dev/null
+++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
@@ -0,0 +1,95 @@
+import { FC, ReactElement } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+export const BackofficeSidebar: FC = (): ReactElement => {
+ const location = useLocation();
+ const isActive = (path: string) => location.pathname.includes(path);
+
+ return (
+
+ );
+};
diff --git a/libs/ui/src/organisms/backoffice-sidebar/index.ts b/libs/ui/src/organisms/backoffice-sidebar/index.ts
new file mode 100644
index 0000000..cc302f9
--- /dev/null
+++ b/libs/ui/src/organisms/backoffice-sidebar/index.ts
@@ -0,0 +1 @@
+export * from './backoffice-sidebar'
diff --git a/libs/ui/src/organisms/index.ts b/libs/ui/src/organisms/index.ts
index 1665ad1..541cfeb 100644
--- a/libs/ui/src/organisms/index.ts
+++ b/libs/ui/src/organisms/index.ts
@@ -1,2 +1,3 @@
-export * from './navbar';
+export * from "./navbar";
export * from "./modals-gacha";
+export * from "./backoffice-sidebar"