diff --git a/src/app/(landing)/page.tsx b/src/app/(landing)/page.tsx
index ebbeb73ba..16df2ee2f 100644
--- a/src/app/(landing)/page.tsx
+++ b/src/app/(landing)/page.tsx
@@ -88,24 +88,19 @@ export default async function Landing() {
     <>
       <div>
         {/* 메인 소개 */}
-        <section className="relative flex flex-col items-center gap-600 py-400 md:py-[80px]">
+        <section className="relative flex flex-col items-center gap-600 py-400 md:py-1000">
           {/* 중앙에서 위아래로 퍼지는 그라데이션 배경 오버레이 */}
           <div className="pointer-events-none absolute top-0 left-0 z-0 h-full w-full bg-gradient-to-b from-background-default via-rose-50 to-background-default" />
 
-          <div className="relative z-10 flex flex-col items-center justify-center gap-400">
+          <div className="relative z-10 flex flex-col items-center justify-center gap-400 px-400">
             <div>
-              <p className="font-bold-h1 text-text-strong flex flex-col items-center">
-                <span>IT 업계 선배들이 진행하는</span>
-                <span>프리미엄 실전 스터디/외주 플랫폼</span>
+              <p className="font-bold-h4 sm:font-bold-h2 lg:font-bold-h1 text-text-strong break-keep text-center">
+                IT 업계 선배들이 진행하는 프리미엄 실전 스터디/외주 플랫폼
               </p>
 
-              <p className="text-text-subtle font-designer-16m mt-200 flex flex-col items-center">
-                <span>
-                  제로원은 수준 높은 IT 인재들의 신뢰와 네트워킹을 바탕으로
-                </span>
-                <span>
-                  학습, 외주, 채용 등 전 생애 커리어를 구축하는 공간입니다.
-                </span>
+              <p className="text-text-subtle font-designer-14m sm:font-designer-16m mt-200 break-keep text-center">
+                제로원은 수준 높은 IT 인재들의 신뢰와 네트워킹을 바탕으로 학습,
+                외주, 채용 등 전 생애 커리어를 구축하는 공간입니다.
               </p>
             </div>
             <Link href="/login">
@@ -130,11 +125,11 @@ export default async function Landing() {
               sizes="(max-width: 1000px) 100vw, 1000px"
             />
             {/* 배너 사진 하단 그라데이션 */}
-            <div className="pointer-events-none absolute bottom-0 left-0 h-[120px] w-full bg-gradient-to-t from-background-default to-transparent" />
+            <div className="pointer-events-none absolute bottom-0 left-0 h-1500 w-full bg-gradient-to-t from-background-default to-transparent" />
           </div>
         </section>
         {/* 제로원 솔루션 소개 */}
-        <section className="mx-auto flex w-full max-w-[1160px] flex-col items-center gap-500 px-300 py-600 lg:px-0 md:py-[120px]">
+        <section className="mx-auto flex w-full max-w-study-content flex-col items-center gap-500 px-300 py-600 lg:px-0 md:py-1500">
           <Badge className="rounded-200 w-fit">제로원 솔루션</Badge>
 
           <p className="flex flex-col items-center gap-100">
@@ -179,7 +174,7 @@ export default async function Landing() {
         {SUGGESTION_INFO_LIST.map((suggestion) => (
           <section
             key={suggestion.badge}
-            className="mx-auto flex w-full max-w-[1160px] flex-col items-center gap-400 px-300 py-600 lg:px-0 md:py-[120px] lg:flex-row lg:justify-between"
+            className="mx-auto flex w-full max-w-study-content flex-col items-center gap-400 px-300 py-600 lg:px-0 md:py-1500 lg:flex-row lg:justify-between"
           >
             {/* 왼쪽 컨텐츠 */}
             <div className="flex-1">
@@ -214,7 +209,7 @@ export default async function Landing() {
         {/* 전문가 멘토진 */}
         {/* 다양한 스터디 */}
         {/* 오픈 알림 폼  */}
-        <section className="mx-auto flex w-full max-w-[1160px] flex-col items-center gap-400 px-300 py-600 lg:px-0 md:py-[120px] lg:flex-row lg:justify-between">
+        <section className="mx-auto flex w-full max-w-study-content flex-col items-center gap-400 px-300 py-600 lg:px-0 md:py-1500 lg:flex-row lg:justify-between">
           {/* 왼쪽 컨텐츠 */}
           <div className="flex-1">
             <Badge className="rounded-200 w-fit">
@@ -246,7 +241,7 @@ export default async function Landing() {
         </section>
       </div>
 
-      <footer className="bg-background-neutral-strong flex flex-col items-center gap-500 px-400 py-[64px] lg:px-800">
+      <footer className="bg-background-neutral-strong flex flex-col items-center gap-500 px-400 py-800 lg:px-800">
         <div className="text-text-inverse font-designer-18b sm:font-bold-h3 flex flex-col items-center justify-center gap-200">
           <span>제로원을 방문해주신 모든 분들에게 감사드립니다.</span>
           <span>더욱 더 좋은 서비스와 기회로 보답하도록 하겠습니다!</span>
diff --git a/src/app/global.css b/src/app/global.css
index 628d454bf..dc813bb84 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -392,6 +392,9 @@ https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%E
   --spacing-500: 40px;
   --spacing-600: 48px;
   --spacing-700: 56px;
+  --spacing-800: 64px;
+  --spacing-1000: 80px;
+  --spacing-1500: 120px;
 
   /* shadow */
   --shadow-*: initial;
@@ -486,6 +489,10 @@ https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%E
   max-width: 500px;
 }
 
+@utility max-w-1496 {
+  max-width: 1496px;
+}
+
 @utility max-h-modal {
   max-height: 90vh;
 }
diff --git a/src/components/common/layout/home-header.tsx b/src/components/common/layout/home-header.tsx
index 301f2851e..57543cc9b 100644
--- a/src/components/common/layout/home-header.tsx
+++ b/src/components/common/layout/home-header.tsx
@@ -42,9 +42,9 @@ export default async function Header() {
     : undefined;
 
   return (
-    <header className="bg-white py-[11px] mix-blend-multiply">
-      <div className="mx-auto flex w-full max-w-[1496px] items-center justify-between px-600">
-        <div className="flex items-center gap-[7.5px] px-100 py-[11px]">
+    <header className="bg-background-default py-125 mix-blend-multiply">
+      <div className="mx-auto flex w-full max-w-1496 items-center justify-between px-600">
+        <div className="flex items-center gap-100 px-100 py-125">
           <Image src="/icons/logo.svg" alt="Logo" width={18} height={18} />
           <Link href="/">
             <Image
@@ -54,7 +54,7 @@ export default async function Header() {
               height={11}
             />
           </Link>
-          <span className="rounded-full border-[0.5px] border-[#D5D7DA] px-[5px] py-[2.5px] text-center text-[7.5px] leading-normal font-medium">
+          <span className="rounded-full border-[0.5px] border-border-default px-75 py-25 text-center text-[7.5px] leading-normal font-medium">
             BETA
           </span>
         </div>
@@ -86,8 +86,9 @@ export default async function Header() {
         </div>
 
         {/* 모바일 햄버거 메뉴 */}
-        <div className="lg:hidden">
-          <MobileMenuDrawer isLoggedIn={isLoggedIn} />
+        <div className="flex items-center gap-100 lg:hidden">
+          {isLoggedIn && <NotificationDropdown />}
+          <MobileMenuDrawer isLoggedIn={isLoggedIn} userImg={userImg} />
         </div>
       </div>
     </header>
diff --git a/src/components/common/layout/mobile-menu-drawer.tsx b/src/components/common/layout/mobile-menu-drawer.tsx
index ca3ec8ac0..e3605c1aa 100644
--- a/src/components/common/layout/mobile-menu-drawer.tsx
+++ b/src/components/common/layout/mobile-menu-drawer.tsx
@@ -8,6 +8,8 @@ import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
+import Avatar from '@/components/common/ui/avatar';
+import StudyMatchingToggle from '@/components/home/study-matching-toggle';
 import { useLogoutMutation } from '@/hooks/queries/use-auth-mutation';
 
 const LoginModal = dynamic(
@@ -24,10 +26,12 @@ const NAV_ITEMS = [
 
 interface MobileMenuDrawerProps {
   isLoggedIn: boolean;
+  userImg?: string;
 }
 
 export default function MobileMenuDrawer({
   isLoggedIn,
+  userImg,
 }: MobileMenuDrawerProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
@@ -46,7 +50,7 @@ export default function MobileMenuDrawer({
       <button
         onClick={() => setIsOpen(true)}
         aria-label="메뉴 열기"
-        className="flex flex-col items-center justify-center gap-[5px] p-100"
+        className="flex flex-col items-center justify-center gap-75 p-100"
       >
         <svg
           width="22"
@@ -102,7 +106,7 @@ export default function MobileMenuDrawer({
             >
               {/* 패널 헤더 */}
               <div className="flex items-center justify-between border-b border-border-subtle px-400 py-300">
-                <div className="flex items-center gap-[7.5px]">
+                <div className="flex items-center gap-100">
                   <Image
                     src="/icons/logo.svg"
                     alt="Logo"
@@ -116,18 +120,29 @@ export default function MobileMenuDrawer({
                     height={11}
                   />
                 </div>
-                <button
-                  onClick={close}
-                  aria-label="메뉴 닫기"
-                  className="p-100"
-                >
-                  <Image
-                    src="/icons/modal-close.svg"
-                    alt="닫기"
-                    width={24}
-                    height={24}
-                  />
-                </button>
+                <div className="flex items-center gap-200">
+                  {isLoggedIn && (
+                    <Link
+                      href="/my-page"
+                      onClick={close}
+                      aria-label="마이페이지"
+                    >
+                      <Avatar image={userImg} size={32} />
+                    </Link>
+                  )}
+                  <button
+                    onClick={close}
+                    aria-label="메뉴 닫기"
+                    className="p-100"
+                  >
+                    <Image
+                      src="/icons/modal-close.svg"
+                      alt="닫기"
+                      width={24}
+                      height={24}
+                    />
+                  </button>
+                </div>
               </div>
 
               {/* 네비게이션 */}
@@ -151,8 +166,15 @@ export default function MobileMenuDrawer({
                 })}
               </nav>
 
+              {/* 1:1 스터디 매칭 토글 */}
+              {isLoggedIn && (
+                <div className="border-t border-border-subtle px-400 py-200">
+                  <StudyMatchingToggle showLabel />
+                </div>
+              )}
+
               {/* 하단 인증 버튼 */}
-              <div className="mt-auto border-t border-border-subtle px-400 py-300">
+              <div className="border-t border-border-subtle px-400 py-300">
                 {isLoggedIn ? (
                   <div className="flex flex-col gap-200">
                     <Link
diff --git a/src/components/common/modals/notification-dropdown.tsx b/src/components/common/modals/notification-dropdown.tsx
index 289e7130a..3ea89cf7e 100644
--- a/src/components/common/modals/notification-dropdown.tsx
+++ b/src/components/common/modals/notification-dropdown.tsx
@@ -4,6 +4,7 @@ import { DotIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { MemberNotificationResponse } from '@/api/openapi';
+import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -38,6 +39,7 @@ export default function NotificationDropdown() {
     notification: MemberNotificationResponse,
   ) => {
     if (!notification.isRead) {
+      if (!notification.id) return;
       readNotifications([notification.id]);
     }
   };
@@ -61,25 +63,31 @@ export default function NotificationDropdown() {
           )}
         </div>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="shadow-2 rounded-100 border-border-default bg-background-default w-[520px] border">
+      <DropdownMenuContent
+        align="end"
+        collisionPadding={16}
+        className="shadow-2 rounded-100 border-border-default bg-background-default w-[min(520px,calc(100vw-32px))] border"
+      >
         {/* Header */}
         <div className="border-border-default flex items-center gap-150 border-b p-200">
           <button
-            className={
+            className={cn(
+              'cursor-pointer',
               mode === 'all'
-                ? 'font-designer-12b text-text-subtle cursor-pointer'
-                : 'font-designer-12m text-text-subtlest cursor-pointer'
-            }
+                ? 'font-designer-12b text-text-subtle'
+                : 'font-designer-12m text-text-subtlest',
+            )}
             onClick={() => setMode('all')}
           >
             전체 {totalAllCount}
           </button>
           <button
-            className={
+            className={cn(
+              'cursor-pointer',
               mode === 'unread'
-                ? 'font-designer-12b text-text-subtle cursor-pointer'
-                : 'font-designer-12m text-text-subtlest cursor-pointer'
-            }
+                ? 'font-designer-12b text-text-subtle'
+                : 'font-designer-12m text-text-subtlest',
+            )}
             onClick={() => setMode('unread')}
           >
             안읽음 {totalUnreadCount}
@@ -103,7 +111,7 @@ export default function NotificationDropdown() {
         </div>
 
         {/* Footer */}
-        <div className="px-200 pb-[26px]">
+        <div className="px-200 pb-300">
           <Button
             color="outlined"
             size="medium"
diff --git a/src/components/forms/group-study-form.tsx b/src/components/forms/group-study-form.tsx
index e55644eba..009e8fe6c 100644
--- a/src/components/forms/group-study-form.tsx
+++ b/src/components/forms/group-study-form.tsx
@@ -9,14 +9,16 @@ import {
 import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
 import Button from '@/components/common/ui/button';
 import { Modal } from '@/components/common/ui/modal';
-import Step1OpenGroupStudy from '@/components/forms/group-study-steps/step1-group';
-import Step2OpenGroupStudy from '@/components/forms/group-study-steps/step2-group';
-import Step3OpenGroupStudy from '@/components/forms/group-study-steps/step3-group';
+
+import GroupStudyStepBasicInfo from '@/components/forms/group-study-steps/group-study-step-basic-info';
+import GroupStudyStepIntroduction from '@/components/forms/group-study-steps/group-study-step-introduction';
+import { useToastStore } from '@/stores/use-toast-store';
 import {
   GroupStudyFormSchema,
   type GroupStudyFormValues,
   type StudyClassification,
 } from '@/types/schemas/group-study-form.schema';
+import GroupStudyStepApplication from './group-study-steps/group-study-step-application';
 
 const ClassificationContext = createContext<StudyClassification>('GROUP_STUDY');
 export const useClassification = () => useContext(ClassificationContext);
@@ -55,6 +57,7 @@ export default function GroupStudyForm({
   onSubmit,
   mode = 'create',
 }: GroupStudyFormProps) {
+  const showToast = useToastStore((state) => state.showToast);
   const internalMethods = useForm<GroupStudyFormValues>({
     resolver: zodResolver(GroupStudyFormSchema),
     mode: 'onChange',
@@ -77,7 +80,7 @@ export default function GroupStudyForm({
       shouldFocus: false,
     });
     if (!ok) {
-      console.log('trigger failed. errors:', methods.formState.errors);
+      showToast('스터디 개설 정보를 확인해주세요.', 'error');
 
       return;
     }
@@ -149,9 +152,9 @@ export default function GroupStudyForm({
               className="flex flex-col gap-400"
               onSubmit={handleSubmit(onSubmit)}
             >
-              {step === 1 && <Step1OpenGroupStudy />}
-              {step === 2 && <Step2OpenGroupStudy />}
-              {step === 3 && <Step3OpenGroupStudy />}
+              {step === 1 && <GroupStudyStepBasicInfo />}
+              {step === 2 && <GroupStudyStepIntroduction />}
+              {step === 3 && <GroupStudyStepApplication />}
             </form>
           </FormProvider>
         </Modal.Body>
@@ -223,7 +226,7 @@ function Stepper({ step }: { step: 1 | 2 | 3 }) {
         <div
           aria-current={isActive ? 'step' : undefined}
           className={cn(
-            'font-designer-13b flex h-300 w-300 items-center justify-center rounded-full',
+            'font-designer-13b flex h-300 w-300 shrink-0 items-center justify-center rounded-full',
             isActive && 'bg-background-brand-default text-text-inverse',
             isCompleted && 'bg-background-brand-subtle text-text-brand',
             !isActive &&
@@ -235,7 +238,7 @@ function Stepper({ step }: { step: 1 | 2 | 3 }) {
         </div>
         <span
           className={cn(
-            'font-designer-14m',
+            'font-designer-13m whitespace-nowrap',
             isActive && 'text-text-default',
             isCompleted && 'text-text-subtle',
             !isActive && !isCompleted && 'text-text-disabled',
@@ -243,13 +246,15 @@ function Stepper({ step }: { step: 1 | 2 | 3 }) {
         >
           {STEP_LABELS[n]}
         </span>
-        {n < 3 && <div className="bg-border-default mx-75 h-px w-300" />}
+        {n < 3 && (
+          <div className="bg-border-default mx-75 h-px flex-1 min-w-50" />
+        )}
       </div>
     );
   };
 
   return (
-    <nav aria-label="스터디 개설 단계" className="flex items-center">
+    <nav aria-label="스터디 개설 단계" className="flex w-full items-center">
       {([1, 2, 3] as const).map((n) => renderStep(n))}
     </nav>
   );
diff --git a/src/components/forms/group-study-steps/step3-group.tsx b/src/components/forms/group-study-steps/group-study-step-application.tsx
similarity index 98%
rename from src/components/forms/group-study-steps/step3-group.tsx
rename to src/components/forms/group-study-steps/group-study-step-application.tsx
index ee16dd126..035fe8fd5 100644
--- a/src/components/forms/group-study-steps/step3-group.tsx
+++ b/src/components/forms/group-study-steps/group-study-step-application.tsx
@@ -8,7 +8,7 @@ import FormField from '@/components/common/ui/form/form-field';
 import { BaseInput } from '@/components/common/ui/input';
 import { GroupStudyFormValues } from '@/types/schemas/group-study-form.schema';
 
-export default function Step3OpenGroupStudy() {
+export default function GroupStudyStepApplication() {
   const { setValue, getValues, formState } =
     useFormContext<GroupStudyFormValues>();
 
diff --git a/src/components/forms/group-study-steps/step1-group.tsx b/src/components/forms/group-study-steps/group-study-step-basic-info.tsx
similarity index 99%
rename from src/components/forms/group-study-steps/step1-group.tsx
rename to src/components/forms/group-study-steps/group-study-step-basic-info.tsx
index 1aead5c37..b85d5e070 100644
--- a/src/components/forms/group-study-steps/step1-group.tsx
+++ b/src/components/forms/group-study-steps/group-study-step-basic-info.tsx
@@ -46,7 +46,7 @@ const memberOptions = Array.from({ length: 20 }, (_, i) => {
   return { label: `${value}명`, value };
 });
 
-export default function Step1OpenGroupStudy() {
+export default function GroupStudyStepBasicInfo() {
   const { control, formState, watch } = useFormContext<GroupStudyFormValues>();
   const classification = useClassification();
   const mode = useMode();
diff --git a/src/components/forms/group-study-steps/step2-group.tsx b/src/components/forms/group-study-steps/group-study-step-introduction.tsx
similarity index 88%
rename from src/components/forms/group-study-steps/step2-group.tsx
rename to src/components/forms/group-study-steps/group-study-step-introduction.tsx
index 738fb1dbf..1d170b263 100644
--- a/src/components/forms/group-study-steps/step2-group.tsx
+++ b/src/components/forms/group-study-steps/group-study-step-introduction.tsx
@@ -8,9 +8,9 @@ import { BaseInput, TextAreaInput } from '@/components/common/ui/input';
 import { THUMBNAIL_EXTENSION } from '@/config/group-study-const';
 import { useScrollToNextField } from '@/hooks/use-scroll-to-next-field';
 
-import { GroupStudyFormValues } from '@/types/schemas/group-study-form.schema';
+import type { GroupStudyFormValues } from '@/types/schemas/group-study-form.schema';
 
-export default function Step2OpenGroupStudy() {
+export default function GroupStudyStepIntroduction() {
   const { setValue, getValues } = useFormContext<GroupStudyFormValues>();
   const scrollToNext = useScrollToNextField();
 
@@ -27,7 +27,10 @@ export default function Step2OpenGroupStudy() {
 
   useEffect(() => {
     if (thumbnailFile && thumbnailFile instanceof File) {
-      setImage(URL.createObjectURL(thumbnailFile));
+      const url = URL.createObjectURL(thumbnailFile);
+      setImage(url);
+
+      return () => URL.revokeObjectURL(url);
     } else if (thumbnailExtension === 'DEFAULT') {
       setImage(undefined);
     }
@@ -37,7 +40,6 @@ export default function Step2OpenGroupStudy() {
     if (!file) {
       setValue('thumbnailExtension', 'DEFAULT', { shouldValidate: true });
       setValue('thumbnailFile', null);
-      setImage(undefined);
 
       return;
     }
@@ -53,7 +55,6 @@ export default function Step2OpenGroupStudy() {
 
     setValue('thumbnailExtension', validExt, { shouldValidate: true });
     setValue('thumbnailFile', file, { shouldValidate: true });
-    setImage(URL.createObjectURL(file));
   };
 
   return (
@@ -82,7 +83,11 @@ export default function Step2OpenGroupStudy() {
         scrollable
         onAfterBlurFilled={() => scrollToNext('title')}
       >
-        <BaseInput placeholder="제목을 입력하세요." hideMeta={false} />
+        <BaseInput
+          placeholder="제목을 입력하세요."
+          hideMeta={false}
+          maxLength={100}
+        />
       </FormField>
 
       <FormField<GroupStudyFormValues, 'summary'>
@@ -97,6 +102,7 @@ export default function Step2OpenGroupStudy() {
         <BaseInput
           placeholder="목록에 노출될 스터디 요약을 입력하세요."
           hideMeta={false}
+          maxLength={200}
         />
       </FormField>
 
diff --git a/src/components/home/study-matching-toggle.tsx b/src/components/home/study-matching-toggle.tsx
index ede65e687..ce356b7ee 100644
--- a/src/components/home/study-matching-toggle.tsx
+++ b/src/components/home/study-matching-toggle.tsx
@@ -2,6 +2,7 @@
 
 import dynamic from 'next/dynamic';
 import { useState, useEffect } from 'react';
+import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
 import { ToggleSwitch } from '@/components/common/ui/toggle';
 import { useAuthReady } from '@/features/auth/model/use-auth';
 import { usePhoneVerificationStatus } from '@/hooks/queries/use-phone-verification-status';
@@ -21,7 +22,13 @@ const StartStudyModal = dynamic(
   { ssr: false },
 );
 
-export default function StudyMatchingToggle() {
+interface StudyMatchingToggleProps {
+  showLabel?: boolean;
+}
+
+export default function StudyMatchingToggle({
+  showLabel = false,
+}: StudyMatchingToggleProps) {
   const { memberId, isAuthReady } = useAuthReady();
   const showToast = useToastStore((state) => state.showToast);
   const isLoggedIn = isAuthReady && !!memberId;
@@ -119,8 +126,18 @@ export default function StudyMatchingToggle() {
         onVerificationComplete={handleVerificationComplete}
         memberId={memberId}
       />
-      <div className="flex items-center gap-100">
-        <span className="font-designer-14r text-text-subtle">
+      <div
+        className={cn(
+          'flex items-center gap-100',
+          showLabel && 'w-full justify-between',
+        )}
+      >
+        <span
+          className={cn(
+            'font-designer-14r text-text-subtle',
+            !showLabel && 'hidden lg:inline',
+          )}
+        >
           1:1 스터디 매칭
         </span>
         <ToggleSwitch.Root
diff --git a/src/components/lists/notification-list.tsx b/src/components/lists/notification-list.tsx
index 32594be3e..404bb5aa4 100644
--- a/src/components/lists/notification-list.tsx
+++ b/src/components/lists/notification-list.tsx
@@ -1,5 +1,6 @@
 import { format } from 'date-fns';
 import { MemberNotificationResponse } from '@/api/openapi';
+import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
 import Badge from '../common/ui/badge';
 
 const getBadgeColor = (
@@ -34,28 +35,33 @@ export default function NotificationList({
 }: NotificationListProps) {
   return (
     <ul>
-      {notifications?.map((notification) => (
+      {notifications?.map((notification, index) => (
         <li
-          key={notification.id}
+          key={notification.id ?? index}
           className="border-bottom-border-default bg-background-default hover:bg-background-neutral-subtle flex cursor-pointer items-center justify-between border-b py-150"
           onClick={() => onNotificationClick?.(notification)}
         >
           <div className="flex min-w-0 flex-1 items-center gap-150">
             <Badge
-              color={getBadgeColor(notification.topicType)}
+              color={getBadgeColor(notification.topicType ?? '')}
               shape="rectangle"
             >
               {notification.topicDescription}
             </Badge>
             <span
-              className={`${notification.isRead ? 'font-designer-13r' : 'font-designer-13b'} text-text-default min-w-0`}
+              className={cn(
+                notification.isRead ? 'font-designer-13r' : 'font-designer-13b',
+                'text-text-default min-w-0',
+              )}
             >
               {notification.title}
             </span>
           </div>
           <div className="flex shrink-0 items-center gap-100">
             <span className="font-designer-11r text-text-subtlest whitespace-nowrap">
-              {format(notification.createdAt, 'yyyy.MM.dd HH:mm')}
+              {notification.createdAt
+                ? format(notification.createdAt, 'yyyy.MM.dd HH:mm')
+                : '-'}
             </span>
           </div>
         </li>
diff --git a/src/components/pages/premium-study-detail-page.tsx b/src/components/pages/premium-study-detail-page.tsx
index a7e9472be..aa7d12757 100644
--- a/src/components/pages/premium-study-detail-page.tsx
+++ b/src/components/pages/premium-study-detail-page.tsx
@@ -4,6 +4,7 @@ import { sendGTMEvent } from '@next/third-parties/google';
 import dynamic from 'next/dynamic';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
+import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
 import MoreMenu from '@/components/common/ui/dropdown/more-menu';
 import StudyActiveTicker from '@/components/common/ui/study-active-ticker';
 import Tabs from '@/components/common/ui/tabs';
@@ -39,7 +40,7 @@ const GroupStudyFormModal = dynamic(
 
 type ActionKey = 'end' | 'delete';
 
-const DETAIL_CONTENT_WIDTH = 'w-[1164px]';
+const DETAIL_CONTENT_WIDTH = 'w-full max-w-study-content px-400';
 
 const END_MODAL_CONTENT = (
   <>
@@ -112,11 +113,12 @@ export default function PremiumStudyDetailPage({
             group_study_id: String(groupStudyId),
           });
           showToast('스터디가 종료되었습니다.');
-          setConfirmAction(null);
           router.push('/premium-study');
         },
         onError: () => {
           showToast('스터디 종료에 실패하였습니다.', 'error');
+        },
+        onSettled: () => {
           setConfirmAction(null);
         },
       },
@@ -263,7 +265,7 @@ export default function PremiumStudyDetailPage({
       />
 
       {/* 플로팅 정보 바 */}
-      <div className={`mt-500 ${DETAIL_CONTENT_WIDTH}`}>
+      <div className={cn('mt-500', DETAIL_CONTENT_WIDTH)}>
         <StudyActiveTicker
           approvedCount={studyDetail.basicInfo.approvedCount}
           maxMembersCount={studyDetail.basicInfo.maxMembersCount}
@@ -272,14 +274,17 @@ export default function PremiumStudyDetailPage({
         />
       </div>
       <div
-        className={`mb-500 flex ${DETAIL_CONTENT_WIDTH} items-start justify-between`}
+        className={cn(
+          'mb-500 flex items-start justify-between',
+          DETAIL_CONTENT_WIDTH,
+        )}
       >
         <div className="flex w-full flex-col gap-150">
           <p className="font-designer-28b text-text-strong">
-            {studyDetail?.detailInfo.title}
+            {studyDetail.detailInfo.title}
           </p>
           <p className="font-designer-18r text-text-default">
-            {studyDetail?.detailInfo.summary}
+            {studyDetail.detailInfo.summary}
           </p>
         </div>
         {isLeader && (