diff --git a/src/app/report/marketing/layout.tsx b/src/app/report/marketing/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/report/marketing/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/report/marketing/page.tsx b/src/app/report/marketing/page.tsx
new file mode 100644
index 00000000..a330bc1f
--- /dev/null
+++ b/src/app/report/marketing/page.tsx
@@ -0,0 +1,7 @@
+import SaleReportTabs from '@/components/pages/report/sale/SaleReportTabs';
+
+const SaleReport = () => {
+  return <SaleReportTabs />;
+};
+
+export default SaleReport;
diff --git a/src/components/pages/report/sale/SaleReportTabs.tsx b/src/components/pages/report/sale/SaleReportTabs.tsx
new file mode 100644
index 00000000..5c5ee473
--- /dev/null
+++ b/src/components/pages/report/sale/SaleReportTabs.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import Tabs from '@/components/Tabs';
+import { HppPerKandangTab } from '@/components/pages/report/sale/tab/HppPerKandangTab';
+
+const SaleReportTabs = () => {
+  const tabs = [
+    {
+      id: '1',
+      label: 'Penjualan Harian',
+      content: 'Penjualan Harian Tab',
+    },
+    {
+      id: '2',
+      label: 'Transaksi Penjualan DO',
+      content: 'Transaksi Penjualan DO Tab',
+    },
+    {
+      id: '3',
+      label: 'Perbandingan HPP Per Rentang BW',
+      content: 'Perbandingan HPP Per Rentang BW Tab',
+    },
+    {
+      id: '4',
+      label: 'HPP Harian Kandang',
+      content: <HppPerKandangTab />,
+    },
+  ];
+
+  return (
+    <section className='w-full p-4'>
+      <Tabs tabs={tabs} variant='lifted' />
+    </section>
+  );
+};
+
+export default SaleReportTabs;
diff --git a/src/components/pages/report/sale/tab/HppPerKandangTab.tsx b/src/components/pages/report/sale/tab/HppPerKandangTab.tsx
new file mode 100644
index 00000000..60320597
--- /dev/null
+++ b/src/components/pages/report/sale/tab/HppPerKandangTab.tsx
@@ -0,0 +1,3 @@
+export const HppPerKandangTab = () => {
+  return <div>HPP Per Kandang Tab</div>;
+};