diff --git a/lib/types.d.ts b/lib/types.d.ts
index 21e4e5a..ca82794 100644
--- a/lib/types.d.ts
+++ b/lib/types.d.ts
@@ -116,3 +116,15 @@ export type DevProjects = {
   links: ProjectLink[];
   image: string;
 };
+
+export type OfficerSections =
+  | 'advisor'
+  | 'board'
+  | 'media'
+  | 'research'
+  | 'development'
+  | 'projects'
+  | 'education'
+  | 'community'
+  | 'hackutd'
+  | 'industry';
diff --git a/package-lock.json b/package-lock.json
index 6e34be1..c5e74b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-hover-card": "^1.1.7",
         "@radix-ui/react-popover": "^1.1.7",
         "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-tabs": "^1.1.13",
         "@tanstack/react-query": "^5.85.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -39,7 +40,7 @@
         "prettier": "^3.0.3",
         "prettier-plugin-tailwindcss": "^0.5.6",
         "tailwindcss": "^3.4.5",
-        "typescript": "^5"
+        "typescript": "5.9.2"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -2269,6 +2270,183 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -7300,10 +7478,11 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index 4681383..9bc8f77 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@radix-ui/react-hover-card": "^1.1.7",
     "@radix-ui/react-popover": "^1.1.7",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@tanstack/react-query": "^5.85.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -40,6 +41,6 @@
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.6",
     "tailwindcss": "^3.4.5",
-    "typescript": "^5"
+    "typescript": "5.9.2"
   }
 }
diff --git a/public/assets/divisions/board.png b/public/assets/divisions/board.png
new file mode 100644
index 0000000..532f3fd
Binary files /dev/null and b/public/assets/divisions/board.png differ
diff --git a/public/assets/divisions/community.png b/public/assets/divisions/community.png
new file mode 100644
index 0000000..eadbb7b
Binary files /dev/null and b/public/assets/divisions/community.png differ
diff --git a/public/assets/divisions/development.png b/public/assets/divisions/development.png
new file mode 100644
index 0000000..957dd55
Binary files /dev/null and b/public/assets/divisions/development.png differ
diff --git a/public/assets/divisions/education.png b/public/assets/divisions/education.png
new file mode 100644
index 0000000..0f18c16
Binary files /dev/null and b/public/assets/divisions/education.png differ
diff --git a/public/assets/divisions/hackutd.png b/public/assets/divisions/hackutd.png
new file mode 100644
index 0000000..c829a3d
Binary files /dev/null and b/public/assets/divisions/hackutd.png differ
diff --git a/public/assets/divisions/industry.png b/public/assets/divisions/industry.png
new file mode 100644
index 0000000..8896500
Binary files /dev/null and b/public/assets/divisions/industry.png differ
diff --git a/public/assets/divisions/media.png b/public/assets/divisions/media.png
new file mode 100644
index 0000000..e72f1fd
Binary files /dev/null and b/public/assets/divisions/media.png differ
diff --git a/public/assets/divisions/projects.png b/public/assets/divisions/projects.png
new file mode 100644
index 0000000..13c8a53
Binary files /dev/null and b/public/assets/divisions/projects.png differ
diff --git a/public/assets/divisions/research.png b/public/assets/divisions/research.png
new file mode 100644
index 0000000..b834f0d
Binary files /dev/null and b/public/assets/divisions/research.png differ
diff --git a/public/assets/officer-peechi.png b/public/assets/officer-peechi.png
new file mode 100644
index 0000000..010b676
Binary files /dev/null and b/public/assets/officer-peechi.png differ
diff --git a/src/app/officers/page.tsx b/src/app/officers/page.tsx
index 9a8e238..0909974 100644
--- a/src/app/officers/page.tsx
+++ b/src/app/officers/page.tsx
@@ -1,49 +1,29 @@
-import OfficerGrid from '@/components/Officers/OfficerGrid';
 import OfficerHeader from '@/components/Officers/OfficerHeader';
