diff --git a/src/app/dashboard/[id]/edit/layout.tsx b/src/app/dashboard/[id]/edit/layout.tsx
index 7d27881..3278669 100644
--- a/src/app/dashboard/[id]/edit/layout.tsx
+++ b/src/app/dashboard/[id]/edit/layout.tsx
@@ -4,7 +4,7 @@ export default function AboutLayout({
   children: React.ReactNode
 }) {
   return (
-    <div>
+    <div className="BG-gray min-h-screen px-20 sm:px-30">
       <main>{children}</main>
     </div>
   )
diff --git a/src/app/dashboard/[id]/edit/page.tsx b/src/app/dashboard/[id]/edit/page.tsx
index 89d0b6f..750c441 100644
--- a/src/app/dashboard/[id]/edit/page.tsx
+++ b/src/app/dashboard/[id]/edit/page.tsx
@@ -3,37 +3,27 @@
 import EditInfo from '@dashboard/components/edit/EditInfo'
 import EditInvitation from '@dashboard/components/edit/EditInvitation'
 import EditMember from '@dashboard/components/edit/EditMember'
-import Image from 'next/image'
 import { useParams } from 'next/navigation'
-import { useRouter } from 'next/navigation'
 
 import DeleteDashboardButton from '@/app/features/dashboard/components/edit/DeleteDashboardButton'
+import BackButton from '@/app/shared/components/common/BackButton/BackButton'
 
 export default function DashBoardEditPage() {
   const { id } = useParams()
-  const router = useRouter()
 
   return (
-    <div className="BG-gray px-4 pb-16 sm:px-8 md:px-16">
-      {/* 돌아가기 버튼 */}
-      <button
-        className="flex cursor-pointer items-center gap-12 pt-16"
-        type="button"
-        onClick={() => router.back()}
-      >
-        <Image src="/images/back.png" alt="돌아가기" width={6} height={4} />
-        <p className="text-14">돌아가기</p>
-      </button>
+    <div>
+      <BackButton />
 
       {/* 콘텐츠 영역 */}
-      <div className="mobile-sm:max-w-full mt-8 flex w-full flex-col gap-16 pl-16 sm:max-w-[460px] md:max-w-[500px]">
+      <div className="relative z-10 flex max-w-full flex-col gap-16">
         <EditInfo />
         <EditMember />
         <EditInvitation />
       </div>
 
       {/* 삭제 버튼 영역 */}
-      <div className="BG-white Text-btn ml-18 mt-18 flex justify-center rounded-md py-6 sm:max-w-[292px]">
+      <div className="BG-white Text-btn mt-18 flex max-w-292 justify-center rounded-md py-6">
         <DeleteDashboardButton dashboardId={String(id)} />
       </div>
     </div>
diff --git a/src/app/dashboard/[id]/layout.tsx b/src/app/dashboard/[id]/layout.tsx
index cdcc913..2fe711a 100644
--- a/src/app/dashboard/[id]/layout.tsx
+++ b/src/app/dashboard/[id]/layout.tsx
@@ -10,7 +10,7 @@ export default function AboutLayout({
   return (
     <>
       <Sidebar />
-      <div className="pl-[300px] transition-all duration-300 mobile:pl-67 tablet:pl-[150px]">
+      <div className="pl-300 transition-all duration-300 mobile:pl-67 tablet:pl-150">
         <Header />
         <main className="pt-57">{children}</main>
       </div>
diff --git a/src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx b/src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx
index c8f7502..a9a90c0 100644
--- a/src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx
+++ b/src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx
@@ -63,7 +63,7 @@ export default function DeleteDashboardButton({
       onClick={handleDelete}
       // isLoading -> isPending으로 수정됨
       disabled={mutation.isPending}
-      className={`Text-black my-8 whitespace-nowrap rounded-8 font-semibold transition-opacity ${
+      className={`Text-black my-8 whitespace-nowrap rounded-8 font-semibold transition-opacity mobile-sm:text-12 ${
         mutation.isPending
           ? 'cursor-not-allowed opacity-50'
           : 'hover:opacity-90'
diff --git a/src/app/features/dashboard/components/edit/EditInfo.tsx b/src/app/features/dashboard/components/edit/EditInfo.tsx
index 2fe513c..f21800b 100644
--- a/src/app/features/dashboard/components/edit/EditInfo.tsx
+++ b/src/app/features/dashboard/components/edit/EditInfo.tsx
@@ -16,8 +16,8 @@ export default function EditInfo() {
 
   return (
     <div>
-      <div className="BG-white max-w-584 rounded-16 px-32 py-24">
-        <h2 className="Text-black mb-24 text-18 font-bold">
+      <div className="BG-white relative z-0 max-w-584 rounded-16 px-32 py-24">
+        <h2 className="Text-black mb-24 text-18 font-bold mobile-sm:text-16">
           {selectedDashboard?.title || '대시보드 편집'}
         </h2>
 
diff --git a/src/app/features/dashboard/components/edit/EditInvitation.tsx b/src/app/features/dashboard/components/edit/EditInvitation.tsx
index 311e9e0..3c737c5 100644
--- a/src/app/features/dashboard/components/edit/EditInvitation.tsx
+++ b/src/app/features/dashboard/components/edit/EditInvitation.tsx
@@ -94,33 +94,27 @@ export default function EditInvitation() {
         : null
 
   return (
-    <div className="BG-white w-full max-w-584 overflow-x-auto whitespace-nowrap rounded-16 px-32 py-24">
+    <div className="BG-white w-full max-w-584 overflow-x-auto rounded-16 px-32 py-24">
       {/* Header + 초대 버튼 영역 (데스크탑용) */}
-      <div className="mb-16 flex flex-col gap-12 md:flex-row md:items-center md:justify-between">
+      <div className="mb-20 flex items-center justify-between">
+        <h2 className="Text-black text-18 font-bold mobile-sm:text-14">
+          초대 내역
+        </h2>
         <PaginationHeader
           currentPage={currentPage}
           totalPages={totalPages}
-          title="초대 내역"
           onPrev={handlePrev}
           onNext={handleNext}
         />
-
-        {/* 데스크탑에서만 보이는 초대 버튼 */}
-        <button
-          onClick={() => openModal('invite')}
-          className="BG-violet mb-24 hidden w-fit shrink-0 items-center gap-8 self-end rounded-5 px-12 py-6 md:flex"
-        >
-          <div className="relative flex size-12 shrink-0">
-            <Image src="/images/invitation-white.png" fill alt="초대 버튼" />
-          </div>
-          <p className="text-14 text-white">초대하기</p>
-        </button>
       </div>
 
       {/* 이메일 입력 및 모바일 전용 버튼 */}
       <form className="overflow-x-auto">
-        <div className="mb-8 flex flex-row items-center justify-between gap-4 md:block">
-          <label htmlFor="title" className="Text-black block text-16">
+        <div className="mb-8 flex flex-row items-center justify-between gap-4">
+          <label
+            htmlFor="title"
+            className="Text-black block text-16 mobile-sm:text-12"
+          >
             이메일
           </label>
 
@@ -128,12 +122,12 @@ export default function EditInvitation() {
           <button
             onClick={() => openModal('invite')}
             type="button"
-            className="BG-violet mb-12 flex w-fit shrink-0 items-center gap-8 rounded-5 px-12 py-6 md:hidden"
+            className="BG-violet flex w-fit shrink-0 items-center gap-8 rounded-5 px-12 py-6"
           >
             <div className="relative flex size-12 shrink-0">
               <Image src="/images/invitation-white.png" fill alt="초대 버튼" />
             </div>
-            <p className="text-14 text-white">초대하기</p>
+            <p className="text-14 text-white mobile-sm:text-12">초대하기</p>
           </button>
         </div>
 
@@ -145,21 +139,20 @@ export default function EditInvitation() {
             <p className="Text-blue py-12 text-center">{errorMessage}</p>
           )}
           {!isLoading &&
-            !errorMessage &&
             currentItems.map((member, index) => {
               const isLast = index === currentItems.length - 1
               return (
                 <div
                   key={member.id}
                   className={cn(
-                    'flex items-center justify-between gap-12 py-4',
+                    'flex items-center justify-between gap-12 py-12',
                     !isLast && 'Border-bottom',
                   )}
                 >
                   <div className="flex min-w-0 items-center gap-12">
                     <div className="flex min-w-0 flex-col">
                       <Tooltip content={member.invitee.nickname}>
-                        <p className="Text-black max-w-[200px] cursor-help truncate text-13">
+                        <p className="Text-black max-w-200 cursor-help truncate text-13">
                           {member.invitee.email}
                         </p>
                       </Tooltip>
@@ -169,7 +162,7 @@ export default function EditInvitation() {
                     type="button"
                     disabled={cancelMutation.isPending}
                     className={cn(
-                      'Text-btn Border-btn w-fit shrink-0 rounded-md px-16 py-2',
+                      'Text-btn Border-btn w-fit shrink-0 rounded-md px-16 py-2 mobile-sm:text-12',
                       cancelMutation.isPending &&
                         'cursor-not-allowed opacity-50',
                     )}
diff --git a/src/app/features/dashboard/components/edit/EditMember.tsx b/src/app/features/dashboard/components/edit/EditMember.tsx
index e06381b..e2df674 100644
--- a/src/app/features/dashboard/components/edit/EditMember.tsx
+++ b/src/app/features/dashboard/components/edit/EditMember.tsx
@@ -65,16 +65,23 @@ export default function EditMember() {
   return (
     <div>
       <div className="BG-white max-w-584 overflow-x-auto rounded-16 px-32 py-24">
-        <PaginationHeader
-          currentPage={currentPage}
-          totalPages={totalPages}
-          title="구성원"
-          onPrev={handlePrev}
-          onNext={handleNext}
-        />
+        <div className="mb-20 flex items-center justify-between">
+          <h2 className="Text-black text-18 font-bold mobile-sm:text-14">
+            구성원
+          </h2>
+          <PaginationHeader
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPrev={handlePrev}
+            onNext={handleNext}
+          />
+        </div>
 
         <form>
-          <label htmlFor="title" className="Text-black mb-8 block text-16">
+          <label
+            htmlFor="title"
+            className="Text-black mb-8 block text-16 mobile-sm:text-12"
+          >
             이름
           </label>
 
@@ -119,7 +126,7 @@ export default function EditMember() {
                       disabled={isDeleting}
                       onClick={() => removeMember(member.id)}
                       className={cn(
-                        'Text-btn Border-btn rounded-md px-16 py-2',
+                        'Text-btn Border-btn rounded-md px-16 py-2 mobile-sm:text-12',
                         isDeleting && 'cursor-not-allowed opacity-50',
                       )}
                     >
diff --git a/src/app/features/dashboard/components/edit/PaginationHeader.tsx b/src/app/features/dashboard/components/edit/PaginationHeader.tsx
index 2e3ecd8..ca0c427 100644
--- a/src/app/features/dashboard/components/edit/PaginationHeader.tsx
+++ b/src/app/features/dashboard/components/edit/PaginationHeader.tsx
@@ -6,7 +6,6 @@ import React from 'react'
 type PaginationHeaderProps = {
   currentPage: number
   totalPages: number
-  title: string
   onPrev: () => void
   onNext: () => void
   children?: React.ReactNode
@@ -15,43 +14,45 @@ type PaginationHeaderProps = {
 export function PaginationHeader({
   currentPage,
   totalPages,
-  title,
   onPrev,
   onNext,
 }: PaginationHeaderProps) {
   return (
-    <div className="mb-20 flex max-w-500 items-center justify-between whitespace-nowrap">
-      <h2 className="Text-black text-18 font-bold">{title}</h2>
+    <div className="flex max-w-500 items-center justify-center">
+      <p className="Text-gray mx-16 text-12 sm:mx-32 mobile-sm:text-10">
+        {totalPages} 페이지 중 {currentPage}
+      </p>
 
-      <div className="flex shrink-0 items-center">
-        <p className="Text-gray mx-32 shrink-0 text-12">
-          {totalPages} 페이지 중 {currentPage}
-        </p>
-        <button onClick={onPrev} disabled={currentPage === 1}>
-          <Image
-            src={
-              currentPage === 1
-                ? '/images/prev-disabled.png'
-                : '/images/prev.png'
-            }
-            alt="이전"
-            width={36}
-            height={36}
-          />
-        </button>
-        <button onClick={onNext} disabled={currentPage === totalPages}>
-          <Image
-            src={
-              currentPage === totalPages
-                ? '/images/next-disabled.png'
-                : '/images/next.png'
-            }
-            alt="다음"
-            width={36}
-            height={36}
-          />
-        </button>
-      </div>
+      <button
+        onClick={onPrev}
+        disabled={currentPage === 1}
+        className="relative mobile-sm:size-30"
+      >
+        <Image
+          src={
+            currentPage === 1 ? '/images/prev-disabled.png' : '/images/prev.png'
+          }
+          alt="이전"
+          width={36}
+          height={36}
+        />
+      </button>
+      <button
+        onClick={onNext}
+        disabled={currentPage === totalPages}
+        className="relative mobile-sm:size-30"
+      >
+        <Image
+          src={
+            currentPage === totalPages
+              ? '/images/next-disabled.png'
+              : '/images/next.png'
+          }
+          alt="다음"
+          width={36}
+          height={36}
+        />
+      </button>
     </div>
   )
 }
diff --git a/src/app/shared/components/common/Input/Input.tsx b/src/app/shared/components/common/Input/Input.tsx
index 560621f..b2e000d 100644
--- a/src/app/shared/components/common/Input/Input.tsx
+++ b/src/app/shared/components/common/Input/Input.tsx
@@ -20,14 +20,17 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <div className="flex flex-col gap-8">
-        <label htmlFor={name} className="Text-black text-base font-normal">
+        <label
+          htmlFor={name}
+          className="Text-black text-base font-normal mobile-sm:text-12"
+        >
           {labelName}
         </label>
 
         <input
           id={name}
           className={cn(
-            'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal',
+            'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal mobile-sm:text-14',
             hasError ? 'Border-error' : 'Border-btn',
             props.readOnly && 'Text-gray cursor-default',
           )}
diff --git a/src/app/shared/components/common/UserInfo.tsx b/src/app/shared/components/common/UserInfo.tsx
index 30e8418..fdab9ea 100644
--- a/src/app/shared/components/common/UserInfo.tsx
+++ b/src/app/shared/components/common/UserInfo.tsx
@@ -22,7 +22,9 @@ export function UserInfo({ nickname, imageUrl, size = 36 }: UserInfoProps) {
     <div className="flex items-center gap-4">
       {/* Avatar에 nickname, profileImageUrl 모두 넘겨줌 */}
       <Avatar size={size} name={displayNickname} imageUrl={displayImage} />
-      <span className="ml-4 text-sm font-semibold">{displayNickname}</span>
+      <span className="ml-4 text-sm font-semibold mobile-sm:text-12">
+        {displayNickname}
+      </span>
     </div>
   )
 }
diff --git a/src/app/shared/components/common/header/Collaborator/CollaboratorList.tsx b/src/app/shared/components/common/header/Collaborator/CollaboratorList.tsx
index da1b040..c08b461 100644
--- a/src/app/shared/components/common/header/Collaborator/CollaboratorList.tsx
+++ b/src/app/shared/components/common/header/Collaborator/CollaboratorList.tsx
@@ -31,7 +31,7 @@ export default function CollaboratorList() {
   const extraCount = members.length - MAX_COLLABS
 
   return (
-    <div className="flex -space-x-10">
+    <div className="flex -space-x-10 mobile-sm:hidden">
       {visibleCollaborators.map((collab) => (
         <Tooltip key={collab.id} content={collab.nickname}>
           <div className="flex flex-col items-center text-xs">
diff --git a/src/app/shared/components/common/header/Header.tsx b/src/app/shared/components/common/header/Header.tsx
index 5e84a76..8da9cf1 100644
--- a/src/app/shared/components/common/header/Header.tsx
+++ b/src/app/shared/components/common/header/Header.tsx
@@ -9,22 +9,21 @@ import UserDropdown from './UserDropdown'
 
 export default function Header() {
   return (
-    //px-48
-    <header className="z-1 BG-white Border-bottom Text-black fixed inset-x-0 top-0 w-full overflow-x-auto border-b py-10 pl-320 pr-10 mobile-wide:pl-100 tablet-wide:pl-210">
-      <div className="flex w-full items-center justify-between pr-16 mobile-wide:justify-end tablet-wide:justify-between">
+    <header className="BG-white Border-bottom Text-black fixed inset-x-0 top-0 z-40 w-full overflow-x-auto border-b py-10 pl-360 pr-10 mobile-wide:pl-80 tablet-wide:pl-200">
+      <div className="flex w-full items-center justify-between pr-16 mobile-wide:justify-between tablet-wide:justify-between">
         {/* 좌측 대시보드명 */}
-        <div className="hidden lg:block">
+        <div className="hidden md:block">
           <LeftHeaderContent />
         </div>
 
         {/* 우측 사용자 정보/다크모드 */}
-        <div className="flex gap-16 whitespace-nowrap">
+        <div className="flex gap-8 whitespace-nowrap sm:gap-16">
           <RightHeaderNav />
           <CreateInvitationModal />
           {/* 협업자 목록 */}
           <CollaboratorList />
 
-          <div className="flex items-center gap-32 border-l pl-16">
+          <div className="flex items-center gap-16 border-l pl-8 sm:gap-32 sm:pl-16">
             {/* 사용자 정보 드롭다운 */}
             <UserDropdown />
             {/* 다크모드 토글 */}
diff --git a/src/app/shared/components/common/header/HeaderUserInfo.tsx b/src/app/shared/components/common/header/HeaderUserInfo.tsx
new file mode 100644
index 0000000..8193421
--- /dev/null
+++ b/src/app/shared/components/common/header/HeaderUserInfo.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { useAuthStore } from '@/app/features/auth/store/useAuthStore'
+
+import { Avatar } from '../Avatar'
+
+type HeaderUserInfoProps = {
+  nickname?: string
+  imageUrl?: string | null
+  size?: number
+}
+
+export function HeaderUserInfo({
+  nickname,
+  imageUrl,
+  size = 36,
+}: HeaderUserInfoProps) {
+  const user = useAuthStore((state) => state.user)
+
+  const displayNickname = nickname ?? user?.nickname ?? ''
+  const displayImage = imageUrl ?? user?.profileImageUrl ?? null
+
+  if (!displayNickname) return null
+
+  return (
+    <div className="flex items-center gap-4">
+      <Avatar size={size} name={displayNickname} imageUrl={displayImage} />
+      {/* sm 이하 화면에서는 닉네임 숨김, md 이상에서만 보임 */}
+      <span className="ml-4 inline text-sm font-semibold mobile-sm:hidden">
+        {displayNickname}
+      </span>
+    </div>
+  )
+}
diff --git a/src/app/shared/components/common/header/RightHeaderNav.tsx b/src/app/shared/components/common/header/RightHeaderNav.tsx
index 3ea668f..974227c 100644
--- a/src/app/shared/components/common/header/RightHeaderNav.tsx
+++ b/src/app/shared/components/common/header/RightHeaderNav.tsx
@@ -14,7 +14,7 @@ export default function RightHeaderNav() {
   const isMyDashboardPage = pathname === '/mydashboard'
 
   return (
-    <nav className="Text-black flex gap-6 whitespace-nowrap text-sm md:flex">
+    <nav className="Text-black flex gap-6 whitespace-nowrap text-sm">
       {!isMyDashboardPage && (
         <>
           <NavItem
@@ -27,7 +27,7 @@ export default function RightHeaderNav() {
             as="button"
             onClick={() => openModal('invite')}
             iconSrc="/images/invitation.png"
-            label="초대하기"
+            label="초대"
           />
         </>
       )}
diff --git a/src/app/shared/components/common/header/UserDropdown.tsx b/src/app/shared/components/common/header/UserDropdown.tsx
index b0c2317..93a1f9e 100644
--- a/src/app/shared/components/common/header/UserDropdown.tsx
+++ b/src/app/shared/components/common/header/UserDropdown.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation'
 
 import { useAuth } from '@/app/features/auth/hooks/useAuth'
 
-import { UserInfo } from '../UserInfo'
+import { HeaderUserInfo } from './HeaderUserInfo'
 
 export default function UserDropdown() {
   const router = useRouter()
@@ -29,7 +29,7 @@ export default function UserDropdown() {
       trigger={
         <div className="flex cursor-pointer items-center gap-8">
           {/* 로그인된 사용자 정보 자동으로 불러옴 */}
-          <UserInfo size={36} />
+          <HeaderUserInfo size={36} />
         </div>
       }
       width="w-6"
diff --git a/src/app/shared/components/common/modal/CreateInvitationModal.tsx b/src/app/shared/components/common/modal/CreateInvitationModal.tsx
index bfebe02..9a5f6c6 100644
--- a/src/app/shared/components/common/modal/CreateInvitationModal.tsx
+++ b/src/app/shared/components/common/modal/CreateInvitationModal.tsx
@@ -54,11 +54,16 @@ export default function CreateInvitationModal() {
       onClick={handleBackdropClick}
     >
       <div className="BG-white h-auto w-584 rounded-16 p-32">
-        <h2 className="Text-black mb-24 text-24 font-bold">초대하기</h2>
+        <h2 className="Text-black mb-24 text-24 font-bold mobile:text-18 tablet:text-20">
+          초대하기
+        </h2>
 
         <form onSubmit={handleSubmit}>
           <div className="mb-32">
-            <label htmlFor="email" className="Text-black mb-8 block text-18">
+            <label
+              htmlFor="email"
+              className="Text-black mb-8 block text-18 mobile:text-12 tablet:text-16"
+            >
               이메일
             </label>
             <input
@@ -73,17 +78,17 @@ export default function CreateInvitationModal() {
             />
           </div>
 
-          <div className="flex justify-end gap-10">
+          <div className="flex gap-10">
             <button
               type="button"
               onClick={closeModal}
-              className="Border-btn Text-black h-54 w-256 rounded-8 px-16 py-10 text-16 font-semibold"
+              className="Border-btn Text-black h-54 w-full rounded-8 px-16 py-10 text-16 font-semibold mobile:h-40 mobile:text-12 tablet:h-48 tablet:w-full tablet:text-14"
             >
               취소
             </button>
             <button
               type="submit"
-              className="BG-violet h-54 w-256 rounded-8 px-16 py-10 text-16 font-semibold text-white hover:opacity-90"
+              className="BG-violet h-54 w-full rounded-8 px-16 py-10 text-16 font-semibold text-white hover:opacity-90 mobile:h-40 mobile:text-12 tablet:h-48 tablet:w-full tablet:text-14"
             >
               초대
             </button>
diff --git a/src/app/shared/components/dashboard/DashboardForm.tsx b/src/app/shared/components/dashboard/DashboardForm.tsx
index 02351d4..4a72708 100644
--- a/src/app/shared/components/dashboard/DashboardForm.tsx
+++ b/src/app/shared/components/dashboard/DashboardForm.tsx
@@ -84,7 +84,7 @@ export default function DashboardForm({
         <button
           type="submit"
           disabled={!formData.title || !formData.color || isSubmitting}
-          className={`BG-violet h-48 ${submitButtonWidth} rounded-8 px-16 py-10 text-16 font-semibold text-white transition-opacity ${
+          className={`BG-violet h-48 ${submitButtonWidth} rounded-8 px-16 py-10 text-16 font-semibold text-white transition-opacity mobile-sm:text-14 ${
             !formData.title || !formData.color || isSubmitting
               ? 'cursor-not-allowed opacity-50'
               : 'hover:opacity-90'