diff --git a/package-lock.json b/package-lock.json
index 5121aba..3f00955 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@babel/plugin-syntax-import-attributes": "^7.23.3",
         "@headlessui/react": "^2.1.2",
         "@heroicons/react": "^1.0.6",
+        "@radix-ui/react-slot": "^1.1.0",
         "clsx": "^2.1.1",
         "comclub-website-2024": "file:",
         "date-fns": "^3.6.0",
@@ -1100,6 +1101,37 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-aria/focus": {
       "version": "3.17.1",
       "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.17.1.tgz",
diff --git a/package.json b/package.json
index 3fd5ff1..5a3bec4 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@babel/plugin-syntax-import-attributes": "^7.23.3",
     "@headlessui/react": "^2.1.2",
     "@heroicons/react": "^1.0.6",
+    "@radix-ui/react-slot": "^1.1.0",
     "clsx": "^2.1.1",
     "comclub-website-2024": "file:",
     "date-fns": "^3.6.0",
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..354541e
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Card = React.forwardRef<
+HTMLDivElement,
+React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+HTMLDivElement,
+React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+HTMLParagraphElement,
+React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+HTMLParagraphElement,
+React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+HTMLDivElement,
+React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+HTMLDivElement,
+React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
new file mode 100644
index 0000000..1c9cc6b
--- /dev/null
+++ b/src/components/Table.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Table = React.forwardRef<
+HTMLTableElement,
+React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className='relative w-full overflow-auto'>
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+HTMLTableSectionElement,
+React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+HTMLTableSectionElement,
+React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+HTMLTableSectionElement,
+React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+HTMLTableRowElement,
+React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+HTMLTableCellElement,
+React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+HTMLTableCellElement,
+React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+HTMLTableCaptionElement,
+React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/src/pages/elections/Candidates.tsx b/src/pages/elections/Candidates.tsx
index faba4bb..8aead58 100644
--- a/src/pages/elections/Candidates.tsx
+++ b/src/pages/elections/Candidates.tsx
@@ -4,6 +4,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { useOutsideClick } from '../../../hooks/use-outside-click';
 import WindowCard from '../../layout/WindowCard';
 import { cards } from './constants';