-import Image from 'next/image';
+import { divisionOfficerMap } from '../../../config/officers.config';
+import OfficerClient from '@/components/Officers/OfficerClient';
+import { divisions, allDivisions, titleMap } from '@/components/Officers/constants';
 
-function Apply() {
+function Officers() {
   return (
-    <div className="relative h-full w-full bg-[url(/assets/officer/officer-bg.png)] bg-cover py-20">
-      <div className="absolute right-20 top-28 hidden h-[105rem] w-0 flex-shrink-0 text-center text-[0.625rem] font-bold leading-[99.99%] tracking-[-0.01875rem] text-[#8A8A8A] md:block">
-        <p>
-          0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 0 0 0 0 1 0 1 0
-          0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0 0 0 1 1 0 1 0 1 0 1 0 0 0 1
-          0 1 0 0 1 1 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0
-          0 0 1 0 1 0 0 0 0 0 1 0 1 0 0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0
-          0 0 1 1 0 1 0 1 0 1 0 0 0 1 0 1 0 0 1 1
-        </p>
-        <p>
-          0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 0 0 0 0 1 0 1 0
-          0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0 0 0 1 1 0 1 0 1 0 1 0 0 0 1
-          0 1 0 0 1 1 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0
-          0 0 1 0 1 0 0 0 0 0 1 0 1 0 0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0
-          0 0 1 1 0 1 0 1 0 1 0 0 0 1 0 1 0 0 1 1
-        </p>
-        <p>
-          0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 0 0 0 0 1 0 1 0
-          0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0 0 0 1 1 0 1 0 1 0 1 0 0 0 1
-          0 1 0 0 1 1 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0
-          0 0 1 0 1 0 0 0 0 0 1 0 1 0 0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0
-          0 0 1 1 0 1 0 1 0 1 0 0 0 1 0 1 0 0 1 1
-        </p>
-      </div>
-      <div className="absolute right-24 top-72 hidden md:block">
-        <Image src="/assets/officer/divisions.png" alt="Division" width={40} height={463} />
+    <div className="relative min-h-screen w-full">
+      <div className="fixed inset-0 bg-[url(/assets/officer/officer-bg.png)] bg-cover bg-center bg-no-repeat" />
+
+      <div className="relative z-10">
+        <OfficerHeader />
+
+        <div className="relative">
+          <div className="container relative z-10 mx-auto px-4 py-12 lg:px-8 lg:py-16">
+            <OfficerClient
+              divisions={divisions}
+              allDivisions={allDivisions}
+              titleMap={titleMap}
+              divisionOfficerMap={divisionOfficerMap}
+            />
+          </div>
+        </div>
       </div>
-      <OfficerHeader />
-      <OfficerGrid type="board" />
-      <OfficerGrid type="media" />
-      <OfficerGrid type="research" />
-      <OfficerGrid type="development" />
-      <OfficerGrid type="projects" />
-      <OfficerGrid type="education" />
-      <OfficerGrid type="community" />
-      <OfficerGrid type="hackutd" />
-      <OfficerGrid type="industry" />
-      <OfficerGrid type="advisor" />
     </div>
   );
 }
 
-export default Apply;
+export default Officers;
diff --git a/src/components/Officers/DivisionFilter.tsx b/src/components/Officers/DivisionFilter.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Officers/DivisionIcon.tsx b/src/components/Officers/DivisionIcon.tsx
new file mode 100644
index 0000000..3bfe313
--- /dev/null
+++ b/src/components/Officers/DivisionIcon.tsx
@@ -0,0 +1,28 @@
+import Image from 'next/image';
+import { OfficerSections } from '../../../lib/types';
+
+interface DivisionIconProps {
+  divisionKey: OfficerSections | 'all';
+  label: string;
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+const DivisionIcon = ({ divisionKey, label, size = 'sm', className = '' }: DivisionIconProps) => {
+  if (divisionKey === 'all' || divisionKey === 'advisor') {
+    return null;
+  }
+
+  const dimensions = size === 'sm' ? { width: 16, height: 16 } : { width: 24, height: 24 };
+
+  return (
+    <Image
+      src={`/assets/divisions/${divisionKey}.png`}
+      alt={`${label} icon`}
+      {...dimensions}
+      className={`opacity-80 ${className}`}
+    />
+  );
+};
+
+export default DivisionIcon;
diff --git a/src/components/Officers/OfficerCard.tsx b/src/components/Officers/OfficerCard.tsx
new file mode 100644
index 0000000..bf08c9f
--- /dev/null
+++ b/src/components/Officers/OfficerCard.tsx
@@ -0,0 +1,31 @@
+import { type Officer } from '../../../config/officers.config';
+import { OfficerImageWithFallback } from './OfficerImageWithFallback';
+
+type OfficerCardProps = {
+  officer: Officer & { division?: string };
+};
+
+export const OfficerCard = ({ officer }: OfficerCardProps) => (
+  <div className="group flex-shrink-0">
+    <div className="relative rounded-xl p-4">
+      <div className="flex items-center space-x-4">
+        <div className="relative h-16 w-16 flex-shrink-0 sm:h-20 sm:w-20">
+          <OfficerImageWithFallback
+            src={officer.image}
+            alt={officer.name}
+            fallbackSrc="/assets/officer/OfficerImage.png"
+            className="h-full w-full rounded-full object-cover ring-2 ring-white/20 transition-all duration-200 group-hover:ring-4 group-hover:ring-blue-400/60"
+          />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h3 className="truncate text-base font-semibold text-white transition-colors duration-200 group-hover:text-blue-300">
+            {officer.name}
+          </h3>
+          <p className="text-sm leading-tight text-gray-200/90 transition-colors duration-200 group-hover:text-gray-100">
+            {officer.position}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+);
diff --git a/src/components/Officers/OfficerClient.tsx b/src/components/Officers/OfficerClient.tsx
new file mode 100644
index 0000000..c00b683
--- /dev/null
+++ b/src/components/Officers/OfficerClient.tsx
@@ -0,0 +1,176 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Input } from '@/components/ui/input';
+import { OfficerSections } from '../../../lib/types';
+import { type Officer } from '../../../config/officers.config';
+import { type DivisionInfo } from './constants';
+import DivisionIcon from './DivisionIcon';
+import { OfficerCard } from './OfficerCard';
+
+type OfficerClientProps = {
+  divisions: DivisionInfo[];
+  allDivisions: DivisionInfo[];
+  titleMap: Record<OfficerSections | 'all', React.ReactNode>;
+  divisionOfficerMap: Record<string, Officer[]>;
+};
+
+export default function OfficerClient({
+  divisions,
+  allDivisions,
+  titleMap,
+  divisionOfficerMap,
+}: OfficerClientProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredDivisionOfficerMap = useMemo(() => {
+    const query = searchQuery.toLowerCase().trim();
+
+    if (!query) {
+      return divisionOfficerMap;
+    }
+
+    return Object.fromEntries(
+      Object.entries(divisionOfficerMap).map(([divisionKey, officers]) => [
+        divisionKey,
+        officers.filter((officer: Officer) => officer.name.toLowerCase().includes(query)),
+      ]),
+    );
+  }, [divisionOfficerMap, searchQuery]);
+
+  const groupedOfficersForAll = useMemo(() => {
+    return divisions
+      .map((division) => {
+        const divisionKey = division.key as OfficerSections;
+        const officers = filteredDivisionOfficerMap[divisionKey];
+
+        return {
+          division,
+          officers: officers,
+        };
+      })
+      .filter((group) => group.officers.length > 0);
+  }, [divisions, filteredDivisionOfficerMap]);
+
+  const totalOfficersForAll = useMemo(() => {
+    return groupedOfficersForAll.reduce((sum, group) => sum + group.officers.length, 0);
+  }, [groupedOfficersForAll]);
+
+  return (
+    <>
+      <div className="mx-auto mb-8 max-w-md">
+        <Input
+          type="text"
+          placeholder="Search officers by name..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="h-12 border-gray-600/50 bg-gray-800/40 text-white backdrop-blur-sm transition-colors duration-200 placeholder:text-gray-400 focus:border-blue-500/70 focus:ring-2 focus:ring-blue-500/20"
+        />
+      </div>
+
+      <Tabs defaultValue="all" className="w-full">
+        <div className="mb-8">
+          <div className="flex justify-center overflow-x-auto pb-2">
+            <TabsList className="inline-flex h-auto w-max gap-2 rounded-lg bg-black/20 p-1 backdrop-blur-sm">
+              {allDivisions.map((division: DivisionInfo) => (
+                <TabsTrigger
+                  key={division.key}
+                  value={division.key}
+                  className="flex flex-shrink-0 items-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium transition-colors duration-200 hover:bg-gray-700/60 data-[state=active]:bg-gradient-to-r data-[state=active]:from-blue-600 data-[state=active]:to-purple-600 data-[state=active]:text-white"
+                >
+                  <DivisionIcon divisionKey={division.key} label={division.label} size="sm" />
+                  {division.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </div>
+        </div>
+
+        {allDivisions.map((division: DivisionInfo) => {
+          const isAllTab = division.key === 'all';
+
+          if (isAllTab) {
+            return (
+              <TabsContent key={division.key} value={division.key} className="mt-0">
+                {totalOfficersForAll === 0 ? (
+                  <div className="py-12 text-center">
+                    <div className="text-lg text-gray-400">
+                      No officers found matching your search criteria.
+                    </div>
+                  </div>
+                ) : (
+                  <div className="space-y-12">
+                    {groupedOfficersForAll.map((group) => (
+                      <div key={group.division.key} className="space-y-6">
+                        <div className="text-center">
+                          <div className="mb-4 flex justify-center">
+                            {titleMap[group.division.key as OfficerSections]}
+                          </div>
+                          <div className="mx-auto h-px w-32 bg-gradient-to-r from-transparent via-gray-500 to-transparent"></div>
+                        </div>
+
+                        <div className="mx-auto flex flex-wrap justify-center gap-3 gap-y-5 sm:gap-4 sm:gap-y-6 lg:gap-5 lg:gap-y-7">
+                          {group.officers.map((officer: Officer) => (
+                            <OfficerCard
+                              key={`${group.division.key}-${officer.name}`}
+                              officer={officer}
+                            />
+                          ))}
+                        </div>
+
+                        {group.division.key !== 'advisor' && (
+                          <div className="text-center text-sm text-gray-400">
+                            {group.officers.length} officer{group.officers.length !== 1 ? 's' : ''}{' '}
+                            in {group.division.label}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {totalOfficersForAll > 0 && (
+                  <div className="mt-16 border-t border-gray-700/50 pt-8 text-center text-gray-400">
+                    {totalOfficersForAll} officer{totalOfficersForAll !== 1 ? 's' : ''} total
+                  </div>
+                )}
+              </TabsContent>
+            );
+          } else {
+            const officers = filteredDivisionOfficerMap[division.key as OfficerSections];
+            return (
+              <TabsContent key={division.key} value={division.key} className="mt-0">
+                <div className="mb-8 text-center">
+                  <div className="mb-4 flex justify-center">{titleMap[division.key]}</div>
+                  <div className="mx-auto h-px w-32 bg-gradient-to-r from-transparent via-gray-500 to-transparent"></div>
+                </div>
+
+                {officers?.length === 0 ? (
+                  <div className="py-12 text-center">
+                    <div className="text-lg text-gray-400">
+                      No officers found matching your search criteria.
+                    </div>
+                  </div>
+                ) : (
+                  <div className="mx-auto flex flex-wrap justify-center gap-3 gap-y-5 sm:gap-4 sm:gap-y-6 lg:gap-5 lg:gap-y-7">
+                    {officers?.map((officer: Officer) => (
+                      <OfficerCard key={officer.name} officer={officer} />
+                    ))}
+                  </div>
+                )}
+
+                {division.key !== 'advisor' && (
+                  <div className="mt-8 text-center text-sm text-gray-400">
+                    {officers?.length || 0} officer{officers?.length !== 1 ? 's' : ''} in{' '}
+                    {division.label}
+                  </div>
+                )}
+              </TabsContent>
+            );
+          }
+        })}
+      </Tabs>
+    </>
+  );
+}
diff --git a/src/components/Officers/OfficerGrid.tsx b/src/components/Officers/OfficerGrid.tsx
deleted file mode 100644
index 7966d3e..0000000
--- a/src/components/Officers/OfficerGrid.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import { type ReactNode } from 'react';
-import { useState } from 'react';
-import { divisionOfficerMap } from '../../../config/officers.config';
-
-type Layout =
-  | 'advisor'
-  | 'board'
-  | 'media'
-  | 'research'
-  | 'development'
-  | 'projects'
-  | 'education'
-  | 'community'
-  | 'hackutd'
-  | 'industry';
-
-type GridProps = {
-  type: Layout;
-};
-
-type Officer = {
-  name: string;
-  position: string;
-  image: string;
-};
-
-type PillProps = {
-  officer: Officer;
-};
-
-const titleMap: Record<Layout, ReactNode> = {
-  advisor: <h1 className="text-4xl font-bold">the advisor</h1>,
-  board: <h1 className="text-4xl font-bold">the board</h1>,
-  media: <Image src="/assets/about/media/media.png" alt="ACM Media" width={186} height={75} />,
-  research: (
-    <Image src="/assets/about/research/research.png" alt="ACM Research" width={186} height={75} />
-  ),
-  development: (
-    <Image
-      src="/assets/about/development/development.png"
-      alt="ACM Development"
-      width={186}
-      height={75}
-    />
-  ),
-  projects: (
-    <Image src="/assets/about/projects/projects.png" alt="ACM Projects" width={186} height={75} />
-  ),
-  education: (
-    <Image
-      src="/assets/about/education/education.png"
-      alt="ACM Education"
-      width={186}
-      height={75}
-    />
-  ),
-  community: (
-    <Image
-      src="/assets/about/community/community.png"
-      alt="ACM Community"
-      width={186}
-      height={75}
-    />
-  ),
-  hackutd: <Image src="/assets/about/hackutd/hackutd.png" alt="HackUTD" width={186} height={75} />,
-  industry: (
-    <Image src="/assets/about/industry/industry.png" alt="ACM Industry" width={186} height={75} />
-  ),
-};
-
-interface OfficerImageWithFallbackProps {
-  src: string;
-  fallbackSrc: string;
-  alt: string;
-  className: string;
-  style: React.CSSProperties;
-  isJCole: boolean;
-}
-
-const OfficerImageWithFallback = (props: OfficerImageWithFallbackProps) => {
-  const { src, fallbackSrc, alt, isJCole, ...rest } = props;
-  const [imgSrc, setImgSrc] = useState(src);
-
-  return (
-    <Image
-      {...rest}
-      src={imgSrc}
-      alt={alt}
-      onError={() => {
-        setImgSrc(fallbackSrc);
-      }}
-      width={isJCole ? 110 : 80}
-      height={isJCole ? 110 : 80}
-      sizes="(max-width: 768px) 80px, 110px"
-    />
-  );
-};
-
-const OfficerGrid = (props: GridProps) => {
-  const officers = divisionOfficerMap[props.type];
-  return (
-    <div className="flex flex-col p-10 lg:px-[11.5rem] lg:pb-32">
-      <div className="text-[#cacaca]">{titleMap[props.type]}</div>
-      <div className="flex flex-wrap justify-center gap-8 pt-8">
-        {officers.map((officer) => (
-          <OfficerPill key={officer.name} officer={officer} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const OfficerPill = ({ officer }: PillProps) => (
-  <div className="m-2 flex rounded-lg p-2 text-[#cacaca]">
-    <div
-      className={`relative ${
-        officer.name === 'John Cole' ? `h-[110px] w-[110px]` : `h-[80px] w-[80px]`
-      } `}
-    >
-      <OfficerImageWithFallback
-        style={{ objectFit: 'cover' }}
-        src={officer.image}
-        alt={officer.name}
-        fallbackSrc="/assets/officer/OfficerImage.png"
-        className={`rounded-full ${
-          officer.name === 'John Cole' ? `h-[110px] w-[110px]` : `h-[80px] w-[80px]`
-        } `}
-        isJCole={officer.name === 'John Cole'}
-      />
-    </div>
-    <div className="ml-4 flex flex-col justify-center">
-      <h1 className="text-xl font-semibold">{officer.name}</h1>
-      <p className="text-sm">{officer.position}</p>
-    </div>
-  </div>
-);
-
-export default OfficerGrid;
diff --git a/src/components/Officers/OfficerHeader.tsx b/src/components/Officers/OfficerHeader.tsx
index e74acd9..de68707 100644
--- a/src/components/Officers/OfficerHeader.tsx
+++ b/src/components/Officers/OfficerHeader.tsx
@@ -2,15 +2,36 @@ import Image from 'next/image';
 
 const OfficerHeader = () => {
   return (
-    <div className="flex flex-col-reverse justify-between px-8 md:flex-row md:px-[11.5rem] md:pt-20">
-      <div className="text-[#cacaca]">
-        <h1 className="text-3xl font-bold lg:text-[2.5rem]">meet the team</h1>
-        <p className="w-80 pt-8 text-xl md:w-96 lg:w-[42rem] lg:text-[1.5rem]">
-          8 divisions. One goal.
-          <br /> here are the students keeping ACM in motion.
-        </p>
+    <div className="relative flex items-center justify-center px-6 pt-32 md:px-10">
+      <div className="relative z-10 flex w-full max-w-7xl flex-col-reverse items-center gap-8 lg:flex-row lg:justify-between lg:gap-16">
+        <div className="flex flex-col items-center text-center lg:flex-1 lg:items-start lg:text-left">
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <h1 className="bg-gradient-to-r from-white via-gray-100 to-gray-300 bg-clip-text text-4xl font-bold text-transparent md:text-5xl lg:text-6xl xl:text-7xl">
+                meet the team
+              </h1>
+            </div>
+
+            <p className="max-w-2xl text-lg font-medium leading-relaxed md:text-xl lg:text-2xl">
+              <span className="font-semibold text-white">8 divisions. One goal.</span>
+              <br />
+              <span className="text-gray-300">here are the students keeping ACM in motion.</span>
+            </p>
+          </div>
+        </div>
+        <div className="relative lg:flex-shrink-0">
+          <div className="relative rounded-3xl border border-white/20 bg-gradient-to-br from-white/10 to-white/5 p-6 shadow-2xl backdrop-blur-sm">
+            <Image
+              src="/assets/officer-peechi.png"
+              alt="Peechi"
+              width={300}
+              height={300}
+              className="h-48 w-48 object-contain drop-shadow-2xl md:h-64 md:w-64 lg:h-80 lg:w-80"
+              priority
+            />
+          </div>
+        </div>
       </div>
-      <div className="m-10 h-36 w-36 rounded-full bg-gradient-to-br from-[#F4A3CB] from-10% to-[#dfc84f2b] to-90% p-2 lg:h-[17rem] lg:w-[17rem]"></div>
     </div>
   );
 };
diff --git a/src/components/Officers/OfficerImageWithFallback.tsx b/src/components/Officers/OfficerImageWithFallback.tsx
new file mode 100644
index 0000000..a1984e3
--- /dev/null
+++ b/src/components/Officers/OfficerImageWithFallback.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+
+type OfficerImageWithFallbackProps = {
+  src: string;
+  fallbackSrc: string;
+  alt: string;
+  className: string;
+};
+
+export const OfficerImageWithFallback = (props: OfficerImageWithFallbackProps) => {
+  const { src, fallbackSrc, alt, className } = props;
+  const [imgSrc, setImgSrc] = useState(src);
+
+  return (
+    <Image
+      src={imgSrc}
+      alt={alt}
+      onError={() => {
+        setImgSrc(fallbackSrc);
+      }}
+      height={80}
+      width={80}
+      className={className}
+    />
+  );
+};
diff --git a/src/components/Officers/constants.tsx b/src/components/Officers/constants.tsx
new file mode 100644
index 0000000..55168b2
--- /dev/null
+++ b/src/components/Officers/constants.tsx
@@ -0,0 +1,64 @@
+import Image from 'next/image';
+import { OfficerSections } from '../../../lib/types';
+import DivisionIcon from './DivisionIcon';
+
+export type DivisionInfo = { key: OfficerSections | 'all'; label: string };
+
+export const divisions: DivisionInfo[] = [
+  { key: 'board', label: 'Board' },
+  { key: 'media', label: 'Media' },
+  { key: 'research', label: 'Research' },
+  { key: 'development', label: 'Development' },
+  { key: 'projects', label: 'Projects' },
+  { key: 'education', label: 'Education' },
+  { key: 'community', label: 'Community' },
+  { key: 'hackutd', label: 'HackUTD' },
+  { key: 'industry', label: 'Industry' },
+  { key: 'advisor', label: 'Advisor' },
+];
+
+export const allDivisions: DivisionInfo[] = [
+  { key: 'all' as OfficerSections, label: 'All' },
+  ...divisions,
+];
+
+export const titleMap: Record<OfficerSections | 'all', React.ReactNode> = {
+  all: <></>,
+  advisor: <h1 className="text-2xl font-semibold text-white">the advisor</h1>,
+  board: <div className="flex items-center gap-2"><DivisionIcon divisionKey='board' size='sm' label='board' /> <h1 className="text-2xl font-semibold text-white">the board</h1></div>,
+  media: <Image src="/assets/about/media/media.png" alt="ACM Media" width={140} height={56} />,
+  research: (
+    <Image src="/assets/about/research/research.png" alt="ACM Research" width={140} height={56} />
+  ),
+  development: (
+    <Image
+      src="/assets/about/development/development.png"
+      alt="ACM Development"
+      width={140}
+      height={56}
+    />
+  ),
+  projects: (
+    <Image src="/assets/about/projects/projects.png" alt="ACM Projects" width={140} height={56} />
+  ),
+  education: (
+    <Image
+      src="/assets/about/education/education.png"
+      alt="ACM Education"
+      width={140}
+      height={56}
+    />
+  ),
+  community: (
+    <Image
+      src="/assets/about/community/community.png"
+      alt="ACM Community"
+      width={140}
+      height={56}
+    />
+  ),
+  hackutd: <Image src="/assets/about/hackutd/hackutd.png" alt="HackUTD" width={140} height={56} />,
+  industry: (
+    <Image src="/assets/about/industry/industry.png" alt="ACM Industry" width={140} height={56} />
+  ),
+};
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..cabfbfc
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..69b64fb
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..3c920d8
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground transition-all duration-300 ease-in-out",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow data-[state=active]:scale-105 hover:scale-105",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-2",
+      "data-[state=inactive]:animate-out data-[state=inactive]:fade-out-0 data-[state=inactive]:slide-out-to-bottom-2",
+      "duration-300 ease-in-out",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }