diff --git a/src/app/TheHub.tsx b/src/app/TheHub.tsx
new file mode 100644
index 0000000..956216a
--- /dev/null
+++ b/src/app/TheHub.tsx
@@ -0,0 +1,45 @@
+import { revalidatePath } from "next/cache";
+import JobCard from "./_jobcard/JobCard";
+
+interface JobPosting {
+  title: string;
+  logo: string;
+  company: string;
+  location: string;
+  type: string;
+  description: string;
+  link: string;
+  skills: {
+    react: boolean;
+    python: boolean;
+    golang: boolean;
+    svelte: boolean;
+    nextjs: boolean;
+    typescript: boolean;
+    tailwind: boolean;
+  };
+}
+
+async function fetchJobs(): Promise<JobPosting[]> {
+  const response = await fetch("http://51.20.250.24/jobs", {
+    cache: "no-cache",
+  });
+  if (!response.ok) {
+    throw new Error("Failed to fetch jobs");
+  }
+
+  revalidatePath("/");
+  return response.json();
+}
+
+export default async function TheHub() {
+  const jobs = await fetchJobs();
+  return (
+    <>
+      <h1 className="text-4xl my-4">The Hub</h1>
+      {jobs.map((job, i) => (
+        <JobCard key={i} job={job} />
+      ))}
+    </>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bf02feb..9ca0cdd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,46 +1,10 @@
-import { revalidatePath } from "next/cache";
-import JobCard from "./_jobcard/JobCard";
-
-interface JobPosting {
-  title: string;
-  logo: string;
-  company: string;
-  location: string;
-  type: string;
-  description: string;
-  link: string;
-  skills: {
-    react: boolean;
-    python: boolean;
-    golang: boolean;
-    svelte: boolean;
-    nextjs: boolean;
-    typescript: boolean;
-    tailwind: boolean;
-  };
-}
-
-async function fetchJobs(): Promise<JobPosting[]> {
-  const response = await fetch("http://51.20.250.24/jobs", {
-    cache: "no-cache",
-  });
-  if (!response.ok) {
-    throw new Error("Failed to fetch jobs");
-  }
-
-  revalidatePath("/");
-  return response.json();
-}
+import TheHub from "./TheHub";
 
 export default async function Home() {
-  const jobs = await fetchJobs();
   return (
-    <main>
-      <div className="container">
-        <h1 className="text-4xl my-4">The Hub</h1>
-        {jobs.map((job, i) => (
-          <JobCard key={i} job={job} />
-        ))}
+    <main className="container">
+      <div>
+        <TheHub />
       </div>
     </main>
   );