diff --git a/apps/e2e/phone-field-storybook-e2e/src/e2e/phone-field.component.cy.ts b/apps/e2e/phone-field-storybook-e2e/src/e2e/phone-field.component.cy.ts
index 2b0aac9898..420b2b8926 100644
--- a/apps/e2e/phone-field-storybook-e2e/src/e2e/phone-field.component.cy.ts
+++ b/apps/e2e/phone-field-storybook-e2e/src/e2e/phone-field.component.cy.ts
@@ -65,5 +65,5 @@ describe('phone-field-storybook', () => {
           );
       });
     });
-  });
+  }, true);
 });
diff --git a/apps/e2e/phone-field-storybook/project.json b/apps/e2e/phone-field-storybook/project.json
index 0205b2c0aa..0bc962da19 100644
--- a/apps/e2e/phone-field-storybook/project.json
+++ b/apps/e2e/phone-field-storybook/project.json
@@ -18,7 +18,8 @@
         "styles": [
           "apps/e2e/phone-field-storybook/src/styles.scss",
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ],
         "scripts": []
       },
@@ -88,7 +89,8 @@
         "compodoc": false,
         "styles": [
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ]
       },
       "configurations": {
@@ -108,7 +110,8 @@
         "compodoc": false,
         "styles": [
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ]
       },
       "configurations": {
diff --git a/libs/components/forms/src/lib/modules/input-box/input-box.component.scss b/libs/components/forms/src/lib/modules/input-box/input-box.component.scss
index ae1f7bf4e2..7ade36e079 100644
--- a/libs/components/forms/src/lib/modules/input-box/input-box.component.scss
+++ b/libs/components/forms/src/lib/modules/input-box/input-box.component.scss
@@ -479,7 +479,8 @@ sky-input-box {
       .sky-input-group-btn.sky-input-box-btn-inset {
         .sky-btn {
           background-color: transparent;
-          border-radius: var(--sky-border-radius-s);
+          border-top-right-radius: var(--sky-border-radius-s);
+          border-bottom-right-radius: var(--sky-border-radius-s);
           transition-property: none;
 
           &:not(:active):not(:focus):not(:hover) {
diff --git a/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.scss b/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.scss
index a483778142..f62ecba67e 100644
--- a/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.scss
+++ b/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.scss
@@ -1,13 +1,34 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
 @import 'node_modules/intl-tel-input/build/css/intlTelInput.css';
 
-.sky-phone-field-country-btn + .sky-form-control {
-  border-left: none;
+@include compatMixins.sky-default-overrides('.sky-phone-field-country-btn') {
+  --sky-override-phone-field-flag-transform: scaleX(1.25) translateX(2px);
+  --sky-override-phone-field-flag-min-width: 20px;
+  --sky-override-phone-field-flag-display: block;
+  --sky-override-phone-field-input-box-country-button-padding: 6px 12px;
+}
+
+@include compatMixins.sky-default-overrides('.sky-phone-field') {
+  .sky-phone-field-search-btn-dismiss {
+    border-color: transparent;
+  }
+}
+
+@include compatMixins.sky-modern-overrides(
+  '.sky-phone-field-country-btn',
+  false
+) {
+  --sky-override-phone-field-flag-transform: scaleX(1.25) translateX(2px);
+  --sky-override-phone-field-flag-min-width: var(--modern-size-20);
+  --sky-override-phone-field-flag-display: block;
+  --sky-override-phone-field-input-box-country-button-padding: 0 17px 0 18px;
 }
 
 .sky-phone-field-country-btn {
   .sky-btn {
+    // NOTE: This rule is set for non-input box phone fields. Remove when support for this is fully removed.
     border-radius: 0;
   }
 }
@@ -21,47 +42,27 @@
   flex-grow: 1;
 }
 
-.sky-phone-field-search-btn-dismiss {
-  border-color: transparent;
-}
-
-.sky-phone-field-country-selected,
-.sky-phone-field-country-default {
-  @include mixins.sky-border(light, bottom);
-}
-
-.sky-phone-field-search-result {
-  .sky-phone-field-flag {
-    display: inline-block;
-    margin-right: $sky-margin-half;
-  }
-}
-
+// Default only style for the dismiss icon in input boxes
 .sky-input-box {
   .sky-phone-field-search-btn-dismiss .fa-lg {
     vertical-align: -10%;
   }
 }
 
-.sky-theme-modern {
-  .sky-input-box {
-    .sky-phone-field-country-search .sky-country-field-input {
-      background-color: transparent;
-    }
-
-    .sky-phone-field-country-btn.sky-input-group-btn .sky-btn {
-      padding: 0 17px 0 18px;
-    }
+.sky-input-box {
+  .sky-phone-field-country-btn.sky-input-group-btn .sky-btn {
+    padding: var(--sky-override-phone-field-input-box-country-button-padding);
   }
 }
 
 .sky-phone-field-country-btn {
   .sky-phone-field-flag {
-    min-width: 20px;
+    min-width: var(--sky-override-phone-field-flag-min-width);
+    display: var(--sky-override-phone-field-flag-display, inline-block);
   }
 
   .iti__flag {
     background-image: url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.4/assets/images/intl-tel-input/flags@2x.webp) !important;
-    transform: scaleX(1.25) translateX(2px);
+    transform: var(--sky-override-phone-field-flag-transform, none);
   }
 }
diff --git a/libs/components/theme/src/lib/styles/themes/modern/_forms.scss b/libs/components/theme/src/lib/styles/themes/modern/_forms.scss
index ac0409b288..d1a60255b5 100644
--- a/libs/components/theme/src/lib/styles/themes/modern/_forms.scss
+++ b/libs/components/theme/src/lib/styles/themes/modern/_forms.scss
@@ -27,8 +27,8 @@
 
   // Placeholder text
   ::placeholder {
-    color: var(--sky-text-color-deemphasized);
-    font-style: $sky-theme-modern-font-deemphasized-style;
+    color: var(--sky-color-text-deemphasized);
+    font-style: var(--sky-font-style-deemphasized-style);
     opacity: 1;
   }