UI changes

src/components/RoadCard/RoadCardPage.tsx

@@ -43,9 +43,9 @@ export function RoadCardPage() {
   return (
     <>
       <div className="mb-8 hidden md:block">
-        <h2 className="text-3xl font-bold sm:text-4xl">Grab your #RoadCard</h2>
+        <h2 className="text-3xl font-bold sm:text-4xl">Road Card</h2>
-        <p className="mt-2">
+        <p className="mt-2 text-gray-400">
-          Pick a badge and share your progress with the world.
+          Grab your #RoadCard and share your progress with others.
         </p>
       </div>
 
@@ -53,7 +53,7 @@ export function RoadCardPage() {
         <div className="mb-6 flex items-center border-b">
           <div className="flex items-center">
             <button
-              className={`relative top-px flex items-center justify-center px-3 py-2 leading-none shadow-gray-600 ${
+              className={`relative top-px flex items-center justify-center px-3 pb-3 leading-none shadow-gray-600 ${
                 selectedBadge === 'long'
                   ? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
                   : 'text-gray-600'
@@ -67,7 +67,7 @@ export function RoadCardPage() {
             </button>
 
             <button
-              className={`relative top-px flex items-center justify-center px-3 py-2 leading-none shadow-gray-600 ${
+              className={`relative top-px flex items-center justify-center px-3 pb-3 leading-none shadow-gray-600 ${
                 selectedBadge === 'wide'
                   ? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
                   : 'text-gray-600'

src/components/UpdatePassword/UpdatePasswordForm.tsx

@@ -80,7 +80,7 @@ export default function UpdatePasswordForm() {
     <form onSubmit={handleSubmit}>
       <div class="hidden md:block mb-8">
         <h2 className="text-3xl font-bold sm:text-4xl">Password</h2>
-        <p className="mt-2">Use the form below to update your password.</p>
+        <p className="mt-2 text-gray-400">Use the form below to update your password.</p>
       </div>
       <div className="space-y-4">
         {authProvider === 'email' && (

src/components/UpdateProfile/UpdateProfileForm.tsx

@@ -83,7 +83,7 @@ export function UpdateProfileForm() {
     <div>
       <div className="mb-8 hidden md:block">
         <h2 className="text-3xl font-bold sm:text-4xl">Profile</h2>
-        <p className="mt-2">Update your profile details below.</p>
+        <p className="mt-2 text-gray-400">Update your profile details below.</p>
       </div>
       <UploadProfilePicture
         avatarUrl={