diff --git a/src/components/GoogleForm/GoogleRules.tsx b/src/components/GoogleForm/GoogleRules.tsx
index 0ad0cbf8e..50f0b5ad6 100644
--- a/src/components/GoogleForm/GoogleRules.tsx
+++ b/src/components/GoogleForm/GoogleRules.tsx
@@ -16,7 +16,7 @@ const RulesModal: React.FC = () => {
       {/* Modal overlay and content */}
       {isOpen && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center flex-col items-center z-50">
-          <div className="bg-dark-frame-bg p-6 rounded-lg shadow-lg max-w-lg">
+          <div className="bg-gray-500 dark:bg-dark-frame-bg p-6 rounded-lg shadow-lg max-w-lg">
             <button
               onClick={() => setIsOpen(false)}
               className="text-gray-600 hover:text-gray-800 float-right font-bold text-xl"
diff --git a/src/components/Layout/Admins/AdminLayout.tsx b/src/components/Layout/Admins/AdminLayout.tsx
index 7fb147355..25e8608e2 100644
--- a/src/components/Layout/Admins/AdminLayout.tsx
+++ b/src/components/Layout/Admins/AdminLayout.tsx
@@ -8,7 +8,7 @@ const AdminLayout = () => {
 
   return (
     <>
-      <div className=" h-screen">
+      <div className=" h-screen bg-white dark:bg-dark-frame-bg">
         <div className=" w-full h-[70px]">
           <AdminHeader />
         </div>
diff --git a/src/pages/Applicant/ApplicantLayout.tsx b/src/pages/Applicant/ApplicantLayout.tsx
index 55f456e74..885a7a7d2 100644
--- a/src/pages/Applicant/ApplicantLayout.tsx
+++ b/src/pages/Applicant/ApplicantLayout.tsx
@@ -6,7 +6,7 @@ const ApplicantLayout = () => {
   const [sidebarExpanded, setSidebarExpanded] = useState(true);
   return (
     <>
-      <div className=" h-screen">
+      <div className=" h-screen bg-white dark:bg-dark-frame-bg">
         <div className=" w-full h-[70px]">
           <Applicant />
         </div>
diff --git a/src/pages/Applications/ApplicantApplication.tsx b/src/pages/Applications/ApplicantApplication.tsx
index 96e1e5933..a372bd215 100644
--- a/src/pages/Applications/ApplicantApplication.tsx
+++ b/src/pages/Applications/ApplicantApplication.tsx
@@ -141,14 +141,14 @@ export const ApplicantApplication = () => {
 
       {/* <DynamicTable headers={headers} data={applications} isLoading={loading} /> */}
 
-      <div className="w-[4/5] flex flex-col bg-gray-800 text-white mt-12">
-        <div className="bg-gray-700 w-full h-12 flex items-center justify-between px-4">
+      <div className="w-[4/5] flex flex-col bg-gray-500 dark:bg-gray-800 text-black dark:text-white mt-12">
+        <div className="bg-gray-400 dark:bg-gray-700 w-full h-12 flex items-center justify-between px-4">
           <h2 className="w-40">JOB TITLE</h2>
           <h2 className="w-40">DATE OF SUBMISSION</h2>
           <h2 className="w-32 max-w-32">STATUS</h2>         
         </div>
         {filteredApplications.map((application, i) => (
-          <div className={`w-full h-16 flex items-center justify-between px-4 ${i % 2 !== 0 && 'bg-gray-700'}`}>
+          <div className={`w-full h-16 flex items-center justify-between px-4 ${i % 2 !== 0 && 'bg-gray-400 dark:bg-gray-700'}`}>
             <h2 className="w-40 text-sm">{application.jobId?.title}</h2>
             <h2 className="w-40 text-sm">{application.createdAt}</h2>
             <div className="w-32 flex items-center justify-start">
diff --git a/src/skeletons/adminDashboardSkeleton.tsx b/src/skeletons/adminDashboardSkeleton.tsx
index 155671486..e4fae15f7 100644
--- a/src/skeletons/adminDashboardSkeleton.tsx
+++ b/src/skeletons/adminDashboardSkeleton.tsx
@@ -1,6 +1,6 @@
 export const AdminDashboardSkeleton = () => {
   return (
-    <div className="space-y-4 mx-10 dark:bg-dark-bg shadow-lg mt-8 py-8 rounded-md w-[90%] mx-auto">
+    <div className="space-y-4 mx-10 bg-white dark:bg-dark-bg shadow-lg mt-8 py-8 rounded-md w-[90%] mx-auto">
           <div className="animate-pulse flex items-center space-x-8 px-4 ml-4">
             <div className="bg-gray-600 h-20 rounded w-1/4 md:w-1/6 lg:w-1/4"></div>
             <div className="bg-gray-600 h-20 rounded w-1/4 md:w-1/6 lg:w-1/4"></div>