diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 10a2dee..4bdd1f6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
 import './globals.css';
 import Header from '@/components/header/header';
 import GoTopButton from '@/components/goTopButton/goTopButton';
+import BackButton from '@/components/backButton/backButton';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -22,6 +23,7 @@ export default function RootLayout({
         className={`${inter.className} relative bg-gray-800 text-slate-200`}
       >
         <Header />
+        <BackButton />
         {children}
         <GoTopButton />
       </body>
diff --git a/src/components/backButton/backButton.tsx b/src/components/backButton/backButton.tsx
new file mode 100644
index 0000000..37de024
--- /dev/null
+++ b/src/components/backButton/backButton.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { CircleArrowLeft } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const BackButton: React.FC = () => {
+  const router = useRouter();
+  const handleBack = () => router.push('/');
+
+  return (
+    <button
+      onClick={handleBack}
+      className="absolute left-5 top-20 z-40 flex flex-row gap-2 rounded-full bg-slate-600 bg-opacity-80 px-5 py-3 text-white duration-100 hover:scale-105 hover:cursor-pointer hover:bg-slate-500 hover:bg-opacity-95"
+    >
+      <CircleArrowLeft />
+      <p>Back</p>
+    </button>
+  );
+};
+
+export default BackButton;