diff --git a/apps/backoffice/src/app/accounts/layout.tsx b/apps/backoffice/src/app/accounts/layout.tsx
new file mode 100644
index 0000000..423168f
--- /dev/null
+++ b/apps/backoffice/src/app/accounts/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 (
+    <div className="bg-primary-50 min-h-screen flex justify-center">
+      <div className="bg-primary-50 min-h-screen max-w-[1280px] w-full flex">
+        <BackofficeSidebar />
+        <div className="flex-1 overflow-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;
diff --git a/apps/backoffice/src/app/accounts/page.tsx b/apps/backoffice/src/app/accounts/page.tsx
new file mode 100644
index 0000000..ffa154e
--- /dev/null
+++ b/apps/backoffice/src/app/accounts/page.tsx
@@ -0,0 +1,17 @@
+import { FC, ReactElement } from 'react';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+      {/* Dashboard Header */}
+      <header className="bg-white py-4 px-8 rounded-md shadow p-4">
+        <h1 className="text-p2 font-semibold">Data Akun</h1>
+      </header>
+
+      {/* Transaction Table Section */}
+      <div className="flex justify-between gap-[40px] p-8 bg-white rounded-md"></div>
+    </main>
+  );
+};
+
+export default Components;
diff --git a/apps/backoffice/src/app/transactions/layout.tsx b/apps/backoffice/src/app/transactions/layout.tsx
new file mode 100644
index 0000000..423168f
--- /dev/null
+++ b/apps/backoffice/src/app/transactions/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 (
+    <div className="bg-primary-50 min-h-screen flex justify-center">
+      <div className="bg-primary-50 min-h-screen max-w-[1280px] w-full flex">
+        <BackofficeSidebar />
+        <div className="flex-1 overflow-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;
diff --git a/apps/backoffice/src/app/transactions/page.tsx b/apps/backoffice/src/app/transactions/page.tsx
new file mode 100644
index 0000000..cd1c262
--- /dev/null
+++ b/apps/backoffice/src/app/transactions/page.tsx
@@ -0,0 +1,19 @@
+import { ArrowDownOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { FC, ReactElement } from 'react';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+      {/* Dashboard Header */}
+      <header className="bg-white py-4 px-8 rounded-md shadow p-4">
+        <h1 className="text-p2 font-semibold">Validasi Transaksi</h1>
+      </header>
+
+      {/* Accounts Table Section */}
+      <div className="flex justify-between gap-[40px] p-8 bg-white rounded-md"></div>
+    </main>
+  );
+};
+
+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
index a5e9b7a..d894144 100644
--- a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
@@ -33,7 +33,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
           </Link>
 
           <Link
-            to="/users"
+            to="/accounts"
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/accounts')
                 ? 'bg-primary-500 text-white rounded-md'