diff --git a/.yarn/cache/typescript-patch-8adb042441-301459fc3e.zip b/.yarn/cache/typescript-patch-6cdf00d327-c981e82b77.zip
similarity index 66%
rename from .yarn/cache/typescript-patch-8adb042441-301459fc3e.zip
rename to .yarn/cache/typescript-patch-6cdf00d327-c981e82b77.zip
index e060c93..36b89d0 100644
Binary files a/.yarn/cache/typescript-patch-8adb042441-301459fc3e.zip and b/.yarn/cache/typescript-patch-6cdf00d327-c981e82b77.zip differ
diff --git a/resources/views/pages/Public/Join.svelte b/resources/views/pages/Public/Join.svelte
index 90b10d2..b60dc70 100644
--- a/resources/views/pages/Public/Join.svelte
+++ b/resources/views/pages/Public/Join.svelte
@@ -8,98 +8,147 @@
 </script>
 
 <!-- Adapted from https://v1.tailwindcss.com/components/forms#form-grid -->
-<form class="h-screen-no-nav border border-gray-200 border-gray-700 bg-gray-800 p-3 shadow-md">
-    <div class="-mx-3 mb-6 flex flex-wrap">
-        <div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
+<form class="mx-auto min-h-screen-no-nav border border-gray-700 bg-gray-800 p-3 shadow-md lg:w-4/5" id="join-form">
+    <div class="text-center text-gray-200">
+        <h1 class="text-2xl font-bold lg:text-2xl">JOIN ARCOMM</h1>
+        <p class="mt-4">
+            We're looking for well adjusted people who listen to and respect others. While having experience in our
+            games is welcome, it's in no way required. Aspiring members should make an effort to attend the weekly
+            operations, be accountable for their actions, and generally have a good sense of humor.
+        </p>
+    </div>
+    <hr class="my-8 h-px bg-gray-200" />
+    <div class="grid grid-cols-1 gap-x-3 gap-y-3 md:grid-cols-2">
+        <div>
             <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-name">
                 Your name
             </label>
             <input
-                class="mb-3 block w-full appearance-none rounded border border-red-500 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:bg-white focus:outline-none"
+                class="mb-3 block w-full appearance-none rounded border bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
                 id="grid-name"
                 type="text"
+                placeholder="Name"
+                required
             />
-            <p class="text-xs italic text-red-500">Please fill out this field.</p>
+            <p class="text-xs text-gray-400">This should be the name you use in game</p>
         </div>
-        <div class="w-full px-3 md:w-1/2">
+        <div>
             <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-age">
                 Your age
             </label>
             <input
-                class="block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
+                class="block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
                 id="grid-age"
                 type="text"
+                placeholder="e.g. 27"
+                required
             />
         </div>
-    </div>
-    <div class="-mx-3 mb-6 flex flex-wrap">
-        <div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
+
+        <div>
             <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-location">
                 Location
             </label>
             <input
-                class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
+                class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
                 id="grid-location"
+                placeholder="Location"
+                required
             />
-            <p class="text-xs italic text-gray-400">Make it as long and as crazy as you'd like</p>
+            <p class="text-xs text-gray-400">You can be as specific as you like</p>
         </div>
-        <div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
+        <div>
             <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-weekly">
                 Are you available for weekly operations?
             </label>
             <div class="relative">
                 <select
-                    class="block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 pr-8 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
+                    class="block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 pr-8 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
                     id="grid-weekly"
+                    required
                 >
+                    <option value="" disabled selected class="text-gray-200">Please Select an Option</option>
                     <option>No</option>
                     <option>Yes</option>
                 </select>
             </div>
+            <p class="mt-2 text-xs text-gray-400">
+                Arma - Saturday at 1800 Zulu
+                <br />
+                DCS - Sunday at 1800 Zulu
+            </p>
         </div>
-    </div>
-    <div class="-mx-3 mb-6 flex flex-wrap">
-        <div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
+        <div>
             <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-discord">
-                Discord account
+                Discord Username
             </label>
             <input
-                class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
+                class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
                 id="grid-discord"
                 type="text"
+                placeholder="Your Discord Username"
+                required
             />
+            <p class="text-xs text-gray-400">Discord > Left-Click profile in the bottom left > Copy Username</p>
+            <p class="text-xs text-gray-400">
+                Please join <a class="text-red-500 hover:text-red-600" href="https://discord.com/invite/7ehwg7F"
+                    >our Discord Server</a
+                > so that we can contact you about your application
+            </p>
         </div>
-        <div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
+        <div>
             <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-steam">
                 Steam account
             </label>
             <input
-                class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
+                class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
                 id="grid-steam"
                 type="text"
+                placeholder="Profile URL"
+                required
             />
+            <p class="text-xs text-gray-400">Steam > Your Profile > Right-Click > Copy Page URL</p>
         </div>
-    </div>
-    <div class="-mx-3 mb-6 flex flex-wrap">
-        <div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
-            <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-discord">
-                Discord account
+        <div>
+            <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-experience">
+                Your Game Experience
             </label>
-            <input
-                class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
-                id="grid-discord"
-                type="text"
+            <textarea
+                class="mb-3 block w-full appearance-none rounded border bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
+                id="grid-experience"
+                placeholder="Game Experience"
+                rows="6"
+                required
             />
+            <p class="text-xs text-gray-400">
+                Give us a short description of your experience with the game, what mods you've used etc
+            </p>
         </div>
-        <div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
-            <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-steam">
-                Steam account
+        <div>
+            <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-about">
+                About Yourself
             </label>
-            <input
-                class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
-                id="grid-steam"
-                type="text"
+            <textarea
+                class="mb-3 block w-full appearance-none rounded border bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
+                id="grid-about"
+                placeholder="About Yourself"
+                rows="6"
+                required
             />
+            <p class="text-xs text-gray-400">
+                Tell us a bit about yourself and how you think you would contribute as a member.
+                <br />
+                The more you write the better! This part is very important. Sharing a bit about yourself goes a long way
+                - we're not looking for one-liners
+            </p>
         </div>
     </div>
+    <div class="mt-3 content-center">
+        <button
+            class="btn rounded bg-red-500 py-2 px-4 font-bold text-gray-200 shadow hover:bg-red-600"
+            type="submit"
+            value="Submit"
+            form="join-form">Submit Application</button
+        >
+    </div>
 </form>
diff --git a/yarn.lock b/yarn.lock
index 276d6dd..393a2ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3601,11 +3601,11 @@ __metadata:
 
 "typescript@patch:typescript@^4.8.4#~builtin<compat/typescript>":
   version: 4.8.4
-  resolution: "typescript@patch:typescript@npm%3A4.8.4#~builtin<compat/typescript>::version=4.8.4&hash=0102e9"
+  resolution: "typescript@patch:typescript@npm%3A4.8.4#~builtin<compat/typescript>::version=4.8.4&hash=1a91c8"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 301459fc3eb3b1a38fe91bf96d98eb55da88a9cb17b4ef80b4d105d620f4d547ba776cc27b44cc2ef58b66eda23fe0a74142feb5e79a6fb99f54fc018a696afa
+  checksum: c981e82b77a5acdcc4e69af9c56cdecf5b934a87a08e7b52120596701e389a878b8e3f860e73ffb287bf649cc47a8c741262ce058148f71de4cdd88bb9c75153
   languageName: node
   linkType: hard