diff --git a/src/App.tsx b/src/App.tsx
index 8184980..a483636 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import AdminElectionsPage from '@/pages/admin/Election';
 import ElectionDetailPage from '@/components/shared/election/page';
 import VotePage from '@/pages/election/VotePage';
 import ElectionResultsPage from '@/pages/election/ResultPage';
+import ElectionDetails from '@/pages/election/ElectionPage';
 
 function App() {
   const auth = React.useContext(AuthContext);
@@ -85,6 +86,7 @@ function App() {
         </Route>
 
         <Route path="/admin" element={<AdminLayout />}>
+          <Route path="elections/:id" element={<ElectionDetails />} />
           <Route path="elections" element={<AdminElectionsPage />} />
           <Route path="create-election" element={<CreateElection />} />
           <Route index element={<div>admin dashboard</div>} />
diff --git a/src/components/shared/admin/sidebar.tsx b/src/components/shared/admin/sidebar.tsx
index e2aa445..c3b1f46 100644
--- a/src/components/shared/admin/sidebar.tsx
+++ b/src/components/shared/admin/sidebar.tsx
@@ -30,8 +30,8 @@ const sidebarItems = [
 export function AdminSidebar() {
   const location = useLocation();
   return (
-    <div className="hidden md:block ">
-      <div className="space-y-4 py-4">
+    <div className="hidden md:block border-r-1 ">
+      <div className="space-y-4 py-6">
         <div className="px-3 py-2">
           <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Admin Panel</h2>
           <div className="space-y-1">
diff --git a/src/pages/CreateElection.tsx b/src/pages/CreateElection.tsx
index 68beadc..da5c08e 100644
--- a/src/pages/CreateElection.tsx
+++ b/src/pages/CreateElection.tsx
@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { Link } from 'react-router';
 import { Info, Plus, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -24,12 +24,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { toast } from 'sonner';
+import AuthContext from '@/context/AuthContext';
 
 export default function CreateElectionPage() {
   const [purpose, setPurpose] = useState('');
-
   const [candidates, setCandidates] = useState([{ id: 1, name: '', slogan: '' }]);
   const [successDialogOpen, setSuccessDialogOpen] = useState(false);
+  const { state } = useContext(AuthContext);
 
   const addCandidate = () => {
     setCandidates([...candidates, { id: candidates.length + 1, name: '', slogan: '' }]);
@@ -49,9 +51,75 @@ export default function CreateElectionPage() {
     );
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setSuccessDialogOpen(true);
+
+    if (candidates.length < 2) {
+      toast.error('You need to have at least 2 candidates');
+      return;
+    }
+
+    if (!state.is_admin) {
+      toast.error('You do not have permission to create an election');
+      return;
+    }
+
+    let totalElections = 0;
+    let is_operation_successful = false;
+
+    const createElectionPromise = new Promise((resolve, reject) => {
+      (async () => {
+        try {
+          totalElections = await state.instance!.noOfElections();
+
+          for (let i = 1; i <= totalElections; i++) {
+            const electionData = await state.instance!.getElection(i);
+            if (
+              electionData.purpose &&
+              electionData.purpose.toLowerCase() === purpose.toLowerCase()
+            ) {
+              throw new Error('This election is already created');
+            }
+          }
+
+          const tx = await state.instance!.createElection(purpose);
+          await tx.wait();
+
+          totalElections = await state.instance!.noOfElections();
+
+          for (const candidate of candidates) {
+            console.log('Adding candidate:', candidate);
+            const tx = await state.instance!.addCandidate(
+              candidate.name,
+              candidate.slogan,
+              totalElections
+            );
+            await tx.wait();
+          }
+          is_operation_successful = true;
+          resolve('Election created successfully');
+        } catch (error) {
+          reject(error);
+        }
+      })();
+    });
+
+    toast.promise(createElectionPromise, {
+      loading: 'Creating election...',
+      success: 'Election created successfully',
+      error: (error) => {
+        if (error.message.includes('user rejected transaction')) {
+          return 'Error: User rejected the transaction';
+        }
+        return `Error while creating the election`;
+      },
+    });
+
+    createElectionPromise.then(() => {
+      if (is_operation_successful) {
+        setSuccessDialogOpen(true);
+      }
+    });
   };
 
   return (
@@ -148,7 +216,9 @@ export default function CreateElectionPage() {
             <Button variant="outline" asChild>
               <Link to="/admin/elections">Cancel</Link>
             </Button>
-            <Button type="submit">Create Election</Button>
+            <Button type="submit" className="cursor-pointer">
+              Create Election
+            </Button>
           </CardFooter>
         </Card>
       </form>
diff --git a/src/pages/admin/AdminLayout.tsx b/src/pages/admin/AdminLayout.tsx
index 15c8859..552cc91 100644
--- a/src/pages/admin/AdminLayout.tsx
+++ b/src/pages/admin/AdminLayout.tsx
@@ -3,9 +3,9 @@ import { AdminSidebar } from '@/components/shared/admin/sidebar';
 
 const AdminLayout = () => {
   return (
-    <section className="flex-1 container grid  gap-12 md:grid-cols-[200px_1fr] lg:grid-cols-[250px_1fr] px-4 py-6 md:px-6 md:py-8">
+    <section className="flex-1 container grid  gap-12 md:grid-cols-[200px_1fr] lg:grid-cols-[250px_1fr] px-4  md:px-3 md:py-0">
       <AdminSidebar />
-      <main>
+      <main className='min-h-screen'>
         <Outlet />
       </main>
     </section>
diff --git a/src/pages/admin/Election.tsx b/src/pages/admin/Election.tsx
index f3b5253..7c1492b 100644
--- a/src/pages/admin/Election.tsx
+++ b/src/pages/admin/Election.tsx
@@ -76,7 +76,7 @@ export default function AdminElectionsPage() {
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <h1 className="text-3xl font-bold tracking-tight">Elections</h1>
         <Button asChild>
-          <Link to="/elections/create">
+          <Link to="/admin/create-election">
             <Plus className="mr-2 h-4 w-4" />
             Create Election
           </Link>
diff --git a/src/pages/election/ElectionPage.tsx b/src/pages/election/ElectionPage.tsx
new file mode 100644
index 0000000..2653008
--- /dev/null
+++ b/src/pages/election/ElectionPage.tsx
@@ -0,0 +1,252 @@
+import React, { useContext } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Play, Square } from 'lucide-react';
+import { Separator } from '@/components/ui/separator';
+import { useParams } from 'react-router';
+import AuthContext from '@/context/AuthContext';
+import { toast } from 'sonner';
+
+interface ElectionProps {
+  id: number;
+  purpose: string;
+  totalVotes: number;
+  status: string;
+}
+
+interface CandidateProps {
+  id: number;
+  name: string;
+  slogan: string;
+  votes: number;
+}
+export default function ElectionDetails() {
+  const [electionStatus, setElectionStatus] = React.useState('Created');
+  const [loading, setLoading] = React.useState(false);
+  const [election, setElection] = React.useState<ElectionProps | null>(null);
+  const [candidates, setCandidates] = React.useState<CandidateProps[] | null>(null);
+  const { state } = useContext(AuthContext);
+
+  const params = useParams();
+
+  const handleStartElection = async () => {
+    const startElectionPromise = new Promise((resolve, reject) => {
+      (async () => {
+        try {
+          const id = Number(params.id);
+          const tx = await state.instance!.startVoting(id);
+          await tx.wait();
+
+          resolve('Election started successfully');
+        } catch (error) {
+          reject(error);
+        }
+      })();
+    });
+
+    toast.promise(startElectionPromise, {
+      loading: 'Starting election...',
+      success: () => {
+        setElectionStatus('Active');
+        return 'Election started successfully';
+      },
+      error: (error) => {
+        if (error.message.includes('user rejected transaction')) {
+          return 'Error: User rejected the transaction';
+        }
+        return 'Error while starting the election';
+      },
+    });
+  };
+
+  const handleEndElection = () => {
+    const endElectionPromise = new Promise((resolve, reject) => {
+      (async () => {
+        try {
+          const id = Number(params.id);
+          const tx = await state.instance!.endElection(id);
+          await tx.wait();
+
+          resolve('Election ended successfully');
+        } catch (error) {
+          reject(error);
+        }
+      })();
+    });
+
+    toast.promise(endElectionPromise, {
+      loading: 'Ending election...',
+      success: () => {
+        setElectionStatus('Ended');
+        return 'Election ended successfully';
+      },
+      error: (error) => {
+        if (error.message.includes('user rejected transaction')) {
+          return 'Error: User rejected the transaction';
+        }
+        return 'Error while ending the election';
+      },
+    });
+  };
+
+  React.useEffect(() => {
+    const getElection = async () => {
+      try {
+        if (!state.instance) return;
+        setLoading(true);
+        const id = Number(params.id);
+
+        console.log('Fetching election with ID:', id);
+
+        const election = await state.instance!.getElection(id);
+        const election_id = election.id.toNumber();
+        const purpose = election.purpose;
+        const totalVotes = election.totalVotes.toNumber();
+        const statusNumber = election.status.toNumber();
+        const status = statusNumber === 1 ? 'Created' : statusNumber === 2 ? 'Active' : 'Ended';
+        setElectionStatus(status);
+
+        setElection({ id: election_id, purpose, totalVotes, status });
+
+        const candidate_ids = election.candidatesids;
+        const candidateData = [];
+
+        for (let i of candidate_ids) {
+          try {
+            i = i.toNumber();
+            const candidate = await state.instance!.getCandidate(i);
+            console.log('Candidate:', candidate);
+            candidateData.push({
+              id: candidate.id.toNumber(),
+              name: candidate.name,
+              slogan: candidate.slogan,
+              votes: candidate.voteCount.toNumber(),
+            });
+          } catch (candidateError) {
+            console.error(`Error fetching candidate ${i}:`, candidateError);
+          }
+        }
+
+        setCandidates(candidateData);
+      } catch (error) {
+        console.error('Error fetching election:', error);
+        toast.error('Failed to fetch election data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    getElection();
+  }, [state.instance, params.id]);
+
+  if (loading) return <>loading....</>;
+  return (
+    <div className="min-h-screen w-full bg-background">
+      <main className="py-6 ">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Election Details</h1>
+            <p className="text-muted-foreground">View and manage election information</p>
+          </div>
+          <div className="flex gap-2">
+            {electionStatus === 'Created' && (
+              <Button
+                variant="default"
+                className="bg-green-600 hover:bg-green-700 cursor-pointer"
+                onClick={handleStartElection}
+              >
+                <Play className="h-4 w-4" />
+                Start Election
+              </Button>
+            )}
+
+            {electionStatus === 'Active' && (
+              <Button variant="destructive" onClick={handleEndElection} className="cursor-pointer">
+                <Square className="h-4 w-4" />
+                End Election
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <Card className="mb-8">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle>Election Summary</CardTitle>
+              <Badge
+                variant={
+                  electionStatus === 'Active'
+                    ? 'default'
+                    : electionStatus === 'Ended'
+                      ? 'secondary'
+                      : 'outline'
+                }
+              >
+                {electionStatus}
+              </Badge>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-3 gap-6">
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Election ID</h3>
+                <p className="text-xl font-semibold">{election?.id}</p>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Election Purpose</h3>
+                <p className="text-xl font-semibold">{election?.purpose}</p>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Total Votes</h3>
+                <p className="text-xl font-semibold">{election?.totalVotes}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <h2 className="text-2xl font-bold tracking-tight mb-4">Candidates</h2>
+        <div className="grid md:grid-cols-2 gap-6">
+          {candidates?.map((candidate) => (
+            <CandidateCard
+              key={candidate.id}
+              name={candidate.name}
+              id={candidate.id.toString()}
+              slogan={candidate.slogan}
+              voteCount={candidate.votes}
+            />
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+interface CandidateCardProps {
+  name: string;
+  id: string;
+  slogan: string;
+  voteCount: number;
+}
+
+function CandidateCard({ name, id, slogan, voteCount }: CandidateCardProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-xl">{name}</CardTitle>
+        <CardDescription>Candidate ID: {id}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-2">
+          <h3 className="text-sm font-medium text-muted-foreground mb-1">Slogan</h3>
+          <p className="text-sm">{slogan}</p>
+        </div>
+        <Separator className="my-3" />
+        <div>
+          <h3 className="text-sm font-medium text-muted-foreground mb-1">Vote Count</h3>
+          <p className="text-xl font-semibold">{voteCount}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}