diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index c5264b7..6ddad9a 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,7 +1,6 @@
 import { Metadata } from 'next'
 
-import Header from '@/components/blocks/header/header'
-import Footer from '@/components/blocks/footer/footer'
+import DefaultLayout from '@/components/layouts/DefaultLayout'
 import UnderConstruction from '@/components/blocks/error/under-construction'
 
 export const metadata: Metadata = {
@@ -10,12 +9,10 @@ export const metadata: Metadata = {
 
 export default function Blog() {
   return (
-    <div className="max-w-screen-lg w-full mx-auto px-6">
-      <Header />
+    <DefaultLayout>
       <main className="flex justify-center items-center h-[85vh]">
         <UnderConstruction />
       </main>
-      <Footer />
-    </div>
+    </DefaultLayout>
   )
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index efa64ec..c4b3d51 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from 'next'
 
-import Header from '@/components/blocks/header/header'
+import DefaultLayout from '@/components/layouts/DefaultLayout'
 import PageNotFound from '@/components/blocks/error/page-not-found'
 
 export const metadata: Metadata = {
@@ -9,11 +9,10 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <div className="max-w-screen-lg w-full mx-auto px-6">
-      <Header />
+    <DefaultLayout>
       <main className="flex justify-center items-center h-[85vh]">
         <PageNotFound />
       </main>
-    </div>
+    </DefaultLayout>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4dd6844..43d070d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,19 +1,16 @@
-import Header from '@/components/blocks/header/header'
-import Footer from '@/components/blocks/footer/footer'
+import DefaultLayout from '@/components/layouts/DefaultLayout'
+import IntroductionSection from '@/components/blocks/home/introduction-section'
 import AboutSection from '@/components/blocks/home/about-section'
 import ContactSection from '@/components/blocks/home/contact-section'
-import IntroductionSection from '@/components/blocks/home/introduction-section'
 
 export default function Home() {
   return (
-    <div className="max-w-screen-lg w-full mx-auto px-6">
-      <Header />
+    <DefaultLayout>
       <main className="flex flex-col gap-24 mb-24">
         <IntroductionSection />
         <AboutSection />
         <ContactSection />
       </main>
-      <Footer />
-    </div>
+    </DefaultLayout>
   )
 }
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 4157402..3443f09 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -1,7 +1,6 @@
 import { Metadata } from 'next'
 
-import Header from '@/components/blocks/header/header'
-import Footer from '@/components/blocks/footer/footer'
+import DefaultLayout from '@/components/layouts/DefaultLayout'
 import UnderConstruction from '@/components/blocks/error/under-construction'
 
 export const metadata: Metadata = {
@@ -10,12 +9,10 @@ export const metadata: Metadata = {
 
 export default function Projects() {
   return (
-    <div className="max-w-screen-lg w-full mx-auto px-6">
-      <Header />
+    <DefaultLayout>
       <main className="flex justify-center items-center h-[85vh]">
         <UnderConstruction />
       </main>
-      <Footer />
-    </div>
+    </DefaultLayout>
   )
 }
diff --git a/src/components/blocks/footer/footer.tsx b/src/components/blocks/footer/footer.tsx
index 6f39a69..0e57b3e 100644
--- a/src/components/blocks/footer/footer.tsx
+++ b/src/components/blocks/footer/footer.tsx
@@ -3,7 +3,7 @@ import Package from '../../../../package.json'
 
 export default function Footer() {
   return (
-    <footer className="flex flex-col gap-1 items-center mb-8">
+    <footer className="flex flex-col gap-1 items-center mb-8 text-xs md:text-base">
       <p className="font-semibold text-center">Site Version: {Package.version}</p>
       <p className="font-semibold text-center">
         Created with ❤️ by <Anchor href={Package.author.url}>{Package.author.nickname}</Anchor>
diff --git a/src/components/layouts/DefaultLayout.tsx b/src/components/layouts/DefaultLayout.tsx
new file mode 100644
index 0000000..bf03d50
--- /dev/null
+++ b/src/components/layouts/DefaultLayout.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from 'react'
+
+import Header from '@/components/blocks/header/header'
+import Footer from '@/components/blocks/footer/footer'
+
+export interface Props {
+  children: ReactNode
+}
+
+export default function DefaultLayout({ children }: Props) {
+  return (
+    <div className="max-w-screen-lg w-full mx-auto px-6">
+      <Header />
+      {children}
+      <Footer />
+    </div>
+  )
+}