diff --git a/app/components/ember-versions-form.hbs b/app/components/ember-versions-form.hbs
index b2873c6..890743e 100644
--- a/app/components/ember-versions-form.hbs
+++ b/app/components/ember-versions-form.hbs
@@ -1,4 +1,5 @@
 <form
+  class="ember-versions-form"
   data-test-form="Ember Versions"
   {{on "submit" this.submitForm}}
 >
@@ -12,6 +13,7 @@
     >
       {{#each this.groupedVersions as |versionGroup|}}
         <optgroup label={{concat "v" versionGroup.major ".x"}}>
+          <legend>{{versionGroup.major}}.x Versions</legend>
           {{#each versionGroup.versions as |version|}}
             <option
               selected={{eq version this.fromVersion}}
@@ -35,6 +37,7 @@
     >
       {{#each this.groupedVersions as |versionGroup|}}
         <optgroup label={{concat "v" versionGroup.major ".x"}}>
+          <legend>{{versionGroup.major}}.x Versions</legend>
           {{#each versionGroup.versions as |version|}}
             <option
               selected={{eq version this.toVersion}}
diff --git a/app/styles/app.css b/app/styles/app.css
index ff175ad..d708372 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,5 +1,7 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
 
+@import url("./ember-versions-form.css");
+
 /* 
 This project is using an old version of the styleguide, so these highly-targeted rules are a bridge
 to meet accessibility guidelines until we upgrade to a compliant styleguide.
diff --git a/app/styles/ember-versions-form.css b/app/styles/ember-versions-form.css
new file mode 100644
index 0000000..19d28f2
--- /dev/null
+++ b/app/styles/ember-versions-form.css
@@ -0,0 +1,72 @@
+.ember-versions-form {
+  /* Fallback styling for older browsers */
+  select {
+    appearance: auto;
+  }
+
+  /* Progressive enhancement for modern browsers */
+  @supports (appearance: base-select) {
+    select {
+      appearance: base-select;
+    }
+
+    /* stylelint-disable selector-pseudo-element-no-unknown */
+    select::picker(select) {
+      appearance: base-select;
+      background-color: var(--color-gray-100);
+      margin-right: var(--spacing-6);
+      margin-bottom: var(--spacing-1);
+      border-radius: var(--radius);
+    }
+
+    select::picker-icon {
+      transition: 150ms ease;
+    }
+
+    /* stylelint-disable selector-pseudo-class-no-unknown */
+    select:open::picker-icon {
+      rotate: 180deg;
+    }
+
+    select optgroup {
+      display: flex;
+      flex-flow: row wrap;
+      gap: 0.5rem;
+      padding: 0.5rem;
+    }
+
+    select optgroup legend {
+      width: 100%;
+    }
+
+    select option {
+      background-color: var(--color-button-secondary-bg);
+      color: var(--color-button-secondary-text);
+
+      &:hover {
+        background-color: var(--color-button-secondary-bg-hover);
+        color: var(--color-button-secondary-text-hover);
+      }
+
+      display: inline-block;
+      padding: 0.25rem;
+      border-radius: 0.25rem;
+      align-content: center;
+      cursor: pointer;
+    }
+
+    select option::checkmark {
+      display: none;
+    }
+
+    select option:checked {
+      background-color: var(--color-button-bg);
+      color: var(--color-white);
+    }
+
+    select option:checked::checkmark {
+      display: inline-block;
+      color: var(--color-button-text);
+    }
+  }
+}