diff --git a/public/fonts/Inter.otf b/public/fonts/Inter.otf
new file mode 100644
index 0000000..6604db3
Binary files /dev/null and b/public/fonts/Inter.otf differ
diff --git a/src/App.tsx b/src/App.tsx
index 560da9f..1f62543 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -39,6 +39,7 @@ function App() {
         if (!is_admin) {
           try {
             const voter = await contractInstance.getVoterdetails(account);
+
             if (voter?.votername) {
               is_voter = false;
             }
@@ -47,6 +48,8 @@ function App() {
           }
         }
 
+        console.log('is_admin', is_admin);
+
         dispatch({
           type: 'LOGIN',
           payload: { account, instance: contractInstance, is_admin, flag: is_voter },
@@ -74,6 +77,7 @@ function App() {
           <Route path="active" element={<div>active election</div>} />
         </Route>
         <Route path="/admin" element={<AdminLayout />}>
+          <Route index element={<div>admin dashboard</div>} />
           <Route path="verify-voters" element={<AdminVerifyVotersPage />} />
         </Route>
         <Route path="/candidate/add" element={<CandidatePage />} />
diff --git a/src/components/shared/Navbar.tsx b/src/components/shared/Navbar.tsx
index 485806e..36a5093 100644
--- a/src/components/shared/Navbar.tsx
+++ b/src/components/shared/Navbar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useState } from 'react';
 import { Link } from 'react-router';
-import { Vote, Menu } from 'lucide-react';
+import { Vote, Menu, Shield } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
@@ -16,9 +16,11 @@ import {
 } from '@/components/ui/navigation-menu';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { getCurrentConnection } from '@/config';
+import AuthContext from '@/context/AuthContext';
 
 export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
+  const { state } = React.useContext(AuthContext);
   const is_connected = !!getCurrentConnection();
 
   return (
@@ -82,6 +84,14 @@ export default function Navbar() {
         </NavigationMenu>
 
         <div className="flex items-center gap-4">
+          {state.is_admin ? (
+            <Button variant="ghost" size="sm" asChild className="hidden md:flex">
+              <Link to="/admin" className='font-medium'>
+                <Shield className="h-4 w-4" />
+                Admin
+              </Link>
+            </Button>
+          ) : null}
           <Button
             className="hidden md:inline-flex hover:cursor-pointer disabled:opacity-80"
             disabled={is_connected}
diff --git a/src/components/shared/auth/Login-form.tsx b/src/components/shared/auth/Login-form.tsx
index cdf0bd9..4135fa8 100644
--- a/src/components/shared/auth/Login-form.tsx
+++ b/src/components/shared/auth/Login-form.tsx
@@ -42,8 +42,7 @@ export function LoginForm() {
         }
 
         if (state.instance !== null) {
-          console.log('state.instance', state.instance);
-          await state.instance.methods.addVoter(state.account, values.name).send({
+          await state.instance.addVoter(state.account, values.name).send({
             from: state.account,
             gas: 1000000,
           });
diff --git a/src/components/shared/election/create-election.tsx b/src/components/shared/election/create-election.tsx
index d494e0d..c926e2b 100644
--- a/src/components/shared/election/create-election.tsx
+++ b/src/components/shared/election/create-election.tsx
@@ -21,10 +21,7 @@ import { toast } from 'sonner';
 export function CreateElectionForm() {
   const [error, setError] = React.useState<string | undefined>('');
   const [isPending, startTransition] = React.useTransition();
-  const auth = React.useContext(AuthContext);
-
-  const { state } = auth;
-
+  const { state } = React.useContext(AuthContext);
   const form = useForm<z.infer<typeof AddElectionSchema>>({
     resolver: zodResolver(AddElectionSchema),
     defaultValues: {
@@ -42,13 +39,10 @@ export function CreateElectionForm() {
         }
 
         if (state.instance !== null) {
-          const totalElections = await state.instance.methods.noOfElections().call();
-          console.log('instance', state.instance);
-          console.log('TotalElections', totalElections);
+          const totalElections = await state.instance.noOfElections();
+          console.log('totalElections', totalElections);
           for (let i = 1; i <= totalElections; i++) {
-            const electionData = await state.instance.methods
-              .getElection(i)
-              .call({ from: state.account });
+            const electionData = await state.instance.getElection(i);
             if (
               electionData.purpose &&
               electionData.purpose.toLowerCase() === values.purpose.toLowerCase()
@@ -58,8 +52,7 @@ export function CreateElectionForm() {
             }
           }
 
-          console.log('Creating election with purpose:', values.purpose);
-          await state.instance.methods.createElection(values.purpose).send({
+          await state.instance.createElection(values.purpose).send({
             from: state.account,
             gas: 1000000,
           });
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..6915144
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/src/index.css b/src/index.css
index db7343f..3976967 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,6 +4,17 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@font-face {
+  font-family: 'Inter';
+  src: url('/font/Inter.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+
 :root {
   /* Base */
   --background: oklch(0.98 0.01 240); /* Very light blue-gray */
@@ -114,7 +125,7 @@
   --sidebar-ring: oklch(0.6 0.2 250); /* Vibrant blue */
 }
 
-  @theme inline {
+@theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
diff --git a/src/pages/CreateElection.tsx b/src/pages/CreateElection.tsx
index af393a5..04e54a2 100644
--- a/src/pages/CreateElection.tsx
+++ b/src/pages/CreateElection.tsx
@@ -2,13 +2,9 @@ import { CreateElectionForm } from '@/components/shared/election/create-election
 
 const CreateElection = () => {
   return (
-    <>
-      <div className="">
-        <div className="w-full max-w-xs">
-          <CreateElectionForm />
-        </div>
-      </div>
-    </>
+    <div className="w-full max-w-xs">
+      <CreateElectionForm />
+    </div>
   );
 };
 
diff --git a/src/pages/admin/Verify-voters.tsx b/src/pages/admin/Verify-voters.tsx
index b776fdd..0f556d9 100644
--- a/src/pages/admin/Verify-voters.tsx
+++ b/src/pages/admin/Verify-voters.tsx
@@ -27,102 +27,70 @@ import {
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import AuthContext from '@/context/AuthContext';
+import Loading from '../loading';
+import { toast } from 'sonner';
 
-const voters = [
-  {
-    id: 1,
-    name: 'Alex Johnson',
-    email: 'alex.johnson@example.com',
-    walletAddress: '0x1a2b3c4d5e6f...',
-    registrationDate: '2023-11-20T14:23:45',
-    status: 'pending',
-    electionId: 3,
-    electionTitle: 'City Council Representative Election',
-  },
-  {
-    id: 2,
-    name: 'Maria Garcia',
-    email: 'maria.garcia@example.com',
-    walletAddress: '0x7g8h9i0j1k2l...',
-    registrationDate: '2023-11-21T09:15:30',
-    status: 'verified',
-    electionId: 3,
-    electionTitle: 'City Council Representative Election',
-  },
-  {
-    id: 3,
-    name: 'James Smith',
-    email: 'james.smith@example.com',
-    walletAddress: '0x3m4n5o6p7q8r...',
-    registrationDate: '2023-11-21T11:42:18',
-    status: 'pending',
-    electionId: 3,
-    electionTitle: 'City Council Representative Election',
-  },
-  {
-    id: 4,
-    name: 'Sarah Williams',
-    email: 'sarah.williams@example.com',
-    walletAddress: '0x9s0t1u2v3w4x...',
-    registrationDate: '2023-11-22T08:30:55',
-    status: 'rejected',
-    electionId: 2,
-    electionTitle: 'Cooperative Annual Board Election',
-  },
-  {
-    id: 5,
-    name: 'David Brown',
-    email: 'david.brown@example.com',
-    walletAddress: '0x5y6z7a8b9c0d...',
-    registrationDate: '2023-11-22T13:10:22',
-    status: 'pending',
-    electionId: 1,
-    electionTitle: 'University Faculty Senate Election',
-  },
-  {
-    id: 6,
-    name: 'Jennifer Miller',
-    email: 'jennifer.miller@example.com',
-    walletAddress: '0x1e2f3g4h5i6j...',
-    registrationDate: '2023-11-23T10:05:17',
-    status: 'verified',
-    electionId: 1,
-    electionTitle: 'University Faculty Senate Election',
-  },
-  {
-    id: 7,
-    name: 'Michael Davis',
-    email: 'michael.davis@example.com',
-    walletAddress: '0x7k8l9m0n1o2p...',
-    registrationDate: '2023-11-23T15:48:33',
-    status: 'pending',
-    electionId: 3,
-    electionTitle: 'City Council Representative Election',
-  },
-];
+interface Voter {
+  id: number;
+  votername: string;
+  address: string;
+  authorized: string;
+}
 
 export default function AdminVerifyVotersPage() {
   const [selectedVoter, setSelectedVoter] = React.useState<(typeof voters)[0] | null>(null);
   const [verificationDialogOpen, setVerificationDialogOpen] = React.useState(false);
-  const [filteredVoters, setFilteredVoters] = React.useState(voters);
   const [searchQuery, setSearchQuery] = React.useState('');
   const [statusFilter, setStatusFilter] = React.useState('all');
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [electionFilter, setElectionFilter] = React.useState('all');
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [voters, setVoters] = React.useState<Voter[]>([]);
+  const [filteredVoters, setFilteredVoters] = React.useState([] as Voter[]);
   const { state } = React.useContext(AuthContext);
 
   React.useEffect(() => {
     const getVoters = async () => {
-      if (state.instance !== null) {
-        const voters_list = await state.instance.methods.totalRegisteredVoters().call({
-          from: state.account,
-        });
+      if (!state.instance) return;
+
+      setLoading(true);
+      try {
+        const registered_voters: string[] = (await state.instance.totalRegisteredVoters()) || [];
+
+        console.log('Registered Voters:', registered_voters);
+
+        const voters_arr = await Promise.all(
+          registered_voters.map(async (address, index) => {
+            try {
+              const voter = await state.instance!.getVoterdetails(address);
+              const votername = voter.votername;
+              const authorized = voter.authorized ? 'verified' : 'pending';
 
-        console.log('voters_list', voters_list);
+              return { id: index + 1, votername, authorized, address };
+            } catch (error) {
+              console.error(`Error fetching voter details for ${address}:`, error);
+              return null;
+            }
+          })
+        );
+
+        const validVoters: Voter[] = voters_arr.filter((v): v is Voter => v !== null);
+        setVoters(validVoters);
+        setFilteredVoters(validVoters);
+      } catch (error) {
+        console.error('Error fetching voters:', error);
+      } finally {
+        setLoading(false);
       }
     };
+
     getVoters();
   }, [state.account, state.instance]);
 
+  React.useEffect(() => {
+    setFilteredVoters(voters);
+  }, [voters]);
+
   const handleSearch = (query: string) => {
     setSearchQuery(query);
     applyFilters(query, statusFilter, electionFilter);
@@ -139,18 +107,17 @@ export default function AdminVerifyVotersPage() {
     if (query) {
       filtered = filtered.filter(
         (voter) =>
-          voter.name.toLowerCase().includes(query.toLowerCase()) ||
-          voter.email.toLowerCase().includes(query.toLowerCase()) ||
-          voter.walletAddress.toLowerCase().includes(query.toLowerCase())
+          voter.votername.toLowerCase().includes(query.toLowerCase()) ||
+          voter.address.toLowerCase().includes(query.toLowerCase())
       );
     }
 
     if (status !== 'all') {
-      filtered = filtered.filter((voter) => voter.status === status);
+      filtered = filtered.filter((voter) => voter.authorized === status);
     }
 
     if (election !== 'all') {
-      filtered = filtered.filter((voter) => voter.electionId.toString() === election);
+      filtered = filtered.filter((voter) => voter.id.toString() === election);
     }
 
     setFilteredVoters(filtered);
@@ -161,6 +128,29 @@ export default function AdminVerifyVotersPage() {
     setVerificationDialogOpen(true);
   };
 
+  const verifyUser = async (address: string) => {
+    try {
+      console.log('state.instance', state.instance);
+      const result = await state.instance!.authorize(address).send({
+        from: state.account,
+        gas: 1000000,
+      });
+      console.log('result', result);
+      setVerificationDialogOpen(false);
+      setVoters((prev) =>
+        prev.map((v) => {
+          if (v.address === address) {
+            return { ...v, authorized: 'verified' };
+          }
+          return v;
+        })
+      );
+      toast.success('Voter verified successfully');
+    } catch (error) {
+      console.error('Error while verifying user:', error);
+    }
+  };
+
   const getStatusBadge = (status: string) => {
     switch (status) {
       case 'verified':
@@ -176,6 +166,10 @@ export default function AdminVerifyVotersPage() {
     }
   };
 
+  if (loading) {
+    return <Loading />;
+  }
+
   return (
     <main className="flex flex-col space-y-6">
       <div>
@@ -218,7 +212,7 @@ export default function AdminVerifyVotersPage() {
           <div className="flex items-center justify-between">
             <CardTitle>Voter Registrations</CardTitle>
             <Badge variant="outline">
-              {filteredVoters.filter((v) => v.status === 'pending').length} Pending
+              {filteredVoters.filter((v) => v.authorized === 'pending').length} Pending
             </Badge>
           </div>
         </CardHeader>
@@ -235,14 +229,14 @@ export default function AdminVerifyVotersPage() {
             <TableBody>
               {filteredVoters.map((voter) => (
                 <TableRow key={voter.id}>
-                  <TableCell className="font-medium text-center">{voter.name}</TableCell>
+                  <TableCell className="font-medium text-center">{voter.votername}</TableCell>
                   <TableCell className="hidden md:table-cell font-mono text-xs">
-                    {voter.walletAddress}
+                    {voter.address}
                   </TableCell>
-                  <TableCell>{getStatusBadge(voter.status)}</TableCell>
+                  <TableCell>{getStatusBadge(voter.authorized)}</TableCell>
                   <TableCell className="text-center">
                     <div className="flex justify-end gap-2">
-                      {voter.status === 'pending' && (
+                      {voter.authorized === 'pending' && (
                         <>
                           <Button
                             variant="outline"
@@ -254,7 +248,7 @@ export default function AdminVerifyVotersPage() {
                           </Button>
                         </>
                       )}
-                      {voter.status !== 'pending' && (
+                      {voter.authorized !== 'pending' && (
                         <Button variant="outline" size="sm" asChild className="h-8 w-15">
                           <Link to={`/admin/voters/${voter.id}`}>Details</Link>
                         </Button>
@@ -281,11 +275,11 @@ export default function AdminVerifyVotersPage() {
             <div className="space-y-4 py-2">
               <div className="grid grid-cols-[100px_1fr] items-center gap-2">
                 <span className="font-medium">Name:</span>
-                <span>{selectedVoter.name}</span>
+                <span>{selectedVoter.votername}</span>
               </div>
               <div className="grid grid-cols-[100px_1fr] items-center gap-2">
                 <span className="font-medium">Wallet:</span>
-                <span className="font-mono text-xs">{selectedVoter.walletAddress}</span>
+                <span className="font-mono text-xs">{selectedVoter.address}</span>
               </div>
               <div className="rounded-lg border bg-muted/50 p-3">
                 <div className="flex items-center space-x-2">
@@ -295,7 +289,7 @@ export default function AdminVerifyVotersPage() {
                 <div className="mt-2 space-y-2">
                   <div className="flex items-center justify-between">
                     <Label htmlFor="wallet-verified">Wallet Verified</Label>
-                    <Switch id="wallet-verified" defaultChecked />
+                    <Switch id="wallet-verified" disabled defaultChecked />
                   </div>
                 </div>
               </div>
@@ -307,7 +301,7 @@ export default function AdminVerifyVotersPage() {
               Cancel
             </Button>
             <Button
-              onClick={() => setVerificationDialogOpen(false)}
+              onClick={() => verifyUser(selectedVoter!.address)}
               className="hover:cursor-pointer"
             >
               <ShieldCheck className="h-4 w-4" />
diff --git a/src/pages/loading.tsx b/src/pages/loading.tsx
new file mode 100644
index 0000000..f948528
--- /dev/null
+++ b/src/pages/loading.tsx
@@ -0,0 +1,52 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import { Card } from '@/components/ui/card';
+
+export default function Loading() {
+  return (
+    <div className=" grid flex-1 gap-12  px-4 py-6 md:px-6 md:py-8">
+      <main className="space-y-6">
+        <div>
+          <Skeleton className="h-10 w-[250px]" />
+          <Skeleton className="h-4 w-[350px] mt-1" />
+        </div>
+
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <Skeleton className="h-10 w-[250px]" />
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Skeleton className="h-10 w-[250px]" />
+            <Skeleton className="h-10 w-[200px]" />
+          </div>
+        </div>
+
+        <Card className="w-full">
+          <div className="px-4">
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-6 w-[150px]" />
+              <Skeleton className="h-6 w-[100px]" />
+            </div>
+          </div>
+
+          <div className="px-4">
+            <div className="space-y-4">
+              <div className="flex items-center gap-x-24">
+                <Skeleton className="h-4 w-[100px]" />
+                <Skeleton className="h-4 w-[150px]" />
+                <Skeleton className="h-4 w-[200px]" />
+                <Skeleton className="h-4 w-[100px]" />
+              </div>
+
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="flex items-center gap-x-24">
+                  <Skeleton className="h-4 w-[100px]" />
+                  <Skeleton className="h-4 w-[150px]" />
+                  <Skeleton className="h-4 w-[200px]" />
+                  <Skeleton className="h-4 w-[100px]" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </Card>
+      </main>
+    </div>
+  );
+}