diff --git a/apps/what-today/src/components/activities/ActivitiesDescription.tsx b/apps/what-today/src/components/activities/ActivitiesDescription.tsx
index 12ae50e2..f0a0d53c 100644
--- a/apps/what-today/src/components/activities/ActivitiesDescription.tsx
+++ b/apps/what-today/src/components/activities/ActivitiesDescription.tsx
@@ -11,8 +11,8 @@ interface ActivitiesDescriptionProps {
 export default function ActivitiesDescription({ description, className }: ActivitiesDescriptionProps) {
   return (
     <section className={twMerge(`flex h-fit w-full flex-col justify-start gap-8`, className)}>
-      <div className='text-2lg font-bold text-gray-950'>체험 설명</div>
-      <p className='text-lg text-gray-950'>{description}</p>
+      <div className='section-text'>체험 설명</div>
+      <p className='body-text'>{description}</p>
     </section>
   );
 }
diff --git a/apps/what-today/src/components/activities/ActivitiesInformation.tsx b/apps/what-today/src/components/activities/ActivitiesInformation.tsx
index 2b4ca381..c054f51e 100644
--- a/apps/what-today/src/components/activities/ActivitiesInformation.tsx
+++ b/apps/what-today/src/components/activities/ActivitiesInformation.tsx
@@ -14,6 +14,7 @@ interface ActivitiesInformationProps {
   className?: string;
   id?: string;
   isAuthor: boolean;
+  price: number;
 }
 
 /**
@@ -28,6 +29,7 @@ export default function ActivitiesInformation({
   address,
   className,
   isAuthor,
+  price,
 }: ActivitiesInformationProps) {
   const navigate = useNavigate();
   const { toast } = useToast();
@@ -60,36 +62,46 @@ export default function ActivitiesInformation({
 
   return (
     <>
-      <section className={twMerge('flex h-fit w-full flex-col items-start gap-8', className)}>
+      <section
+        className={twMerge(
+          'flex h-fit w-full flex-col items-start gap-8 rounded-xl border border-gray-50 p-20',
+          className,
+        )}
+      >
         <div className='flex w-full items-center justify-between'>
-          <p className='text-md text-gray-950'>{category}</p>
+          <p className='caption-text'>{category}</p>
           {isAuthor && (
             <Dropdown.Root>
               <Dropdown.Trigger className='flex size-24 items-center justify-center' />
-              <Dropdown.Menu>
+              <Dropdown.Menu className='-left-95'>
                 <Dropdown.Item onClick={() => navigate(`/experiences/create/${id}`)}>수정하기</Dropdown.Item>
                 <Dropdown.Item onClick={() => setIsDeleteOpen(true)}>삭제하기</Dropdown.Item>
               </Dropdown.Menu>
             </Dropdown.Root>
           )}
         </div>
-        <p className='text-2xl font-bold'>{title}</p>
-        <div className='mt-9 flex items-center gap-6 text-base text-gray-700'>
+        <p className='title-text'>{title}</p>
+        <div className='body-text mt-9 flex items-center gap-6'>
           <StarIcon filled />
           <span>
             {rating.toFixed(1)} ({reviewCount})
           </span>
         </div>
-        <div className='mt-2 ml-2 flex items-center gap-4 text-base text-gray-700'>
+        <div className='body-text mt-2 ml-2 flex items-center gap-4'>
           <LocationIcon />
           <span>{address}</span>
         </div>
+        <div className='body-text mt-2 ml-2 flex items-center gap-4'>
+          <p className='body-text'>
+            <span className='font-bold text-gray-950'>₩ {price.toLocaleString()}</span> / 인
+          </p>
+        </div>
       </section>
       <Modal.Root open={isDeleteOpen} onClose={() => setIsDeleteOpen(false)}>
         <Modal.Content className='flex max-w-300 flex-col items-center gap-6 text-center md:max-w-350 lg:max-w-400'>
           <div className='flex flex-col items-center gap-6 text-center'>
             <WarningLogo className='md:size-110 lg:size-150' size={88} />
-            <p className='text-2lg font-bold'>체험을 삭제하시겠습니까?</p>
+            <p className='section-text'>체험을 삭제하시겠습니까?</p>
           </div>
           <Modal.Actions>
             <Modal.CancelButton>아니요</Modal.CancelButton>
diff --git a/apps/what-today/src/components/activities/ActivitiesMap.tsx b/apps/what-today/src/components/activities/ActivitiesMap.tsx
index 0ce903b0..f43d709e 100644
--- a/apps/what-today/src/components/activities/ActivitiesMap.tsx
+++ b/apps/what-today/src/components/activities/ActivitiesMap.tsx
@@ -13,9 +13,9 @@ interface ActivitiesMapProps {
  */
 export default function ActivitiesMap({ address, className }: ActivitiesMapProps) {
   return (
-    <section className={twMerge(`flex h-511 w-full flex-col justify-start text-xl font-bold`, className)}>
-      <div className='text-2lg mb-8 text-left font-bold'>오시는 길</div>
-      <div className='text-md mb-8 text-left font-semibold text-gray-950'>{address}</div>
+    <section className={twMerge(`section-text flex h-511 w-full flex-col justify-start gap-8`, className)}>
+      <div>오시는 길</div>
+      <div className='body-text'>{address}</div>
       <div className='h-full w-full overflow-hidden rounded-3xl'>
         <KakaoMap address={address} />
       </div>
diff --git a/apps/what-today/src/components/activities/ActivitiesReview.tsx b/apps/what-today/src/components/activities/ActivitiesReview.tsx
index 68c55f5b..99b613dc 100644
--- a/apps/what-today/src/components/activities/ActivitiesReview.tsx
+++ b/apps/what-today/src/components/activities/ActivitiesReview.tsx
@@ -20,15 +20,15 @@ export default function ActivitiesReview({ review }: ActivitiesReviewProps) {
   });
 
   return (
-    <div className='mb-20 rounded-3xl bg-white px-20 py-20 shadow-[0_2px_12px_rgba(0,0,0,0.1)]'>
+    <div className='mb-20 rounded-xl border border-gray-50 px-20 py-20'>
       <div className='mb-4 flex items-center gap-8'>
-        <div className='text-lg font-bold text-gray-950'>{user.nickname}</div>
-        <div className='text-md text-[#A4A1AA]'>{formattedDate}</div>
+        <div className='body-text font-bold'>{user.nickname}</div>
+        <div className='caption-text text-gray-400'>{formattedDate}</div>
       </div>
       <div className='mb-12'>
         <RatingStars rating={rating} />
       </div>
-      <p className='text-lg whitespace-pre-wrap text-gray-950'>{content}</p>
+      <p className='body-text whitespace-pre-wrap'>{content}</p>
     </div>
   );
 }
diff --git a/apps/what-today/src/components/activities/ActivityImages.tsx b/apps/what-today/src/components/activities/ActivityImages.tsx
index 73e0ed08..88af0ee6 100644
--- a/apps/what-today/src/components/activities/ActivityImages.tsx
+++ b/apps/what-today/src/components/activities/ActivityImages.tsx
@@ -12,7 +12,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
   return (
     <section className={`grid h-400 grid-cols-${subImageCount === 0 ? '1' : '2'} rounded-xl'} gap-8`}>
       {/* 왼쪽 메인이미지 */}
-      <div className='h-full w-full overflow-hidden rounded-xl border border-gray-200'>
+      <div className='h-full w-full overflow-hidden rounded-xl border border-gray-50'>
         <img alt='배너 이미지' className='h-full w-full object-cover' src={bannerImageUrl} onError={handleImageError} />
       </div>
 
@@ -21,7 +21,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
         <div className='h-full w-full'>
           {/* 1개일 때: 전체 영역 사용 */}
           {subImageCount === 1 && (
-            <div className='h-full w-full overflow-hidden rounded-xl border border-gray-200'>
+            <div className='h-full w-full overflow-hidden rounded-xl border border-gray-50'>
               <img
                 alt='서브 이미지'
                 className='h-full w-full object-cover object-center'
@@ -35,7 +35,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
           {subImageCount === 2 && (
             <div className='h-full w-full'>
               <div className='grid h-400 w-full grid-rows-[196px_196px] gap-8'>
-                <div className='overflow-hidden rounded-xl border border-gray-200'>
+                <div className='overflow-hidden rounded-xl border border-gray-50'>
                   <img
                     alt='서브 이미지 1'
                     className='h-full w-full object-cover object-center'
@@ -43,7 +43,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
                     onError={handleImageError}
                   />
                 </div>
-                <div className='overflow-hidden rounded-xl border border-gray-200'>
+                <div className='overflow-hidden rounded-xl border border-gray-50'>
                   <img
                     alt='서브 이미지 2'
                     className='h-full w-full object-cover object-center'
@@ -60,7 +60,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
             <div className='h-full w-full'>
               <div className='grid h-400 w-full grid-cols-2 grid-rows-[196px_196px] gap-8'>
                 {/* 이미지 1 */}
-                <div className='overflow-hidden rounded-xl border border-gray-200'>
+                <div className='overflow-hidden rounded-xl border border-gray-50'>
                   <img
                     alt='서브 이미지 1'
                     className='h-full w-full object-cover object-center'
@@ -70,7 +70,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
                 </div>
 
                 {/* 이미지 2 */}
-                <div className='overflow-hidden rounded-xl border border-gray-200'>
+                <div className='overflow-hidden rounded-xl border border-gray-50'>
                   <img
                     alt='서브 이미지 2'
                     className='h-full w-full object-cover object-center'
@@ -80,7 +80,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
                 </div>
 
                 {/* 이미지 3 - col-span-2 */}
-                <div className='col-span-2 overflow-hidden rounded-xl border border-gray-200'>
+                <div className='col-span-2 overflow-hidden rounded-xl border border-gray-50'>
                   <img
                     alt='서브 이미지 3'
                     className='h-full w-full object-cover object-center'
@@ -97,7 +97,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
             <div className='h-full w-full'>
               <div className='grid h-400 w-full grid-cols-2 grid-rows-[196px_196px] gap-8'>
                 {subImages.slice(0, 4).map((img, index) => (
-                  <div key={img.id} className='overflow-hidden rounded-xl border border-gray-200'>
+                  <div key={img.id} className='overflow-hidden rounded-xl border border-gray-50'>
                     <img
                       alt={`서브 이미지 ${index + 1}`}
                       className='h-full w-full object-cover object-center'
diff --git a/apps/what-today/src/components/activities/Divider.tsx b/apps/what-today/src/components/activities/Divider.tsx
index 15412ccf..3defef86 100644
--- a/apps/what-today/src/components/activities/Divider.tsx
+++ b/apps/what-today/src/components/activities/Divider.tsx
@@ -5,5 +5,5 @@ interface DividerProps {
 }
 
 export default function Divider({ className }: DividerProps) {
-  return <div className={twMerge('rounded-3xl border-t border-gray-100', className)} />;
+  return <div className={twMerge('rounded-3xl border-t border-gray-50', className)} />;
 }
diff --git a/apps/what-today/src/components/activities/ReservationBottomBar.tsx b/apps/what-today/src/components/activities/ReservationBottomBar.tsx
index b7d7a1d7..d8b0a6bf 100644
--- a/apps/what-today/src/components/activities/ReservationBottomBar.tsx
+++ b/apps/what-today/src/components/activities/ReservationBottomBar.tsx
@@ -25,18 +25,19 @@ export default function ReservationBottomBar({
   else buttonText = '예약하기';
 
   return (
-    <div className='fixed bottom-0 left-0 z-50 w-full border-t border-[#E6E6E6] bg-white px-48 pt-18 pb-18 shadow-[0_-2px_10px_rgba(0,0,0,0.05)]'>
+    <div className='fixed bottom-0 left-0 z-50 w-full border-t border-[#E6E6E6] bg-white px-20 pt-18 pb-18 shadow-[0_-2px_10px_rgba(0,0,0,0.05)]'>
       <div className='mb-12 flex items-center justify-between'>
         <div>
-          <p className='text-2lg font-bold'>
+          <p className='body-text font-bold'>
             ₩ {totalPrice.toLocaleString()}
-            <span className='text-lg font-normal'> / {reservation?.headCount ?? 1}명</span>
+            <span className='font-normal'> / {reservation?.headCount ?? 1}명</span>
           </p>
-          {reservation && <p className='mt-4 text-sm text-gray-500'>{formattedDateTime}</p>}
+          {reservation && <p className='caption-text mt-4 text-gray-400'>{formattedDateTime}</p>}
         </div>
 
         <Button
-          className='text-primary-500 h-fit w-fit p-0 text-lg font-bold underline'
+          className='text-primary-500 body-text font-bold underline'
+          size='none'
           variant='none'
           onClick={onSelectDate}
         >
diff --git a/apps/what-today/src/components/activities/ReviewSection.tsx b/apps/what-today/src/components/activities/ReviewSection.tsx
index d6d1845d..40432e70 100644
--- a/apps/what-today/src/components/activities/ReviewSection.tsx
+++ b/apps/what-today/src/components/activities/ReviewSection.tsx
@@ -1,5 +1,6 @@
-import { Button, StarIcon } from '@what-today/design-system';
+import { NoResult, StarIcon } from '@what-today/design-system';
 
+import { ReviewCardSkeleton } from '@/components/skeletons/activities';
 import { useActivityReviews } from '@/hooks/activityDetail';
 import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 import type { ActivityReview } from '@/schemas/activityReview';
@@ -19,37 +20,17 @@ const getSatisfactionText = (rating: number) => {
 };
 
 export default function ReviewSection({ activityId }: ReviewSectionProps) {
-  const {
-    allReviews,
-    averageRating,
-    totalCount,
-    isLoading,
-    isError,
-    error,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-  } = useActivityReviews(activityId, 10);
+  const { allReviews, averageRating, totalCount, isError, error, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useActivityReviews(activityId, 10);
 
   // 무한스크롤 트리거
   const observerRef = useIntersectionObserver(() => fetchNextPage(), isFetchingNextPage, !hasNextPage);
 
-  if (isLoading) {
-    return (
-      <section className='w-full'>
-        <div className='mb-8 flex gap-8'>
-          <h2 className='text-2lg font-bold text-gray-900'>체험 후기</h2>
-        </div>
-        <p className='py-8 text-center'>후기를 불러오는 중...</p>
-      </section>
-    );
-  }
-
   if (isError) {
     return (
       <section className='w-full'>
         <div className='mb-8 flex gap-8'>
-          <h2 className='text-2lg font-bold text-gray-900'>체험 후기</h2>
+          <h2 className='section-text'>체험 후기</h2>
         </div>
         <p className='py-8 text-center text-red-500'>
           후기를 불러오는 중 오류가 발생했습니다: {error instanceof Error ? error.message : '알 수 없는 오류'}
@@ -60,16 +41,16 @@ export default function ReviewSection({ activityId }: ReviewSectionProps) {
 
   return (
     <section className='w-full'>
-      <div className='mb-8 flex gap-8'>
-        <h2 className='text-2lg font-bold text-gray-900'>체험 후기</h2>
-        <span className='text-lg font-bold text-[#79747E]'>{totalCount.toLocaleString()}개</span>
+      <div className='mb-8 flex items-center gap-8'>
+        <h2 className='section-text'>체험 후기</h2>
+        <span className='body-text text-gray-400'>{totalCount.toLocaleString()}개</span>
       </div>
 
       {totalCount > 0 && (
         <div className='mb-34 flex flex-col items-center'>
-          <div className='text-3xl font-bold text-gray-950'>{averageRating.toFixed(1)}</div>
-          <div className='text-lg font-bold text-gray-950'>{getSatisfactionText(averageRating)}</div>
-          <div className='text-md flex items-center gap-2 text-[#79747E]'>
+          <div className='title-text'>{averageRating.toFixed(1)}</div>
+          <div className='section-text'>{getSatisfactionText(averageRating)}</div>
+          <div className='body-text flex items-center gap-4 text-gray-400'>
             <StarIcon filled className='size-16' />
             <span>{totalCount.toLocaleString()}개 후기</span>
           </div>
@@ -80,25 +61,19 @@ export default function ReviewSection({ activityId }: ReviewSectionProps) {
         {allReviews.length > 0 ? (
           allReviews.map((review: ActivityReview) => <ActivitiesReview key={review.id} review={review} />)
         ) : (
-          <p className='py-8 text-center text-gray-500'>아직 등록된 후기가 없습니다.</p>
+          <div className='mt-20 flex items-center justify-center'>
+            <NoResult dataName='후기가' />
+          </div>
         )}
       </div>
 
       {/* 무한스크롤 트리거 */}
       <div ref={observerRef} className='h-4' />
 
-      {/* 더보기 버튼 (옵션) */}
-      {hasNextPage && (
-        <div className='flex justify-center'>
-          <Button className='px-6 py-2' disabled={isFetchingNextPage} variant='outline' onClick={() => fetchNextPage()}>
-            {isFetchingNextPage ? '로딩 중...' : '더 많은 후기 보기'}
-          </Button>
-        </div>
-      )}
-
       {isFetchingNextPage && (
-        <div className='py-4 text-center'>
-          <p className='text-gray-500'>후기를 더 불러오는 중...</p>
+        <div className='flex flex-col gap-16'>
+          <ReviewCardSkeleton />
+          <ReviewCardSkeleton />
         </div>
       )}
     </section>
diff --git a/apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx b/apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx
index 7b075ef6..2b8fd998 100644
--- a/apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx
+++ b/apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx
@@ -10,15 +10,15 @@ interface HeadCountSelectorProps {
 export default function HeadCountSelector({ headCount, onIncrease, onDecrease }: HeadCountSelectorProps) {
   return (
     <div className='flex items-center justify-between'>
-      <p className='text-lg font-bold text-gray-950'>참여 인원 수</p>
+      <p className='section-text'>참여 인원 수</p>
 
-      <div className='flex items-center gap-23 rounded-3xl border border-[#EEEEEE] px-15'>
-        <Button className='h-fit w-fit p-0' size='sm' variant='none' onClick={onDecrease}>
-          <MinusIcon className='size-20' color='#4B4B4B' />
+      <div className='flex items-center gap-23 rounded-3xl border border-gray-50 px-15'>
+        <Button size='none' variant='none' onClick={onDecrease}>
+          <MinusIcon className='size-14' color='var(--color-gray-600)' />
         </Button>
-        <span className='p-8 text-center text-lg font-bold text-gray-950'>{headCount}</span>
-        <Button className='h-fit w-fit p-0' size='sm' variant='none' onClick={onIncrease}>
-          <PlusIcon className='size-20' color='#4B4B4B' />
+        <span className='body-text p-8 text-center font-bold'>{headCount}</span>
+        <Button size='none' variant='none' onClick={onIncrease}>
+          <PlusIcon className='size-14' color='var(--color-gray-600)' />
         </Button>
       </div>
     </div>
diff --git a/apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx b/apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
index 7d060aed..ab6c9cfb 100644
--- a/apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
+++ b/apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
@@ -1,4 +1,4 @@
-import { BottomSheet, Button } from '@what-today/design-system';
+import { BottomSheet, Button, ClockIcon } from '@what-today/design-system';
 import { ArrowIcon } from '@what-today/design-system';
 import { useState } from 'react';
 
@@ -81,10 +81,8 @@ export default function MobileReservationSheet({
       {/* 1단계: 날짜/시간 선택 */}
       {currentStep === 'dateTime' && (
         <BottomSheet.Content>
-          <div className='flex flex-col gap-24 px-20 py-24'>
-            <div className='mb-20'>
-              <h2 className='text-xl font-bold text-gray-950'>날짜 및 시간 선택</h2>
-            </div>
+          <div className='flex flex-col gap-24 px-10 py-14'>
+            <h2 className='subtitle-text'>날짜 및 시간 선택</h2>
 
             <div className='flex flex-col gap-20'>
               {/* 캘린더 */}
@@ -100,28 +98,28 @@ export default function MobileReservationSheet({
               {/* 시간 선택 */}
               {selectedDate && (
                 <div className='flex flex-col gap-12'>
-                  <p className='text-lg font-bold text-gray-950'>예약 가능한 시간</p>
-                  <TimeSelector
-                    availableTimes={availableTimes}
-                    selectedScheduleId={selectedScheduleId}
-                    onSelect={setSelectedScheduleId}
-                  />
+                  <p className='section-text'>예약 가능한 시간</p>
+                  <div className='max-h-290 overflow-y-auto pr-4'>
+                    <TimeSelector
+                      availableTimes={availableTimes}
+                      selectedScheduleId={selectedScheduleId}
+                      onSelect={setSelectedScheduleId}
+                    />
+                  </div>
+
+                  {/* 확인 버튼*/}
+                  <Button
+                    className='w-full'
+                    disabled={!selectedScheduleId || isAuthor || !isLoggedIn}
+                    size='lg'
+                    variant='fill'
+                    onClick={handleNextStep}
+                  >
+                    {buttonText}
+                  </Button>
                 </div>
               )}
             </div>
-
-            {/* 확인 버튼 */}
-            <div className='pt-8'>
-              <Button
-                className='w-full'
-                disabled={!selectedScheduleId || isAuthor || !isLoggedIn}
-                size='lg'
-                variant='fill'
-                onClick={handleNextStep}
-              >
-                {buttonText}
-              </Button>
-            </div>
           </div>
         </BottomSheet.Content>
       )}
@@ -129,13 +127,13 @@ export default function MobileReservationSheet({
       {/* 2단계: 인원 선택 */}
       {currentStep === 'headCount' && (
         <BottomSheet.Content>
-          <div className='flex flex-col gap-24 px-20 py-24'>
+          <div className='flex flex-col gap-24 px-10 py-14'>
             <div className='mb-20'>
               <div className='flex items-center gap-12'>
                 <Button className='h-fit w-fit p-0' variant='none' onClick={handleBackToDateTime}>
                   <ArrowIcon />
                 </Button>
-                <h2 className='text-xl font-bold text-gray-950'>참여 인원 선택</h2>
+                <h2 className='subtitle-text text-gray-950'>참여 인원 선택</h2>
               </div>
             </div>
 
@@ -143,8 +141,11 @@ export default function MobileReservationSheet({
               {/* 선택된 날짜/시간 요약 */}
               {selectedDate && selectedScheduleId && (
                 <div className='rounded-lg bg-gray-50 p-16'>
-                  <p className='text-sm text-gray-600'>선택된 날짜/시간</p>
-                  <p className='text-lg font-medium text-gray-950'>
+                  <p className='caption-text flex items-center gap-4 text-gray-600'>
+                    <ClockIcon className='size-14' color='var(--color-gray-600)' />
+                    선택된 날짜/시간
+                  </p>
+                  <p className='body-text font-bold'>
                     {selectedDate.replace(/-/g, '/')}{' '}
                     {availableTimes.find((t) => t.id === selectedScheduleId)?.startTime} ~{' '}
                     {availableTimes.find((t) => t.id === selectedScheduleId)?.endTime}
@@ -156,11 +157,10 @@ export default function MobileReservationSheet({
               <HeadCountSelector headCount={headCount} onDecrease={decreaseHeadCount} onIncrease={increaseHeadCount} />
 
               {/* 총 금액 */}
-              <div className='bg-primary-50 rounded-lg p-16'>
-                <div className='flex items-center justify-between'>
-                  <span className='text-lg font-medium text-gray-700'>총 금액</span>
-                  <span className='text-primary-600 text-xl font-bold'>₩ {totalPrice.toLocaleString()}</span>
-                </div>
+
+              <div className='flex items-center justify-between'>
+                <span className='section-text'>총 금액</span>
+                <span className='section-text'>₩ {totalPrice.toLocaleString()}</span>
               </div>
             </div>
 
diff --git a/apps/what-today/src/components/activities/reservation/ReservationForm.tsx b/apps/what-today/src/components/activities/reservation/ReservationForm.tsx
index 8e6d9714..ff86765c 100644
--- a/apps/what-today/src/components/activities/reservation/ReservationForm.tsx
+++ b/apps/what-today/src/components/activities/reservation/ReservationForm.tsx
@@ -1,6 +1,8 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { Button, useToast } from '@what-today/design-system';
 
+import Divider from '@/components/activities/Divider';
+
 import CalendarSelector from './CalendarSelector';
 import HeadCountSelector from './HeadCountSelector';
 import { useReservation } from './hooks/useReservation';
@@ -88,9 +90,9 @@ export default function ReservationForm({
   const content = (
     <div className='flex flex-col gap-24'>
       {/* 가격 표시 */}
-      <p className='text-xl text-[#79747E]'>
+      {/* <p className='text-xl text-[#79747E]'>
         <span className='font-bold text-gray-950'>₩ {price.toLocaleString()}</span> / 인
-      </p>
+      </p> */}
 
       {/* 캘린더 */}
       <CalendarSelector reservableDates={reservableDates} selectedDate={selectedDate} onDateChange={setSelectedDate} />
@@ -98,22 +100,24 @@ export default function ReservationForm({
       {/* 시간 선택 */}
       {selectedDate && (
         <>
-          <p className='text-lg font-bold text-gray-950'>예약 가능한 시간</p>
-          <TimeSelector
-            availableTimes={availableTimes}
-            selectedScheduleId={selectedScheduleId}
-            onSelect={setSelectedScheduleId}
-          />
+          <p className='section-text'>예약 가능한 시간</p>
+          <div className='max-h-350 overflow-y-auto pr-4'>
+            <TimeSelector
+              availableTimes={availableTimes}
+              selectedScheduleId={selectedScheduleId}
+              onSelect={setSelectedScheduleId}
+            />
+          </div>
         </>
       )}
 
       {/* 인원 선택 */}
       <HeadCountSelector headCount={headCount} onDecrease={decreaseHeadCount} onIncrease={increaseHeadCount} />
-
+      <Divider />
       {/* 총 합계 */}
       <div className='flex items-center justify-between'>
-        <p className='text-xl font-medium text-[#79747E]'>
-          총 합계 <span className='font-bold text-gray-950'>₩ {totalPrice.toLocaleString()}</span>
+        <p className='section-text flex max-w-155 flex-col'>
+          총 합계 <span className='inline-block max-w-full truncate'>₩ {totalPrice.toLocaleString()}</span>
         </p>
 
         {showSubmitButton && (
@@ -130,9 +134,5 @@ export default function ReservationForm({
     </div>
   );
 
-  return (
-    <section className='flex flex-col justify-between rounded-3xl border border-[#DDDDDD] p-30 shadow-sm'>
-      {content}
-    </section>
-  );
+  return <section className='flex flex-col justify-between rounded-xl border border-gray-50 p-20'>{content}</section>;
 }
diff --git a/apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx b/apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx
index 5047baca..8f7f36c5 100644
--- a/apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx
+++ b/apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx
@@ -38,41 +38,43 @@ export default function TabletReservationSheet({
   return (
     <BottomSheet.Root isOpen={isOpen} onClose={onClose}>
       <BottomSheet.Content>
-        <div className='grid min-h-[500px] grid-cols-2 gap-32 px-20 py-24'>
+        <div className='grid min-h-[500px] grid-cols-2 gap-32 px-10 pt-24'>
           {/* 좌측: 캘린더 */}
           <CalendarSelector
             reservableDates={reservableDates}
             selectedDate={selectedDate}
             onDateChange={(date) => {
               setSelectedDate(date);
-              setSelectedScheduleId(null); // 날짜 바뀌면 시간 초기화
+              setSelectedScheduleId(null);
             }}
           />
 
           {/* 우측: 시간 & 인원 */}
           <div className='flex flex-col justify-between'>
             <div className='flex flex-col gap-20'>
-              <p className='text-lg font-bold text-gray-950'>예약 가능한 시간</p>
+              <p className='section-text'>예약 가능한 시간</p>
               {selectedDate ? (
-                <TimeSelector
-                  availableTimes={availableTimes}
-                  selectedScheduleId={selectedScheduleId}
-                  onSelect={setSelectedScheduleId}
-                />
+                <div className='max-h-290 overflow-y-auto pr-4'>
+                  <TimeSelector
+                    availableTimes={availableTimes}
+                    selectedScheduleId={selectedScheduleId}
+                    onSelect={setSelectedScheduleId}
+                  />
+                </div>
               ) : (
-                <div className='text-sm text-gray-400'>날짜를 선택해주세요.</div>
+                <div className='caption-text text-gray-400'>날짜를 선택해주세요.</div>
               )}
 
               <HeadCountSelector headCount={headCount} onDecrease={decreaseHeadCount} onIncrease={increaseHeadCount} />
 
-              <p className='text-xl font-medium text-[#79747E]'>
-                총 합계 <span className='font-bold text-gray-950'>₩ {totalPrice.toLocaleString()}</span>
+              <p className='section-text'>
+                총 합계 <span>₩ {totalPrice.toLocaleString()}</span>
               </p>
             </div>
           </div>
         </div>
 
-        <div className='px-20 pt-8 pb-24'>
+        <div className='px-10 pt-10 pb-10'>
           <Button
             className='w-full'
             disabled={!isReadyToReserve || isAuthor || !isLoggedIn}
diff --git a/apps/what-today/src/components/activities/reservation/TimeSelector.tsx b/apps/what-today/src/components/activities/reservation/TimeSelector.tsx
index 7e868c3d..edda0de8 100644
--- a/apps/what-today/src/components/activities/reservation/TimeSelector.tsx
+++ b/apps/what-today/src/components/activities/reservation/TimeSelector.tsx
@@ -13,16 +13,16 @@ interface TimeSelectorProps {
 
 export default function TimeSelector({ availableTimes, selectedScheduleId, onSelect }: TimeSelectorProps) {
   return (
-    <div className='flex flex-col gap-2'>
+    <div className='flex flex-col gap-8'>
       {availableTimes.map((s) => (
         <Button
           key={s.id}
           className={twJoin(
             'w-full px-4 py-2 text-center',
-            'hover:text-primary-500 hover:bg-[#E5F3FF] hover:ring-2 hover:ring-blue-300 hover:ring-offset-0',
+            'hover:text-primary-500 hover:bg-primary-100',
             selectedScheduleId === s.id
-              ? 'text-primary-500 bg-blue-100 font-semibold ring-2 ring-blue-300'
-              : 'bg-white text-gray-900',
+              ? 'text-primary-500 bg-primary-100 border-primary-500'
+              : 'bg-white text-gray-950',
           )}
           size='lg'
           variant='outline'
diff --git a/apps/what-today/src/components/skeletons/activities/ActivitiesDescriptionSkeleton.tsx b/apps/what-today/src/components/skeletons/activities/ActivitiesDescriptionSkeleton.tsx
new file mode 100644
index 00000000..ee86fd11
--- /dev/null
+++ b/apps/what-today/src/components/skeletons/activities/ActivitiesDescriptionSkeleton.tsx
@@ -0,0 +1,16 @@
+export default function ActivitiesDescriptionSkeleton() {
+  return (
+    <section className='flex h-fit w-full flex-col justify-start gap-8'>
+      {/* 섹션 제목 */}
+      <div className='h-20 w-80 animate-pulse rounded bg-gray-200' />
+
+      {/* 설명 텍스트 라인들 */}
+      <div className='flex flex-col gap-4'>
+        <div className='h-16 w-full animate-pulse rounded bg-gray-200' />
+        <div className='h-16 w-4/5 animate-pulse rounded bg-gray-200' />
+        <div className='h-16 w-3/4 animate-pulse rounded bg-gray-200' />
+        <div className='h-16 w-5/6 animate-pulse rounded bg-gray-200' />
+      </div>
+    </section>
+  );
+}
diff --git a/apps/what-today/src/components/skeletons/activities/ActivitiesInformationSkeleton.tsx b/apps/what-today/src/components/skeletons/activities/ActivitiesInformationSkeleton.tsx
new file mode 100644
index 00000000..75aaf0cb
--- /dev/null
+++ b/apps/what-today/src/components/skeletons/activities/ActivitiesInformationSkeleton.tsx
@@ -0,0 +1,28 @@
+export default function ActivitiesInformationSkeleton() {
+  return (
+    <section className='flex h-fit w-full flex-col items-start gap-8 rounded-xl border border-gray-50 p-20'>
+      {/* 카테고리 */}
+      <div className='h-16 w-60 animate-pulse rounded bg-gray-200' />
+
+      {/* 제목 */}
+      <div className='h-28 w-full animate-pulse rounded bg-gray-200' />
+
+      {/* 평점 */}
+      <div className='mt-9 flex items-center gap-6'>
+        <div className='h-16 w-16 animate-pulse rounded bg-gray-200' />
+        <div className='h-16 w-80 animate-pulse rounded bg-gray-200' />
+      </div>
+
+      {/* 주소 */}
+      <div className='mt-2 ml-2 flex items-center gap-4'>
+        <div className='h-16 w-16 animate-pulse rounded bg-gray-200' />
+        <div className='h-16 w-200 animate-pulse rounded bg-gray-200' />
+      </div>
+
+      {/* 가격 */}
+      <div className='mt-2 ml-2 flex items-center gap-4'>
+        <div className='h-16 w-120 animate-pulse rounded bg-gray-200' />
+      </div>
+    </section>
+  );
+}
diff --git a/apps/what-today/src/components/skeletons/activities/ActivitiesMapSkeleton.tsx b/apps/what-today/src/components/skeletons/activities/ActivitiesMapSkeleton.tsx
new file mode 100644
index 00000000..179b5bff
--- /dev/null
+++ b/apps/what-today/src/components/skeletons/activities/ActivitiesMapSkeleton.tsx
@@ -0,0 +1,16 @@
+export default function ActivitiesMapSkeleton() {
+  return (
+    <section className='section-text flex h-511 w-full flex-col justify-start gap-8'>
+      {/* 섹션 제목 */}
+      <div className='h-20 w-80 animate-pulse rounded bg-gray-200' />
+
+      {/* 주소 */}
+      <div className='h-16 w-200 animate-pulse rounded bg-gray-200' />
+
+      {/* 지도 영역 */}
+      <div className='h-full w-full overflow-hidden rounded-3xl'>
+        <div className='h-full w-full animate-pulse bg-gray-200' />
+      </div>
+    </section>
+  );
+}
diff --git a/apps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsx b/apps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsx
new file mode 100644
index 00000000..bbbeeb2c
--- /dev/null
+++ b/apps/what-today/src/components/skeletons/activities/ActivityDetailPageSkeleton.tsx
@@ -0,0 +1,64 @@
+import { useResponsive } from '@/hooks/useResponsive';
+
+import ActivitiesDescriptionSkeleton from './ActivitiesDescriptionSkeleton';
+import ActivitiesInformationSkeleton from './ActivitiesInformationSkeleton';
+import ActivitiesMapSkeleton from './ActivitiesMapSkeleton';
+import ActivityImagesSkeleton from './ActivityImagesSkeleton';
+import DividerSkeleton from './DividerSkeleton';
+import ReservationFormSkeleton from './ReservationFormSkeleton';
+import ReviewSectionSkeleton from './ReviewSectionSkeleton';
+
+export default function ActivityDetailPageSkeleton() {
+  const { isDesktop } = useResponsive();
+
+  return (
+    <>
+      <main className='p-4'>
+        {isDesktop ? (
+          <div className='grid grid-cols-[1fr_350px] gap-40'>
+            {/* 왼쪽 컬럼 */}
+            <div className='flex flex-col gap-40'>
+              <ActivityImagesSkeleton />
+              <ActivitiesDescriptionSkeleton />
+              <DividerSkeleton />
+              <ActivitiesMapSkeleton />
+              <DividerSkeleton />
+              <ReviewSectionSkeleton />
+            </div>
+
+            {/* 오른쪽 사이드바 */}
+            <div className='sticky top-16 flex h-fit flex-col gap-38'>
+              <ActivitiesInformationSkeleton />
+              <ReservationFormSkeleton />
+            </div>
+          </div>
+        ) : (
+          <div className='flex flex-col gap-30'>
+            <ActivityImagesSkeleton />
+            <DividerSkeleton />
+            <ActivitiesInformationSkeleton />
+            <DividerSkeleton />
+            <ActivitiesDescriptionSkeleton />
+            <DividerSkeleton />
+            <ActivitiesMapSkeleton />
+            <DividerSkeleton />
+            <ReviewSectionSkeleton />
+          </div>
+        )}
+      </main>
+
+      {/* 모바일/태블릿 하단바 스켈레톤 */}
+      {!isDesktop && (
+        <div className='fixed right-0 bottom-0 left-0 z-50 border-t border-gray-200 bg-white p-16'>
+          <div className='flex items-center justify-between'>
+            <div className='flex flex-col gap-4'>
+              <div className='h-16 w-80 animate-pulse rounded bg-gray-200' />
+              <div className='h-20 w-100 animate-pulse rounded bg-gray-200' />
+            </div>
+            <div className='h-48 w-120 animate-pulse rounded bg-gray-200' />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/apps/what-today/src/components/skeletons/activities/ActivityImagesSkeleton.tsx b/apps/what-today/src/components/skeletons/activities/ActivityImagesSkeleton.tsx
new file mode 100644
index 00000000..d6b915fa
--- /dev/null
+++ b/apps/what-today/src/components/skeletons/activities/ActivityImagesSkeleton.tsx
@@ -0,0 +1,30 @@
+export default function ActivityImagesSkeleton() {
+  return (
+    <section className='grid h-400 grid-cols-2 gap-8'>
+      {/* 왼쪽 메인 이미지 스켈레톤 */}
+      <div className='h-full w-full overflow-hidden rounded-xl border border-gray-50'>
+        <div className='h-full w-full animate-pulse bg-gray-200' />
+      </div>
+
+      {/* 오른쪽 서브 이미지들 스켈레톤 */}
+      <div className='h-full w-full'>
+        <div className='grid h-400 w-full grid-cols-2 grid-rows-[196px_196px] gap-8'>
+          {/* 서브 이미지 1 */}
+          <div className='overflow-hidden rounded-xl border border-gray-50'>
+            <div className='h-full w-full animate-pulse bg-gray-200' />
+          </div>
+
+          {/* 서브 이미지 2 */}
+          <div className='overflow-hidden rounded-xl border border-gray-50'>
+            <div className='h-full w-full animate-pulse bg-gray-200' />
+          </div>
+
+          {/* 서브 이미지 3 - col-span-2 */}
+          <div className='col-span-2 overflow-hidden rounded-xl border border-gray-50'>
+            <div className='h-full w-full animate-pulse bg-gray-200' />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/what-today/src/components/skeletons/activities/DividerSkeleton.tsx b/apps/what-today/src/components/skeletons/activities/DividerSkeleton.tsx
new file mode 100644
index 00000000..188a2410
--- /dev/null
+++ b/apps/what-today/src/components/skeletons/activities/DividerSkeleton.tsx
@@ -0,0 +1,3 @@
+export default function DividerSkeleton() {
+  return <div className='h-1 w-full animate-pulse rounded bg-gray-200' />;
+}
diff --git a/apps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsx b/apps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsx
new file mode 100644
index 00000000..f2cb601d
--- /dev/null
+++ b/apps/what-today/src/components/skeletons/activities/ReservationFormSkeleton.tsx
@@ -0,0 +1,46 @@
+export default function ReservationFormSkeleton() {
+  return (
+    <section className='flex flex-col justify-between rounded-xl border border-gray-50 p-20'>
+      <div className='flex flex-col gap-24'>
+        {/* 캘린더 스켈레톤 */}
+        <div className='flex flex-col gap-8'>
+          {/* 캘린더 헤더 */}
+          <div className='flex items-center justify-between'>
+            <div className='h-20 w-16 animate-pulse rounded bg-gray-200' />
+            <div className='h-20 w-100 animate-pulse rounded bg-gray-200' />
+            <div className='h-20 w-16 animate-pulse rounded bg-gray-200' />
+          </div>
+
+          {/* 캘린더 그리드 */}
+          <div className='grid grid-cols-7 gap-4'>
+            {Array.from({ length: 35 }).map((_, index) => (
+              <div key={`calendar-${index}`} className='h-32 w-32 animate-pulse rounded bg-gray-200' />
+            ))}
+          </div>
+        </div>
+
+        {/* 인원 선택 스켈레톤 */}
+        <div className='flex items-center justify-between'>
+          <div className='h-20 w-60 animate-pulse rounded bg-gray-200' />
+          <div className='flex items-center gap-12'>
+            <div className='h-32 w-32 animate-pulse rounded bg-gray-200' />
+            <div className='h-20 w-20 animate-pulse rounded bg-gray-200' />
+            <div className='h-32 w-32 animate-pulse rounded bg-gray-200' />
+          </div>
+        </div>
+
+        {/* 구분선 */}
+        <div className='h-1 w-full animate-pulse rounded bg-gray-200' />
+
+        {/* 총 합계 */}
+        <div className='flex items-center justify-between'>
+          <div className='flex flex-col gap-4'>
+            <div className='h-20 w-60 animate-pulse rounded bg-gray-200' />
+            <div className='h-20 w-100 animate-pulse rounded bg-gray-200' />
+          </div>
+          <div className='h-40 w-80 animate-pulse rounded bg-gray-200' />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/what-today/src/components/skeletons/activities/ReviewCardSkeleton.tsx b/apps/what-today/src/components/skeletons/activities/ReviewCardSkeleton.tsx
new file mode 100644
index 00000000..2e7333d9
--- /dev/null
+++ b/apps/what-today/src/components/skeletons/activities/ReviewCardSkeleton.tsx
@@ -0,0 +1,27 @@
+export default function ReviewCardSkeleton() {
+  return (
+    <div className='flex flex-col gap-12 rounded-xl border border-gray-50 p-16'>
+      {/* 리뷰 헤더 */}
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center gap-8'>
+          <div className='h-40 w-40 animate-pulse rounded-full bg-gray-200' />
+          <div className='flex flex-col gap-4'>
+            <div className='h-16 w-80 animate-pulse rounded bg-gray-200' />
+            <div className='flex gap-2'>
+              {Array.from({ length: 5 }).map((_, starIndex) => (
+                <div key={`star-${starIndex}`} className='h-16 w-16 animate-pulse rounded bg-gray-200' />
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className='h-14 w-80 animate-pulse rounded bg-gray-200' />
+      </div>
+
+      {/* 리뷰 내용 */}
+      <div className='flex flex-col gap-4'>
+        <div className='h-16 w-full animate-pulse rounded bg-gray-200' />
+        <div className='h-16 w-4/5 animate-pulse rounded bg-gray-200' />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/what-today/src/components/skeletons/activities/ReviewSectionSkeleton.tsx b/apps/what-today/src/components/skeletons/activities/ReviewSectionSkeleton.tsx
new file mode 100644
index 00000000..d1df232c
--- /dev/null
+++ b/apps/what-today/src/components/skeletons/activities/ReviewSectionSkeleton.tsx
@@ -0,0 +1,30 @@
+import ReviewCardSkeleton from './ReviewCardSkeleton';
+
+export default function ReviewSectionSkeleton() {
+  return (
+    <section className='w-full'>
+      {/* 섹션 헤더 */}
+      <div className='mb-8 flex items-center gap-8'>
+        <div className='h-20 w-80 animate-pulse rounded bg-gray-200' />
+        <div className='h-16 w-40 animate-pulse rounded bg-gray-200' />
+      </div>
+
+      {/* 평점 통계 */}
+      <div className='mb-34 flex flex-col items-center'>
+        <div className='mb-4 h-32 w-60 animate-pulse rounded bg-gray-200' />
+        <div className='mb-4 h-20 w-80 animate-pulse rounded bg-gray-200' />
+        <div className='flex items-center gap-4'>
+          <div className='h-16 w-16 animate-pulse rounded bg-gray-200' />
+          <div className='h-16 w-80 animate-pulse rounded bg-gray-200' />
+        </div>
+      </div>
+
+      {/* 리뷰 카드들 */}
+      <div className='mb-24 flex flex-col gap-16'>
+        {Array.from({ length: 3 }).map((_, index) => (
+          <ReviewCardSkeleton key={`review-${index}`} />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/what-today/src/components/skeletons/activities/index.ts b/apps/what-today/src/components/skeletons/activities/index.ts
new file mode 100644
index 00000000..bafbd27d
--- /dev/null
+++ b/apps/what-today/src/components/skeletons/activities/index.ts
@@ -0,0 +1,9 @@
+export { default as ActivitiesDescriptionSkeleton } from './ActivitiesDescriptionSkeleton';
+export { default as ActivitiesInformationSkeleton } from './ActivitiesInformationSkeleton';
+export { default as ActivitiesMapSkeleton } from './ActivitiesMapSkeleton';
+export { default as ActivityDetailPageSkeleton } from './ActivityDetailPageSkeleton';
+export { default as ActivityImagesSkeleton } from './ActivityImagesSkeleton';
+export { default as DividerSkeleton } from './DividerSkeleton';
+export { default as ReservationFormSkeleton } from './ReservationFormSkeleton';
+export { default as ReviewCardSkeleton } from './ReviewCardSkeleton';
+export { default as ReviewSectionSkeleton } from './ReviewSectionSkeleton';
diff --git a/apps/what-today/src/pages/activities/index.tsx b/apps/what-today/src/pages/activities/index.tsx
index 31144763..c8ac07be 100644
--- a/apps/what-today/src/pages/activities/index.tsx
+++ b/apps/what-today/src/pages/activities/index.tsx
@@ -1,5 +1,5 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { SpinIcon, useToast } from '@what-today/design-system';
+import { useToast } from '@what-today/design-system';
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -15,6 +15,7 @@ import TabletReservationSheet from '@/components/activities/reservation/TabletRe
 import type { ReservationSummary } from '@/components/activities/reservation/types';
 import ReservationBottomBar from '@/components/activities/ReservationBottomBar';
 import ReviewSection from '@/components/activities/ReviewSection';
+import { ActivityDetailPageSkeleton } from '@/components/skeletons/activities';
 import { useActivityDetail } from '@/hooks/activityDetail';
 import { useResponsive } from '@/hooks/useResponsive';
 import NotFoundPage from '@/pages/not-found-page';
@@ -36,12 +37,7 @@ export default function ActivityDetailPage() {
 
   const { data: activity, isLoading: loading, error } = useActivityDetail(id);
 
-  if (loading)
-    return (
-      <div className='flex h-screen items-center justify-center p-40'>
-        <SpinIcon className='size-200' color='var(--color-gray-100)' />
-      </div>
-    );
+  if (loading) return <ActivityDetailPageSkeleton />;
   if (error) return <NotFoundPage />;
   if (!activity) return <NotFoundPage />;
 
@@ -96,7 +92,7 @@ export default function ActivityDetailPage() {
     <>
       <main className='p-4'>
         {isDesktop ? (
-          <div className='grid grid-cols-[1fr_410px] gap-40'>
+          <div className='grid grid-cols-[1fr_350px] gap-40'>
             <div className='flex flex-col gap-40'>
               <ActivityImages bannerImageUrl={activity.bannerImageUrl} subImages={activity.subImages} />
               <ActivitiesDescription description={activity.description} />
@@ -111,6 +107,7 @@ export default function ActivityDetailPage() {
                 category={activity.category}
                 id={id}
                 isAuthor={user?.id ? activity?.userId === user.id : false}
+                price={activity.price}
                 rating={activity.rating}
                 reviewCount={activity.reviewCount}
                 title={activity.title}
@@ -133,15 +130,16 @@ export default function ActivityDetailPage() {
               category={activity.category}
               id={id}
               isAuthor={user?.id ? activity?.userId === user.id : false}
+              price={activity.price}
               rating={activity.rating}
               reviewCount={activity.reviewCount}
               title={activity.title}
             />
-            <Divider className='border-t border-gray-200' />
+            <Divider />
             <ActivitiesDescription description={activity.description} />
-            <Divider className='border-t border-gray-200' />
+            <Divider />
             <ActivitiesMap address={activity.address} className='h-415' />
-            <Divider className='border-t border-gray-200' />
+            <Divider />
             <ReviewSection activityId={activity.id} />
           </div>
         )}