diff --git a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
index 699237fe5b..3e0e7c778f 100644
--- a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
+++ b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
@@ -20,13 +20,13 @@ const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onCh
   };
 
   const menu: Menu = COUNTRY_CODES.map(code => ({
-    text: <>{code}</>,
+    text: <>+{code}</>,
     action: handleMenuItem(code),
   }));
 
   return (
     <DropdownMenu items={menu}>
-      <button className='p-4'>{countryCode}</button>
+      <button className='px-4'>+{countryCode}</button>
     </DropdownMenu>
   );
 };
diff --git a/app/soapbox/components/ui/phone-input/phone-input.tsx b/app/soapbox/components/ui/phone-input/phone-input.tsx
index 7b0f0a658c..2b140fc627 100644
--- a/app/soapbox/components/ui/phone-input/phone-input.tsx
+++ b/app/soapbox/components/ui/phone-input/phone-input.tsx
@@ -34,7 +34,7 @@ const PhoneInput: React.FC<IPhoneInput> = (props) => {
   };
 
   return (
-    <HStack>
+    <HStack alignItems='center'>
       <CountryCodeDropdown
         countryCode={countryCode}
         onChange={handleCountryChange}