diff --git a/src/app/directory/components/EditCell.tsx b/src/app/directory/components/EditCell.tsx
new file mode 100644
index 00000000..53a7cb16
--- /dev/null
+++ b/src/app/directory/components/EditCell.tsx
@@ -0,0 +1,29 @@
+import { PencilSquareIcon } from "@heroicons/react/24/solid";
+import { TeamMember } from ".";
+import { Button } from "@/components";
+
+interface EditCellProps {
+  teamMember: TeamMember;
+  currentUserId: string;
+}
+
+export default function EditCell({ teamMember, currentUserId }: EditCellProps) {
+  return (
+    <div
+      className={`flex items-center justify-between h-[35px] rounded-md pl-4 ${
+        teamMember.id === currentUserId &&
+        "bg-base-100 hover:bg-secondary transition"
+      }`}
+    >
+      {teamMember.averageHour === 0 ? "Add hours" : teamMember.averageHour}
+      {teamMember.id === currentUserId && (
+        <Button
+          title="edit"
+          customClassName="pl-2 pr-1 h-full rounded-l-none rounded-r-md p-0 min-h-0 text-sm font-medium text-base-300 bg-transparent border-transparent hover:bg-transparent hover:border-transparent"
+        >
+          <PencilSquareIcon className="w-4 h-4 text-base-300" />
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/directory/components/TeamCard.tsx b/src/app/directory/components/TeamCard.tsx
new file mode 100644
index 00000000..125c6366
--- /dev/null
+++ b/src/app/directory/components/TeamCard.tsx
@@ -0,0 +1,43 @@
+import { EditCell, TeamMember } from ".";
+
+interface TeamCardProps {
+  teamMember: TeamMember;
+  currentUserId: string;
+}
+
+export default function TeamCard({ teamMember, currentUserId }: TeamCardProps) {
+  return (
+    <div className="box-border flex flex-col items-center p-10 card bg-secondary-content">
+      <ul className="flex flex-col gap-6 min-w-[400px]">
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Name</span>
+          <span>{teamMember.name}</span>
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Discord ID</span>
+          <span>{teamMember.discordId}</span>
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Average Hour/Sprint</span>
+          <EditCell teamMember={teamMember} currentUserId={currentUserId} />
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Location</span>
+          <span>{teamMember.location}</span>
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Timezone</span>
+          <span>{teamMember.timeZone}</span>
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Email</span>
+          <span>{teamMember.email}</span>
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Position</span>
+          <span>{teamMember.position}</span>
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/src/app/directory/components/TeamCardsContainer.tsx b/src/app/directory/components/TeamCardsContainer.tsx
new file mode 100644
index 00000000..fa00fddd
--- /dev/null
+++ b/src/app/directory/components/TeamCardsContainer.tsx
@@ -0,0 +1,19 @@
+import { TeamCard, teamMembers } from ".";
+
+// Temp:
+const currentUserId = "1";
+
+export default function TeamCardsContainer() {
+  return (
+    <div className="flex flex-col min-[1920px]:hidden gap-y-10 w-full text-base-300 text-medium">
+      {/* cards */}
+      {teamMembers.map((teamMember) => (
+        <TeamCard
+          key={teamMember.id}
+          teamMember={teamMember}
+          currentUserId={currentUserId}
+        />
+      ))}
+    </div>
+  );
+}
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/TeamRow.tsx b/src/app/directory/components/TeamRow.tsx
index 00db8611..4a950098 100644
--- a/src/app/directory/components/TeamRow.tsx
+++ b/src/app/directory/components/TeamRow.tsx
@@ -1,28 +1,17 @@
-import { PencilSquareIcon } from "@heroicons/react/24/solid";
-import { TeamMember } from ".";
-
+import { EditCell, TeamMember } from ".";
 
 interface TeamRowProps {
   teamMember: TeamMember;
   currentUserId: string;
 }
 
-function TeamRow({ teamMember, currentUserId }: TeamRowProps) {
+export default function TeamRow({ teamMember, currentUserId }: TeamRowProps) {
   return (
     <tr>
       <td>{teamMember.name}</td>
       <td>{teamMember.discordId}</td>
       <td>
-        <div className="flex items-center justify-between h-[35px] bg-base-100 hover:bg-secondary hover:cursor-pointer rounded-md pl-4">
-          {teamMember.averageHour === 0 ? "Add hours" : teamMember.averageHour}
-          {teamMember.id === currentUserId && (
-            <div
-              className="flex items-center justify-between pr-4 text-sm font-semibold "
-            >
-              <PencilSquareIcon className="w-4 h-4 text-base-300 bg-transparent" />
-            </div>
-          )}
-        </div>
+        <EditCell teamMember={teamMember} currentUserId={currentUserId} />
       </td>
       <td>{teamMember.location}</td>
       <td>{teamMember.timeZone}</td>
@@ -31,5 +20,3 @@ function TeamRow({ teamMember, currentUserId }: TeamRowProps) {
     </tr>
   );
 }
-
-export default TeamRow;
diff --git a/src/app/directory/components/TeamTable.tsx b/src/app/directory/components/TeamTable.tsx
index 2db71ef2..ea25d1c2 100644
--- a/src/app/directory/components/TeamTable.tsx
+++ b/src/app/directory/components/TeamTable.tsx
@@ -4,11 +4,11 @@ import { TeamRow, teamMembers } from ".";
 // Temp:
 const currentUserId = "1";
 
-function TeamTable() {
+export default function TeamTable() {
   return (
-    <div className="w-full">
+    <div className="hidden w-full min-[1920px]:block">
       <table
-        className={`table px-6 pb-10 border-separate border-none bg-secondary-content pt-7 ${styles["table"]}`}
+        className={`table px-6 pb-10 border-separate border-none bg-secondary-content text-base-300 pt-7 ${styles["table"]}`}
       >
         {/* head */}
         <thead className="mb-10 text-xl font-semibold text-base-300">
@@ -36,5 +36,3 @@ function TeamTable() {
     </div>
   );
 }
-
-export default TeamTable;
diff --git a/src/app/directory/components/index.ts b/src/app/directory/components/index.ts
index 0ecd173c..9c89cbb7 100644
--- a/src/app/directory/components/index.ts
+++ b/src/app/directory/components/index.ts
@@ -1,3 +1,7 @@
 export { default as TeamTable } from "./TeamTable";
 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 47471041..96f2aec8 100644
--- a/src/app/directory/page.tsx
+++ b/src/app/directory/page.tsx
@@ -1,4 +1,4 @@
-import { TeamTable } from ".";
+import { TeamDirectory } from ".";
 import { Banner } from "@/components";
 
 function DirectoryPage() {
@@ -10,7 +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!"
       />
-      <TeamTable />;
+      <TeamDirectory />
     </>
   );
 }