diff --git a/src/routes/dashboard/sales/[productId]/__error.svelte b/src/routes/dashboard/sales/[productId]/__error.svelte
new file mode 100644
index 0000000..f4b3346
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/__error.svelte
@@ -0,0 +1,73 @@
+<style>
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<script lang="ts" context="module">
+	import type { ErrorLoad } from '@sveltejs/kit';
+
+	export const load: ErrorLoad = ({ error, status }) => ({
+		props: {
+			title: `${status}: ${error?.message || ''}`,
+			status,
+			error,
+		},
+	});
+</script>
+
+<script lang="ts">
+	// Start: Local Imports
+	// Models
+	import type { IMetaTagProperties } from '$models/interfaces/imeta-tag-properties.interface';
+
+	//  Components
+	import HeadTags from '$components/head-tags/HeadTags.svelte';
+
+	// Start: Sevelte Imports
+	import { dev } from '$app/env';
+	// End: Sevelte Imports
+
+	// End: Local Imports
+	// Start: Exported Properties
+	export let status: string;
+
+	export let error: Error;
+	// End: Exported Properties
+
+	const metaData: Partial<IMetaTagProperties> = {
+		title: `${status} | Sveltekit`,
+		description: '404 page of Sveltekit starter project',
+	};
+</script>
+
+<!-- Start: Header Tage -->
+<HeadTags metaData="{metaData}" />
+<!-- End: Header Tage -->
+
+<!-- Start: Error View Layout -->
+<div class="md:container md:mx-auto">
+	<div class="flex flex-col justify-center items-center">
+		<!-- Start: Error Status Code -->
+		<h1>
+			{status}
+		</h1>
+		<!-- End: Error Status Code -->
+		<p>
+			{error.name}
+		</p>
+		<!-- Start: Error Message container -->
+		{#if dev && error.stack}
+			<pre> {error.message} </pre>
+		{/if}
+		<!-- End: Error Message container -->
+	</div>
+</div>
+<!-- End: Error View Layout -->
diff --git a/src/routes/dashboard/sales/[productId]/__layout.svelte b/src/routes/dashboard/sales/[productId]/__layout.svelte
new file mode 100644
index 0000000..42706d0
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/__layout.svelte
@@ -0,0 +1,136 @@
+<script lang="ts" context="module">
+	import type { Load } from '@sveltejs/kit';
+
+	export const load: Load = ({ page }) => {
+		const { params } = page;
+		if (!params.productId || Number.isNaN(params.productId) || Number(params.productId) > 5) {
+			return {
+				status: 404,
+				error: `Not product found with id ${params.productId}`,
+			};
+		}
+		return {
+			props: {
+				productId: params.productId,
+			},
+			status: 200,
+		};
+	};
+</script>
+
+<script lang="ts">
+	import StatsCard from '$ui/components/cards/StatsCard.svelte';
+	import { page } from '$app/stores';
+
+	export let productId!: string;
+</script>
+
+<div class="w-full flex flex-col px-4 md:px-10 mx-auto">
+	<div class="w-full py-4">
+		<h1 class="font-semibold text-xl"> Sales of product {productId} </h1>
+	</div>
+	<div class="w-full flex flex-col lg:flex-row space-x-0 space-y-2 lg:space-x-2 lg:space-y-0">
+		<div class="w-full lg:w-6/12">
+			<StatsCard
+				statSubtitle="SALES"
+				statTitle="2,356"
+				statArrow="down"
+				statPercent="3.48"
+				statPercentColor="text-red-500"
+				statDescripiron="Since last week"
+				statIconName="fas fa-chart-pie"
+				statIconColor="bg-red-500"
+			/>
+		</div>
+		<div class="w-full lg:w-6/12">
+			<StatsCard
+				statSubtitle="SALES"
+				statTitle="2,356"
+				statArrow="down"
+				statPercent="3.48"
+				statPercentColor="text-red-500"
+				statDescripiron="Since last week"
+				statIconName="fas fa-chart-pie"
+				statIconColor="bg-red-500"
+			/>
+		</div>
+	</div>
+	<div class="w-full">
+		<ul
+			class="flex flex-row w-full min-w-full overflow-x-auto mb-0 list-none pt-3 pb-4 border-b-[1px] border-solid border-gray-100"
+		>
+			<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
+				<a
+					sveltekit:prefetch
+					href="{`/dashboard/sales/${productId}/overview`}"
+					class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes(
+						'overview',
+					)
+						? 'font-semibold'
+						: 'font-normal'}"
+				>
+					Overview
+				</a>
+			</li>
+			<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
+				<a
+					sveltekit:prefetch
+					href="{`/dashboard/sales/${productId}/subscriptions`}"
+					class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes(
+						'subscriptions',
+					)
+						? 'font-semibold'
+						: 'font-normal'}"
+				>
+					Subscriptions
+				</a>
+			</li>
+			<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
+				<a
+					sveltekit:prefetch
+					href="{`/dashboard/sales/${productId}/invoices`}"
+					class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes(
+						'invoices',
+					)
+						? 'font-semibold'
+						: 'font-normal'}"
+				>
+					Invoices
+				</a>
+			</li>
+			<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
+				<a
+					sveltekit:prefetch
+					href="{`/dashboard/sales/${productId}/customers`}"
+					class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes(
+						'customers',
+					)
+						? 'font-semibold'
+						: 'font-normal'}"
+				>
+					Customers
+				</a>
+			</li>
+			<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
+				<a
+					sveltekit:prefetch
+					href="{`/dashboard/sales/${productId}/deposits`}"
+					class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes(
+						'deposits',
+					)
+						? 'font-semibold'
+						: 'font-normal'}"
+				>
+					Deposits
+				</a>
+			</li>
+		</ul>
+		<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 py-6">
+			<div class="py-5 flex-auto w-full">
+				<div class="w-full">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/dashboard/sales/[productId]/customers/[customerId]/index.svelte b/src/routes/dashboard/sales/[productId]/customers/[customerId]/index.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/dashboard/sales/[productId]/customers/__layout.svelte b/src/routes/dashboard/sales/[productId]/customers/__layout.svelte
new file mode 100644
index 0000000..f00ab00
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/customers/__layout.svelte
@@ -0,0 +1,3 @@
+<div class="w-full">
+	<h2> Customers </h2>
+</div>
diff --git a/src/routes/dashboard/sales/[productId]/customers/index.svelte b/src/routes/dashboard/sales/[productId]/customers/index.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/dashboard/sales/[productId]/deposits/index.svelte b/src/routes/dashboard/sales/[productId]/deposits/index.svelte
new file mode 100644
index 0000000..b04e906
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/deposits/index.svelte
@@ -0,0 +1,3 @@
+<div class="w-full">
+	<h2> Deposits </h2>
+</div>
diff --git a/src/routes/dashboard/sales/[productId]/index.svelte b/src/routes/dashboard/sales/[productId]/index.svelte
new file mode 100644
index 0000000..ffca4e9
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/index.svelte
@@ -0,0 +1,8 @@
+<script lang="ts" context="module">
+	import type { Load } from '@sveltejs/kit';
+
+	export const load: Load = ({ page }) => ({
+		status: 302,
+		redirect: `/dashboard/sales/${page.params.productId}/overview`,
+	});
+</script>
diff --git a/src/routes/dashboard/sales/[productId]/invoices/[invoice]/__error.svelte b/src/routes/dashboard/sales/[productId]/invoices/[invoice]/__error.svelte
new file mode 100644
index 0000000..f4b3346
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/invoices/[invoice]/__error.svelte
@@ -0,0 +1,73 @@
+<style>
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<script lang="ts" context="module">
+	import type { ErrorLoad } from '@sveltejs/kit';
+
+	export const load: ErrorLoad = ({ error, status }) => ({
+		props: {
+			title: `${status}: ${error?.message || ''}`,
+			status,
+			error,
+		},
+	});
+</script>
+
+<script lang="ts">
+	// Start: Local Imports
+	// Models
+	import type { IMetaTagProperties } from '$models/interfaces/imeta-tag-properties.interface';
+
+	//  Components
+	import HeadTags from '$components/head-tags/HeadTags.svelte';
+
+	// Start: Sevelte Imports
+	import { dev } from '$app/env';
+	// End: Sevelte Imports
+
+	// End: Local Imports
+	// Start: Exported Properties
+	export let status: string;
+
+	export let error: Error;
+	// End: Exported Properties
+
+	const metaData: Partial<IMetaTagProperties> = {
+		title: `${status} | Sveltekit`,
+		description: '404 page of Sveltekit starter project',
+	};
+</script>
+
+<!-- Start: Header Tage -->
+<HeadTags metaData="{metaData}" />
+<!-- End: Header Tage -->
+
+<!-- Start: Error View Layout -->
+<div class="md:container md:mx-auto">
+	<div class="flex flex-col justify-center items-center">
+		<!-- Start: Error Status Code -->
+		<h1>
+			{status}
+		</h1>
+		<!-- End: Error Status Code -->
+		<p>
+			{error.name}
+		</p>
+		<!-- Start: Error Message container -->
+		{#if dev && error.stack}
+			<pre> {error.message} </pre>
+		{/if}
+		<!-- End: Error Message container -->
+	</div>
+</div>
+<!-- End: Error View Layout -->
diff --git a/src/routes/dashboard/sales/[productId]/invoices/[invoice]/index.svelte b/src/routes/dashboard/sales/[productId]/invoices/[invoice]/index.svelte
new file mode 100644
index 0000000..9cb5801
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/invoices/[invoice]/index.svelte
@@ -0,0 +1,64 @@
+<script lang="ts" context="module">
+	import type { Load } from '@sveltejs/kit';
+
+	export const load: Load = ({ page }) => {
+		const { params } = page;
+		if (!params.invoice || Number.isNaN(params.invoice) || Number(params.invoice) > 88888) {
+			return {
+				status: 404,
+				error: 'Not Invoice found with given id',
+			};
+		}
+		return {
+			props: {
+				invoice: page.params.invoice,
+			},
+			status: 200,
+		};
+	};
+</script>
+
+<script lang="ts">
+	export let invoice: number;
+</script>
+
+<div class="w-full flex flex-col p-6">
+	<div class="w-full flex flex-col items-center justify-center">
+		<div class="w-full">
+			<span class="font-semibold"> Stankonia </span>
+		</div>
+		<div class="w-full">
+			<span class="font-semibold text-3xl"> $8000 </span>
+		</div>
+		<div class="w-full flex flex-row">
+			<span class="text-xs text-gray-400"> DUE TODAY </span>
+			<span class="text-xs text-gray-400 px-2"> INVOICED 10/31/2020 </span>
+		</div>
+	</div>
+	<div class="w-full flex flex-row text-xs my-2">
+		<span> Invoice </span>
+		<span class="px-2">
+			#{invoice}
+		</span>
+	</div>
+	<div class="w-full flex flex-col items-center justify-center mt-6">
+		<div
+			class="w-full border-t-[1px] border-solid border-gray-200 py-4 flex flex-row justify-between"
+		>
+			<div> Pro Plan </div>
+			<div> $6000 </div>
+		</div>
+		<div
+			class="w-full border-t-[1px] border-solid border-gray-200 py-4 flex flex-row justify-between"
+		>
+			<div> Custom </div>
+			<div> $2000 </div>
+		</div>
+		<div
+			class="w-full border-b-[1px] border-t-[1px] border-solid border-gray-200 py-4 flex flex-row justify-between font-semibold"
+		>
+			<div> Net Total </div>
+			<div> $8000 </div>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/dashboard/sales/[productId]/invoices/__error.svelte b/src/routes/dashboard/sales/[productId]/invoices/__error.svelte
new file mode 100644
index 0000000..f4b3346
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/invoices/__error.svelte
@@ -0,0 +1,73 @@
+<style>
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<script lang="ts" context="module">
+	import type { ErrorLoad } from '@sveltejs/kit';
+
+	export const load: ErrorLoad = ({ error, status }) => ({
+		props: {
+			title: `${status}: ${error?.message || ''}`,
+			status,
+			error,
+		},
+	});
+</script>
+
+<script lang="ts">
+	// Start: Local Imports
+	// Models
+	import type { IMetaTagProperties } from '$models/interfaces/imeta-tag-properties.interface';
+
+	//  Components
+	import HeadTags from '$components/head-tags/HeadTags.svelte';
+
+	// Start: Sevelte Imports
+	import { dev } from '$app/env';
+	// End: Sevelte Imports
+
+	// End: Local Imports
+	// Start: Exported Properties
+	export let status: string;
+
+	export let error: Error;
+	// End: Exported Properties
+
+	const metaData: Partial<IMetaTagProperties> = {
+		title: `${status} | Sveltekit`,
+		description: '404 page of Sveltekit starter project',
+	};
+</script>
+
+<!-- Start: Header Tage -->
+<HeadTags metaData="{metaData}" />
+<!-- End: Header Tage -->
+
+<!-- Start: Error View Layout -->
+<div class="md:container md:mx-auto">
+	<div class="flex flex-col justify-center items-center">
+		<!-- Start: Error Status Code -->
+		<h1>
+			{status}
+		</h1>
+		<!-- End: Error Status Code -->
+		<p>
+			{error.name}
+		</p>
+		<!-- Start: Error Message container -->
+		{#if dev && error.stack}
+			<pre> {error.message} </pre>
+		{/if}
+		<!-- End: Error Message container -->
+	</div>
+</div>
+<!-- End: Error View Layout -->
diff --git a/src/routes/dashboard/sales/[productId]/invoices/__layout.svelte b/src/routes/dashboard/sales/[productId]/invoices/__layout.svelte
new file mode 100644
index 0000000..a3b241b
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/invoices/__layout.svelte
@@ -0,0 +1,168 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	type Invoice = {
+		id: number;
+		customer: string;
+		billingAddress: string;
+		shippingAddress: string;
+		year: number;
+		city: string;
+		total: number;
+		status: string;
+	};
+	const invoices: Invoice[] = [
+		{
+			id: 11111,
+			customer: 'John Doe',
+			billingAddress: '123 Main St',
+			shippingAddress: '123 Main St',
+			city: 'New York',
+			total: 100,
+			status: 'Paid',
+			year: 2019,
+		},
+		{
+			id: 22222,
+			customer: 'Jhon cena',
+			billingAddress: '123 Main St',
+			shippingAddress: '123 Main St',
+			city: 'San Francisco',
+			total: 200,
+			status: 'Overdue',
+			year: 2018,
+		},
+		{
+			id: 33333,
+			customer: 'Micheal Scott',
+			billingAddress: '123 Main St',
+			shippingAddress: '123 Main St',
+			city: 'Los Angeles',
+			total: 300,
+			status: 'Due Today',
+			year: 2017,
+		},
+		{
+			id: 44444,
+			customer: 'Jane Doe',
+			billingAddress: '123 Main St',
+			shippingAddress: '123 Main St',
+			city: 'New York',
+			total: 400,
+			status: 'Paid',
+			year: 2016,
+		},
+		{
+			id: 55555,
+			customer: 'John Doe',
+			billingAddress: '123 Main St',
+			shippingAddress: '123 Main St',
+			city: 'Las Vegas',
+			total: 500,
+			status: 'Paid',
+			year: 2015,
+		},
+		{
+			id: 66666,
+			customer: 'Jane Doe',
+			billingAddress: '123 Main St',
+			shippingAddress: '123 Main St',
+			city: 'New Jersey',
+			total: 600,
+			status: 'Paid',
+			year: 2014,
+		},
+		{
+			id: 77777,
+			customer: 'John Doe',
+			billingAddress: '123 Main St',
+			shippingAddress: '123 Main St',
+			total: 700,
+			city: 'New York',
+			status: 'Paid',
+			year: 2013,
+		},
+		{
+			id: 88888,
+			customer: 'Jane Doe',
+			billingAddress: '123 Main St',
+			shippingAddress: '123 Main St',
+			total: 800,
+			city: 'Chicago',
+			status: 'Paid',
+			year: 2012,
+		},
+	];
+
+	let invoiceId!: number;
+
+	const toggleInvoice = (invoice: Invoice): void => {
+		invoiceId = invoice.id;
+	};
+</script>
+
+<div class="w-full flex flex-col">
+	<div class="w-full flex flex-col md:flex-row justify-center items-center gap-2">
+		<div class="flex flex-col justify-center items-start md:items-start w-full md:w-28">
+			<div>
+				<span class="uppercase text-sm"> Overdue </span>
+			</div>
+			<div>
+				<p class="text-sm font-medium"> $10, 800 </p>
+			</div>
+		</div>
+		<div
+			class="w-full flex flex-col justify-center items-start md:items-center md:w-[calc(100%-14rem)]"
+		>
+			<div class="relative py-2 w-full justify-center items-center">
+				<div class="overflow-hidden h-2 text-xs flex rounded bg-green-300">
+					<div
+						class="w-[35%] shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-300"
+					></div>
+				</div>
+			</div>
+		</div>
+		<div class="flex flex-col justify-center items-start md:items-end w-full md:w-28">
+			<div>
+				<span class="uppercase text-sm"> Due soon </span>
+			</div>
+			<div>
+				<p class="text-sm font-medium"> $10, 800 </p>
+			</div>
+		</div>
+	</div>
+	<div class="w-full flex flex-col py-4">
+		<div class="w-full py-4">
+			<h4 class="uppercase text-sm"> Invoice List </h4>
+		</div>
+		<div
+			class="w-full rounded-lg shadow-md border-[1px] border-solid border-gray-100 flex flex-col md:flex-row divide-x-0 divide-y md:divide-x md:divide-y-0"
+		>
+			<div class="flex flex-col w-full md:w-1/2 max-h-[30rem] overflow-x-auto">
+				{#each invoices as invoice, index (invoice.id)}
+					<a
+						sveltekit:prefetch
+						href="{`/dashboard/sales/${$page.params.productId}/invoices/${invoice.id}`}"
+						class="w-full flex flex-row justify-between p-5 hover:bg-gray-100 {$page
+							.params.invoice === `${invoice.id}`
+							? 'bg-gray-100'
+							: ''} transition-all duration-200 ease-in-out"
+						on:click="{() => toggleInvoice(invoice)}"
+					>
+						<div class="flex flex-col items-start">
+							<h5 class="font-semibold"> {invoice.city} </h5>
+							<p class="text-xs text-gray-400"> {invoice.year} </p>
+						</div>
+						<div class="flex flex-col items-end">
+							<h5 class="font-semibold"> ${invoice.total} </h5>
+							<p class="text-xs text-red-500"> {invoice.status} </p>
+						</div>
+					</a>
+				{/each}
+			</div>
+			<div class="flex flex-col w-full md:w-1/2">
+				<slot />
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/dashboard/sales/[productId]/invoices/index.svelte b/src/routes/dashboard/sales/[productId]/invoices/index.svelte
new file mode 100644
index 0000000..5259f63
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/invoices/index.svelte
@@ -0,0 +1,5 @@
+<div class="w-full flex flex-col">
+	<div class="w-full flex flex-col items-center justify-center">
+		<h5> Graph </h5>
+	</div>
+</div>
diff --git a/src/routes/dashboard/sales/[productId]/overview/index.svelte b/src/routes/dashboard/sales/[productId]/overview/index.svelte
new file mode 100644
index 0000000..47d407b
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/overview/index.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import SalesOrderTable from '$components/tables/SalesOrderTable.svelte';
+</script>
+
+<div class="w-full flex flex-col space-y-4">
+	<div class="w-full">
+		<SalesOrderTable />
+	</div>
+</div>
diff --git a/src/routes/dashboard/sales/[productId]/subscriptions/[subscriptionId]/index.svelte b/src/routes/dashboard/sales/[productId]/subscriptions/[subscriptionId]/index.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/dashboard/sales/[productId]/subscriptions/__layout.svelte b/src/routes/dashboard/sales/[productId]/subscriptions/__layout.svelte
new file mode 100644
index 0000000..509d98c
--- /dev/null
+++ b/src/routes/dashboard/sales/[productId]/subscriptions/__layout.svelte
@@ -0,0 +1,3 @@
+<div class="w-full">
+	<h2> Subscriptions </h2>
+</div>
diff --git a/src/routes/dashboard/sales/[productId]/subscriptions/index.svelte b/src/routes/dashboard/sales/[productId]/subscriptions/index.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/dashboard/sales/__layout.svelte b/src/routes/dashboard/sales/__layout.svelte
new file mode 100644
index 0000000..0b3622e
--- /dev/null
+++ b/src/routes/dashboard/sales/__layout.svelte
@@ -0,0 +1,3 @@
+<div class="w-full">
+	<slot />
+</div>