diff --git a/src/app/login/_temp/login-temp-actions.tsx b/src/app/login/_temp/login-temp-actions.tsx
index e210e745..c7b5db3d 100644
--- a/src/app/login/_temp/login-temp-actions.tsx
+++ b/src/app/login/_temp/login-temp-actions.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { MyPageActionButton } from '@/components/pages/user/mypage/mypage-setting-button';
+import { MyPageActionButton } from '@/components/pages/user/mypage/mypage-setting/mypage-setting-button';
 import { useLogout, useWithdraw } from '@/hooks/use-auth';
 
 const LoginTempActions = () => {
diff --git a/src/components/pages/user/mypage/mypage-setting/index.tsx b/src/components/pages/user/mypage/mypage-setting/index.tsx
index ce35258b..17eaed82 100644
--- a/src/components/pages/user/mypage/mypage-setting/index.tsx
+++ b/src/components/pages/user/mypage/mypage-setting/index.tsx
@@ -1,27 +1,19 @@
 'use client';
 import { useLogout, useWithdraw } from '@/hooks/use-auth';
-// import { useUpdateMyNotification } from '@/hooks/use-user/use-user-notification';
 import { User } from '@/types/service/user';
 
-import { MyPageActionButton, MyPageToggleButton as _ } from '../mypage-setting-button';
+import { MyPageActionButton } from './mypage-setting-button';
 
 interface Props {
   user: User;
 }
 
 export const MyPageSetting = ({ user: _ }: Props) => {
-  // const { mutate } = useUpdateMyNotification();
   const logout = useLogout();
   const withdraw = useWithdraw();
 
   return (
     <section className='bg-mono-white flex flex-col gap-3 px-3 py-6'>
-      {/* <MyPageToggleButton
-        value={user.isNotificationEnabled}
-        onClick={() => mutate({ isNotificationEnabled: !user.isNotificationEnabled })}
-      >
-        알림 받기
-      </MyPageToggleButton> */}
       <MyPageActionButton onClick={logout}>로그아웃</MyPageActionButton>
       <MyPageActionButton onClick={withdraw}>회원탈퇴</MyPageActionButton>
     </section>
diff --git a/src/components/pages/user/mypage/mypage-setting-button/index.tsx b/src/components/pages/user/mypage/mypage-setting/mypage-setting-button/index.tsx
similarity index 100%
rename from src/components/pages/user/mypage/mypage-setting-button/index.tsx
rename to src/components/pages/user/mypage/mypage-setting/mypage-setting-button/index.tsx
diff --git a/src/components/pages/user/profile/index.ts b/src/components/pages/user/profile/index.ts
index e7b7d6e9..2b85edde 100644
--- a/src/components/pages/user/profile/index.ts
+++ b/src/components/pages/user/profile/index.ts
@@ -1,6 +1,5 @@
 export { ProfileCard } from './profile-card';
 export { ProfileDescription } from './profile-description';
-export { ProfileDescriptionBadge } from './profile-description-badge';
 export { ProfileEditModal } from './profile-edit-modal';
 export { ProfileFollowsBadge } from './profile-follows-badge';
 export { ProfileFollowsModal } from './profile-follows-modal';
diff --git a/src/components/pages/user/profile/profile-description-badge/index.tsx b/src/components/pages/user/profile/profile-description-badge/index.tsx
deleted file mode 100644
index d9e769b4..00000000
--- a/src/components/pages/user/profile/profile-description-badge/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Icon, IconId } from '@/components/icon';
-import { cn } from '@/lib/utils';
-
-export interface ProfileDescriptionBadgeProps {
-  label: string;
-  iconId: IconId;
-  value: string;
-}
-
-interface Props {
-  badgeItems: ProfileDescriptionBadgeProps;
-}
-
-export const ProfileDescriptionBadge = ({ badgeItems }: Props) => {
-  const PLACEHOLDER = '-';
-
-  return (
-    <div className='flex flex-row items-center gap-4'>
-      <div className='flex-center size-10 rounded-xl bg-gray-100'>
-        <Icon id={badgeItems.iconId} className='text-mint-500 size-6' />
-      </div>
-      <div className='flex flex-col'>
-        <span className='text-text-xs-medium text-gray-500'>{badgeItems.label}</span>
-        <span
-          className={cn(
-            'text-text-md-semibold h-6 text-gray-700',
-            !badgeItems.value && 'text-text-md-regular text-gray-500',
-          )}
-        >
-          {badgeItems.value || PLACEHOLDER}
-        </span>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/pages/user/profile/profile-description/index.tsx b/src/components/pages/user/profile/profile-description/index.tsx
index bad483f2..993195e0 100644
--- a/src/components/pages/user/profile/profile-description/index.tsx
+++ b/src/components/pages/user/profile/profile-description/index.tsx
@@ -1,10 +1,7 @@
+import { Icon, IconId } from '@/components/icon';
+import { cn } from '@/lib/utils';
 import { User } from '@/types/service/user';
 
-import {
-  ProfileDescriptionBadge,
-  ProfileDescriptionBadgeProps,
-} from '../profile-description-badge';
-
 const formatISO = (dateString: string) => {
   const date = new Date(dateString);
   const y = date.getFullYear();
@@ -18,7 +15,11 @@ interface Props {
 }
 
 export const ProfileDescription = ({ user }: Props) => {
-  const listMap: ProfileDescriptionBadgeProps[] = [
+  const listMap: {
+    label: string;
+    iconId: IconId;
+    value: string;
+  }[] = [
     {
       label: 'MBTI',
       iconId: 'symbol',
@@ -41,10 +42,27 @@ export const ProfileDescription = ({ user }: Props) => {
     },
   ];
 
+  const PLACEHOLDER = '-';
+
   return (
-    <div className='bg-mono-white shadow-card mt-6 flex flex-col gap-5 rounded-3xl px-6 py-6.25'>
+    <div className='bg-mono-white mt-6 flex flex-col gap-5 rounded-3xl px-6 py-6.25 shadow-md'>
       {listMap.map((item) => (
-        <ProfileDescriptionBadge key={item.label} badgeItems={item} />
+        <div key={item.label} className='flex flex-row items-center gap-4'>
+          <div className='flex-center size-10 rounded-xl bg-gray-100'>
+            <Icon id={item.iconId} className='text-mint-500 size-6' />
+          </div>
+          <div className='flex flex-col'>
+            <span className='text-text-xs-medium text-gray-500'>{item.label}</span>
+            <span
+              className={cn(
+                'text-text-md-semibold h-6 text-gray-700',
+                !item.value && 'text-text-md-regular text-gray-500',
+              )}
+            >
+              {item.value || PLACEHOLDER}
+            </span>
+          </div>
+        </div>
       ))}
     </div>
   );
diff --git a/src/components/pages/user/profile/profile-edit-modal/index.tsx b/src/components/pages/user/profile/profile-edit-modal/index.tsx
index ff478cd1..e6caa707 100644
--- a/src/components/pages/user/profile/profile-edit-modal/index.tsx
+++ b/src/components/pages/user/profile/profile-edit-modal/index.tsx
@@ -21,7 +21,7 @@ import {
 } from '@/lib/schema/mypage';
 import { UpdateMyInfoPayloads, User } from '@/types/service/user';
 
-import { ImageField, MBTIField, MessageField, NickNameField } from '../profile-edit-fields';
+import { ImageField, MBTIField, MessageField, NickNameField } from './profile-edit-fields';
 
 interface Props {
   user: User;
diff --git a/src/components/pages/user/profile/profile-edit-fields/image-field/index.tsx b/src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/image-field/index.tsx
similarity index 100%
rename from src/components/pages/user/profile/profile-edit-fields/image-field/index.tsx
rename to src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/image-field/index.tsx
diff --git a/src/components/pages/user/profile/profile-edit-fields/index.ts b/src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/index.ts
similarity index 100%
rename from src/components/pages/user/profile/profile-edit-fields/index.ts
rename to src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/index.ts
diff --git a/src/components/pages/user/profile/profile-edit-fields/mbti-field/index.tsx b/src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/mbti-field/index.tsx
similarity index 100%
rename from src/components/pages/user/profile/profile-edit-fields/mbti-field/index.tsx
rename to src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/mbti-field/index.tsx
diff --git a/src/components/pages/user/profile/profile-edit-fields/message-field/index.tsx b/src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/message-field/index.tsx
similarity index 100%
rename from src/components/pages/user/profile/profile-edit-fields/message-field/index.tsx
rename to src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/message-field/index.tsx
diff --git a/src/components/pages/user/profile/profile-edit-fields/nickname-field/index.tsx b/src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/nickname-field/index.tsx
similarity index 100%
rename from src/components/pages/user/profile/profile-edit-fields/nickname-field/index.tsx
rename to src/components/pages/user/profile/profile-edit-modal/profile-edit-fields/nickname-field/index.tsx
diff --git a/src/components/pages/user/profile/profile-follows-badge/index.tsx b/src/components/pages/user/profile/profile-follows-badge/index.tsx
index 72cc0d90..1087579b 100644
--- a/src/components/pages/user/profile/profile-follows-badge/index.tsx
+++ b/src/components/pages/user/profile/profile-follows-badge/index.tsx
@@ -63,7 +63,7 @@ export const ProfileFollowsBadge = ({ user }: Props) => {
   }, [queryClient, user.userId]);
 
   return (
-    <div className='flex-center bg-mono-white shadow-card mb-4 rounded-3xl py-4'>
+    <div className='flex-center bg-mono-white mb-4 rounded-3xl py-4 shadow-sm'>
       {listMap.map((item, index) => (
         <Fragment key={item.label}>
           <button
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 5de04041..d056f9e9 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -26,8 +26,16 @@
   @apply flex flex-col items-center justify-between;
 }
 
-@utility shadow-card {
-  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
+@utility shadow-md {
+  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06);
+}
+
+@utility shadow-sm {
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+}
+
+@utility shadow-xs {
+  box-shadow: 0 -4px 6px 0 rgba(0, 0, 0, 0.02);
 }
 
 @utility scroll-stable {