diff --git a/payment-iq/app/components/sidebar/SidebarLayout.tsx b/payment-iq/app/components/sidebar/SidebarLayout.tsx
index cff7d8e..1d5e544 100644
--- a/payment-iq/app/components/sidebar/SidebarLayout.tsx
+++ b/payment-iq/app/components/sidebar/SidebarLayout.tsx
@@ -4,10 +4,10 @@ import React from 'react';
 import { styled } from '@mui/system';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
-import SidebarLink from './SideBarLink';
+import SideBarLink from './SideBarLink';
 
-// Sidebar Container (styled using MUI System)
-export const Sidebar = styled('div')(({ theme }) => ({
+// SideBar Container (styled using MUI System)
+export const SideBar = styled('div')(({ theme }) => ({
   width: '240px',
   backgroundColor: theme.palette.background.primary,
   color: 'white',
@@ -28,8 +28,8 @@ export const MainContent = styled('div')(({ theme }) => ({
   overflowY: 'auto',
 }));
 
-// Sidebar Header
-export const SidebarHeader = styled('div')(({ theme }) => ({
+// SideBar Header
+export const SideBarHeader = styled('div')(({ theme }) => ({
   marginBottom: theme.spacing(2),
   fontSize: '20px',
   fontWeight: 600,
@@ -37,37 +37,37 @@ export const SidebarHeader = styled('div')(({ theme }) => ({
   alignItems: 'center',
 }));
 
-// Page Wrapper that holds Sidebar and Content
+// Page Wrapper that holds SideBar and Content
 export const LayoutWrapper = styled('div')({
   display: 'flex',
   flexDirection: 'row',
   height: '100vh',
 });
 
-interface SidebarLayoutProps {
+interface SideBarLayoutProps {
   children: React.ReactNode; // Add children to accept passed content
 }
 
-const SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {
+const SideBarLayout: React.FC<SideBarLayoutProps> = ({ children }) => {
   return (
     <LayoutWrapper>
-      <Sidebar>
-        <SidebarHeader>
+      <SideBar>
+        <SideBarHeader>
           PaymentIQ
           <DashboardIcon sx={{ marginLeft: 0.5 }} />
-        </SidebarHeader>
+        </SideBarHeader>
         {SIDEBAR_LINKS.map((link) => (
-          <SidebarLink
+          <SideBarLink
             key={link.path}
             title={link.title}
             path={link.path}
             icon={link.icon}
           />
         ))}
-      </Sidebar>
+      </SideBar>
       <MainContent>{children}</MainContent> {/* Render children here */}
     </LayoutWrapper>
   );
 };
 
-export default SidebarLayout;
+export default SideBarLayout;
diff --git a/payment-iq/app/dashboard/layout.tsx b/payment-iq/app/dashboard/layout.tsx
index b3b6348..f3f31b0 100644
--- a/payment-iq/app/dashboard/layout.tsx
+++ b/payment-iq/app/dashboard/layout.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { MainContent } from '../components/Dashboard/Layout/mainContent';
 import Header from '../components/Dashboard/Header/Header';
 import { LayoutWrapper } from '../components/Dashboard/Layout/layoutWrapper';
-import SideBar from '../components/Dashboard/SideBar/SideBar';
+import SideBar from '../components/Dashboard/SideBar/Sidebar';
 
 const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (