diff --git a/static/css/main.css b/static/css/main.css
index c81f56b..50f06d3 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -652,6 +652,9 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
diff --git a/templates/shortcodes/mt_form.html b/templates/shortcodes/mt_form.html
index ab82d2e..8987d16 100644
--- a/templates/shortcodes/mt_form.html
+++ b/templates/shortcodes/mt_form.html
@@ -110,10 +110,18 @@
         <input type="date" id="birthdate" name="birthdate"
                class="form-date {{ formClasses }}">
         <label for="gender" class="basis-full mt-4 mx-2">Gender</label>
-        <select id="gender" name="gender" class="form-select {{ formClasses }} border-r-8 border-transparent">
-            <option value="Male">Male</option>
-            <option value="Female">Female</option>
-        </select>
+        <div class="grid w-full grid-cols-2 gap-2 rounded-xl bg-gray-500 p-2">
+            <div>
+                <input type="radio" name="gender" id="gender-male" value="male" class="peer hidden" checked />
+                <label for="gender-male" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Male</label>
+            </div>
+
+            <div>
+                <input type="radio" name="gender" id="gender-female" value="female" class="peer hidden" />
+                <label for="gender-female" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Female</label>
+            </div>
+        </div>
+
         <div class="basis-full flex flex-wrap my-4">
             <label for="street" class="basis-full mx-2">What is your address? <span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
             <input type="text" id="street" name="street"
@@ -242,20 +250,20 @@
         </div>
 
         <h4 class="mb-4">Please select the trip that you'd prefer to go on. We reserve the right to move you to another trip if we need to. If you cannot go on a trip for sure, please tell us why in the next question.</h4>
-        <div class="grid w-full grid-cols-3 gap-2 rounded-xl bg-gray-700 p-2">
+        <div class="grid w-full grid-cols-3 gap-2 rounded-xl bg-gray-500 p-2">
             <div>
                 <input type="radio" name="trip" id="1" value="tulsa" class="peer hidden" checked />
-                <label for="1" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-800 peer-checked:font-bold peer-checked:text-white">Tulsa, Oklahoma</label>
+                <label for="1" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Tulsa, Oklahoma</label>
             </div>
 
             <div>
                 <input type="radio" name="trip" id="2" value="rehoboth" class="peer hidden" />
-                <label for="2" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-800 peer-checked:font-bold peer-checked:text-white">Rehoboth</label>
+                <label for="2" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Rehoboth</label>
             </div>
 
             <div>
                 <input type="radio" name="trip" id="3" value="mexico" class="peer hidden" />
-                <label for="3" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-800 peer-checked:font-bold peer-checked:text-white">Mexico</label>
+                <label for="3" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Mexico</label>
             </div>
         </div>