diff --git a/app/events/[eventId]/event.module.scss b/app/events/[eventId]/event.module.scss
new file mode 100644
index 0000000..9019304
--- /dev/null
+++ b/app/events/[eventId]/event.module.scss
@@ -0,0 +1,48 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+}
+
+.eventCard {
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: 1rem 0;
+  padding: 1rem;
+  width: 100%;
+  max-width: 600px;
+
+  img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px 10px 0 0;
+  }
+}
+
+.eventDetails {
+  padding: 1rem;
+}
+
+.eventName {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.eventType,
+.eventCategory,
+.eventDate,
+.eventDuration,
+.eventLocation,
+.eventDescription,
+.eventOrganizerUrl,
+.eventEntryFee {
+  margin-bottom: 0.5rem;
+}
+
+.backLink {
+  margin-top: 2rem;
+}
diff --git a/app/events/[eventId]/page.tsx b/app/events/[eventId]/page.tsx
index 81e66a3..9cc50e5 100644
--- a/app/events/[eventId]/page.tsx
+++ b/app/events/[eventId]/page.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import { getEventInsecure } from '../../../database/events';
+import styles from './event.module.scss';
 
 type Props = {
   params: {
@@ -31,31 +32,36 @@ export default async function EventPage(props: Props) {
   }
 
   return (
-    <div>
-      <h1>{singleEvent.name}</h1>
-
-      <div>
+    <div className={styles.container}>
+      <h1 className={styles.eventName}>{singleEvent.name}</h1>
+      <div className={styles.eventCard}>
         <img src={singleEvent.image} alt={singleEvent.name} />
-        <br />
-        {singleEvent.type}
-        <br />
-        {singleEvent.category}
-        <br />
-        {singleEvent.date.toLocaleDateString()}
-        <br />
-        {formatDuration(singleEvent.duration)}
-        <br />
-        {singleEvent.location}
-        <br />
-        {singleEvent.description}
-        <br />
-        {singleEvent.organizerUrl}
-        <br />
-        <p>€{singleEvent.entryFee}</p>
-        <br />
+        <div className={styles.eventDetails}>
+          <div className={styles.eventType}>{singleEvent.type}</div>
+          <div className={styles.eventCategory}>{singleEvent.category}</div>
+          <div className={styles.eventDate}>
+            {singleEvent.date.toLocaleDateString()}
+          </div>
+          <div className={styles.eventDuration}>
+            {formatDuration(singleEvent.duration)}
+          </div>
+          <div className={styles.eventLocation}>{singleEvent.location}</div>
+          <div className={styles.eventDescription}>
+            {singleEvent.description}
+          </div>
+          <div className={styles.eventOrganizerUrl}>
+            <a
+              href={singleEvent.organizerUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {singleEvent.organizerUrl}
+            </a>
+          </div>
+          <div className={styles.eventEntryFee}>€{singleEvent.entryFee}</div>
+        </div>
       </div>
-      <div>
-        <br />
+      <div className={styles.backLink}>
         <Link href="/events">Back to Upcoming Events</Link>
       </div>
     </div>
diff --git a/app/events/events.module.scss b/app/events/events.module.scss
new file mode 100644
index 0000000..115eaf7
--- /dev/null
+++ b/app/events/events.module.scss
@@ -0,0 +1,49 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+}
+
+.eventCard {
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: 1rem 0;
+  padding: 1rem;
+  width: 100%;
+  max-width: 600px;
+  transition: transform 0.3s;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px 10px 0 0;
+  }
+}
+
+.eventDetails {
+  padding: 1rem;
+}
+
+.eventName {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.eventType,
+.eventDate,
+.eventLocation,
+.eventCategory {
+  margin-bottom: 0.5rem;
+}
+
+.backLink {
+  margin-top: 2rem;
+}
diff --git a/app/events/page.tsx b/app/events/page.tsx
index 4bc4bfa..b174f05 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { getEventsInsecure } from '../../database/events';
+import styles from './events.module.scss'; // Import the CSS module
 
 export const metadata = {
   title: 'Upcoming Events',
@@ -9,40 +10,83 @@ export const metadata = {
 export default async function EventsPage() {
   const events = await getEventsInsecure();
   return (
-    <div>
+    <div className={styles.container}>
       <h1>These Are Our Currently Listed Upcoming Events</h1>
       <div>
-        <br />
         {events.map((event) => (
-          <div key={`events-${event.id}`}>
-            <Link href={`/events/${event.id}`}>
-              <div>
-                {event.name}
-                <br />
-                {event.type}
-                <br />
-                {event.date.toLocaleDateString()}
-                <br />
-                {event.location}
-                <br />
-                <img src={event.image} alt={event.name} />
-                {/* temporary for now */}
-                <br />
-                {event.category}
-                <br />
-                <br />
+          <Link
+            href={`/events/${event.id}`}
+            key={`events-${event.id}`}
+            passHref
+          >
+            <div className={styles.eventCard}>
+              <img src={event.image} alt={event.name} />
+              <div className={styles.eventDetails}>
+                <div className={styles.eventName}>{event.name}</div>
+                <div className={styles.eventType}>{event.type}</div>
+                <div className={styles.eventDate}>
+                  {event.date.toLocaleDateString()}
+                </div>
+                <div className={styles.eventLocation}>{event.location}</div>
+                <div className={styles.eventCategory}>{event.category}</div>
               </div>
-              <br />
-              <br />
-            </Link>
-          </div>
+            </div>
+          </Link>
         ))}
-        <br />
       </div>
-      <br />
-      <div>
+      <div className={styles.backLink}>
         <Link href="/">Back to Home page</Link>
       </div>
     </div>
   );
 }
+
+// import Link from 'next/link';
+// import { getEventsInsecure } from '../../database/events';
+// import styles from './events.module.scss';
+
+// export const metadata = {
+//   title: 'Upcoming Events',
+//   description: 'Upcoming events around the city',
+// };
+
+// export default async function EventsPage() {
+//   const events = await getEventsInsecure();
+//   return (
+//     <div className={styles.container}>
+//       <h1>These Are Our Currently Listed Upcoming Events</h1>
+//       <div>
+//         <br />
+//         {events.map((event) => (
+//           <div key={`events-${event.id}`} className={styles.eventCard}>
+//             <Link href={`/events/${event.id}`}>
+//               <div>
+//                 {event.name}
+//                 <br />
+//                 {event.type}
+//                 <br />
+//                 {event.date.toLocaleDateString()}
+//                 <br />
+//                 {event.location}
+//                 <br />
+//                 <img src={event.image} alt={event.name} />
+//                 {/* temporary for now */}
+//                 <br />
+//                 {event.category}
+//                 <br />
+//                 <br />
+//               </div>
+//               <br />
+//               <br />
+//             </Link>
+//           </div>
+//         ))}
+//         <br />
+//       </div>
+//       <br />
+//       <div>
+//         <Link href="/">Back to Home page</Link>
+//       </div>
+//     </div>
+//   );
+// }
diff --git a/app/globals.scss b/app/globals.scss
index 16756c6..d16fcc9 100644
--- a/app/globals.scss
+++ b/app/globals.scss
@@ -1,49 +1,76 @@
 :root {
-  --color-background: rgb(253, 247, 228);
-  --color-layout: rgb(222, 208, 182);
+  --color-background: #fdf7e4;
+  --color-layout: #ded0b6;
+  --color-primary: #ff6f61; // New vibrant color
+  --color-secondary: #3b5998; // Another vibrant color
+  --color-accent: #b4c2da; // Accent color
+  --color-text: #333;
+  --color-link: #007bff;
+  --color-link-hover: #0056b3;
+}
+
+* {
+  box-sizing: border-box;
 }
 
 body {
   margin: 0;
-  font-family: -apple-system, 'system-ui', 'Segoe UI', 'Noto Sans', Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  font-family:
+    'Geist Sans',
+    'Geist Mono',
+    -apple-system,
+    'system-ui',
+    'Segoe UI',
+    'Noto Sans',
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji';
   background: var(--color-background);
-  // Avoid fixed footer obscuring content
-  padding-bottom: 50px;
+  color: var(--color-text);
+  padding: 1rem;
+  padding-bottom: 50px; // Keep the padding-bottom for the footer
+
+  @media (min-width: 768px) {
+    padding: 2rem;
+  }
+
+  @media (min-width: 1024px) {
+    padding: 3rem;
+  }
 }
 
 main {
   padding: 1rem;
-}
 
-a {
-  color: black;
+  @media (min-width: 768px) {
+    padding: 2rem;
+  }
 }
 
-nav {
-  width: 100vw;
-  height: 4rem;
-  background: var(--color-layout);
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-
-  > div {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-  }
+a {
+  color: var(--color-link);
+  transition: color 0.3s;
 
-  > div a {
-    margin: 0.25rem;
+  &:hover {
+    color: var(--color-link-hover);
   }
 }
 
 button {
   font-size: 0.875rem;
   border-radius: 6px;
-  padding: 0.5rem;
+  padding: 0.5rem 1rem;
   cursor: pointer;
+  background: var(--color-primary);
+  color: white;
+  border: none;
+  transition: background 0.3s;
+
+  &:hover {
+    background: var(--color-secondary);
+  }
 }
 
 label {
@@ -54,7 +81,90 @@ label {
 input {
   font-size: 1rem;
   border-radius: 5px;
-  border: 1px solid;
-  padding: 0.5rem;
+  border: 1px solid var(--color-layout);
+  padding: 0.75rem;
   margin-bottom: 0.5rem;
+  transition: border-color 0.3s;
+
+  &:focus {
+    border-color: var(--color-primary);
+    outline: none;
+  }
 }
+
+footer {
+  background: var(--color-layout);
+  padding: 1rem;
+  text-align: center;
+  border-top: 1px solid var(--color-primary);
+
+  a {
+    color: var(--color-link);
+    margin: 0 0.5rem;
+
+    &:hover {
+      color: var(--color-link-hover);
+    }
+  }
+}
+
+// :root {
+//   --color-background: rgb(253, 247, 228);
+//   --color-layout: rgb(222, 208, 182);
+// }
+
+// body {
+//   margin: 0;
+//   font-family: -apple-system, 'system-ui', 'Segoe UI', 'Noto Sans', Helvetica,
+//     Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+//   background: var(--color-background);
+//   // Avoid fixed footer obscuring content
+//   padding-bottom: 50px;
+// }
+
+// main {
+//   padding: 1rem;
+// }
+
+// a {
+//   color: black;
+// }
+
+// nav {
+//   width: 100vw;
+//   height: 4rem;
+//   background: var(--color-layout);
+//   display: flex;
+//   justify-content: space-around;
+//   align-items: center;
+
+//   > div {
+//     display: flex;
+//     align-items: center;
+//     gap: 0.625rem;
+//   }
+
+//   > div a {
+//     margin: 0.25rem;
+//   }
+// }
+
+// button {
+//   font-size: 0.875rem;
+//   border-radius: 6px;
+//   padding: 0.5rem;
+//   cursor: pointer;
+// }
+
+// label {
+//   display: flex;
+//   flex-direction: column;
+// }
+
+// input {
+//   font-size: 1rem;
+//   border-radius: 5px;
+//   border: 1px solid;
+//   padding: 0.5rem;
+//   margin-bottom: 0.5rem;
+// }
diff --git a/app/layout.module.scss b/app/layout.module.scss
new file mode 100644
index 0000000..aea6b44
--- /dev/null
+++ b/app/layout.module.scss
@@ -0,0 +1,50 @@
+.nav {
+  width: 100vw;
+  height: 4rem;
+  background: linear-gradient(
+    to right,
+    var(--color-primary),
+    var(--color-secondary)
+  );
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  padding: 0 2rem;
+}
+
+.navLinks {
+  display: flex;
+  align-items: center;
+  gap: 1rem; // Adjust spacing as needed
+}
+
+.navLinks > a,
+.navLinks > button {
+  color: white;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin: 0.25rem;
+  transition: color 0.3s;
+
+  &:hover {
+    color: var(--color-accent);
+  }
+}
+
+.userLinks {
+  display: flex;
+  align-items: center;
+  gap: 1rem; // Adjust spacing as needed
+}
+
+.userLinks > a {
+  color: white;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin: 0.25rem;
+  transition: color 0.3s;
+
+  &:hover {
+    color: var(--color-accent);
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index e185003..27b02b6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,7 @@ import { cookies } from 'next/headers';
 import Link from 'next/link';
 import { getUser } from '../database/users';
 import LogoutButton from './(auth)/logout/LogoutButton';
+import styles from './layout.module.scss';
 
 const geistSans = localFont({
   src: './fonts/GeistVF.woff',
@@ -39,24 +40,19 @@ export default async function RootLayout({ children }: Props) {
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
         <header>
-          <nav>
-            <div>
+          <nav className={styles.nav}>
+            <div className={styles.navLinks}>
               <Link href="/">Home</Link>
               <Link href="/events">Upcoming Events</Link>
-
-              <div>
+              {user && <LogoutButton />}
+              <div className={styles.userLinks}>
                 {user ? (
                   <>
-                    <div>
-                      <LogoutButton />
-                    </div>
-                    <div>
-                      <Link href={`/profile/${user.username}`}>
-                        {user.username}
-                      </Link>
-                      <Link href="/post">Post Events</Link>
-                      <Link href="/comments"> Comments </Link>
-                    </div>
+                    <Link href={`/profile/${user.username}`}>
+                      {user.username}
+                    </Link>
+                    <Link href="/post">Post Events</Link>
+                    <Link href="/comments">Comments</Link>
                   </>
                 ) : (
                   <>
diff --git a/app/page.module.scss b/app/page.module.scss
index 092e221..c5ef4a5 100644
--- a/app/page.module.scss
+++ b/app/page.module.scss
@@ -1,4 +1,18 @@
 .homePage {
   width: 100%;
   min-height: 100vh;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  @media (min-width: 768px) {
+    padding: 3rem;
+  }
 }
+
+// .homePage {
+//   width: 100%;
+//   min-height: 100vh;
+// }
diff --git a/app/post/PostEventForm.tsx b/app/post/PostEventForm.tsx
index fee1aaa..0bce11c 100644
--- a/app/post/PostEventForm.tsx
+++ b/app/post/PostEventForm.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
 import { ChangeEvent, useState } from 'react';
 import { PostEventsResponseBodyPost } from '../api/postedEvents/route';
 import ErrorMessage from '../ErrorMessage';
+import styles from './postEventForm.module.scss';
 
 type Props = {
   userId: number;
@@ -55,6 +56,7 @@ export default function PostEventForm(props: Props) {
 
     if ('error' in data) {
       setErrorMessage(data.error);
+      console.log(ErrorMessage);
       return;
     }
 
@@ -78,30 +80,17 @@ export default function PostEventForm(props: Props) {
   }
 
   return (
-    <div>
-      <div>
-        <hgroup>
-          <h2>Event Details</h2>
-          <p>* stands for required fields</p>
-        </hgroup>
+    <div className={styles.container}>
+      <div className={styles.formHeader}>
+        <h2>Event Details</h2>
+        <p>* stands for required fields</p>
       </div>
-      <br />
       <form onSubmit={handleCreate}>
-        <div>
-          {/* <label htmlFor="image">Upload Image: </label> */}
-          {/* <input
-            id="image"
-            name="image"
-            value={postEvent.image}
-            onChange={handleChange}
-          /> */}
-        </div>
-        <br />
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             *Event Name:
             <input
+              className={styles.input}
               required
               name="name"
               value={postEvent.name}
@@ -109,11 +98,11 @@ export default function PostEventForm(props: Props) {
             />
           </label>
         </div>
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             *Event Type:
             <input
+              className={styles.input}
               required
               name="type"
               value={postEvent.type}
@@ -121,11 +110,11 @@ export default function PostEventForm(props: Props) {
             />
           </label>
         </div>
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             *Event Category:
             <input
+              className={styles.input}
               required
               name="category"
               value={postEvent.category}
@@ -133,11 +122,11 @@ export default function PostEventForm(props: Props) {
             />
           </label>
         </div>
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             *Event Date:
             <input
+              className={styles.input}
               type="date"
               required
               name="date"
@@ -146,22 +135,22 @@ export default function PostEventForm(props: Props) {
             />
           </label>
         </div>
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             Event Duration:
             <input
+              className={styles.input}
               name="duration"
               value={postEvent.duration}
               onChange={handleChange}
             />
           </label>
         </div>
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             *Event Location:
             <input
+              className={styles.input}
               required
               name="location"
               value={postEvent.location}
@@ -169,11 +158,11 @@ export default function PostEventForm(props: Props) {
             />
           </label>
         </div>
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             *Event Description:
             <input
+              className={styles.input}
               required
               name="description"
               value={postEvent.description}
@@ -181,33 +170,33 @@ export default function PostEventForm(props: Props) {
             />
           </label>
         </div>
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             Organizer URL:
             <input
+              className={styles.input}
               name="organizerUrl"
               value={postEvent.organizerUrl}
               onChange={handleChange}
             />
           </label>
         </div>
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             Event Entry Fee:
             <input
+              className={styles.input}
               name="entryFee"
               value={postEvent.entryFee}
               onChange={handleChange}
             />
           </label>
         </div>
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             Age Restriction:
             <input
+              className={styles.checkbox}
               type="checkbox"
               name="ageRestriction"
               checked={postEvent.ageRestriction}
@@ -215,11 +204,11 @@ export default function PostEventForm(props: Props) {
             />
           </label>
         </div>
-        <br />
-        <div>
-          <label>
+        <div className={styles.formGroup}>
+          <label className={styles.label}>
             Archived:
             <input
+              className={styles.checkbox}
               type="checkbox"
               name="archived"
               checked={postEvent.archived}
@@ -227,12 +216,250 @@ export default function PostEventForm(props: Props) {
             />
           </label>
         </div>
-        <br />
-        <br />
-        <br />
-        <button>Post Event</button>
+        <button className={styles.button}>Post Event</button>
       </form>
-      <ErrorMessage>{errorMessage}</ErrorMessage>
+      {errorMessage.length > 0 && (
+        <div className={styles.errorMessage}>{errorMessage}</div>
+      )}
     </div>
   );
 }
+
+// 'use client';
+
+// import { useRouter } from 'next/navigation';
+// import { ChangeEvent, useState } from 'react';
+// import { PostEventsResponseBodyPost } from '../api/postedEvents/route';
+// import ErrorMessage from '../ErrorMessage';
+
+// type Props = {
+//   userId: number;
+// };
+
+// export default function PostEventForm(props: Props) {
+//   const [postEvent, setPostEvent] = useState({
+//     name: '',
+//     userId: props.userId,
+//     type: '',
+//     date: '',
+//     location: '',
+//     duration: '',
+//     entryFee: '',
+//     category: '',
+//     description: '',
+//     image: '',
+//     organizerUrl: '',
+//     ageRestriction: false,
+//     archived: false,
+//   });
+//   const [errorMessage, setErrorMessage] = useState('');
+
+//   const router = useRouter();
+
+//   async function handleCreate(event: React.FormEvent<HTMLFormElement>) {
+//     event.preventDefault();
+
+//     // Convert the necessary fields to the appropriate types
+//     const formattedEvent = {
+//       ...postEvent,
+//       date: new Date(postEvent.date), // Convert date string to Date object
+//       duration: parseInt(postEvent.duration, 10) || 0,
+//       entryFee: parseInt(postEvent.entryFee, 10) || 0,
+//       ageRestriction: Boolean(postEvent.ageRestriction),
+//       archived: Boolean(postEvent.archived),
+//     };
+
+//     // Log the formatted event to verify types
+//     console.log('Formatted Event:', formattedEvent);
+
+//     const response = await fetch('/api/postedEvents/', {
+//       method: 'POST',
+//       body: JSON.stringify(formattedEvent),
+//       headers: { 'Content-Type': 'application/json' },
+//     });
+
+//     const data: PostEventsResponseBodyPost = await response.json();
+
+//     if ('error' in data) {
+//       setErrorMessage(data.error);
+//       return;
+//     }
+
+//     router.push('/events');
+//   }
+
+//   function handleChange(
+//     event: React.ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>,
+//   ) {
+//     const value =
+//       event.target.type === 'checkbox'
+//         ? (event.target as HTMLInputElement).checked
+//         : event.target.value;
+
+//     setErrorMessage('');
+
+//     setPostEvent({
+//       ...postEvent,
+//       [event.target.name]: value,
+//     });
+//   }
+
+//   return (
+//     <div>
+//       <div>
+//         <hgroup>
+//           <h2>Event Details</h2>
+//           <p>* stands for required fields</p>
+//         </hgroup>
+//       </div>
+//       <br />
+//       <form onSubmit={handleCreate}>
+//         <div>
+//           {/* <label htmlFor="image">Upload Image: </label> */}
+//           {/* <input
+//             id="image"
+//             name="image"
+//             value={postEvent.image}
+//             onChange={handleChange}
+//           /> */}
+//         </div>
+//         <br />
+//         <br />
+//         <div>
+//           <label>
+//             *Event Name:
+//             <input
+//               required
+//               name="name"
+//               value={postEvent.name}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <div>
+//           <label>
+//             *Event Type:
+//             <input
+//               required
+//               name="type"
+//               value={postEvent.type}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <div>
+//           <label>
+//             *Event Category:
+//             <input
+//               required
+//               name="category"
+//               value={postEvent.category}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <div>
+//           <label>
+//             *Event Date:
+//             <input
+//               type="date"
+//               required
+//               name="date"
+//               value={postEvent.date}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <div>
+//           <label>
+//             Event Duration:
+//             <input
+//               name="duration"
+//               value={postEvent.duration}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <div>
+//           <label>
+//             *Event Location:
+//             <input
+//               required
+//               name="location"
+//               value={postEvent.location}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <div>
+//           <label>
+//             *Event Description:
+//             <input
+//               required
+//               name="description"
+//               value={postEvent.description}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <div>
+//           <label>
+//             Organizer URL:
+//             <input
+//               name="organizerUrl"
+//               value={postEvent.organizerUrl}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <div>
+//           <label>
+//             Event Entry Fee:
+//             <input
+//               name="entryFee"
+//               value={postEvent.entryFee}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <div>
+//           <label>
+//             Age Restriction:
+//             <input
+//               type="checkbox"
+//               name="ageRestriction"
+//               checked={postEvent.ageRestriction}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <div>
+//           <label>
+//             Archived:
+//             <input
+//               type="checkbox"
+//               name="archived"
+//               checked={postEvent.archived}
+//               onChange={handleChange}
+//             />
+//           </label>
+//         </div>
+//         <br />
+//         <br />
+//         <br />
+//         <button>Post Event</button>
+//       </form>
+//       <ErrorMessage>{errorMessage}</ErrorMessage>
+//     </div>
+//   );
+// }
diff --git a/app/post/postEventForm.module.scss b/app/post/postEventForm.module.scss
new file mode 100644
index 0000000..3c3f99f
--- /dev/null
+++ b/app/post/postEventForm.module.scss
@@ -0,0 +1,105 @@
+.container {
+  padding: 1rem;
+}
+
+.errorMessage {
+  color: red;
+  font-size: 0.875rem;
+}
+
+.formHeader {
+  margin-bottom: 1rem;
+}
+
+.formGroup {
+  margin-bottom: 1rem;
+}
+
+.label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.input {
+  width: 100%;
+  padding: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+.checkbox {
+  margin-top: 0.25rem;
+}
+
+.button {
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  background-color: #0070f3;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+// .container {
+//   max-width: 800px;
+//   margin: auto;
+//   padding: 1rem;
+//   background-color: #f9f9f9;
+//   border-radius: 10px;
+//   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+// }
+
+// hgroup {
+//   margin-bottom: 1rem;
+// }
+
+// h2 {
+//   font-size: 1.5rem;
+//   margin-bottom: 0.5rem;
+// }
+
+// p {
+//   font-size: 0.875rem;
+//   color: #666;
+// }
+
+// form {
+//   display: flex;
+//   flex-direction: column;
+//   gap: 1rem;
+// }
+
+// label {
+//   display: flex;
+//   flex-direction: column;
+//   font-weight: bold;
+// }
+
+// input {
+//   padding: 0.5rem;
+//   border: 1px solid #ddd;
+//   border-radius: 5px;
+//   font-size: 1rem;
+//   margin-top: 0.25rem;
+// }
+
+// button {
+//   background-color: #0070f3;
+//   color: white;
+//   border: none;
+//   padding: 0.75rem;
+//   border-radius: 5px;
+//   font-size: 1rem;
+//   cursor: pointer;
+//   transition: background-color 0.2s ease;
+// }
+
+// button:hover {
+//   background-color: #005bb5;
+// }
+
+// .errorMessage {
+//   color: red;
+//   font-size: 0.875rem;
+//   margin-top: 1rem;
+// }