diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index 8f39079..ef76b0c 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -7,28 +7,57 @@ type Props = {}
 
 const LoginPage = (props: Props) => {
     return (
-        <div>
-            <div className="absolute inset-0">
-                <img src="/assets/images/auth/bg-gradient.png" alt="image" className="h-full w-full object-cover" />
+        <div className="relative min-h-screen overflow-hidden bg-[#060818] text-white">
+            {/* Background gradient layer */}
+            <div className="absolute inset-0 -z-10">
+                <img
+                    src="/assets/images/auth/bg-gradient.png"
+                    alt="background gradient"
+                    className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
             </div>
 
-            <div className="relative flex min-h-screen items-center justify-center bg-[linear-gradient(45deg,#ffffff_0%,#fcd913_100%)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16">
-                <img src="/assets/images/auth/coming-soon-object1.png" alt="image" className="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
-                <img src="/assets/images/auth/coming-soon-object2.png" alt="image" className="absolute left-24 top-0 h-40 md:left-[30%]" />
-                <img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" />
-                <img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" />
-                <div className="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]">
-                    <div className="relative flex flex-col justify-center rounded-md bg-white/60 px-6 py-20 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px]">
-                        <div className="mx-auto w-full max-w-[440px]">
-                            <div className="mb-10">
-                                <h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign in</h1>
-                                <p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to login</p>
-                            </div>
+            {/* Background decorative objects */}
+            <img
+                src="/assets/images/auth/coming-soon-object1.png"
+                alt="left decor"
+                className="absolute left-0 top-1/2 hidden h-full max-h-[893px] -translate-y-1/2 brightness-125 md:block"
+            />
+            <img
+                src="/assets/images/auth/coming-soon-object3.png"
+                alt="right decor"
+                className="absolute right-0 top-0 hidden h-[300px] brightness-125 md:block"
+            />
+
+            {/* Centered card wrapper */}
+            <div className="relative flex min-h-screen items-center justify-center px-6 py-10 sm:px-16">
+                <div
+                    className="relative w-full max-w-[870px] rounded-2xl p-1
+                               bg-[linear-gradient(45deg,#fffbe6_0%,rgba(255,251,230,0)_25%,rgba(255,251,230,0)_75%,#fffbe6_100%)]
+                               dark:bg-[linear-gradient(52.22deg,#facc15_0%,rgba(250,204,21,0)_20%,rgba(250,204,21,0)_80%,#facc15_100%)]"
+                >
+                    {/* Inner card (glassmorphic effect) */}
+                    <div className="relative z-10 rounded-2xl bg-white/10 px-8 py-16 backdrop-blur-lg dark:bg-white/10 lg:min-h-[600px]">
+                        <div className="mx-auto w-full max-w-[440px] text-center">
+                            {/* Header */}
+                            <h1 className="text-4xl font-extrabold uppercase tracking-wide text-yellow-400 mb-2">
+                                Sign In
+                            </h1>
+                            <p className="text-base font-medium text-gray-200 dark:text-gray-300 mb-8">
+                                Enter your email and password to access your account.
+                            </p>
+
+                            {/* Login form */}
                             <ComponentsAuthLoginForm />
 
-                            <div className="text-center dark:text-white">
-                                Don&apos;t have an account ?&nbsp;
-                                <Link href="/register" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
+                            {/* Footer link */}
+                            <div className="mt-6 text-sm text-gray-200 dark:text-gray-300">
+                                Don’t have an account?{" "}
+                                <Link
+                                    href="/register"
+                                    className="text-yellow-400 font-semibold underline transition hover:text-white"
+                                >
                                     SIGN UP
                                 </Link>
                             </div>
@@ -37,7 +66,8 @@ const LoginPage = (props: Props) => {
                 </div>
             </div>
         </div>
-    )
-}
+    );
+};
+
 
 export default LoginPage
diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
index 811d53d..11b05b0 100644
--- a/app/(auth)/register/page.tsx
+++ b/app/(auth)/register/page.tsx
@@ -6,30 +6,58 @@ import React from 'react';
 type Props = {}
 
 const RegisterPage = (props: Props) => {
-    return (
-        <div>
-            <div className="absolute inset-0">
-                <img src="/assets/images/auth/bg-gradient.png" alt="image" className="h-full w-full object-cover" />
+     return (
+        <div className="relative min-h-screen overflow-hidden bg-[#060818] text-white">
+            {/* Background gradient layer */}
+            <div className="absolute inset-0 -z-10">
+                <img
+                    src="/assets/images/auth/bg-gradient.png"
+                    alt="background gradient"
+                    className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
             </div>
 
-            <div className="relative flex min-h-screen items-center justify-center bg-[linear-gradient(45deg,#ffffff_0%,#fcd913_100%)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16">
-                <img src="/assets/images/auth/coming-soon-object1.png" alt="image" className="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
-                <img src="/assets/images/auth/coming-soon-object2.png" alt="image" className="absolute left-24 top-0 h-40 md:left-[30%]" />
-                <img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" />
-                <img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" />
-                <div className="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]">
-                    <div className="relative flex flex-col justify-center rounded-md bg-white/60 px-6 py-20 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px]">
+            {/* Background decorative objects */}
+            <img
+                src="/assets/images/auth/coming-soon-object1.png"
+                alt="left decor"
+                className="absolute left-0 top-1/2 hidden h-full max-h-[893px] -translate-y-1/2 brightness-125 md:block"
+            />
+            <img
+                src="/assets/images/auth/coming-soon-object3.png"
+                alt="right decor"
+                className="absolute right-0 top-0 hidden h-[300px] brightness-125 md:block"
+            />
 
-                        <div className="mx-auto w-full max-w-[440px]">
-                            <div className="mb-10">
-                                <h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign Up</h1>
-                                <p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to register</p>
-                            </div>
+            {/* Centered card wrapper */}
+            <div className="relative flex min-h-screen items-center justify-center px-6 py-10 sm:px-16">
+                <div
+                    className="relative w-full max-w-[870px] rounded-2xl p-1
+                               bg-[linear-gradient(45deg,#fffbe6_0%,rgba(255,251,230,0)_25%,rgba(255,251,230,0)_75%,#fffbe6_100%)]
+                               dark:bg-[linear-gradient(52.22deg,#facc15_0%,rgba(250,204,21,0)_20%,rgba(250,204,21,0)_80%,#facc15_100%)]"
+                >
+                    {/* Inner card (glassmorphic effect) */}
+                    <div className="relative z-10 rounded-2xl bg-white/10 px-8 py-16 backdrop-blur-lg dark:bg-white/10 lg:min-h-[600px]">
+                        <div className="mx-auto w-full max-w-[440px] text-center">
+                            {/* Header */}
+                            <h1 className="text-4xl font-extrabold uppercase tracking-wide text-yellow-400 mb-2">
+                                Sign Up
+                            </h1>
+                            <p className="text-base font-medium text-gray-200 dark:text-gray-300 mb-8">
+                                Enter your email and password to register
+                            </p>
+
+                            {/* Login form */}
                             <ComponentsAuthRegisterForm />
 
-                            <div className="text-center dark:text-white">
-                                Already have an account ?&nbsp;
-                                <Link href="/login" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
+                            {/* Footer link */}
+                            <div className="mt-6 text-sm text-gray-200 dark:text-gray-300">
+                                Already have an account ?{" "}
+                                <Link
+                                    href="/register"
+                                    className="text-yellow-400 font-semibold underline transition hover:text-white"
+                                >
                                     SIGN IN
                                 </Link>
                             </div>
@@ -38,7 +66,7 @@ const RegisterPage = (props: Props) => {
                 </div>
             </div>
         </div>
-    )
+    );
 }
 
 export default RegisterPage
diff --git a/components/auth/components-auth-login-form.tsx b/components/auth/components-auth-login-form.tsx
index 77cf895..0013f4e 100644
--- a/components/auth/components-auth-login-form.tsx
+++ b/components/auth/components-auth-login-form.tsx
@@ -35,9 +35,9 @@ const ComponentsAuthLoginForm = () => {
     }
 
     return (
-        <form className="space-y-5 dark:text-white" onSubmit={submitForm}>
+        <form className="space-y-3 dark:text-white" onSubmit={submitForm}>
             <div>
-                <label htmlFor="Email">Email</label>
+                <label htmlFor="Email" className='text-yellow-400 text-left'>Email</label>
                 <div className="relative text-white-dark">
                     <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
                     <span className="absolute start-4 top-1/2 -translate-y-1/2">
@@ -45,8 +45,8 @@ const ComponentsAuthLoginForm = () => {
                     </span>
                 </div>
             </div>
-            <div>
-                <label htmlFor="Password">Password</label>
+            <div className= "pb-2">
+                <label htmlFor="Password" className='text-yellow-400 text-left'>Password</label>
                 <div className="relative text-white-dark">
                     <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
                     <span className="absolute start-4 top-1/2 -translate-y-1/2">
@@ -54,7 +54,11 @@ const ComponentsAuthLoginForm = () => {
                     </span>
                 </div>
             </div>
-            <button type="submit" disabled={loading} className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
+            <button
+                type="submit"
+                disabled={loading}
+                className=" w-full uppercase border-0 rounded-md bg-[#fcd913] text-black font-semibold py-2 hover:bg-[#E6C812] transition disabled:opacity-70"
+                >
                 {loading ? "Logging in..." : "Sign In"}
             </button>
         </form>
diff --git a/components/auth/components-auth-register-form.tsx b/components/auth/components-auth-register-form.tsx
index 6db417a..f5c2313 100644
--- a/components/auth/components-auth-register-form.tsx
+++ b/components/auth/components-auth-register-form.tsx
@@ -47,24 +47,24 @@ const ComponentsAuthRegisterForm = () => {
                 </div>
             </div> */}
             <div>
-                <label htmlFor="Email">Email</label>
+                <label htmlFor="Email" className='text-yellow-400 text-left'>Email</label>
                 <div className="relative text-white-dark">
-                    <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
+                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
                     <span className="absolute start-4 top-1/2 -translate-y-1/2">
                         <IconMail fill={true} />
                     </span>
                 </div>
             </div>
-            <div>
-                <label htmlFor="Password">Password</label>
+            <div className= "pb-2">
+                <label htmlFor="Password" className='text-yellow-400 text-left'>Password</label>
                 <div className="relative text-white-dark">
-                    <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
+                    <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
                     <span className="absolute start-4 top-1/2 -translate-y-1/2">
                         <IconLockDots fill={true} />
                     </span>
                 </div>
             </div>
-            <button type="submit" disabled={loading} className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
+            <button type="submit" disabled={loading} className=" w-full uppercase border-0 rounded-md bg-[#fcd913] text-black font-semibold py-2 hover:bg-[#E6C812] transition disabled:opacity-70">
             {loading ? "Creating account..." : "Register"}
             </button>
         </form>
diff --git a/components/dashboards/MonthlyBarChart.tsx b/components/dashboards/MonthlyBarChart.tsx
index feb8275..f771363 100644
--- a/components/dashboards/MonthlyBarChart.tsx
+++ b/components/dashboards/MonthlyBarChart.tsx
@@ -50,7 +50,7 @@ const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteData }) => {
             }
         }
 
-        // ✅ Only return the last 3 months
+        // ✅ Only return the last 6 months
         return monthlyData.slice(-6);
 
     }, [siteData]);