+import Results from './Results';
 
 export function Candidates() {
   const [active, setActive] = useState<(typeof cards)[number] | boolean | null>(
@@ -86,6 +87,7 @@ export function Candidates() {
 
   return (
     <section className='elections h-full gap-4'>
+      <Results />
       <h1 className='title'>Candidates</h1>
       <p className='text-neutral-500 text-xl text-center'>
         See the candidates running for the NUS Students&apos; Computing Club
diff --git a/src/pages/elections/Results.tsx b/src/pages/elections/Results.tsx
new file mode 100644
index 0000000..8fd05fa
--- /dev/null
+++ b/src/pages/elections/Results.tsx
@@ -0,0 +1,121 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from '../../components/Card';
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+} from '../../components/Table';
+import React from 'react';
+import { electionsResults } from './constants';
+
+export default function Results() {
+  return (
+    <div className='flex flex-col w-full space-y-4'>
+      <main className='grid min-h-[calc(100vh_-_theme(spacing.16))] grid-cols-1 gap-4 p-4 md:gap-8 md:p-10'>
+        <Card>
+          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+            <div className='flex items-center space-x-2'>
+              <div className='flex flex-col'>
+                <CardTitle className='text-base font-bold'>
+                  2024 Computing Club Election Results
+                </CardTitle>
+                <CardDescription className='text-sm'>
+                  Results of the recent election
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className='flex flex-col gap-4'>
+            <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+              <Card>
+                <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                  <CardTitle className='text-sm font-medium'>
+                    Total Votes
+                  </CardTitle>
+                  <UsersIcon className='w-4 h-4 text-gray-500 dark:text-gray-400' />
+                </CardHeader>
+                <CardContent>
+                  <div className='text-2xl font-bold'>354</div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                  <CardTitle className='text-sm font-medium'>
+                    Total Candidates
+                  </CardTitle>
+                  <UsersIcon className='w-4 h-4 text-gray-500 dark:text-gray-400' />
+                </CardHeader>
+                <CardContent>
+                  <div className='text-2xl font-bold'>14</div>
+                </CardContent>
+              </Card>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+            <CardTitle className='text-base font-bold'>Results</CardTitle>
+          </CardHeader>
+          <CardContent className='p-2'>
+            <Table className='w-full table table-auto'>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Rank</TableHead>
+                  <TableHead>Candidate</TableHead>
+                  <TableHead>For</TableHead>
+                  <TableHead>Abstain</TableHead>
+                  <TableHead>Against</TableHead>
+                  <TableHead>Percentage</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {electionsResults.sort((a, b) => ('' + a.name).localeCompare(b.name)).map((result, index) => (
+                  <TableRow key={index}>
+                    <TableCell className='font-semibold'>
+                      {index + 1}
+                    </TableCell>
+                    <TableCell>{result.name}</TableCell>
+                    <TableCell>{result.for}</TableCell>
+                    <TableCell>{result.abstain}</TableCell>
+                    <TableCell>{result.against}</TableCell>
+                    <TableCell className={`${result.final >= 50 ? 'text-green-500' : 'text-red-500'} font-semibold`}>{result.final}%</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </main>
+    </div>
+  );
+}
+
+function UsersIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    >
+      <path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' />
+      <circle cx='9' cy='7' r='4' />
+      <path d='M22 21v-2a4 4 0 0 0-3-3.87' />
+      <path d='M16 3.13a4 4 0 0 1 0 7.75' />
+    </svg>
+  );
+}
diff --git a/src/pages/elections/constants.jsx b/src/pages/elections/constants.jsx
index 4983d7a..b620624 100644
--- a/src/pages/elections/constants.jsx
+++ b/src/pages/elections/constants.jsx
@@ -625,3 +625,118 @@ export const cards = [
     },
   },
 ];
+
+export const electionsResults = [
+  {
+    id: 1,
+    name: 'Chen Dong Jun',
+    abstain: 167,
+    for: 142,
+    against: 45,
+    final: 75.9,
+  },
+  {
+    id: 2,
+    name: 'Choong Jing Xiang',
+    abstain: 162,
+    for: 154,
+    against: 38,
+    final: 80.2,
+  },
+  {
+    id: 3,
+    name: 'Gowri Sumesh Menon',
+    abstain: 190,
+    for: 108,
+    against: 56,
+    final: 65.9,
+  },
+  {
+    id: 4,
+    name: 'Jha Satwik',
+    abstain: 179,
+    for: 131,
+    against: 44,
+    final: 74.9,
+  },
+  {
+    id: 5,
+    name: 'Lee Miao En Emelyn',
+    abstain: 159,
+    for: 151,
+    against: 44,
+    final: 77.4,
+  },
+  {
+    id: 6,
+    name: 'Leow Sze Theng Jolyn',
+    abstain: 127,
+    for: 194,
+    against: 33,
+    final: 85.5,
+  },
+  {
+    id: 7,
+    name: 'Liu Yuhang',
+    abstain: 69,
+    for: 113,
+    against: 172,
+    final: 39.7,
+  },
+  {
+    id: 8,
+    name: 'Mu Junrong',
+    abstain: 185,
+    for: 89,
+    against: 80,
+    final: 52.7,
+  },
+  {
+    id: 9,
+    name: 'Neo Ryan',
+    abstain: 179,
+    for: 122,
+    against: 53,
+    final: 69.7,
+  },
+  {
+    id: 10,
+    name: 'Parama Roy Poja',
+    abstain: 184,
+    for: 103,
+    against: 67,
+    final: 60.6,
+  },
+  {
+    id: 11,
+    name: 'Raeeda Ibnat Hossain',
+    abstain: 97,
+    for: 166,
+    against: 91,
+    final: 64.6,
+  },
+  {
+    id: 12,
+    name: 'Ravichandran Gokul',
+    abstain: 187,
+    for: 116,
+    against: 51,
+    final: 69.5,
+  },
+  {
+    id: 13,
+    name: 'Shananth Sivakumar',
+    abstain: 193,
+    for: 113,
+    against: 48,
+    final: 70.2,
+  },
+  {
+    id: 14,
+    name: 'Sun Jiaen',
+    abstain: 164,
+    for: 121,
+    against: 69,
+    final: 63.7,
+  },
+];