diff --git a/frontend/src/components/AsideMenuItem.tsx b/frontend/src/components/AsideMenuItem.tsx
index c5a8b8a..3af315f 100644
--- a/frontend/src/components/AsideMenuItem.tsx
+++ b/frontend/src/components/AsideMenuItem.tsx
@@ -85,7 +85,7 @@ const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
   ].join(' ');
 
   return (
-    <li className={'px-3 py-1.5'}>
+<li className="p-0 m-0 rounded-none">
       {item.withDevider && <hr className={`${borders} mb-3`} />}
       {item.href && (
         <Link href={item.href} target={item.target} className={componentClass}>
diff --git a/frontend/src/components/AsideMenuLayer.tsx b/frontend/src/components/AsideMenuLayer.tsx
index 4c51431..55117d8 100644
--- a/frontend/src/components/AsideMenuLayer.tsx
+++ b/frontend/src/components/AsideMenuLayer.tsx
@@ -65,7 +65,7 @@ export default function AsideMenuLayer({
   return (
     <aside
       id='asideMenu'
-      className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
+      className={`${className} zzz w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden p-0 m-0 rounded-none bg-[#f8f8f8]`}
     >
       <div
         className={`flex-1 flex flex-col overflow-hidden dark:bg-dark-900 ${asideStyle}`}
diff --git a/frontend/src/components/AsideMenuList.tsx b/frontend/src/components/AsideMenuList.tsx
index 392fb6e..8387ca9 100644
--- a/frontend/src/components/AsideMenuList.tsx
+++ b/frontend/src/components/AsideMenuList.tsx
@@ -32,7 +32,7 @@ export default function AsideMenuList({
           />
         );
       })}
-      <li onClick={() => alert('Hello!')} className="cursor-pointer px-2 py-1 hover:bg-gray-200">New Item</li>
+<li onClick={() => alert('Hello!')} className="cursor-pointer px-2 py-1 hover:bg-gray-200 rounded-none">New Item</li>
     </ul>
   );
 }
diff --git a/frontend/src/css/_app.css b/frontend/src/css/_app.css
index 4179b23..cb495a1 100644
--- a/frontend/src/css/_app.css
+++ b/frontend/src/css/_app.css
@@ -32,3 +32,12 @@ li.stack-item:not(:last-child):after {
 .app-sidebar-brand {
   box-shadow: 0px -1px 40px rgba(112, 144, 176, 0.2);
 }
+
+
+/* Custom override for sidebar styling */
+.app-sidebar {
+  background-color: #f8f8f8 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+}
diff --git a/frontend/src/css/_theme.css b/frontend/src/css/_theme.css
index 765b8d3..60d53b9 100644
--- a/frontend/src/css/_theme.css
+++ b/frontend/src/css/_theme.css
@@ -103,3 +103,13 @@
     @apply text-pavitra-800;
   }
 }
+
+
+/* Custom override for sidebar in themes */
+.theme-pink .app-sidebar,
+.theme-green .app-sidebar {
+  background-color: #f8f8f8 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+}
diff --git a/frontend/src/styles.ts b/frontend/src/styles.ts
index e1d80e3..87c62d6 100644
--- a/frontend/src/styles.ts
+++ b/frontend/src/styles.ts
@@ -52,7 +52,7 @@ export const basic: StyleObject = {
 };
 
 export const white: StyleObject = {
-  aside: 'bg-white dark:text-white  lg:rounded-2xl',
+  aside: 'bg-[#f8f8f8] dark:text-white',
   asideScrollbars: 'aside-scrollbars-light',
   asideBrand: '',
   asideMenuItem: