diff --git a/apps/web/src/app/sign-up/page.tsx b/apps/web/src/app/sign-up/page.tsx
index aa7295f0..84bbc140 100644
--- a/apps/web/src/app/sign-up/page.tsx
+++ b/apps/web/src/app/sign-up/page.tsx
@@ -15,7 +15,7 @@ const SignUpPage = () => {
   return (
     <>
       <TopDetailNavigation title="회원가입" />
-      <div className="w-full px-5">
+      <div className="w-full">
         <Suspense fallback={<CloudSpinnerPage />}>
           <SignupSurvey baseNickname="" baseEmail="" baseProfileImageUrl="" />
         </Suspense>
diff --git a/apps/web/src/components/login/signup/SignupPrepareScreen.tsx b/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
index 95779283..0aded58f 100644
--- a/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
@@ -94,15 +94,18 @@ const PrepareChoiceButton = ({
 }: PrepareChoiceButtonProps) => {
   return (
     <button
-      className={clsx("flex items-center gap-9 rounded-lg py-5 shadow-magic-signup-step", {
-        "border border-primary bg-primary-100": preparation === status,
-        "border border-white bg-white": preparation !== status,
-      })}
+      className={clsx(
+        "flex items-center gap-7 rounded-lg border px-6 py-5 text-left shadow-magic-signup-step focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+        {
+          "border-primary bg-primary-100": preparation === status,
+          "border-white bg-white": preparation !== status,
+        },
+      )}
       onClick={() => setPreparation(status)}
       type="button"
     >
-      <div className="pl-[2.75rem]">{icon}</div>
-      <div className="flex flex-col items-start">
+      <div className="flex w-16 shrink-0 justify-center">{icon}</div>
+      <div className="flex min-w-0 flex-col items-start">
         <span className="text-k-500 typo-regular-4">{description}</span>
         <span className="text-k-800 typo-sb-4">{name}</span>
       </div>