diff --git a/package-lock.json b/package-lock.json
index bad7f2b0..ce23a4bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1718,9 +1718,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.2.tgz",
-      "integrity": "sha512-sk72qRfM1Q90XZWYRoJKu/UWlTgihrASiYw/scb15u+tyzcze3bOuJ/UV6TBOQEeUaxOkRqGeuGUdiiuxc5oqw=="
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
+      "integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "13.5.5",
@@ -1773,130 +1773,10 @@
         "node": "*"
       }
     },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.2.tgz",
-      "integrity": "sha512-3iPgMhzbalizGwHNFUcGnDhFPSgVBHQ8aqSTAMxB5BvJG0oYrDf1WOJZlbXBgunOEj/8KMVbejEur/FpvFsgFQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.2.tgz",
-      "integrity": "sha512-x7Afi/jt0ZBRUZHTi49yyej4o8znfIMHO4RvThuoc0P+uli8Jd99y5GKjxoYunPKsXL09xBXEM1+OQy2xEL0Ag==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.2.tgz",
-      "integrity": "sha512-zbfPtkk7L41ODMJwSp5VbmPozPmMMQrzAc0HAUomVeVIIwlDGs/UCqLJvLNDt4jpWgc21SjjyIn762lNGrMaUA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.2.tgz",
-      "integrity": "sha512-wPbS3pI/JU16rm3XdLvvTmlsmm1nd+sBa2ohXgBZcShX4TgOjD4R+RqHKlI1cjo/jDZKXt6OxmcU0Iys0OC/yg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.2.tgz",
-      "integrity": "sha512-NqWOHqqq8iC9tuHvZxjQ2tX+jWy2X9y8NX2mcB4sj2bIccuCxbIZrU/ThFPZZPauygajZuVQ6zediejQHwZHwQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.2.tgz",
-      "integrity": "sha512-lGepHhwb9sGhCcU7999+iK1ZZT+6rrIoVg40MP7DZski9GIZP80wORSbt5kJzh9v2x2ev2lxC6VgwMQT0PcgTA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.2.tgz",
-      "integrity": "sha512-TZSh/48SfcLEQ4rD25VVn2kdIgUWmMflRX3OiyPwGNXn3NiyPqhqei/BaqCYXViIQ+6QsG9R0C8LftMqy8JPMA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.2.tgz",
-      "integrity": "sha512-M0tBVNMEBJN2ZNQWlcekMn6pvLria7Sa2Fai5znm7CCJz4pP3lrvlSxhKdkCerk0D9E0bqx5yAo3o2Q7RrD4gA==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.2.tgz",
-      "integrity": "sha512-a/20E/wtTJZ3Ykv3f/8F0l7TtgQa2LWHU2oNB9bsu0VjqGuGGHmm/q6waoUNQYTVPYrrlxxaHjJcDV6aiSTt/w==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
+      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
       "cpu": [
         "x64"
       ],
