diff --git a/package-lock.json b/package-lock.json
index 1ebc9e9..5c77984 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -98,7 +98,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -765,7 +764,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -789,7 +787,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2129,7 +2126,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -2291,7 +2289,6 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2302,7 +2299,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -2383,7 +2379,6 @@
       "integrity": "sha512-30ScMRHIAD33JJQkgfGW1t8CURZtjc2JpTrq5n2HFhOefbAhb7ucc7xJwdWcrEtqUIYJ73Nybpsggii6GtAHjA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.57.2",
         "@typescript-eslint/types": "8.57.2",
@@ -2955,7 +2950,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3239,7 +3233,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -3727,7 +3720,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
@@ -3828,7 +3822,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4826,7 +4819,6 @@
       "integrity": "sha512-AkXIIFcaazymvey2i/+F94XRnM6TsVLZDhBMLsd1Sf/W0wzsvvpjeyUrCZD6HGG4SDYPgDJDBKeiJTBb10WzMg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "30.3.0",
         "@jest/types": "30.3.0",
@@ -5792,7 +5784,6 @@
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -6333,6 +6324,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -6923,6 +6915,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -6938,6 +6931,7 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -6948,6 +6942,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -6987,7 +6982,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6997,7 +6991,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -7030,7 +7023,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-router": {
       "version": "7.13.2",
@@ -7883,7 +7877,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8034,7 +8027,6 @@
       "integrity": "sha512-1gFhNi+bHhRE/qKZOJXACm6tX4bA3Isy9KuKF15AgSRuRazNBOJfdDemPBU16/mpMxApDPrWvZ08DcLPEoRnuA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.3",
@@ -8530,7 +8522,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/app/components/CreateEventModal.module.css b/src/app/components/CreateEventModal.module.css
index 0216f74..66d4634 100644
--- a/src/app/components/CreateEventModal.module.css
+++ b/src/app/components/CreateEventModal.module.css
@@ -12,16 +12,25 @@
 }
 
 .dialog {
+  display: flex;
   width: min(100%, 640px);
   max-height: min(90vh, 840px);
   overflow-y: auto;
-  padding: clamp(24px, 3vw, 32px);
+  padding: clamp(24px, 3vw, 32px) 16px clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px);
   border: 1px solid rgba(128, 213, 206, 0.42);
   border-radius: 32px;
   background:
     linear-gradient(180deg, rgba(23, 115, 109, 0.92), rgba(8, 77, 73, 0.95)),
     rgba(255, 255, 255, 0.04);
   box-shadow: 0 26px 64px rgba(0, 28, 27, 0.42);
