diff --git a/src/app/directory/components/TeamDirectory.tsx b/src/app/directory/components/TeamDirectory.tsx
new file mode 100644
index 00000000..4d3e02d8
--- /dev/null
+++ b/src/app/directory/components/TeamDirectory.tsx
@@ -0,0 +1,12 @@
+import { TeamCardsContainer, TeamTable } from ".";
+
+export default function TeamDirectory() {
+  return (
+    <>
+      {/* For screens > 1920px */}
+      <TeamTable />
+      {/* For screens < 1920px */}
+      <TeamCardsContainer />
+    </>
+  );
+}
diff --git a/src/app/directory/components/index.ts b/src/app/directory/components/index.ts
index 83608260..9c89cbb7 100644
--- a/src/app/directory/components/index.ts
+++ b/src/app/directory/components/index.ts
@@ -3,4 +3,5 @@ export { default as TeamRow } from "./TeamRow";
 export { default as TeamCard } from "./TeamCard";
 export { default as TeamCardsContainer } from "./TeamCardsContainer";
 export { default as EditCell } from "./EditCell";
+export { default as TeamDirectory } from "./TeamDirectory";
 export * from "./fixtures/MyTeam";
diff --git a/src/app/directory/page.tsx b/src/app/directory/page.tsx
index 1a55b3a5..96f2aec8 100644
--- a/src/app/directory/page.tsx
+++ b/src/app/directory/page.tsx
@@ -1,4 +1,4 @@
-import { TeamTable, TeamCardsContainer } from ".";
+import { TeamDirectory } from ".";
 import { Banner } from "@/components";
 
 function DirectoryPage() {
@@ -10,10 +10,7 @@ function DirectoryPage() {
         title="Directory"
         description="Behold, your mighty band of teammates! If you want them to plan with precision and prowess, make sure your deets are up to date, or else prepare for some serious spreadsheet confusion!"
       />
-      {/* For screens > 1920px */}
-      <TeamTable />
-      {/* For screens < 1920px */}
-      <TeamCardsContainer />
+      <TeamDirectory />
     </>
   );
 }