diff --git a/components/dashboards/SiteCard.tsx b/components/dashboards/SiteCard.tsx
index 6bc894b..ff47cca 100644
--- a/components/dashboards/SiteCard.tsx
+++ b/components/dashboards/SiteCard.tsx
@@ -88,17 +88,17 @@ const SiteCard: React.FC<SiteCardProps> = ({ siteId, className = '', fallbackSta
     'N/A';
 
   return (
-    <div className={`bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light flex flex-col space-y-2 ${className}`}>
+    <div className={`bg-white p-4 rounded-lg shadow-md dark:bg-rtgray-800 dark:text-white-light flex flex-col space-y-2 ${className}`}>
       <h3 className="text-xl font-bold text-primary-600 dark:text-primary-400 border-b pb-2 mb-2">
         {project?.project_name || siteId}
       </h3>
 
       {loading ? (
         <div className="animate-pulse space-y-2">
-          <div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded" />
-          <div className="h-4 w-48 bg-gray-200 dark:bg-gray-700 rounded" />
-          <div className="h-4 w-40 bg-gray-200 dark:bg-gray-700 rounded" />
-          <div className="h-4 w-36 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-4 w-24 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
+          <div className="h-4 w-48 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
+          <div className="h-4 w-40 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
+          <div className="h-4 w-36 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
         </div>
       ) : err ? (
         <div className="text-red-500 text-sm">Failed to load CRM: {err}</div>
diff --git a/components/dropdown.tsx b/components/dropdown.tsx
index 9f141d5..7fef922 100644
--- a/components/dropdown.tsx
+++ b/components/dropdown.tsx
@@ -38,7 +38,7 @@ const Dropdown = (props: DropdownProps, forwardedRef: any) => {
   useImperativeHandle(forwardedRef, () => ({ close: () => setVisible(false) }));
 
   const defaultButton = (
-    <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700" />
+    <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-gray-200 dark:bg-rtgray-700" />
   );
 
   return (
@@ -59,7 +59,7 @@ const Dropdown = (props: DropdownProps, forwardedRef: any) => {
         className="z-50"
       >
         {visible && (
-          <div className={props.panelClassName ?? 'rounded-lg bg-white dark:bg-neutral-900 shadow-lg ring-1 ring-black/5'}>
+          <div className={props.panelClassName ?? 'rounded-lg bg-white dark:bg-rtgray-700 shadow-lg ring-1 ring-black/5'}>
             {props.children}
           </div>
         )}
diff --git a/components/layouts/header.tsx b/components/layouts/header.tsx
index 2183ff1..19402f0 100644
--- a/components/layouts/header.tsx
+++ b/components/layouts/header.tsx
@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import Link from 'next/link';
 import { IRootState } from '@/store';
 import { toggleTheme, toggleSidebar, toggleRTL } from '@/store/themeConfigSlice';
+import Image from 'next/image';
 import Dropdown from '@/components/dropdown';
 import IconMenu from '@/components/icon/icon-menu';
 import IconSun from '@/components/icon/icon-sun';
@@ -82,20 +83,26 @@ useEffect(() => {
         <div className="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-rtgray-900">
           {/* Logo */}
           <div className="horizontal-logo flex items-center justify-between ltr:mr-2 rtl:ml-2 lg:hidden">
-            <Link href="/" className="main-logo flex shrink-0 items-center">
-              <img className="inline w-8" src="/assets/images/newfulllogo.png" alt="logo" />
-              <span className="hidden text-2xl font-semibold ltr:ml-1.5 dark:text-white-light md:inline">
-                Rooftop Energy
-              </span>
-            </Link>
+            <div className="relative h-10 w-32 sm:h-11 sm:w-36 md:h-12 md:w-27 shrink-0 max-h-12">
+                <Image
+                src="/assets/images/newfulllogo.png"
+                alt="logo"
+                fill
+                className="object-cover"
+                priority
+                sizes="(max-width: 640px) 8rem, (max-width: 768px) 9rem, (max-width: 1024px) 10rem, 10rem"
+                />
+            </div>
+
             <button
-              type="button"
-              onClick={() => dispatch(toggleSidebar())}
-              className="collapse-icon flex p-2 rounded-full hover:bg-rtgray-200 dark:text-white dark:hover:bg-rtgray-700"
+                type="button"
+                onClick={() => dispatch(toggleSidebar())}
+                className="collapse-icon flex p-2 rounded-full hover:bg-rtgray-200 dark:text-white dark:hover:bg-rtgray-700"
             >
-              <IconMenu className="h-6 w-6" />
+                <IconMenu className="h-6 w-6" />
             </button>
-          </div>
+            </div>
+
 
           {/* Right-side actions */}
           <div className="flex items-center justify-end space-x-1.5 ltr:ml-auto rtl:mr-auto rtl:space-x-reverse dark:text-[#d0d2d6] lg:space-x-2">
@@ -121,17 +128,17 @@ useEffect(() => {
               {loadingUser ? (
                 <div className="h-9 w-9 rounded-full animate-pulse bg-gray-300 dark:bg-rtgray-800" />
               ) : user ? (
-                <Dropdown
-                    placement={isRtl ? 'bottom-start' : 'bottom-end'}
-                    btnClassName="relative group block"
-                    panelClassName="rounded-lg shadow-lg border border-white/10 bg-gray-100 dark:bg-gray-800 p-2" // ✅
-                    button={
-                            <div className="h-9 w-9 rounded-full bg-gray-200 dark:bg-rtgray-800 flex items-center justify-center group-hover:bg-rtgray-300 dark:group-hover:bg-rtgray-700">
-                            <IconUser className="h-5 w-5 text-gray-600 dark:text-gray-300" />
-                            </div>
-                        }
-                    >
-                    <ul className="w-[230px] font-semibold text-dark dark:text-white-dark bg-transparent"> {/* make sure this stays transparent */}
+            <Dropdown
+                placement={isRtl ? 'bottom-start' : 'bottom-end'}
+                btnClassName="relative group block"
+                panelClassName="rounded-lg shadow-lg border border-white/10 bg-rtgray-100 dark:bg-rtgray-800 p-2" // ✅
+                button={
+                        <div className="h-9 w-9 rounded-full bg-rtgray-200 dark:bg-rtgray-800 flex items-center justify-center group-hover:bg-rtgray-300 dark:group-hover:bg-rtgray-700">
+                        <IconUser className="h-5 w-5 text-gray-600 dark:text-gray-300" />
+                        </div>
+                    }
+                >
+                <ul className="w-[230px] font-semibold text-dark"> {/* make sure this stays transparent */}
                     <li className="px-4 py-4 flex items-center">
                       <div className="truncate ltr:pl-1.5 rtl:pr-4">
                         <h4 className="text-sm text-left">{user.email}</h4>
@@ -142,11 +149,6 @@ useEffect(() => {
                         <IconUser className="h-4.5 w-4.5 mr-2" /> Profile
                       </Link>
                     </li>
-                    <li>
-                      <Link href="/apps/mailbox" className="dark:hover:text-white">
-                        <IconMail className="h-4.5 w-4.5 mr-2" /> Inbox
-                      </Link>
-                    </li>
                     <li>
                       <Link href="/auth/boxed-lockscreen" className="dark:hover:text-white">
                         <IconLockDots className="h-4.5 w-4.5 mr-2" /> Lock Screen
diff --git a/components/layouts/sidebar.tsx b/components/layouts/sidebar.tsx
index 162092d..b3f6326 100644
--- a/components/layouts/sidebar.tsx
+++ b/components/layouts/sidebar.tsx
@@ -67,16 +67,15 @@ const Sidebar = () => {
             <nav
                 className={`sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300 ${semidark ? 'text-white-dark' : ''}`}
             >
-                <div className="h-full bg-[white] dark:bg-black">
-                    <div className="flex items-center justify-between px-4 py-3">
+                <div className="h-full bg-[white] dark:bg-rtgray-900">
+                    <div className="flex items-center justify-between px-4 pt-4">
                         <Link href="/" className="main-logo flex shrink-0 items-center">
-                            <img className="ml-[5px] w-8 flex-none" src="/assets/images/newlogo.png" alt="logo" />
-                            <span className="align-middle text-2xl font-semibold ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light lg:inline">Rooftop Energy</span>
+                            <img className="max-w-[180px] h-auto flex" src="/assets/images/newfulllogo.png" alt="logo" />
                         </Link>
 
                         <button
                             type="button"
-                            className="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-gray-500/10 rtl:rotate-180 dark:text-white-light dark:hover:bg-dark-light/10"
+                            className="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-rtgray-500/10 rtl:rotate-180 dark:text-white-light dark:hover:bg-rtgray-900/10"
                             onClick={() => dispatch(toggleSidebar())}
                         >
                             <IconCaretsDown className="m-auto rotate-90" />
@@ -84,7 +83,7 @@ const Sidebar = () => {
                     </div>
                     <PerfectScrollbar className="relative h-[calc(100vh-80px)] ">
                         <ul className="relative space-y-0.5 p-4 py-0 font-md">
-                            <h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08] dark:text-white dark:active:text-white">
+                            <h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 pb-3 pt-2 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08] dark:text-white dark:active:text-white">
                                 <IconMinus className="hidden h-5 w-4 flex-none" />
                                 <span>Customer</span>
                             </h2>
@@ -156,6 +155,7 @@ const Sidebar = () => {
                                     </div>
                                 </Link>
                             </li>
+                             {/*}
                             <h2 className="-mx-4 mb-1 flex items-center px-7 py-3 font-extrabold uppercase dark:bg-opacity-[0.08] dark:group-hover:text-white dark:text-white">
                                 <IconMinus className="hidden h-5 w-4 flex-none" />
                                 <span>Providers</span>
@@ -239,7 +239,7 @@ const Sidebar = () => {
                                     </ul>
                                 </AnimateHeight>
                             </li>
-
+                            */}
 
                         </ul>
                     </PerfectScrollbar>
diff --git a/public/assets/images/newfulllogo.png b/public/assets/images/newfulllogo.png
index 3ed9428..708c5e7 100644
Binary files a/public/assets/images/newfulllogo.png and b/public/assets/images/newfulllogo.png differ