+  overflow: hidden;
+}
+
+.content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 16px;
 }
 
 .header {
diff --git a/src/app/components/CreateEventModal.tsx b/src/app/components/CreateEventModal.tsx
index 31f9b63..11cdf84 100644
--- a/src/app/components/CreateEventModal.tsx
+++ b/src/app/components/CreateEventModal.tsx
@@ -190,130 +190,135 @@ export function CreateEventModal({ isOpen, onClose, onCreated }: CreateEventModa
             transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
             onClick={(event) => event.stopPropagation()}
           >
-            <div className={styles.header}>
-              <div>
-                <p className={styles.eyebrow}>new event</p>
-                <h2 className={styles.title} id="create-event-title">
-                  create an event
-                </h2>
+            <div className={styles.content}>
+              <div className={styles.header}>
+                <div>
+                  <p className={styles.eyebrow}>new event</p>
+                  <h2 className={styles.title} id="create-event-title">
+                    create an event
+                  </h2>
+                </div>
+                <button
+                  type="button"
+                  className={styles.closeButton}
+                  onClick={onClose}
+                  aria-label="Close create event form"
+                  disabled={isSubmitting}
+                >
+                  x
+                </button>
               </div>
-              <button
-                type="button"
-                className={styles.closeButton}
-                onClick={onClose}
-                aria-label="Close create event form"
-                disabled={isSubmitting}
-              >
-                x
-              </button>
-            </div>
 
-            <p className={styles.copy}>
-              Submit with the signed-in session cookie. You can only create events for organizations
-              you currently belong to.
-            </p>
+              <p className={styles.copy}>
+                Submit with the signed-in session cookie. You can only create events for
+                organizations you currently belong to.
+              </p>
 
-            <form className={styles.form} onSubmit={handleSubmit}>
-              <label className={styles.field}>
-                <span>Organization</span>
-                <select value={formState.orgId} onChange={handleChange('orgId')}>
-                  <option value="" disabled>
-                    {isAuthed ? 'Select an organization' : 'Sign in to load your organizations'}
-                  </option>
-                  {myOrganizations.map((organization) => (
-                    <option key={organization.oid} value={organization.oid}>
-                      {organization.name}
+              <form className={styles.form} onSubmit={handleSubmit}>
+                <label className={styles.field}>
+                  <span>Organization</span>
+                  <select value={formState.orgId} onChange={handleChange('orgId')}>
+                    <option value="" disabled>
+                      {isAuthed ? 'Select an organization' : 'Sign in to load your organizations'}
                     </option>
-                  ))}
-                </select>
-              </label>
+                    {myOrganizations.map((organization) => (
+                      <option key={organization.oid} value={organization.oid}>
+                        {organization.name}
+                      </option>
+                    ))}
+                  </select>
+                </label>
 
-              <label className={styles.field}>
-                <span>Title</span>
-                <input
-                  type="text"
-                  value={formState.title}
-                  onChange={handleChange('title')}
-                  placeholder="Spring Networking Night"
-                  autoComplete="off"
-                />
-              </label>
+                <label className={styles.field}>
+                  <span>Title</span>
+                  <input
+                    type="text"
+                    value={formState.title}
+                    onChange={handleChange('title')}
+                    placeholder="Spring Networking Night"
+                    autoComplete="off"
+                  />
+                </label>
 
-              <label className={styles.field}>
-                <span>Location</span>
-                <input
-                  type="text"
-                  value={formState.location}
-                  onChange={handleChange('location')}
-                  placeholder="Engineering Building, Room 210"
-                  autoComplete="off"
-                />
-              </label>
+                <label className={styles.field}>
+                  <span>Location</span>
+                  <input
+                    type="text"
+                    value={formState.location}
+                    onChange={handleChange('location')}
+                    placeholder="Engineering Building, Room 210"
+                    autoComplete="off"
+                  />
+                </label>
 
-              <label className={styles.field}>
-                <span>Event time</span>
-                <input
-                  type="datetime-local"
-                  value={formState.eventTime}
-                  onChange={handleChange('eventTime')}
-                />
-              </label>
+                <label className={styles.field}>
+                  <span>Event time</span>
+                  <input
+                    type="datetime-local"
+                    value={formState.eventTime}
+                    onChange={handleChange('eventTime')}
+                  />
+                </label>
 
-              <label className={styles.field}>
-                <span>Description</span>
-                <textarea
-                  value={formState.description}
-                  onChange={handleChange('description')}
-                  placeholder="Spring networking night for students and alumni"
-                  rows={5}
-                />
-              </label>
+                <label className={styles.field}>
+                  <span>Description</span>
+                  <textarea
+                    value={formState.description}
+                    onChange={handleChange('description')}
+                    placeholder="Spring networking night for students and alumni"
+                    rows={5}
+                  />
+                </label>
 
-              {isAuthLoading ? <p className={styles.status}>Checking session...</p> : null}
-              {isAuthed && isLoadingOrganizations ? (
-                <p className={styles.status}>Loading organizations...</p>
-              ) : null}
-              {isAuthed && isLoadingMyOrganizations ? (
-                <p className={styles.status}>Loading your organizations...</p>
-              ) : null}
-              {!isAuthed && !isAuthLoading ? (
-                <p className={styles.status}>
-                  Sign in before creating an event. The request is sent with `credentials: include`.
-                </p>
-              ) : null}
-              {isAuthed &&
-              !isLoadingOrganizations &&
-              !isLoadingMyOrganizations &&
-              myOrganizations.length === 0 ? (
-                <p className={styles.status}>
-                  You are not in any organizations yet. Join one first to create an event.
-                </p>
-              ) : null}
-              {organizationsError ? <p className={styles.error}>{organizationsError}</p> : null}
-              {myOrganizationsError ? <p className={styles.error}>{myOrganizationsError}</p> : null}
-              {error ? <p className={styles.error}>{error}</p> : null}
+                {isAuthLoading ? <p className={styles.status}>Checking session...</p> : null}
+                {isAuthed && isLoadingOrganizations ? (
+                  <p className={styles.status}>Loading organizations...</p>
+                ) : null}
+                {isAuthed && isLoadingMyOrganizations ? (
+                  <p className={styles.status}>Loading your organizations...</p>
+                ) : null}
+                {!isAuthed && !isAuthLoading ? (
+                  <p className={styles.status}>
+                    Sign in before creating an event. The request is sent with `credentials:
+                    include`.
+                  </p>
+                ) : null}
+                {isAuthed &&
+                !isLoadingOrganizations &&
+                !isLoadingMyOrganizations &&
+                myOrganizations.length === 0 ? (
+                  <p className={styles.status}>
+                    You are not in any organizations yet. Join one first to create an event.
+                  </p>
+                ) : null}
+                {organizationsError ? <p className={styles.error}>{organizationsError}</p> : null}
+                {myOrganizationsError ? (
+                  <p className={styles.error}>{myOrganizationsError}</p>
+                ) : null}
+                {error ? <p className={styles.error}>{error}</p> : null}
 
-              <div className={styles.actions}>
-                <PillButton type="button" subtle onClick={onClose} disabled={isSubmitting}>
-                  cancel
-                </PillButton>
-                <PillButton
-                  type="submit"
-                  accent
-                  disabled={
-                    isSubmitting ||
-                    isAuthLoading ||
-                    isLoadingOrganizations ||
-                    isLoadingMyOrganizations ||
-                    !isAuthed ||
-                    myOrganizations.length === 0 ||
-                    formState.orgId.length === 0
-                  }
-                >
-                  {isSubmitting ? 'creating...' : 'create event'}
-                </PillButton>
-              </div>
-            </form>
+                <div className={styles.actions}>
+                  <PillButton type="button" subtle onClick={onClose} disabled={isSubmitting}>
+                    cancel
+                  </PillButton>
+                  <PillButton
+                    type="submit"
+                    accent
+                    disabled={
+                      isSubmitting ||
+                      isAuthLoading ||
+                      isLoadingOrganizations ||
+                      isLoadingMyOrganizations ||
+                      !isAuthed ||
+                      myOrganizations.length === 0 ||
+                      formState.orgId.length === 0
+                    }
+                  >
+                    {isSubmitting ? 'creating...' : 'create event'}
+                  </PillButton>
+                </div>
+              </form>
+            </div>
           </motion.div>
         </motion.div>
       ) : null}
diff --git a/src/index.css b/src/index.css
index 1bec510..eb04044 100644
--- a/src/index.css
+++ b/src/index.css
@@ -28,3 +28,19 @@ body {
 a {
   color: inherit;
 }
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #88bcb6;
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}