diff --git a/package-lock.json b/package-lock.json
index bf18dae..172f27a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@mui/material": "^5.16.0",
         "@rainbow-me/rainbowkit": "^2.1.3",
         "@react-icons/all-files": "^4.1.0",
-        "@tanstack/react-query": "^5.50.1",
+        "@tanstack/react-query": "^5.51.16",
         "@tanstack/react-query-devtools": "^5.50.1",
         "axios": "^1.7.2",
         "react": "^18.3.1",
@@ -7760,9 +7760,10 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.50.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.50.1.tgz",
-      "integrity": "sha512-lpfhKPrJlyV2DSVcQb/HuozH3Av3kws4ge22agx+lNGpFkS4vLZ7St0l3GLwlAD+bqB+qXGex3JdRKUNtMviEQ==",
+      "version": "5.51.16",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.16.tgz",
+      "integrity": "sha512-zfV+WAtBGm1dUIbL0w/x8qTqVLKU1/Bo1p19J9LF02MmIc4FxzMImMXhFzYJQl5Hx8Wit6RiQ4tB/DvN8y9zaQ==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
@@ -7778,11 +7779,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.50.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.50.1.tgz",
-      "integrity": "sha512-s0DW3rVBDPReDDovUjVqItVa3R2nPfUANK9nqGvarO2DwTiY9U4EBTsqizMxItRCoGgK5apeM7D3mxlHrSKpdQ==",
+      "version": "5.51.16",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.16.tgz",
+      "integrity": "sha512-NZnpJ30zkwaA2ZPhxJLs/qoMbd0yNAj6yyb3JTADJx9HjSdtvnNzOY1bDa3bU1B9CZTBBb7W9E1PpWlNXdgESg==",
+      "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.50.1"
+        "@tanstack/query-core": "5.51.16"
       },
       "funding": {
         "type": "github",
diff --git a/package.json b/package.json
index afd2d92..66e4cf7 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@mui/material": "^5.16.0",
     "@rainbow-me/rainbowkit": "^2.1.3",
     "@react-icons/all-files": "^4.1.0",
-    "@tanstack/react-query": "^5.50.1",
+    "@tanstack/react-query": "^5.51.16",
     "@tanstack/react-query-devtools": "^5.50.1",
     "axios": "^1.7.2",
     "react": "^18.3.1",
diff --git a/public/img/login.webp b/public/img/login.webp
new file mode 100644
index 0000000..4bea329
Binary files /dev/null and b/public/img/login.webp differ
diff --git a/src/main.tsx b/src/main.tsx
index 3c72055..99f1a0f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
 import './index.css';
+import '@rainbow-me/rainbowkit/styles.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
+import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { WagmiProvider } from 'wagmi';
+import { sepolia } from 'viem/chains';
 import theme from './libs/theme';
+import App from './App';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -17,13 +21,23 @@ const queryClient = new QueryClient({
   },
 });
 
+const config = getDefaultConfig({
+  appName: 'RainbowKit demo',
+  projectId: 'YOUR_PROJECT_ID',
+  chains: [sepolia],
+});
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <App />
-      </ThemeProvider>
-    </QueryClientProvider>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <RainbowKitProvider>
+            <App />
+          </RainbowKitProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   </React.StrictMode>
 );
diff --git a/src/pages/Auth/Login/Login.tsx b/src/pages/Auth/Login/Login.tsx
new file mode 100644
index 0000000..c202547
--- /dev/null
+++ b/src/pages/Auth/Login/Login.tsx
@@ -0,0 +1,29 @@
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { Box, Typography } from '@mui/material';
+
+export function Login() {
+  return (
+    <div className="h-screen w-full flex">
+      <Box className="w-1/4 p-8 flex flex-col justify-center items-center shadow-2xl">
+        <Typography variant="h6" fontWeight="bold" gutterBottom>
+          Welcome to OnChain
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          Please connect your wallet to continue.
+        </Typography>
+        <div className="py-3">
+          <ConnectButton />
+        </div>
+      </Box>
+      <Box
+        className="w-3/4 h-full bg-cover bg-center"
+        style={{
+          backgroundImage: 'url(../../../../public/img/login.webp)',
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/Auth/Login/index.ts b/src/pages/Auth/Login/index.ts
new file mode 100644
index 0000000..d448e12
--- /dev/null
+++ b/src/pages/Auth/Login/index.ts
@@ -0,0 +1,3 @@
+import { Login } from "./Login";
+
+export default Login;
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 75f3521..affa680 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,5 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom';
 
+import Login from '../pages/Auth/Login';
 import Dashboard from '../pages/Dashboard';
 import Identifiers from '../pages/Identifiers';
 import Permissions from '../pages/Permissions';
@@ -8,6 +9,10 @@ import Attestation from '../pages/Identifiers/Attestation';
 import DefaultLayout from '../layouts/DefaultLayout';
 
 export const router = createBrowserRouter([
+  {
+    path: '/auth/login',
+    element: <Login />,
+  },
   {
     path: '/',
     element: <DefaultLayout />,