diff --git a/src/lib/components/Footer/Footer.svelte b/src/lib/components/Footer/Footer.svelte
index c6bcdf8..51d727a 100644
--- a/src/lib/components/Footer/Footer.svelte
+++ b/src/lib/components/Footer/Footer.svelte
@@ -7,7 +7,7 @@
 	import { cn } from '$lib/utils/cn';
 </script>
 
-<div class="h-auto w-full py-16 px-[135px] max-md:p-[70px] gap-6 bg-sucu-pink-05">
+<div class="bottom-0 h-auto w-full py-16 px-[135px] max-md:p-[70px] gap-6 bg-sucu-pink-05">
 	<div class="flex justify-between w-full h-full max-md:hidden">
 		<div class="h-auto w-auto gap-6 flex">
 			<div class="flex flex-col gap-3">
diff --git a/src/lib/components/List/List.svelte b/src/lib/components/List/List.svelte
index 835fd1d..1328485 100644
--- a/src/lib/components/List/List.svelte
+++ b/src/lib/components/List/List.svelte
@@ -21,7 +21,6 @@
 
 <a
 	href={linkHref}
-	target="_blank"
 	class={cn(
 		'h-auto w-full flex flex-col py-3 px-4',
 		listVariants({ variant }),
diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte
index f68e31a..eed2da5 100644
--- a/src/lib/components/Modal/Modal.svelte
+++ b/src/lib/components/Modal/Modal.svelte
@@ -38,6 +38,7 @@
 </script>
 
 {#if isModalOpen}
+	<div class="fixed z-50 inset-0 bg-gray-700 bg-opacity-40 backdrop-blur-sm" />
 	<div class="fixed inset-0 bg-black bg-opacity-50 flex flex-col items-center justify-center z-50">
 		<div
 			class="bg-white h-[500px] max-md:h-[600px] max-md:w-[400px] w-[800px] rounded p-[36px] flex flex-col"
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 6d064f1..3849a4d 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -10,7 +10,7 @@
 
 	const navItems = [
 		{ name: 'ประกาศ', href: '/' },
-		{ name: 'เอกสาร', href: '/' },
+		{ name: 'เอกสาร', href: '/document' },
 		{ name: 'งบประมาณและสถิติ', href: '/' },
 		{ name: 'สโมสรนิสิตฯ', href: '/' }
 	];
diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte
index e0d75c3..0c83214 100644
--- a/src/lib/components/Playground.svelte
+++ b/src/lib/components/Playground.svelte
@@ -13,8 +13,6 @@
 	import TabsList from './Tabs/TabsList.svelte';
 	import TabsTrigger from './Tabs/TabsTrigger.svelte';
 	import TabsContent from './Tabs/TabsContent.svelte';
-	import Navbar from './Navbar.svelte';
-	import Footer from './Footer/Footer.svelte';
 	import AnnoucementCard from './AnnoucementCard/AnnoucementCard.svelte';
 	import thumbnail from '../assets/images/thumbnail.png';
 	import OrganizationCard from './OrganizationCard/OrganizationCard.svelte';
@@ -101,7 +99,6 @@
 
 <div>
 	<!-- Typography Section -->
-	<Navbar />
 	<section class="section">
 		<h2 class="font-bold text-2xl mb-4">Typography Variants</h2>
 		{#each typographyVariants as variant}
@@ -307,8 +304,6 @@
 		<h2 class="font-bold text-2xl mb-4">Organization Card</h2>
 		<OrganizationCard />
 	</section>
-
-	<Footer />
 </div>
 
 <style>
diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
new file mode 100644
index 0000000..52cbc7e
--- /dev/null
+++ b/src/lib/utils/date.ts
@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import buddhistEra from 'dayjs/plugin/buddhistEra';
+import 'dayjs/locale/th';
+import 'dayjs/locale/th';
+
+dayjs.extend(buddhistEra);
+
+export function formatDateTH(dateString: string): string {
+	return dayjs(dateString).locale('th').format('DD MMMM BBBB');
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 04af337..1699c49 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,11 @@
 <script>
+	import Footer from '$lib/components/Footer/Footer.svelte';
+	import Navbar from '$lib/components/Navbar.svelte';
 	import '../styles/app.css';
 </script>
 
-<slot />
+<div>
+	<Navbar />
+	<slot />
+	<Footer />
+</div>
diff --git a/src/routes/document/+page.svelte b/src/routes/document/+page.svelte
index e098535..84f0fc4 100644
--- a/src/routes/document/+page.svelte
+++ b/src/routes/document/+page.svelte
@@ -113,10 +113,10 @@
 
 <MaxWidthWrapper class="mt-10 space-y-12">
 	<div class="flex flex-col gap-3 items-start">
+		<button on:click={() => history.back()} class="lg:relative -left-14 top-12">
+			<Fa icon={faCircleArrowLeft} size="lg" />
+		</button>
 		<div class="flex items-center gap-4">
-			<button on:click={() => history.back()} class="lg:relative -left-60 top-2">
-				<Fa icon={faCircleArrowLeft} size="lg" />
-			</button>
 			<h1 class={cn(typography({ variant: 'heading3' }), 'md:text-5xl lg:order-first')}>เอกสาร</h1>
 		</div>
 		<p class="text-sucu-gray lg:w-full">
diff --git a/src/routes/document/[id]/+page.svelte b/src/routes/document/[id]/+page.svelte
new file mode 100644
index 0000000..7f0106c
--- /dev/null
+++ b/src/routes/document/[id]/+page.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import MaxWidthWrapper from '$lib/components/MaxWidthWrapper.svelte';
+	import { cn } from '$lib/utils';
+	import { faCircleArrowLeft } from '@fortawesome/free-solid-svg-icons';
+	import Fa from 'svelte-fa';
+	import { typography } from '../../../styles/tailwind/typography';
+	import dayjs from 'dayjs';
+	import buddhistEra from 'dayjs/plugin/buddhistEra';
+	import 'dayjs/locale/th';
+	import { formatDateTH } from '$lib/utils/date';
+	import Button from '$lib/components/Button.svelte';
+	import { modalShow } from '$lib/components/Modal/store';
+	import Modal from '$lib/components/Modal/Modal.svelte';
+
+	export let data;
+	const { document } = data;
+
+	modalShow.set(false);
+
+	dayjs.extend(buddhistEra);
+</script>
+
+<MaxWidthWrapper class="mt-10 space-y-6 lg:space-y-12 min-h-screen">
+	<div class="flex flex-col gap-3 items-start">
+		<button on:click={() => history.back()} class="lg:relative -left-14 top-12">
+			<Fa icon={faCircleArrowLeft} size="lg" />
+		</button>
+		<div class="flex items-center gap-4">
+			<h1 class={cn(typography({ variant: 'heading4' }), 'md:text-5xl lg:order-first')}>
+				{document?.title}
+			</h1>
+		</div>
+		<div>
+			<p>
+				โดย {document?.author.first_name}
+			</p>
+			<p>{formatDateTH(document?.updated_at || '')}</p>
+		</div>
+	</div>
+
+	<hr class="border-t border-gray-300 my-12" />
+
+	<div class="flex flex-col gap-6 lg:gap-12">
+		<p>{document?.content.repeat(8)}</p>
+		<div class="w-[342px] h-[220px] lg:w-[876px] lg:h-[500px] bg-sucu-gray-light" />
+		<Button class="w-fit mb-16" on:click={() => modalShow.set(true)}
+			>ดาวน์โหลดเอกสารที่เกี่ยวข้อง</Button
+		>
+		{#if modalShow}
+			<Modal />
+		{/if}
+	</div>
+</MaxWidthWrapper>
diff --git a/src/routes/document/[id]/+page.ts b/src/routes/document/[id]/+page.ts
new file mode 100644
index 0000000..a475129
--- /dev/null
+++ b/src/routes/document/[id]/+page.ts
@@ -0,0 +1,8 @@
+import { documents } from '$lib/mock/document';
+import type { PageLoad } from './$types';
+import 'dayjs/locale/th';
+
+export const load: PageLoad = async ({ params }) => {
+	const document = documents.find((doc) => doc.id === params.id);
+	return { params, document };
+};