diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 9611625..0b9611b 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -130,9 +130,9 @@ export default async function Post({ params }: { params: Promise<{ slug: string
           {previous ? (
             <Link
               href={`/posts/${previous.slug}`}
-              className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-muted/50 active:bg-muted/70"
+              className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-fg/10 active:bg-fg/15"
             >
-              <span className="flex items-center gap-1 text-xs text-muted-foreground uppercase tracking-wide">
+              <span className="flex items-center gap-1 text-xs text-fg-dim uppercase tracking-wide">
                 <ArrowLeft className="w-3 h-3 shrink-0 transition-transform group-hover:-translate-x-1" />
                 Previous
               </span>
@@ -147,9 +147,9 @@ export default async function Post({ params }: { params: Promise<{ slug: string
           {next ? (
             <Link
               href={`/posts/${next.slug}`}
-              className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-muted/50 active:bg-muted/70 sm:text-right"
+              className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-fg/10 active:bg-fg/15 sm:text-right"
             >
-              <span className="flex items-center gap-1 text-xs text-muted-foreground uppercase tracking-wide sm:justify-end">
+              <span className="flex items-center gap-1 text-xs text-fg-dim uppercase tracking-wide sm:justify-end">
                 Next
                 <ArrowRight className="w-3 h-3 shrink-0 transition-transform group-hover:translate-x-1" />
               </span>