diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9eceb9d..89f8810 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -49,7 +49,7 @@ export default function RootLayout({
         src="https://analytics.fascinated.cc/js/script.js"
       />
 
-      <body className={clsx(font.className, "bg-black text-white")}>
+      <body className={clsx(font.className, "bg-black text-primary")}>
         <div className="fixed left-0 top-0 z-0 h-full w-full blur-sm">
           <Image
             className="object-fill object-center"
diff --git a/src/components/AppProvider.tsx b/src/components/AppProvider.tsx
index dddef05..a66a121 100644
--- a/src/components/AppProvider.tsx
+++ b/src/components/AppProvider.tsx
@@ -5,6 +5,7 @@ import { useSettingsStore } from "@/store/settingsStore";
 import React from "react";
 import { TooltipProvider } from "./ui/Tooltip";
 import { ThemeProvider } from "./ui/theme-provider";
+
 const UPDATE_INTERVAL = 1000 * 60 * 5; // 5 minutes
 
 export default class AppProvider extends React.Component {
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 7b8c55a..931596c 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -23,7 +23,7 @@ export default function Pagination(props: PaginationProps) {
   }
 
   return (
-    <div className="flex justify-center text-white">
+    <div className="flex justify-center text-primary">
       <nav>
         <ul className="flex items-center gap-2">
           {currentPage > 1 && (
@@ -60,7 +60,7 @@ export default function Pagination(props: PaginationProps) {
               <button
                 className={`rounded-md px-3 py-1 ${
                   pageNumber === currentPage
-                    ? "bg-blue-500 text-white"
+                    ? "bg-blue-500 text-primary"
                     : "bg-neutral-700 hover:opacity-80"
                 }`}
                 onClick={() => onPageChange(pageNumber)}
