diff --git a/public/assets/boardMember1.webp b/public/assets/boardMember1.webp
new file mode 100644
index 0000000..16d754b
Binary files /dev/null and b/public/assets/boardMember1.webp differ
diff --git a/public/assets/boardMember2.webp b/public/assets/boardMember2.webp
new file mode 100644
index 0000000..8a36128
Binary files /dev/null and b/public/assets/boardMember2.webp differ
diff --git a/public/assets/boardMember3.webp b/public/assets/boardMember3.webp
new file mode 100644
index 0000000..c330a90
Binary files /dev/null and b/public/assets/boardMember3.webp differ
diff --git a/public/assets/boardMember4.webp b/public/assets/boardMember4.webp
new file mode 100644
index 0000000..349cbae
Binary files /dev/null and b/public/assets/boardMember4.webp differ
diff --git a/public/assets/boardMember5.webp b/public/assets/boardMember5.webp
new file mode 100644
index 0000000..1dcc0e1
Binary files /dev/null and b/public/assets/boardMember5.webp differ
diff --git a/public/assets/toasty.webp b/public/assets/toasty.webp
new file mode 100644
index 0000000..26b82f7
Binary files /dev/null and b/public/assets/toasty.webp differ
diff --git a/src/app/board/page.tsx b/src/app/board/page.tsx
index 2cce784..c89f383 100644
--- a/src/app/board/page.tsx
+++ b/src/app/board/page.tsx
@@ -1,12 +1,58 @@
 import Header from "@/components/Header";
 import Board from "@/components/board/Board";
+import hsa1 from "@/public/assets/hsa1.svg";
+import hsa2 from "@/public/assets/hsa2.svg";
+import boardMember1 from "@/public/assets/boardMember1.webp";
+import boardMember2 from "@/public/assets/boardMember2.webp";
+import boardMember3 from "@/public/assets/boardMember3.webp";
+import boardMember4 from "@/public/assets/boardMember4.webp";
+import boardMember5 from "@/public/assets/boardMember5.webp";
 
 const Page = () => {
   return (
-    <>
-      <Header title="BOARD" />
-      <Board />
-    </>
+    <div>
+      <div className="font-songMyung">
+        <Header title=" Meet the Board" />
+      </div>
+
+      <div className="flex w-full flex-col items-center bg-hsa-tan-100 p-5 font-songMyung">
+        <div className="flex w-full flex-row place-items-center justify-center">
+          <Board
+            position="President"
+            name="Lincoln Yang"
+            image={boardMember1.src}
+            badge={hsa1.src}
+          />
+          <Board
+            position="Vice President"
+            name="Kayleigh Young"
+            image={boardMember2.src}
+            badge={hsa1.src}
+          />
+          <Board
+            position="Secretary"
+            name="Anjaly Thao"
+            image={boardMember3.src}
+            badge={hsa1.src}
+          />
+        </div>
+
+        <div className="flex w-full flex-row place-items-center justify-center">
+          <Board
+            position="Treasurer"
+            name="Jacob Vang"
+            image={boardMember4.src}
+            badge={hsa2.src}
+          />
+          <Board
+            position="Public Relations"
+            name="Sara Cha"
+            image={boardMember5.src}
+            badge={hsa2.src}
+          />
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/board/Board.tsx b/src/components/board/Board.tsx
index 0ade537..7c35d40 100644
--- a/src/components/board/Board.tsx
+++ b/src/components/board/Board.tsx
@@ -1,5 +1,37 @@
-const Page = () => {
-  return <div>Board Members</div>;
+import Image from "next/image";
+
+const Page = (props: {
+  position: string;
+  name: string;
+  image: string;
+  badge: string;
+}) => {
+  return (
+    <div className="flex w-1/4 flex-row items-center p-2">
+      <div className="w-full flex-col place-items-center">
+        <div className="relative w-3/4">
+          <Image
+            src={props.image}
+            alt="boardmember"
+            width={0}
+            height={0}
+            className="w-full"
+          />
+          <Image
+            src={props.badge}
+            alt="badge"
+            width={0}
+            height={0}
+            className="absolute bottom-3 w-1/4"
+          />
+        </div>
+        <div className="p-1 font-songMyung text-xl font-bold text-hsa-blue-100">
+          {props.name}
+        </div>
+        <div className="font-openSans text-hsa-gray-300">{props.position}</div>
+      </div>
+    </div>
+  );
 };
 
 export default Page;
diff --git a/src/components/example.tsx b/src/components/example.tsx
new file mode 100644
index 0000000..f4ee8ec
--- /dev/null
+++ b/src/components/example.tsx
@@ -0,0 +1,22 @@
+const Example = (props: { text1: string; text2: string; text3: string }) => {
+  return (
+    <div className="flex w-2/3 flex-col items-center gap-7 rounded-md bg-red-200 p-10">
+      <div className="flex-center w-1/2 bg-blue-200 p-5 text-center text-lg">
+        {props.text1}
+      </div>
+      <div className="flex w-1/2 flex-row gap-3">
+        <div className="flex-center w-full rounded-full bg-blue-500 p-5 text-center text-lg">
+          {props.text2}
+        </div>
+        <div className="flex-center w-full rounded-full bg-blue-500 p-5 text-center text-lg">
+          {props.text2}
+        </div>
+      </div>
+      <div className="w-1/2 bg-blue-700 p-5 text-center text-lg text-white">
+        {props.text3}
+      </div>
+    </div>
+  );
+};
+
+export default Example;