@@ -2705,20 +2585,20 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.29.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.29.0.tgz",
-      "integrity": "sha512-WgPTRs58hm9CMzEr5jpISe8HXa3qKQ8CxewdYZeVnA54JrPY9B1CZiwsCoLpLkf0dGRZq+LcX5OiJb0bEsOFww==",
+      "version": "5.35.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.35.1.tgz",
+      "integrity": "sha512-0Dnpybqb8+ps6WgqBnqFEC+1F/xLvUosRAq+wiGisTgolOZzqZfkE2995dEXmhuzINiTM7/a6xSGznU0NIvBkw==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.29.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.29.2.tgz",
-      "integrity": "sha512-nyuWILR4u7H5moLGSiifLh8kIqQDLNOHGuSz0rcp+J75fNc8aQLyr5+I2JCHU3n+nJrTTW1ssgAD8HiKD7IFBQ==",
+      "version": "5.35.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.35.1.tgz",
+      "integrity": "sha512-i2T7m2ffQdNqlX3pO+uMsnQ0H4a59Ens2GxtlMsRiOvdSB4SfYmHb27MnvFV8rGmtWRaa4gPli0/rpDoSS5LbQ==",
       "dependencies": {
-        "@tanstack/query-core": "5.29.0"
+        "@tanstack/query-core": "5.35.1"
       },
       "funding": {
         "type": "github",
@@ -2785,35 +2665,35 @@
       }
     },
     "node_modules/@trpc/client": {
-      "version": "11.0.0-rc.340",
-      "resolved": "https://registry.npmjs.org/@trpc/client/-/client-11.0.0-rc.340.tgz",
-      "integrity": "sha512-q2ecZW58LM9pKpzRt+um9Jh33Nmjt7qDZu3xsjMFD61QLE6M/Tply7lC02iqZzrXzTGxR0w2+dLdkkrSlITOKQ==",
+      "version": "11.0.0-rc.366",
+      "resolved": "https://registry.npmjs.org/@trpc/client/-/client-11.0.0-rc.366.tgz",
+      "integrity": "sha512-bIbcF/UhCifU5i9hbbaMlmOS2NgnRq5W0pJH2SJhrp6jyIIaCF+uNAIZtkfO0GriBb0agBmGIXqvGLFEexiTKA==",
       "funding": [
         "https://trpc.io/sponsor"
       ],
       "peerDependencies": {
-        "@trpc/server": "11.0.0-rc.340+d1652d1bc"
+        "@trpc/server": "11.0.0-rc.366+237dbb3f9"
       }
     },
     "node_modules/@trpc/react-query": {
-      "version": "11.0.0-rc.340",
-      "resolved": "https://registry.npmjs.org/@trpc/react-query/-/react-query-11.0.0-rc.340.tgz",
-      "integrity": "sha512-3c+KWh3+KN+T0gBKSnxzGfrHlX1NRK5u+v4BqFWLTBg0ADi2eVOgSpTaToF/WEea616kacmPh5ptJeK8SmyBKQ==",
+      "version": "11.0.0-rc.366",
+      "resolved": "https://registry.npmjs.org/@trpc/react-query/-/react-query-11.0.0-rc.366.tgz",
+      "integrity": "sha512-LCdJFymEdaKBBNRQPVAcEw9qNu3m+n9hH3qIPKDanLWYlo4h+8lQnj8JIhYpClD2G3gkvD0ZSZ+F54QvwrI3nA==",
       "funding": [
         "https://trpc.io/sponsor"
       ],
       "peerDependencies": {
         "@tanstack/react-query": "^5.25.0",
-        "@trpc/client": "11.0.0-rc.340+d1652d1bc",
-        "@trpc/server": "11.0.0-rc.340+d1652d1bc",
+        "@trpc/client": "11.0.0-rc.366+237dbb3f9",
+        "@trpc/server": "11.0.0-rc.366+237dbb3f9",
         "react": ">=18.2.0",
         "react-dom": ">=18.2.0"
       }
     },
     "node_modules/@trpc/server": {
-      "version": "11.0.0-rc.340",
-      "resolved": "https://registry.npmjs.org/@trpc/server/-/server-11.0.0-rc.340.tgz",
-      "integrity": "sha512-fKzFeAzFbsezC8Jx6gIy4AjlzNvQy4aFc2LT0qIq7hNWYCkuv3gQ7ROgcIF4dUI0rfPC3Gt/y8PQjE+GayAhvA==",
+      "version": "11.0.0-rc.366",
+      "resolved": "https://registry.npmjs.org/@trpc/server/-/server-11.0.0-rc.366.tgz",
+      "integrity": "sha512-Pr7SdpIVrOGtIGt9vs7i3v0hqzlpXbi8/8RV7XfrXVJ5hlzKYOz5VE0AjckhHXuhrUlpTGTDm0/2nz0ywLcQ2g==",
       "funding": [
         "https://trpc.io/sponsor"
       ]
@@ -3982,9 +3862,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001611",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001611.tgz",
-      "integrity": "sha512-19NuN1/3PjA3QI8Eki55N8my4LzfkMCRLgCVfrl/slbSAchQfV0+GwjPrK3rq37As4UCLlM/DHajbKkAqbv92Q==",
+      "version": "1.0.30001616",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
+      "integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
       "funding": [
         {
           "type": "opencollective",
@@ -8963,11 +8843,11 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.2.tgz",
-      "integrity": "sha512-oGwUaa2bCs47FbuxWMpOoXtBMPYpvTPgdZr3UAo+pu7Ns00z9otmYpoeV1HEiYL06AlRQQIA/ypK526KjJfaxg==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
+      "integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
       "dependencies": {
-        "@next/env": "14.2.2",
+        "@next/env": "14.2.3",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -8982,15 +8862,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.2",
-        "@next/swc-darwin-x64": "14.2.2",
-        "@next/swc-linux-arm64-gnu": "14.2.2",
-        "@next/swc-linux-arm64-musl": "14.2.2",
-        "@next/swc-linux-x64-gnu": "14.2.2",
-        "@next/swc-linux-x64-musl": "14.2.2",
-        "@next/swc-win32-arm64-msvc": "14.2.2",
-        "@next/swc-win32-ia32-msvc": "14.2.2",
-        "@next/swc-win32-x64-msvc": "14.2.2"
+        "@next/swc-darwin-arm64": "14.2.3",
+        "@next/swc-darwin-x64": "14.2.3",
+        "@next/swc-linux-arm64-gnu": "14.2.3",
+        "@next/swc-linux-arm64-musl": "14.2.3",
+        "@next/swc-linux-x64-gnu": "14.2.3",
+        "@next/swc-linux-x64-musl": "14.2.3",
+        "@next/swc-win32-arm64-msvc": "14.2.3",
+        "@next/swc-win32-ia32-msvc": "14.2.3",
+        "@next/swc-win32-x64-msvc": "14.2.3"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -12054,9 +11934,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz",
-      "integrity": "sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
+      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
       "cpu": [
         "arm64"
       ],
@@ -12069,9 +11949,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz",
-      "integrity": "sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
+      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
       "cpu": [
         "x64"
       ],
@@ -12084,9 +11964,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz",
-      "integrity": "sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
+      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
       "cpu": [
         "arm64"
       ],
@@ -12099,9 +11979,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz",
-      "integrity": "sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
+      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
       "cpu": [
         "arm64"
       ],
@@ -12114,9 +11994,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz",
-      "integrity": "sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
+      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
       "cpu": [
         "x64"
       ],
@@ -12129,9 +12009,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz",
-      "integrity": "sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
+      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
       "cpu": [
         "x64"
       ],
@@ -12144,9 +12024,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz",
-      "integrity": "sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
+      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
       "cpu": [
         "arm64"
       ],
@@ -12159,9 +12039,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz",
-      "integrity": "sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
+      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
       "cpu": [
         "ia32"
       ],
diff --git a/src/app/manage/[clubId]/create/CreateEventForm.tsx b/src/app/manage/[clubId]/create/CreateEventForm.tsx
index 3105d8d9..8afc8338 100644
--- a/src/app/manage/[clubId]/create/CreateEventForm.tsx
+++ b/src/app/manage/[clubId]/create/CreateEventForm.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { type SelectClub } from "@src/server/db/models";
 import { createEventSchema } from "@src/utils/formSchemas";
 import { useForm } from "react-hook-form";
@@ -9,7 +9,9 @@ import { type z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { UploadIcon } from "@src/icons/Icons";
+import EventCardPreview from "./EventCardPreview";
 import TimeSelect from "./TimeSelect";
+import { type RouterOutputs } from "@src/trpc/shared";
 
 const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClubs: SelectClub[]}) => {
 	const {
@@ -27,28 +29,44 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub
 	});
 	const router = useRouter();
 	const [watchDescription, watchStartTime] = watch(['description', 'startTime']);
+	const [eventPreview, setEventPreview] = useState<RouterOutputs['event']['findByFilters']['events'][number]|undefined>();
 	useEffect(() => {
-		const subscription = watch((data, {name}) => {
-			if (name == "clubId") {
+		const subscription = watch((data, info) => {
+			const { name, clubId, description, location, startTime, endTime } = data;
+			const club = officerClubs.find((val) => val.id == data.clubId);
+			if (club) {
+				setEventPreview({
+					name: name || "",
+					clubId: clubId || "",
+					description: description || "",
+					location: location || "",
+					liked: false,
+					id: "",
+					startTime: startTime?.toString() === "" || startTime == undefined ? new Date(Date.now()) : new Date(startTime),
+					endTime: endTime?.toString() === "" || endTime?.toString() == "Invalid Date" || !endTime ? new Date(Date.now()) : new Date(endTime),
+					club,
+				});
+			}
+			if (info.name == "clubId") {
 				router.replace(`/manage/${data.clubId}/create`);
 			}
 		});
 		return () => subscription.unsubscribe();
-	}, [router, watch]);
+	}, [router, watch, officerClubs]);
 
 	const createMutation = api.event.create.useMutation({
 		onSuccess: () => { location.reload(); }
 	})
 
 	const onSubmit = handleSubmit((data: z.infer<typeof createEventSchema>) => {
-		if (!createMutation.isLoading) {
+		if (!createMutation.isPending) {
 			createMutation.mutate(data);
 		}
 	});
 
-	return (<form onSubmit={(e) => void onSubmit(e)} className="w-full flex flex-row flex-wrap justify-between gap-10 overflow-x-clip text-[#4D5E80] pb-4">
+	return (<form onSubmit={(e) => void onSubmit(e)} className="w-full flex flex-row flex-wrap justify-start gap-10 overflow-x-clip text-[#4D5E80] pb-4">
 		<div className="form-fields flex flex-col flex-1 gap-10 min-w-[320px] max-w-[830px]">
-			<div className="create-dropdown text-xl font-bold py-2">
+			<div className="create-dropdown text-2xl font-bold py-2">
 				Create Club Event <span className="text-[#3361FF]">for </span>
 				<select {...register("clubId")} className="bg-inherit text-[#3361FF] max-w-xs outline-none text-ellipsis overflow-hidden whitespace-nowrap" defaultValue={clubId}>
 					{officerClubs.map((club) => {
@@ -91,7 +109,10 @@ const CreateEventForm = ({ clubId, officerClubs }: { clubId: string, officerClub
 			<TimeSelect register={register} setValue={setValue} getValues={getValues} watchStartTime={watchStartTime} />
 			<input className="bg-[#3361FF] text-white py-6 hover:cursor-pointer font-black text-xs rounded-md" type="submit" value="Create Event" />
 		</div>
-		<div className="form-preview w-64">hi</div>
+		<div className="form-preview w-64 flex flex-col gap-10">
+			<h1 className="text-lg font-bold">Preview</h1>
+			{eventPreview && <EventCardPreview event={eventPreview} />}
+		</div>
 	</form>)
 }
 export default CreateEventForm;
\ No newline at end of file
diff --git a/src/app/manage/[clubId]/create/EventCardPreview.tsx b/src/app/manage/[clubId]/create/EventCardPreview.tsx
new file mode 100644
index 00000000..df3f462b
--- /dev/null
+++ b/src/app/manage/[clubId]/create/EventCardPreview.tsx
@@ -0,0 +1,64 @@
+import EventTimeAlert from "@src/components/events/EventTimeAlert";
+import { MoreIcon, PlusIcon } from "@src/icons/Icons";
+import type { RouterOutputs } from "@src/trpc/shared"
+import { format, isSameDay } from 'date-fns';
+import Image from 'next/image';
+
+interface Props {
+	event: RouterOutputs['event']['findByFilters']['events'][number],
+}
+
+const EventCardPreview = ({ event }: Props) => {
+	return (
+		<div className="container flex h-96 w-64 flex-col overflow-hidden rounded-lg bg-white shadow-sm transition-shadow hover:shadow-lg">
+			<div className="relative">
+	  			<div className="h-40 w-96">
+				<Image
+					src={'/event_default.jpg'}
+					alt="event image"
+					fill
+					objectFit="cover"
+				/>
+				<div className="absolute inset-0 p-2">
+					<EventTimeAlert event={event} />
+				</div>
+	  		</div>
+		</div>
+		<div className="flex h-full flex-col p-5">
+	  		<div className="space-y-2.5">
+				<h3 className="font-bold">{event.name}</h3>
+				<h4 className="text-xs font-bold">
+		 		 	<p
+						className="hover:text-blue-primary"
+					>
+						{event.club.name}
+					</p>
+		  <div>
+			<span className="text-blue-primary">
+			  {format(event.startTime, 'E, MMM d, p')}
+			  {isSameDay(event.startTime, event.endTime) ? (
+				<> - {format(event.endTime, 'p')}</>
+			  ) : (
+				<>
+				  {' '}
+				  - <br />
+				  {format(event.endTime, 'E, MMM d, p')}
+				</>
+			  )}
+			</span>
+		  </div>
+		</h4>
+		</div>
+			<div className="mt-auto flex flex-row space-x-4">
+				<p className=" h-10 w-10 rounded-full bg-blue-primary p-1.5 shadow-lg transition-colors hover:bg-blue-700 active:bg-blue-800 hover:cursor-pointer">
+					<MoreIcon fill="fill-white" />
+				</p>
+				<div className="h-10 w-10 rounded-full bg-white p-1.5 shadow-lg hover:cursor-pointer">
+					<PlusIcon fill="fill-slate-800" />
+				</div>
+			</div>
+		</div>
+  	</div>
+  	);
+}
+export default EventCardPreview
\ No newline at end of file
diff --git a/src/app/manage/[clubId]/create/page.tsx b/src/app/manage/[clubId]/create/page.tsx
index bf4ebc1f..95765a0e 100644
--- a/src/app/manage/[clubId]/create/page.tsx
+++ b/src/app/manage/[clubId]/create/page.tsx
@@ -11,7 +11,7 @@ const Page = async ({ params }: { params: { clubId: string } }) => {
 		redirect(signInRoute(`manage/${params.clubId}/create`));
 	}
 
-	const officerClubs = await api.club.getOfficerClubs.query();
+	const officerClubs = await api.club.getOfficerClubs();
 	const currentClub = officerClubs.filter(val => {
 		return val.id == params.clubId
 	})[0];
diff --git a/src/components/events/EventTimeAlert.tsx b/src/components/events/EventTimeAlert.tsx
index 69500b57..0748f121 100644
--- a/src/components/events/EventTimeAlert.tsx
+++ b/src/components/events/EventTimeAlert.tsx
@@ -1,4 +1,3 @@
-'use server';
 import { type SelectEvent } from '@src/server/db/models';
 import {
   differenceInDays,