src/App.css

@@ -0,0 +1,6 @@
+/* Global Card Styling */
+.ant-card {
+    border-radius: 12px !important;
+    box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.07) !important;
+    margin-bottom: 24px !important;
+}

src/index.css

@@ -19,3 +19,37 @@ html body {
   margin: 0;
   height: 100vh;
 }
+
+/* Custom Orange Sidebar Menu Styles */
+.custom-orange-menu.ant-menu-dark .ant-menu-item-selected {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item-selected::after {
+  border-right-color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item:hover,
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title:hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
+  color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark.ant-menu-inline .ant-menu-sub {
+  background: rgba(0, 0, 0, 0.2) !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item,
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item-active,
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title {
+  color: white !important;
+}

src/layout/LayoutMenu.jsx

@@ -180,12 +180,18 @@ const LayoutMenu = () => {
 
     return (
         <Menu
-            theme="dark"
             mode="inline"
             items={items}
             defaultSelectedKeys={['home']}
             openKeys={stateOpenKeys}
             onOpenChange={onOpenChange}
+            style={{
+                background: 'transparent',
+                color: 'white',
+                border: 'none',
+            }}
+            theme="dark"
+            className="custom-orange-menu"
         />
     );
 };

src/layout/LayoutSidebar.jsx

@@ -6,7 +6,8 @@ import LayoutMenu from './LayoutMenu';
 const { Sider } = Layout;
 const LayoutSidebar = () => {
     return (
-        <Sider width={300}
+        <Sider
+            width={300}
             breakpoint="lg"
             collapsedWidth="0"
             onBreakpoint={(broken) => {
@@ -15,6 +16,9 @@ const LayoutSidebar = () => {
             onCollapse={(collapsed, type) => {
                 // console.log(collapsed, type);
             }}
+            style={{
+                background: 'linear-gradient(180deg, #FF8C42 0%, #FF6B35 100%)',
+            }}
         >
             <LayoutLogo />
             <LayoutMenu />

src/layout/MainLayout.jsx

@@ -4,7 +4,6 @@ import LayoutFooter from './LayoutFooter';
 import LayoutHeader from './LayoutHeader';
 import LayoutSidebar from './LayoutSidebar';
 
-
 const { Content } = Layout;
 
 const MainLayout = ({ children }) => {
@@ -18,13 +17,14 @@ const MainLayout = ({ children }) => {
             <Layout
                 style={{
                     overflow: 'auto',
-
+                }}
-      }}>
+            >
                 <LayoutHeader />
                 <Content
                     style={{
-            margin: '24px 16px 0',
+                        margin: '0 25px',
                         flex: '1 0 auto',
+                        padding: '8px 8px',
                     }}
                 >
                     {/* <div

src/main.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import './App.css'
 import { BreadcrumbProvider } from './layout/LayoutBreadcrumb.jsx';
 
 ReactDOM.createRoot(document.getElementById('root')).render(