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

@@ -18,4 +18,38 @@
 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,30 +4,30 @@ import LayoutFooter from './LayoutFooter';
 import LayoutHeader from './LayoutHeader';
 import LayoutSidebar from './LayoutSidebar';
 
-
 const { Content } = Layout;
 
 const MainLayout = ({ children }) => {
-  const {
-    token: { colorBgContainer, borderRadiusLG },
-  } = theme.useToken();
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
 
-  return (
-    <Layout style={{ height: '100vh' }}>
-      <LayoutSidebar />
-      <Layout
-      style={{
-        overflow: 'auto',
-
-      }}>
-        <LayoutHeader />
-        <Content
-          style={{
-            margin: '24px 16px 0',
-            flex: '1 0 auto',
-          }}
-        >
-          {/* <div
+    return (
+        <Layout style={{ height: '100vh' }}>
+            <LayoutSidebar />
+            <Layout
+                style={{
+                    overflow: 'auto',
+                }}
+            >
+                <LayoutHeader />
+                <Content
+                    style={{
+                        margin: '0 25px',
+                        flex: '1 0 auto',
+                        padding: '8px 8px',
+                    }}
+                >
+                    {/* <div
             style={{
               padding: 24,
               minHeight: '100%',
@@ -35,12 +35,12 @@ const MainLayout = ({ children }) => {
               borderRadius: borderRadiusLG,
             }}
           > */}
-            {children}
-          {/* </div> */}
-        </Content>
-        {/* <LayoutFooter /> */}
-      </Layout>
-    </Layout>
-  );
+                    {children}
+                    {/* </div> */}
+                </Content>
+                {/* <LayoutFooter /> */}
+            </Layout>
+        </Layout>
+    );
 };
-export default MainLayout;
+export default MainLayout;

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(