diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index aa0a67b..0a7d913 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react";
+import React, { useState } from "react";
 import { Text, Button, Paper, TextInput, MantineProvider, Image, Box, Anchor, PasswordInput, Title, Checkbox, Card, Group, Flex, Stack } from "@mantine/core";
 import myImage from '@/app/image/ebanking.jpg';
 import bgImage from '@/app/image/media.jpg';
@@ -8,7 +8,13 @@ import frontPage from '@/app/image/ib_front_page.jpg'
 import NextImage from 'next/image';
 import { Providers } from "@/app/providers";
 
-export default function Demo() {
+export default function Login() {
+    const [CIF, SetCIF] = useState('');
+    const [psw, SetPsw] = useState('');
+    async function handleLogin() {
+
+
+    }
     return (
         <Providers>
             <div
@@ -68,27 +74,44 @@ export default function Demo() {
                         />
                     </div>
                     <div style={{ flex: 1, backgroundColor: "#c1e0f0", display: "flex", justifyContent: 'center', alignItems: 'center' }}>
-                        <Card shadow="lg" padding="xl" radius="md" style={{ width: 480, height: 400, backgroundColor: '#f0f0f0', 
-                            borderRadius: "12px", boxShadow: "0 2px 10px rgba(0,0,0,0.1)", }}>
+                        <Card shadow="lg" padding="xl" radius="md" style={{
+                            width: 480, height: 400, backgroundColor: '#f0f0f0',
+                            borderRadius: "12px", boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
+                        }}>
                             <Title order={5} style={{ marginLeft: 10 }}>Welcome To KCC Bank</Title>
                             <Title order={1} style={{ marginLeft: 10, color: "#000066" }}>Internet Banking</Title>
                             <br></br>
-                            <Box style={{ width: "370px", padding: "20px",  border: "1px solid #e0e0d1", marginLeft: 30 }}>
+                            <Box style={{ width: "370px", padding: "20px", border: "1px solid #e0e0d1", marginLeft: 30 }}>
                                 <Flex justify="center" gap="md" >
                                     <form>
                                         <TextInput
-                                            label="CIF Number"
+                                            label="User ID"
                                             placeholder="Enter your CIF no"
+                                            type="numeric"
+                                            maxLength={11}
+                                            inputMode="numeric"
+                                            pattern="\d*"
+                                            value={CIF}
+                                            onInput={(e) => {
+                                                const input =e.currentTarget.value.replace(/\D/g,'');
+                                                if(input.length<=11)
+                                                    {
+                                                        SetCIF(input);
+                                                    }
+                                            }}
+                                            
                                             style={{ flex: 1 }}
+                                            required
                                         />
                                         <br></br>
-                                        <TextInput
+                                        <PasswordInput
                                             label="Password"
                                             placeholder="Enter your password"
                                             style={{ flex: 1 }}
+                                            required
                                         />
                                         {/* <br></br> */}
-                                        <Button fullWidth variant="filled" mt="md" style={{width:100,align:"center",marginLeft:40}}>Login</Button>
+                                        <Button fullWidth variant="filled" mt="md" style={{ width: 100, align: "center", marginLeft: 40 }}>Login</Button>
                                     </form>
                                 </Flex>
                             </Box>