diff --git a/src/app/employees/page.tsx b/src/app/employees/page.tsx
index 05b7761..1e8cdbb 100644
--- a/src/app/employees/page.tsx
+++ b/src/app/employees/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider, ThemeProviderProps } from "@/providers/themeProvider/ThemeProvider";
 import Link from "next/link";
 
 export default function EmployeesPage() {
@@ -16,7 +16,7 @@ export default function EmployeesPage() {
     { name: "Settings", id: "settings", href: "/settings" },
   ];
 
-  const themeProps = {
+  const themeProps: ThemeProviderProps = {
     defaultButtonVariant: "elastic-effect",    defaultTextAnimation: "background-highlight",    borderRadius: "soft",    contentWidth: "mediumLarge",    sizing: "large",    background: "noiseDiagonalGradient",    cardStyle: "layered-gradient",    primaryButtonStyle: "double-inset",    secondaryButtonStyle: "radial-glow",    headingFontWeight: "extrabold"};
 
   return (
diff --git a/src/app/leaves/page.tsx b/src/app/leaves/page.tsx
index 011dd91..ebc7ede 100644
--- a/src/app/leaves/page.tsx
+++ b/src/app/leaves/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider, ThemeProviderProps } from "@/providers/themeProvider/ThemeProvider";
 import Link from "next/link";
 
 export default function LeavesPage() {
@@ -16,7 +16,7 @@ export default function LeavesPage() {
     { name: "Settings", id: "settings", href: "/settings" },
   ];
 
-  const themeProps = {
+  const themeProps: ThemeProviderProps = {
     defaultButtonVariant: "elastic-effect",    defaultTextAnimation: "background-highlight",    borderRadius: "soft",    contentWidth: "mediumLarge",    sizing: "large",    background: "noiseDiagonalGradient",    cardStyle: "layered-gradient",    primaryButtonStyle: "double-inset",    secondaryButtonStyle: "radial-glow",    headingFontWeight: "extrabold"};
 
   return (
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1f26da5..6a46c45 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider, ThemeProviderProps } from "@/providers/themeProvider/ThemeProvider";
 import Link from "next/link";
 
 export default function HomePage() {
@@ -16,7 +16,7 @@ export default function HomePage() {
     { name: "Settings", id: "settings", href: "/settings" },
   ];
 
-  const themeProps = {
+  const themeProps: ThemeProviderProps = {
     defaultButtonVariant: "elastic-effect",    defaultTextAnimation: "background-highlight",    borderRadius: "soft",    contentWidth: "mediumLarge",    sizing: "large",    background: "noiseDiagonalGradient",    cardStyle: "layered-gradient",    primaryButtonStyle: "double-inset",    secondaryButtonStyle: "radial-glow",    headingFontWeight: "extrabold"};
 
   return (
diff --git a/src/app/payroll/page.tsx b/src/app/payroll/page.tsx
index dba1167..5f6dd3d 100644
--- a/src/app/payroll/page.tsx
+++ b/src/app/payroll/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider, ThemeProviderProps } from "@/providers/themeProvider/ThemeProvider";
 import Link from "next/link";
 
 export default function PayrollPage() {
@@ -16,7 +16,7 @@ export default function PayrollPage() {
     { name: "Settings", id: "settings", href: "/settings" },
   ];
 
-  const themeProps = {
+  const themeProps: ThemeProviderProps = {
     defaultButtonVariant: "elastic-effect",    defaultTextAnimation: "background-highlight",    borderRadius: "soft",    contentWidth: "mediumLarge",    sizing: "large",    background: "noiseDiagonalGradient",    cardStyle: "layered-gradient",    primaryButtonStyle: "double-inset",    secondaryButtonStyle: "radial-glow",    headingFontWeight: "extrabold"};
 
   return (
diff --git a/src/app/recruitment/page.tsx b/src/app/recruitment/page.tsx
index be99024..2800af8 100644
--- a/src/app/recruitment/page.tsx
+++ b/src/app/recruitment/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider, ThemeProviderProps } from "@/providers/themeProvider/ThemeProvider";
 import Link from "next/link";
 
 export default function RecruitmentPage() {
@@ -16,7 +16,7 @@ export default function RecruitmentPage() {
     { name: "Settings", id: "settings", href: "/settings" },
   ];
 
-  const themeProps = {
+  const themeProps: ThemeProviderProps = {
     defaultButtonVariant: "elastic-effect",    defaultTextAnimation: "background-highlight",    borderRadius: "soft",    contentWidth: "mediumLarge",    sizing: "large",    background: "noiseDiagonalGradient",    cardStyle: "layered-gradient",    primaryButtonStyle: "double-inset",    secondaryButtonStyle: "radial-glow",    headingFontWeight: "extrabold"};
 
   return (
diff --git a/src/app/reports/page.tsx b/src/app/reports/page.tsx
index 2dc55b8..0bb1361 100644
--- a/src/app/reports/page.tsx
+++ b/src/app/reports/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider, ThemeProviderProps } from "@/providers/themeProvider/ThemeProvider";
 import Link from "next/link";
 
 export default function ReportsPage() {
@@ -16,7 +16,7 @@ export default function ReportsPage() {
     { name: "Settings", id: "settings", href: "/settings" },
   ];
 
-  const themeProps = {
+  const themeProps: ThemeProviderProps = {
     defaultButtonVariant: "elastic-effect",    defaultTextAnimation: "background-highlight",    borderRadius: "soft",    contentWidth: "mediumLarge",    sizing: "large",    background: "noiseDiagonalGradient",    cardStyle: "layered-gradient",    primaryButtonStyle: "double-inset",    secondaryButtonStyle: "radial-glow",    headingFontWeight: "extrabold"};
 
   return (