diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 5a42e81..a715258 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -1,14 +1,31 @@
 "use client";
 
-import { Button } from "@mantine/core";
+import React from 'react';
+import { AppShell, Button, Input, Group, Stack, Tooltip, UnstyledButton, Text, Avatar, Title, Divider, Box, Select, Paper, Image, Switch, Flex } from '@mantine/core';
+import { IconBook, IconBuildingBank, IconCoinRupee, IconCurrencyRupee, IconHome, IconLogout, IconSettings, IconUserCircle } from '@tabler/icons-react';
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-
-
+import { Providers } from "../providers";
+import myImage from '@/app/image/ebanking.jpg';
+import NextImage from 'next/image';
 
 export default function Home() {
-    const[authorized,SetAuthorized] =useState<boolean|null>(null);
+    const [authorized, SetAuthorized] = useState<boolean | null>(null);
     const router = useRouter();
+    const accountData = [
+        { "stAccountNo": "50078975412", "stAccountType": "SA", "stAvailableBalance": "10000.0" },
+        { "stAccountNo": "50078975413", "stAccountType": "SA", "stAvailableBalance": "12000.0" },
+        { "stAccountNo": "50078975414", "stAccountType": "SA", "stAvailableBalance": "14000.0" },
+        { "stAccountNo": "60078975412", "stAccountType": "LN", "stAvailableBalance": "100000.0" },
+        { "stAccountNo": "60078975413", "stAccountType": "LN", "stAvailableBalance": "120000.0" }
+    ]
+    const savingsAccounts = accountData.filter(acc => acc.stAccountType === "SA");
+    const [selectedSA, setSelectedSA] = useState(savingsAccounts[0]?.stAccountNo || "");
+    const selectedSAData = savingsAccounts.find(acc => acc.stAccountNo === selectedSA);
+    const loanAccounts = accountData.filter(acc => acc.stAccountType === "LN");
+    const [selectedLN, setSelectedLN] = useState(loanAccounts[0]?.stAccountNo || "");
+    const selectedLNData = loanAccounts.find(acc => acc.stAccountNo === selectedLN);
+    const [showBalance, setShowBalance] = useState(false);
 
     async function handleLogout(e: React.FormEvent) {
         e.preventDefault();
@@ -21,18 +38,153 @@ export default function Home() {
             SetAuthorized(false);
             router.push("/login");
         }
-        else{
+        else {
             SetAuthorized(true);
         }
     }, []);
-    
-    if(authorized){
+
+    if (authorized) {
         return (
-        <>
-            <p>Welcome to IB portal</p>
-            <Button onClick={handleLogout}>Logout</Button>
-        </>
-    );
+            <Providers>
+                <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: '100vh'}}>
+                    <Image
+                        // radius="md"
+                        fit="cover"
+                        src={myImage}
+                        component={NextImage}
+                        alt="ebanking"
+                        style={{ width: "100%", height: "12%" }}
+                    />
+                    <div
+                        style={{
+                            flex: 1,
+                            display: "flex",
+                            alignItems: "left",
+                            justifyContent: "center",
+                        }}
+                    >
+                        <Group mt="md" gap="sm">
+                            <Button leftSection={<IconHome />} variant="light" color="blue">Home</Button>
+                            <Button leftSection={<IconBook />} variant="subtle">Accounts</Button>
+                            <Button leftSection={<IconCurrencyRupee />} variant="subtle">Send Money</Button>
+                            {/* <Button variant="subtle">IMPS</Button> */}
+                            <Button leftSection={<IconSettings />} variant="subtle">Settings</Button>
+                            <Button leftSection={<IconLogout />} variant="subtle" onClick={handleLogout}>Logout</Button>
+                        </Group>
+                    </div>
+                    <div
+                        style={{
+                            flex: 1,
+                            padding: "20px",
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "left",
+                        }}
+                    >
+                        <Title order={3}>Welcome, Rajat Kumar Maharana</Title>
+                        <Text size="xs" c="gray">Last logged in at 29/06/25, 05:35 PM</Text>
+                    </div>
+                    <Group
+                        style={{ flex: 1, padding: "10px 10px 4px 10px", display: "flex", alignItems: "center", justifyContent: "left", height: "5vh" }}>
+                        <Text fw={700}>Show Balance </Text>
+                        <Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance}
+                            onChange={(event) => setShowBalance(event.currentTarget.checked)} />
+                    </Group>
+                    <div style={{ flex: 1, padding: "10px", display: "flex", alignItems: "center", justifyContent: "left" }}>
+                        <Group grow gap="lg">
+                            <Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 300 }}>
+                                {/* <IconBuildingBank /> */}
+                                <Group justify="space-between">
+                                    <Text size="sm">Savings Account</Text>
+                                    <Select
+                                        placeholder="Select A/C No"
+                                        data={savingsAccounts.map(acc => ({
+                                            value: acc.stAccountNo,
+                                            label: acc.stAccountNo
+                                        }))}
+                                        value={selectedSA}
+                                        // @ts-ignore
+                                        onChange={setSelectedSA}
+                                        size="xs"
+                                        styles={{
+                                            input: {
+                                                backgroundColor: "white",
+                                                color: "black",
+                                                width: 150
+                                            }
+                                        }}
+                                    />
+                                </Group>
+                                <Text c="dimmed">{Number(selectedSAData?.stAccountNo || 0)}</Text>
+                                <Title order={2} mt="md">
+                                    {showBalance ? `₹${Number(selectedSAData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
+                                </Title>
+                                <Button fullWidth mt="xs">Get Statement</Button>
+                            </Paper>
+                            <Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0' }}>
+                                {/* <IconCoinRupee /> */}
+                                <Group justify="space-between">
+                                    <Text size="sm">Current Account</Text>
+                                    <Select
+                                        placeholder="Select A/C No"
+                                        data={loanAccounts.map(acc => ({
+                                            value: acc.stAccountNo,
+                                            label: acc.stAccountNo
+                                        }))}
+                                        value={selectedLN}
+                                        // @ts-ignore
+                                        onChange={setSelectedLN}
+                                        size="xs"
+                                        styles={{
+                                            input: {
+                                                backgroundColor: "white",
+                                                color: "black",
+                                                width: 150
+                                            }
+                                        }}
+                                    />
+                                </Group>
+                                <Text c="dimmed">{Number(selectedLNData?.stAccountNo || 0)}</Text>
+                                <Title order={2} mt="md">
+                                    {showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
+                                </Title>
+                                <Button fullWidth mt="xs">Get Statement</Button>
+                            </Paper>
+                        </Group>
+                    </div>
+
+                    <div
+                        style={{
+                            flex: 1,
+                            padding: "20px",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "left",
+                        }}
+                    >
+                        <Box>
+                            <Title order={4}>Send Money</Title>
+                            <Group mt="sm">
+                                <Select
+                                    placeholder="Own / Other Accounts"
+                                    data={[{ value: 'own', label: 'Own' }, { value: 'other', label: 'Other' }]}
+                                    style={{ width: 180 }}
+                                />
+                                <Select
+                                    placeholder="Select Account"
+                                    data={[{ value: 'acc1', label: 'Account 1' }, { value: 'acc2', label: 'Account 2' }]}
+                                    style={{ width: 180 }}
+                                />
+                                <Input placeholder="₹0.00" style={{ width: 100 }} />
+                                <Button>Proceed</Button>
+                            </Group>
+                        </Box>
+                    </div>
+                    <Flex justify="center" align="center">
+                        <Text c="dimmed" size="xs">© 2025 Kangra Central Co- Operative Bank</Text>
+                    </Flex>
+                </div>
+            </Providers>
+        );
     }
-    
-}
+}
\ No newline at end of file
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 8c6dabf..aa746f7 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -42,14 +42,11 @@ export default function Login() {
             <div
                 style={{
                     backgroundColor: "#f8f9fa",
-                    padding: "20px",
-                    fontFamily: "sans-serif",
+                    width:"100%",
                     height: '100vh',
-                    // border: "solid black"
                 }}
             >
                 <Image
-                    radius="md"
                     fit="cover"
                     src={myImage}
                     component={NextImage}
@@ -87,7 +84,6 @@ export default function Login() {
                 <div style={{ display: "flex", height: "70vh" }}>
                     <div style={{ flex: 1, backgroundColor: "#c1e0f0", display: "flex" }}>
                         <Image
-                            radius="md"
                             fit="cover"
                             src={frontPage}
                             component={NextImage}