diff --git a/src/app/(main)/(pages)/home/page.tsx b/src/app/(main)/(pages)/home/page.tsx
index 281c8b9ea..d095f57b9 100644
--- a/src/app/(main)/(pages)/home/page.tsx
+++ b/src/app/(main)/(pages)/home/page.tsx
@@ -1,3 +1,4 @@
+import { Greeting } from '@/components/Greeting';
 import { MyCourses } from '@/components/MyCourses';
 import { Redirect } from '@/components/Redirect';
 import SearchBar from '@/components/search/SearchBar';
@@ -10,22 +11,11 @@ export default async function MyCoursesPage() {
     return <Redirect to={'/'} />;
   }
 
-  // Get the current hour
-  const currentHour = new Date().getHours();
-
-  // Determine the appropriate greeting based on the time of day
-  let greeting = 'Good Morning';
-  if (currentHour >= 12 && currentHour < 18) {
-    greeting = 'Good Afternoon';
-  } else if (currentHour >= 18 || currentHour < 5) {
-    greeting = 'Good Evening';
-  }
-
   return (
     <main className="flex flex-col gap-4 pb-16 pt-8">
       <div className="flex flex-col justify-between gap-4 lg:flex-row">
         <h1 className="text-wrap text-3xl font-extrabold capitalize tracking-tighter md:text-4xl">
-          {greeting} {session.user.name}
+          <Greeting /> {session.user.name}
         </h1>
         <SearchBar />
       </div>
diff --git a/src/components/Greeting.tsx b/src/components/Greeting.tsx
new file mode 100644
index 000000000..d52ecc7e3
--- /dev/null
+++ b/src/components/Greeting.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+export const Greeting = () => {
+  // Get the current hour
+  const currentHour = new Date().getHours();
+
+  // Determine the appropriate greeting based on the time of day
+  let greeting = 'Good Morning';
+  if (currentHour >= 12 && currentHour < 18) {
+    greeting = 'Good Afternoon';
+  } else if (currentHour >= 18 || currentHour < 5) {
+    greeting = 'Good Evening';
+  } else {
+    greeting = 'Surprise to see you here!';
+  }
+
+  return greeting;
+};