diff --git a/src/components/buttons/event-form.tsx b/src/components/buttons/event-form.tsx
index cc808bf..6d549c3 100644
--- a/src/components/buttons/event-form.tsx
+++ b/src/components/buttons/event-form.tsx
@@ -1,6 +1,8 @@
 import LabeledInput from '@/components/labeled-input';
 import { Button } from '@/components/custom-ui/button';
 import Logo from '../logo';
+import TimePicker from '../time-picker';
+import { Input } from '../ui/input';
 export default function EventForm() {
   return (
     <form
@@ -11,11 +13,11 @@ export default function EventForm() {
       }}
     >
       <div className='grid grid-row-start:auto gap-4'>
-        <div className='h-full mt-2 mb-6 flex items-center justify-between'>
+        <div className='h-full mt-2 mb-6 flex items-center justify-between max-sm:flex-col max-sm:mb-2'>
           <div>
             <Logo colorType='monochrome' logoType='submark' width={50} />
           </div>
-          <div className='items-center ml-auto mr-auto'>
+          <div className='items-center ml-auto mr-auto max-sm:mb-6'>
             <LabeledInput
               type='text'
               label='Event Name'
@@ -24,25 +26,37 @@ export default function EventForm() {
             />
           </div>
         </div>
-        <div className='grid grid-cols-4 gap-4 h-full w-full'>
+        <div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
           <div>
-            <p>Start Date select here</p>
+            <TimePicker dateLabel='start Time' timeLabel='&nbsp;' />
           </div>
           <div>
-            <p>End Date selevt here</p>
+            <TimePicker dateLabel='end Time' timeLabel='&nbsp;' />
           </div>
           <div>
-            <p>Location here</p>
+            <p className='mb-2'>Location URL</p>
+            <Input type='url' className='w-54' />
           </div>
-          <div>
-            <p>creatd:</p>
-            <p>updated:</p>
+          <div className='flex flex-col gap-4'>
+            <div className='flex flex-row gap-2'>
+              <p>created:</p>
+              <p className='text-[var(--color-neutral-300)]'>2023-10-01</p>
+            </div>
+            <div className='flex flex-row gap-2'>
+              <p>updated:</p>
+              <p className='text-[var(--color-neutral-300)]'>2023-10-01</p>
+            </div>
           </div>
         </div>
-        <div className='h-full w-full grid grid-cols-2 gap-4'>
+        <div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
           <div className='h-full w-full grid grid-flow-row gap-4'>
             <div className='h-full w-full'>
-              <p>Organiser:</p>
+              <div className='flex flex-row gap-2'>
+                <p>Organiser:</p>
+                <p className='text-[var(--color-neutral-300)]'>
+                  [Username here]
+                </p>
+              </div>
             </div>
             <div className='h-full w-full'>
               <LabeledInput
@@ -60,13 +74,13 @@ export default function EventForm() {
         </div>
 
         <div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
-          <div className='w-[20%] grid'>
-            <Button type='submit' variant='secondary'>
+          <div className='w-[20%] grid max-sm:w-[40%]'>
+            <Button type='button' variant='secondary'>
               cancel
             </Button>
           </div>
 
-          <div className='w-[20%] grid'>
+          <div className='w-[20%] grid max-sm:w-[40%]'>
             <Button type='submit' variant='primary'>
               save event
             </Button>