diff --git a/src/App.tsx b/src/App.tsx
index 9991819..d7d99d9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,8 +3,6 @@ import '@rainbow-me/rainbowkit/styles.css';
 
 import React from 'react';
 import { useMediaQuery } from '@mui/material';
-import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider } from '@mui/material/styles';
 import {
   lightTheme,
   RainbowKitAuthenticationProvider,
@@ -64,39 +62,36 @@ const App: React.FC = () => {
             appName: 'LogID',
           }}
         >
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <Routes>
+          <Routes>
+            <Route
+              path="/auth/login"
+              element={
+                authStatus === 'authenticated' ? (
+                  <Navigate to="/" replace />
+                ) : (
+                  <Login />
+                )
+              }
+            />
+            <Route
+              element={
+                <ProtectedRoute>
+                  <DefaultLayout />
+                </ProtectedRoute>
+              }
+            >
+              <Route path="/" element={<Navigate to="/identifiers" />} />
+              <Route path="/identifiers" element={<Identifiers />} />
               <Route
-                path="/auth/login"
-                element={
-                  authStatus === 'authenticated' ? (
-                    <Navigate to="/" replace />
-                  ) : (
-                    <Login />
-                  )
-                }
+                path="identifiers/:provider/attestation"
+                element={<Attestation />}
               />
-              <Route
-                element={
-                  <ProtectedRoute>
-                    <DefaultLayout />
-                  </ProtectedRoute>
-                }
-              >
-                <Route path="/" element={<Navigate to="/identifiers" />} />
-                <Route path="/identifiers" element={<Identifiers />} />
-                <Route
-                  path="identifiers/:provider/attestation"
-                  element={<Attestation />}
-                />
-                <Route path="/permissions" element={<Permissions />} />
-              </Route>
-              <Route path="/callback" element={<Callback />} />
-              <Route path="*" element={<div>Not found</div>} />
-            </Routes>
-            <CustomSnackbar />
-          </ThemeProvider>
+              <Route path="/permissions" element={<Permissions />} />
+            </Route>
+            <Route path="/callback" element={<Callback />} />
+            <Route path="*" element={<div>Not found</div>} />
+          </Routes>
+          <CustomSnackbar />
         </RainbowKitProvider>
       </RainbowKitAuthenticationProvider>
     </QueryClientProvider>
diff --git a/src/components/layouts/SidebarApp.tsx b/src/components/layouts/SidebarApp.tsx
index 9845e39..6ba06ea 100644
--- a/src/components/layouts/SidebarApp.tsx
+++ b/src/components/layouts/SidebarApp.tsx
@@ -12,6 +12,7 @@ import {
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { DRAWER_WIDTH, SIDEBAR_MENU } from '../../libs/constants';
+import theme from '../../libs/theme';
 
 function SidebarApp() {
   const navigate = useNavigate();
@@ -46,18 +47,59 @@ function SidebarApp() {
           </Box>
         </Toolbar>
         <Divider />
-        <List>
+        <List sx={{ padding: 2 }}>
+          {' '}
           {SIDEBAR_MENU.map((item) => (
             <ListItemButton
               key={item.title}
-              sx={{ display: 'flex', justifyContent: 'center', gap: 1 }}
-              selected={item.path === pathname}
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                gap: 1,
+                mt: 1,
+                padding: '8px 16px',
+                borderRadius: 2,
+                backgroundColor:
+                  item.path === pathname
+                    ? theme.palette.primary.main
+                    : 'transparent',
+                color:
+                  item.path === pathname
+                    ? theme.palette.primary.contrastText
+                    : theme.palette.text.primary,
+                '&:hover': {
+                  backgroundColor:
+                    item.path === pathname
+                      ? theme.palette.primary.main // Keep the same background for selected item
+                      : theme.palette.action.hover,
+                },
+                '&.Mui-selected': {
+                  backgroundColor: `${theme.palette.primary.main} !important`,
+                  color: theme.palette.primary.contrastText,
+                  '&:hover': {
+                    backgroundColor: `${theme.palette.primary.main} !important`, // Prevent hover effect from altering the background
+                  },
+                },
+              }}
               onClick={() => navigate(item.path)}
             >
-              <ListItemIcon sx={{ minWidth: 'auto' }}>
+              <ListItemIcon
+                sx={{
+                  minWidth: 'auto',
+                  color:
+                    item.path === pathname
+                      ? theme.palette.primary.contrastText
+                      : theme.palette.text.primary,
+                }}
+              >
                 <item.icon />
               </ListItemIcon>
-              <ListItemText>{item.title}</ListItemText>
+              <ListItemText
+                primary={item.title}
+                sx={{
+                  color: 'inherit',
+                }}
+              />
             </ListItemButton>
           ))}
         </List>
diff --git a/src/main.tsx b/src/main.tsx
index 29457a3..5fdecdb 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,8 @@
 import './index.css';
 
 import React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import { CssBaseline } from '@mui/material';
 import { getDefaultConfig } from '@rainbow-me/rainbowkit';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
@@ -8,6 +10,7 @@ import { baseSepolia, optimismSepolia } from 'viem/chains';
 import { http, WagmiProvider } from 'wagmi';
 
 import App from './App';
+import theme from './libs/theme';
 
 if (!import.meta.env.VITE_PROJECT_ID) {
   throw new Error('VITE_PROJECT_ID environment variable is required');
@@ -31,7 +34,10 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter>
       <WagmiProvider config={config}>
-        <App />
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <App />
+        </ThemeProvider>
       </WagmiProvider>
     </BrowserRouter>
   </React.StrictMode>