diff --git a/app/footer.tsx b/app/footer.tsx
new file mode 100644
index 0000000..21a7eba
--- /dev/null
+++ b/app/footer.tsx
@@ -0,0 +1,9 @@
+'use client';
+export default function Footer() {
+    return (
+        <div className={ `bottom-0 mt-5 content-center h-fit bg-slate-800/95` }>
+            <p className={ `text-center my-2` }>©2024-{ new Date().getFullYear() } <a
+                href={ 'https://github.com/lumither' }>Lumither Tao</a></p>
+        </div>
+    );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 0fa028c..c6a9d4b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,6 +6,7 @@ import { cn } from '@/lib/utils';
 import React from 'react';
 import { ThemeProvider } from '@/components/theme-provider';
 import Navbar from '@/app/navbar';
+import Footer from '@/app/footer';
 
 
 const fontSans = FontSans({
@@ -39,6 +40,7 @@ export default function RootLayout({
                 <div className={ 'mt-20 overflow-scroll' }>
                     { children }
                 </div>
+                <Footer />
             </div>
         </ThemeProvider>
         </body>
diff --git a/app/page.tsx b/app/page.tsx
index 6d98d69..10889a6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,11 +2,11 @@ export default function Home() {
     let info = new Array(200).fill(<p> test </p>);
     return (
         <main>
-                    <ul>
-                        { info.map((item, id) => (
-                            <li key={ id }> { item } </li>
-                        )) }
-                    </ul>
+            <ul>
+                { info.map((item, id) => (
+                    <li key={ id }> { item } </li>
+                )) }
+            </ul>
         </main>
     );
 }