diff --git a/src/components/buttons/event-form.tsx b/src/components/buttons/event-form.tsx
index 6d549c3..0dd8463 100644
--- a/src/components/buttons/event-form.tsx
+++ b/src/components/buttons/event-form.tsx
@@ -3,6 +3,7 @@ import { Button } from '@/components/custom-ui/button';
 import Logo from '../logo';
 import TimePicker from '../time-picker';
 import { Input } from '../ui/input';
+import { Label } from '../ui/label';
 export default function EventForm() {
   return (
     <form
@@ -12,8 +13,8 @@ export default function EventForm() {
         console.log('Form submitted with data:', formData);
       }}
     >
-      <div className='grid grid-row-start:auto gap-4'>
-        <div className='h-full mt-2 mb-6 flex items-center justify-between max-sm:flex-col max-sm:mb-2'>
+      <div className='grid grid-row-start:auto gap-8'>
+        <div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:flex-col max-sm:mb-6 max-sm:mt-10'>
           <div>
             <Logo colorType='monochrome' logoType='submark' width={50} />
           </div>
@@ -39,11 +40,13 @@ export default function EventForm() {
           </div>
           <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>
+              <Label>created:</Label>
+              <Label className='text-[var(--color-neutral-300)]'>
+                2023-10-01
+              </Label>
             </div>
             <div className='flex flex-row gap-2'>
-              <p>updated:</p>
+              <Label>updated:</Label>
               <p className='text-[var(--color-neutral-300)]'>2023-10-01</p>
             </div>
           </div>
@@ -52,10 +55,10 @@ export default function EventForm() {
           <div className='h-full w-full grid grid-flow-row gap-4'>
             <div className='h-full w-full'>
               <div className='flex flex-row gap-2'>
-                <p>Organiser:</p>
-                <p className='text-[var(--color-neutral-300)]'>
+                <Label>Organiser:</Label>
+                <Label className='text-[var(--color-neutral-300)]'>
                   [Username here]
-                </p>
+                </Label>
               </div>
             </div>
             <div className='h-full w-full'>
@@ -69,7 +72,7 @@ export default function EventForm() {
             </div>
           </div>
           <div className='h-full w-full'>
-            <p>Participants here</p>
+            <Label>Participants here</Label>
           </div>
         </div>