diff --git a/src/components/RevealDropDown.tsx b/src/components/RevealDropDown.tsx
index 2214c4e..8540ced 100644
--- a/src/components/RevealDropDown.tsx
+++ b/src/components/RevealDropDown.tsx
@@ -11,15 +11,31 @@ export default function RevealDropDown(props: {
   };
 
   return (
-    <div class="border-surface0 relative mb-4 overflow-visible rounded-lg border">
+    <div class="relative mb-4 overflow-visible">
       {/* Button Header */}
       <div
-        class="bg-mantle flex cursor-pointer items-center justify-between p-3"
+        class="bg-mantle border-surface0 flex cursor-pointer items-center justify-between rounded-t p-3"
+        style={
+          isRevealed()
+            ? {
+                "border-top-style": "var(--tw-border-style)",
+                "border-inline-style": "var(--tw-border-style)",
+                "border-top-width": "1px",
+                "border-inline-width": "1px",
+                "border-top-left-radius": "var(--radius-xl)",
+                "border-top-right-radius": "var(--radius-xl)"
+              }
+            : {
+                "border-style": "var(--tw-border-style)",
+                "border-width": "1px",
+                "border-radius": "var(--radius-xl)"
+              }
+        }
         onClick={toggleReveal}
       >
         <div class="flex items-center space-x-2">
-          <span class="text-gray-600 dark:text-gray-300">
-            {/* Life and lineage icon */}
+          <span class="h-12 w-12">
+            <img src={"/LineageIcon.png"} />
           </span>
           <span class="font-medium">{props.title}</span>
         </div>
@@ -46,15 +62,13 @@ export default function RevealDropDown(props: {
 
       {/* Reveal Content */}
       <div
-        class={`absolute right-0 left-0 z-10 overflow-scroll transition-all duration-300 ease-in-out ${
+        class={`bg-mantle border-surface0 absolute right-0 left-0 z-10 overflow-scroll rounded-b-xl border-x border-b p-4 shadow-lg transition-all duration-300 ease-in-out ${
           isRevealed()
             ? "mx-h-[75dvh] opacity-100 md:max-h-[60vh]"
             : "max-h-0 opacity-0"
         }`}
       >
-        <div class="bg-mantle p-4 shadow-lg dark:bg-gray-900">
-          {props.children}
-        </div>
+        {props.children}
       </div>
     </div>
   );
diff --git a/src/components/blog/Card.tsx b/src/components/blog/Card.tsx
index 6800cc7..ca59953 100644
--- a/src/components/blog/Card.tsx
+++ b/src/components/blog/Card.tsx
@@ -25,12 +25,12 @@ export interface CardProps {
 
 export default function Card(props: CardProps) {
   return (
-    <div class="bg-base relative z-0 mx-auto h-96 w-full overflow-hidden rounded-lg shadow-lg md:w-5/6 lg:w-3/4 dark:bg-zinc-900">
+    <div class="bg-base border-text relative z-0 mx-auto h-96 w-full overflow-hidden rounded-lg border shadow-lg lg:w-5/6 xl:w-3/4">
       <Show when={props.privilegeLevel === "admin"}>
-        <div class="border-opacity-20 bg-opacity-40 dark:bg-opacity-60 absolute top-0 w-full border-b border-white bg-white px-2 py-4 backdrop-blur-md md:px-6 dark:border-black dark:bg-zinc-800">
+        <div class="border-opacity-20 bg-opacity-40 border-text bg-text absolute top-0 w-full border-b px-2 py-4 backdrop-blur-md md:px-6">
           <div class="flex justify-between">
             <Show when={!props.post.published}>
-              <div class="text-center text-lg whitespace-nowrap text-black dark:text-white">
+              <div class="text-center text-base text-lg whitespace-nowrap">
                 Not Published
               </div>
             </Show>
@@ -43,22 +43,20 @@ export default function Card(props: CardProps) {
         alt={props.post.title.replaceAll("_", " ") + " banner"}
         class="h-full w-full object-cover"
       />
-      <div class="border-opacity-20 bg-opacity-40 dark:bg-opacity-60 bg-base absolute bottom-0 w-full border-t border-white px-2 py-4 backdrop-blur-md md:px-6 dark:border-zinc-900 dark:bg-zinc-800">
+      <div class="border-opacity-20 bg-opacity-40 bg-base border-text absolute bottom-0 w-full border-t px-2 py-4 backdrop-blur-md md:px-6">
         <div class="flex flex-col items-center justify-between md:flex-row">
-          <div class="text-center md:text-left">
-            <div class="text-2xl text-black md:text-3xl dark:text-white">
+          <div class="text-center lg:text-left">
+            <div class="text-2xl md:text-3xl">
               {props.post.title.replaceAll("_", " ")}
             </div>
-            <div class="text-lg text-black md:text-xl dark:text-white">
-              {props.post.subtitle}
-            </div>
+            <div class="text-lg md:text-xl">{props.post.subtitle}</div>
           </div>
-          <div class="flex w-full justify-around pt-2 md:w-1/3 md:justify-between md:pt-0 md:pl-2">
-            <div class="my-auto md:h-full">
-              <p class="text-sm whitespace-nowrap text-black dark:text-white">
+          <div class="flex w-full flex-col justify-around pt-2 lg:w-1/2 lg:flex-row lg:justify-between lg:pt-0 lg:pl-2">
+            <div class="m-auto md:h-full md:pr-2">
+              <p class="text-sm whitespace-nowrap">
                 {props.post.total_comments || 0} Comments
               </p>
-              <p class="text-sm whitespace-nowrap text-black dark:text-white">
+              <p class="text-sm whitespace-nowrap">
                 {props.post.total_likes || 0} Likes
               </p>
             </div>
diff --git a/src/components/blog/CardLinks.tsx b/src/components/blog/CardLinks.tsx
index 6c71d71..ed4f3a8 100644
--- a/src/components/blog/CardLinks.tsx
+++ b/src/components/blog/CardLinks.tsx
@@ -19,7 +19,7 @@ export default function CardLinks(props: CardLinksProps) {
         onClick={() => setReadLoading(true)}
         class={`${
           readLoading() ? "bg-zinc-400" : "bg-lavender hover:brightness-125"
-        } mb-1 ml-2 flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
+        } mx-auto mb-1 flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
       >
         <Show when={readLoading()} fallback="Read">
           <LoadingSpinner height={24} width={24} />
@@ -31,7 +31,7 @@ export default function CardLinks(props: CardLinksProps) {
           onClick={() => setEditLoading(true)}
           class={`${
             editLoading() ? "bg-zinc-400" : "bg-green-400 hover:bg-green-500"
-          } ml-2 flex rounded px-4 py-2 font-light text-white shadow transition-all duration-300 ease-out active:scale-90`}
+          } mx-auto flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
         >
           <Show when={editLoading()} fallback="Edit">
             <LoadingSpinner height={24} width={24} />
diff --git a/src/components/blog/SessionDependantLike.tsx b/src/components/blog/SessionDependantLike.tsx
index 64ba865..cf61c0e 100644
--- a/src/components/blog/SessionDependantLike.tsx
+++ b/src/components/blog/SessionDependantLike.tsx
@@ -72,7 +72,7 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
               width={32}
             />
           </div>
-          <div class="my-auto pt-0.5 pl-2 text-sm text-black dark:text-white">
+          <div class="my-auto pt-0.5 pl-2 text-sm">
             {likes().length} {likes().length === 1 ? "Like" : "Likes"}
           </div>
           <div class="tooltip-text -ml-12 w-12">Must be logged in</div>
diff --git a/src/routes/account.tsx b/src/routes/account.tsx
index de0e7aa..d02406a 100644
--- a/src/routes/account.tsx
+++ b/src/routes/account.tsx
@@ -548,7 +548,7 @@ export default function AccountPage() {
                         !userProfile().email
                       }
                     >
-                      <div class="mt-3 rounded bg-yellow-500/10 px-3 py-2 text-center text-sm text-yellow-600 dark:text-yellow-400">
+                      <div class="bg-yellow mt-3 rounded px-3 py-2 text-center text-base text-sm">
                         ⚠️ Add an email address for account recovery
                       </div>
                     </Show>
@@ -558,7 +558,7 @@ export default function AccountPage() {
                         !userProfile().hasPassword
                       }
                     >
-                      <div class="mt-3 rounded bg-blue-500/10 px-3 py-2 text-center text-sm text-blue-600 dark:text-blue-400">
+                      <div class="bg-blue mt-3 rounded px-3 py-2 text-center text-base text-sm">
                         💡 Add a password to enable email/password login
                       </div>
                     </Show>
diff --git a/src/routes/blog/[title]/index.tsx b/src/routes/blog/[title]/index.tsx
index efb9bf3..c612f95 100644
--- a/src/routes/blog/[title]/index.tsx
+++ b/src/routes/blog/[title]/index.tsx
@@ -268,28 +268,18 @@ export default function PostPage() {
                     }
                   />
 
-                  <div class="relative overflow-x-hidden">
+                  <div class="relative -mt-16 overflow-x-hidden">
                     {/* Fixed banner image background */}
-                    <div class="fixed top-0 left-0 z-0 h-80 w-full sm:h-96 md:h-[50vh]">
-                      <div class="absolute inset-0 h-full w-full overflow-hidden brightness-75">
-                        <img
-                          src={p().banner_photo || "/blueprint.jpg"}
-                          alt="post-cover"
-                          class="blog-banner-image h-full object-cover select-none"
-                          style={{
-                            width: "calc(100vw - 500px)",
-                            "margin-left": "250px",
-                            "pointer-events": "none"
-                          }}
-                        />
-                      </div>
-                      <div
-                        class="text-shadow text-text blog-banner-text absolute top-1/3 z-10 my-auto px-4 text-center tracking-widest brightness-150 select-text"
+                    <div class="fixed inset-0 top-0 left-0 z-0 h-full w-full overflow-hidden brightness-75 sm:h-96 md:ml-62.5 md:h-[50vh] md:w-[calc(100vw-500px)]">
+                      <img
+                        src={p().banner_photo || "/blueprint.jpg"}
+                        alt="post-cover"
+                        class="h-full w-full object-cover select-none"
                         style={{
-                          width: "calc(100vw - 500px)",
-                          "margin-left": "250px"
+                          "pointer-events": "none"
                         }}
-                      >
+                      />
+                      <div class="text-text fixed top-1/3 z-50 m-auto w-full px-4 text-center tracking-widest backdrop-blur-xs select-text md:w-[calc(100vw-500px)]">
                         <div class="text-3xl font-light tracking-widest">
                           {p().title.replaceAll("_", " ")}
                           <div class="py-8 text-xl font-light tracking-widest">
@@ -299,8 +289,7 @@ export default function PostPage() {
                       </div>
                     </div>
 
-                    {/* Spacer to push content down */}
-                    <div class="z-10: pt-80 sm:pt-96 md:pt-[50vh]">
+                    <div class="z-10 pt-80 backdrop-blur-[0.01px] sm:pt-96 md:pt-[50vh]">
                       {/* Content that slides over the fixed image */}
                       <div class="bg-base relative pb-24">
                         <div class="top-4 flex w-full flex-col justify-center md:absolute md:flex-row md:justify-between">
diff --git a/src/routes/downloads.tsx b/src/routes/downloads.tsx
index f41bea6..81076e5 100644
--- a/src/routes/downloads.tsx
+++ b/src/routes/downloads.tsx
@@ -82,7 +82,7 @@ export default function DownloadsPage() {
         </div>
 
         <div class="pt-12">
-          <div class="text-center text-xl tracking-wide dark:text-white">
+          <div class="text-center text-xl tracking-wide">
             Shapes with Abigail!
             <br />
             (apk and iOS)
diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx
index cb49224..a6089dd 100644
--- a/src/routes/login/index.tsx
+++ b/src/routes/login/index.tsx
@@ -443,7 +443,7 @@ export default function LoginPage() {
                         height={24}
                         width={24}
                         strokeWidth={1}
-                        class="stroke-zinc-900 dark:stroke-white"
+                        class="stroke-text"
                       />
                     }
                   >
@@ -451,7 +451,7 @@ export default function LoginPage() {
                       height={24}
                       width={24}
                       strokeWidth={1}
-                      class="stroke-zinc-900 dark:stroke-white"
+                      class="stroke-text"
                     />
                   </Show>
                 </button>
@@ -459,7 +459,7 @@ export default function LoginPage() {
               <div
                 class={`${
                   showPasswordLengthWarning() ? "" : "opacity-0 select-none"
-                } text-center text-red-500 transition-opacity duration-200 ease-in-out`}
+                } text-red text-center transition-opacity duration-200 ease-in-out`}
               >
                 Password too short! Min Length: 8
               </div>
@@ -497,7 +497,7 @@ export default function LoginPage() {
                         height={24}
                         width={24}
                         strokeWidth={1}
-                        class="stroke-zinc-900 dark:stroke-white"
+                        class="stroke-text"
                       />
                     }
                   >
@@ -505,7 +505,7 @@ export default function LoginPage() {
                       height={24}
                       width={24}
                       strokeWidth={1}
-                      class="stroke-zinc-900 dark:stroke-white"
+                      class="stroke-text"
                     />
                   </Show>
                 </button>
diff --git a/src/routes/login/password-reset.tsx b/src/routes/login/password-reset.tsx
index 3606b9d..a88414c 100644
--- a/src/routes/login/password-reset.tsx
+++ b/src/routes/login/password-reset.tsx
@@ -156,15 +156,9 @@ export default function PasswordResetPage() {
     }
     return (
       <div class="timer text-center">
-        <div class="text-sm text-slate-700 dark:text-slate-300">
-          Change Successful!
-        </div>
-        <div class="value py-1 text-3xl text-blue-500 dark:text-blue-400">
-          {timeRemaining}
-        </div>
-        <div class="text-sm text-slate-700 dark:text-slate-300">
-          Redirecting...
-        </div>
+        <div class="text-green text-sm">Change Successful!</div>
+        <div class="value text-blue py-1 text-3xl">{timeRemaining}</div>
+        <div class="text-blue text-sm">Redirecting...</div>
       </div>
     );
   };
@@ -219,7 +213,7 @@ export default function PasswordResetPage() {
                       height={24}
                       width={24}
                       strokeWidth={1}
-                      class="stroke-zinc-900 dark:stroke-white"
+                      class="stroke-text"
                     />
                   }
                 >
@@ -227,7 +221,7 @@ export default function PasswordResetPage() {
                     height={24}
                     width={24}
                     strokeWidth={1}
-                    class="stroke-zinc-900 dark:stroke-white"
+                    class="stroke-text"
                   />
                 </Show>
               </button>
@@ -237,7 +231,7 @@ export default function PasswordResetPage() {
             <div
               class={`${
                 showPasswordLengthWarning() ? "" : "opacity-0 select-none"
-              } text-center text-red-500 transition-opacity duration-200 ease-in-out`}
+              } text-red text-center transition-opacity duration-200 ease-in-out`}
             >
               Password too short! Min Length: 8
             </div>
@@ -275,7 +269,7 @@ export default function PasswordResetPage() {
                       height={24}
                       width={24}
                       strokeWidth={1}
-                      class="stroke-zinc-900 dark:stroke-white"
+                      class="stroke-text"
                     />
                   }
                 >
@@ -283,7 +277,7 @@ export default function PasswordResetPage() {
                     height={24}
                     width={24}
                     strokeWidth={1}
-                    class="stroke-zinc-900 dark:stroke-white"
+                    class="stroke-text"
                   />
                 </Show>
               </button>
@@ -298,7 +292,7 @@ export default function PasswordResetPage() {
                 newPasswordConfRef.value.length >= 6
                   ? ""
                   : "opacity-0 select-none"
-              } text-center text-red-500 transition-opacity duration-200 ease-in-out`}
+              } text-red text-center transition-opacity duration-200 ease-in-out`}
             >
               Passwords do not match!
             </div>
diff --git a/src/routes/privacy-policy/shapes-with-abigail.tsx b/src/routes/privacy-policy/shapes-with-abigail.tsx
index 41d82da..f7d8241 100644
--- a/src/routes/privacy-policy/shapes-with-abigail.tsx
+++ b/src/routes/privacy-policy/shapes-with-abigail.tsx
@@ -9,7 +9,7 @@ export default function PrivacyPolicy() {
         name="description"
         content="Privacy policy for Shapes with Abigail app, explaining our commitment to child safety and non-collection of personal data."
       />
-      <div class="bg-zinc-100 dark:bg-zinc-900">
+      <div class="bg-base">
         <div class="min-h-screen px-[8vw] py-[8vh]">
           <div class="py-4 text-xl">
             Shapes with Abigail!&apos;s Privacy Policy