diff --git a/package-lock.json b/package-lock.json
index f8c91b75..13d6c3d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6927,9 +6927,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.3.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz",
-      "integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
+      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/individuals/pages/Saved.tsx b/src/individuals/pages/Saved.tsx
index 4a5ecb69..31014404 100644
--- a/src/individuals/pages/Saved.tsx
+++ b/src/individuals/pages/Saved.tsx
@@ -123,4 +123,4 @@ export default function SavedPage() {
             )}
         </section>
     );
-};
+};
\ No newline at end of file
diff --git a/src/opportunities/components/FiltersField.tsx b/src/opportunities/components/FiltersField.tsx
index cf049855..458d3e4f 100644
--- a/src/opportunities/components/FiltersField.tsx
+++ b/src/opportunities/components/FiltersField.tsx
@@ -13,42 +13,57 @@ interface FiltersFieldProps {
   setPopUpMenu: () => void;
 }
 
-export default function FiltersField({ resetFilters, deleteFilter, filters, setPopUpMenu }: FiltersFieldProps) {
+export default function FiltersField({
+  resetFilters,
+  deleteFilter,
+  filters,
+  setPopUpMenu,
+}: FiltersFieldProps) {
   return (
-    <div>
-      <hr />
+    <div className="text-gray-800 dark:text-gray-200">
+      <hr className="border-gray-300 dark:border-gray-700" />
+
       <div className="px-3 max-h-20 flex">
         <div className="flex gap-2 w-full">
+          {/* Make sure SearchBar forwards className to the actual <input> */}
           <SearchBar />
 
-          <SmallTextButton className="" onClick={setPopUpMenu} special={true}>
+          <SmallTextButton
+
+            onClick={setPopUpMenu}
+            special={true}
+          >
             <PiSlidersHorizontal className="pr-1" />
             Change Filters
             <PiSlidersHorizontal className="pl-1" />
           </SmallTextButton>
 
-          {/* Fix rendering with new filters = [ [],[],[] ]*/}
+          {/* Filter “chips” */}
           <GroupedComponents gap={2}>
-            {filters.map((filter) => {
-              return (
-                <HorizontalIconButton
-                  onClick={deleteFilter}
-                  icon={<MdCancel />}
-                  key={filter}
-                  special={false}
-                >
-                  {filter}
-                </HorizontalIconButton>
-              )
-            })}
+            {filters.map((filter) => (
+              <HorizontalIconButton
+                key={filter}
+                onClick={deleteFilter}
+                icon={<MdCancel />}
+                special={false}
+                
+              >
+                {filter}
+              </HorizontalIconButton>
+            ))}
           </GroupedComponents>
         </div>
 
-        <SmallTextButton className="flex flex-right" onClick={resetFilters} special={true}>
+        <SmallTextButton
+          onClick={resetFilters}
+          special={true}
+        >
           Reset
         </SmallTextButton>
       </div>
-      <hr />
+
+      <hr className="border-gray-300 dark:border-gray-700" />
     </div>
   );
-};
+}
+
diff --git a/src/opportunities/components/OpportunitiesDetails.tsx b/src/opportunities/components/OpportunitiesDetails.tsx
index d4e41f36..040a9bb8 100644
--- a/src/opportunities/components/OpportunitiesDetails.tsx
+++ b/src/opportunities/components/OpportunitiesDetails.tsx
@@ -8,46 +8,66 @@ interface OpportunitiesListProps {
 
 export default function OpportunitiesList({ opportunities }: OpportunitiesListProps) {
   return (
-    <div className="p-4">
+    <div className="p-4 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
       <div className="overflow-x-auto">
         <table className="w-full border-collapse">
-          <thead>
-            {/* Column Headers */}
-            <tr className="bg-gray-100">
-              <th className="p-3 text-left border">Position</th>
-              <th className="p-3 text-left border">Description</th>
-              <th className="p-3 text-left border">Location</th>
-              <th className="p-3 text-left border">Pay</th>
-              <th className="p-3 text-left border">Credits</th>
-              <th className="p-3 text-left border">Lab Managers</th>
-              <th className="p-3 text-left border">Term</th>
-              <th className="p-3 text-left border">View</th>
-              <th className="p-3 text-left border">Save</th>
+          <thead className="top-0 z-10">
+            <tr className="bg-gray-100 dark:bg-gray-800/80 backdrop-blur">
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Position</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Description</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Location</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Pay</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Credits</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Lab Managers</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Term</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">View</th>
+              <th className="p-3 text-left border border-gray-300 dark:border-gray-600">Save</th>
             </tr>
           </thead>
-          <tbody>
-            {/* Info about the opportunities */}
+
+          <tbody className="[&_tr:nth-child(even)]:bg-transparent dark:[&_tr:nth-child(even)]:bg-gray-800/30">
             {opportunities.length > 0 ? (
               opportunities.map((opportunity) => (
-                <tr key={opportunity.id} className="hover:bg-gray-50">
-                  <td className="p-3 border font-medium">{opportunity.name}</td>
-                  <td className="p-3 border">{opportunity.description}</td>
-                  <td className="p-3 border">{opportunity.location}</td>
-                  <td className="p-3 border">{opportunity.pay ? `$${opportunity.pay}/hr` : ""}</td>
-                  <td className="p-3 border">{opportunity.credits}</td>
-                  <td className="p-3 border">{opportunity.lab_managers}</td>
-                  <td className="p-3 border">
+                <tr
+                  key={opportunity.id}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors"
+                >
+                  <td className="p-3 border border-gray-300 dark:border-gray-600 font-medium">
+                    {opportunity.name}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    {opportunity.description}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    {opportunity.location}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    {opportunity.pay ? `$${opportunity.pay}/hr` : ""}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    {opportunity.credits}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    {opportunity.lab_managers}
+                  </td>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
                     {opportunity.semester} {opportunity.year}
                   </td>
-                  <td className="p-3 border">
-                    <Link to={`/post/${opportunity.id}`}>
-                      <button className="bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-600 mr-2">
-                        View
-                      </button>
-                    </Link>
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    <button
+                      className="bg-blue-600 dark:bg-blue-700 text-white px-4 py-1 rounded
+                                 hover:bg-blue-700 dark:hover:bg-blue-800
+                                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                      View
+                    </button>
                   </td>
-                  <td className="p-3 border">
-                    <button className="bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-600">
+                  <td className="p-3 border border-gray-300 dark:border-gray-600">
+                    <button
+                      className="bg-blue-600 dark:bg-blue-700 text-white px-4 py-1 rounded
+                                 hover:bg-blue-700 dark:hover:bg-blue-800
+                                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
                       {opportunity.saved ? "Unsave" : "Save"}
                     </button>
                   </td>
@@ -55,7 +75,10 @@ export default function OpportunitiesList({ opportunities }: OpportunitiesListPr
               ))
             ) : (
               <tr>
-                <td colSpan={9} className="p-3 border text-center">
+                <td
+                  colSpan={9}
+                  className="p-3 border border-gray-300 dark:border-gray-600 text-center text-gray-500 dark:text-gray-400"
+                >
                   No results found.
                 </td>
               </tr>
@@ -65,4 +88,4 @@ export default function OpportunitiesList({ opportunities }: OpportunitiesListPr
       </div>
     </div>
   );
-};
\ No newline at end of file
+}
diff --git a/src/opportunities/pages/Opportunities.tsx b/src/opportunities/pages/Opportunities.tsx
index f862ec3e..869eb25d 100644
--- a/src/opportunities/pages/Opportunities.tsx
+++ b/src/opportunities/pages/Opportunities.tsx
@@ -8,43 +8,47 @@ interface PageNavigationType {
 }
 
 const Opportunities: React.FC = () => {
-
   // navigation bar
   const [pages, switchPage] = usePageNavigation(["Search", "Saved"], "Search") as [
     PageNavigationType,
     (page: string) => void
   ];
 
-  const activeLink = "text-black py-3 border-b-2 border-black text-lg";
-  const normalLink = "text-gray-600 py-3 text-lg border-black hover:border-b-2 hover:text-black";
+  // Tailwind classes with dark variants
+  const activeLink =
+    "py-3 text-lg font-semibold border-b-2 " +
+    "text-black dark:text-gray-100 " +
+    "border-black dark:border-gray-100";
+
+  const normalLink =
+    "py-3 text-lg font-semibold border-b-2 border-transparent " +
+    "text-gray-600 dark:text-gray-300 " +
+    "hover:text-black dark:hover:text-white " +
+    "hover:border-black dark:hover:border-gray-100";
 
-  // displaying opportunities list component
   return (
-    <section className="flex flex-col h-screen justify-between gap-3">
+    <section className="flex flex-col h-screen justify-between gap-3 text-gray-900 dark:text-gray-100">
       <section className="flex flex-col gap-3">
         <section>
-          <div className="flex gap-5" style={{ alignItems: "center" }}>
-            <h1 className="text-2xl font-bold">Opportunities</h1>
-
-            <nav className="text-base flex gap-4 justify-items-center font-semibold" style={{ alignItems: "center" }}>
-              {pages.pages.map((page) => {
-                return (
-                  <button
-                    key={page}
-                    onClick={() => {
-                      switchPage(page);
-                    }}
-                    className={page === pages.activePage ? activeLink : normalLink}
-                  >
-                    {page}
-                  </button>
-                );
-              })}
+          <div className="flex gap-5 items-center">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+              Opportunities
+            </h1>
+
+            <nav className="text-base flex gap-4 items-center">
+              {pages.pages.map((page) => (
+                <button
+                  key={page}
+                  onClick={() => switchPage(page)}
+                  className={page === pages.activePage ? activeLink : normalLink}
+                >
+                  {page}
+                </button>
+              ))}
             </nav>
           </div>
 
           {pages.activePage === "Search" && <Posts />}
-
         </section>
       </section>
     </section>
diff --git a/src/staff/pages/CreatePost.tsx b/src/staff/pages/CreatePost.tsx
index 0fad0bc5..c85d977b 100644
--- a/src/staff/pages/CreatePost.tsx
+++ b/src/staff/pages/CreatePost.tsx
@@ -12,13 +12,26 @@ export default function CreatePost({ edit }: CreatePostProps) {
 
   if (!auth.isAuthenticated) {
     window.location.href = "/login";
+    return null;
   }
 
   return (
-    <div className="w-9/12 mx-auto">
-      <SEO title={edit === true ? "Edit Research Opportunity" : "Create Research Opportunity"} description={edit === true ? "Edit Research Opportunity Page" : "Create Research Opportunity Page"} />
-      <h1 className="text-center my-8 text-3xl font-bold">{edit === true ? "Edit Research Opportunity" : "Create Research Opportunity"}</h1>
-      <CreationForms edit={edit} />
-    </div>
+    <section className="min-h-[calc(100vh-8rem)] bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+      <SEO
+        title={edit ? "Edit Research Opportunity" : "Create Research Opportunity"}
+        description={edit ? "Edit Research Opportunity Page" : "Create Research Opportunity Page"}
+      />
+
+      <div className="w-11/12 md:w-9/12 mx-auto py-8">
+        <h1 className="text-center my-8 text-3xl font-bold text-gray-900 dark:text-gray-100">
+          {edit ? "Edit Research Opportunity" : "Create Research Opportunity"}
+        </h1>
+
+        {/* subtle card so fields pop in dark mode */}
+        <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6 shadow-sm">
+          <CreationForms edit={edit} />
+        </div>
+      </div>
+    </section>
   );
-};
+}