diff --git a/client/src/pages/upcomingElections/electionDates.tsx b/client/src/pages/upcomingElections/electionDates.tsx
new file mode 100644
index 000000000..ab9ec24bf
--- /dev/null
+++ b/client/src/pages/upcomingElections/electionDates.tsx
@@ -0,0 +1,9 @@
+export default function ElectionDates() {
+    return (
+        <div className='bg-gray-100 m-4 rounded-xl grid grid-cols-2 p-4 max-w-lg align-center'>
+            <p className="font-semibold text-red-500 m-2 text-center ">SEPT 2 @ 5PM</p>
+            <p className='m-2 text-left'>Deadline for registration of voters for Preliminary Municipal Election.</p>
+        </div>
+    )
+
+}
\ No newline at end of file
diff --git a/client/src/pages/upcomingElections/index.tsx b/client/src/pages/upcomingElections/index.tsx
index 733340a1f..6602b1a07 100644
--- a/client/src/pages/upcomingElections/index.tsx
+++ b/client/src/pages/upcomingElections/index.tsx
@@ -1,43 +1,41 @@
 import React from "react";
 import Button from '@mui/material/Button';
+import ElectionDates from './electionDates'
 
 export default function UpcomingElections() {
     return (
-        <div>
-            <div className='flex flex-col justify-center items-center p-4'>
+        <div className=''>
+            <div className='flex flex-col justify-center items-center p-4 text-center'>
                 <h1 className='text-blue-700 font-bold text-8xl '>LET’S VOTE!</h1>
                 <p className='p-5'>The most important information about Boston's municiple elections to help you naviagte your voting journey</p>
             </div>
 
 
             <div className='flex flex-col justify-center items-center p-4'>
-                <Button variant="contained" className='p-4 m-4 rounded-2xl bg-blue-700 text-white'>Your Voter Info</Button>
-                <Button variant="contained" className='p-4 m-4 rounded-2xl bg-white text-blue-700 border-blue-800 border-4 hover:bg-gray-100' >How do I register</Button>
+                <Button variant="contained" className='p-4 m-4 rounded-full bg-blue-700 text-white'>Your Voter Info</Button>
+                <Button variant="contained" className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800 border-4 hover:bg-gray-100' >How do I register</Button>
                 <p className='text-red-500'>Deadline to register: <strong>Aug 24, 2024</strong></p>
             </div>
+
+            <h1 className="text-center font-semibold text-3xl m-10">Boston’s Municipal Election Dates</h1>
+
             <div className="flex items-center justify-center flex-wrap">
-                <div className='bg-gray-100 m-4 rounded-xl grid grid-cols-2 p-4 max-w-md align-center'>
-                    <p className="font-semibold text-red-500 m-2 text-center ">SEPT 2 @ 5PM</p>
-                    <p className='m-2 text-left'>Deadline for registration of voters for Preliminary Municipal Election.</p>
-                </div>
-
-                <div className='bg-gray-100 m-4 rounded-xl grid grid-cols-2 p-4 max-w-md align-center'>
-                    <p className="font-semibold text-red-500 m-2 text-center ">SEPT 2 @ 5PM</p>
-                    <p className='m-2 text-left'>Deadline for registration of voters for Preliminary Municipal Election.</p>
-                </div>
-
-                <div className='bg-gray-100 m-4 rounded-xl grid grid-cols-2 p-4 max-w-md align-center'>
-                    <p className="font-semibold text-red-500 m-2 text-center ">SEPT 2 @ 5PM</p>
-                    <p className='m-2 text-left'>Deadline for registration of voters for Preliminary Municipal Election.</p>
-                </div>
-
-                <div className='bg-gray-100 m-4 rounded-xl grid grid-cols-2 p-4 max-w-md align-center'>
-                    <p className="font-semibold text-red-500 m-2 text-center ">SEPT 2 @ 5PM</p>
-                    <p className='m-2 text-left'>Deadline for registration of voters for Preliminary Municipal Election.</p>
-                </div>
+                <ElectionDates />
+                <ElectionDates />
+                <ElectionDates />
+                <ElectionDates />
+            </div>
+
+            <div className='flex flex-col justify-center items-center p-4 my-10'>
+                <p className=' font-semibold p-4'>You may be wondering.....</p>
+                <Button variant="outlined" className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-100'>Whats on the Ballot </Button>
+                <Button variant="outlined" className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-100' >What are my voting options </Button>
+
             </div>
 
 
+
+
         </div>
     )
 }
\ No newline at end of file