diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
index 29e75ef..577b758 100644
--- a/components/ActivityDetails/ActivityDetails.tsx
+++ b/components/ActivityDetails/ActivityDetails.tsx
@@ -26,10 +26,10 @@ import { ActivityDetailsPageMeta } from '../MetaData/MetaData';
 import useDeleteActivity from '@/hooks/myActivity/useDeleteActivity';
 import { usePopup } from '@/hooks/usePopup';
 import { darkModeState } from '@/states/themeState';
-import SendChat from '../Chat/SendChat';
 import { ShareButton } from '../ShareButton/ShareButton';
 import { ViewedActivitiesState } from '@/states/ViewedState';
 import { ViewedActivityProps } from '../ViewedActivities/ViewedActivities.type';
+import profileThumbnail from '@/public/image/profile-circle-icon-512x512-zxne30hp.png';
 
 export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const router = useRouter();
@@ -203,22 +203,14 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
               </div>
             </div>
           </div>
-          <div className="flex items-center t:items-center m:items-end">
-            <div className="flex gap-[12px]">
-              {!isAuthor && (
-                <SendChat
-                  receiver={Number(activityData?.userId)}
-                  activityId={Number(activityData?.id)}
-                />
-              )}
-              <ShareButton
-                type="none-bg"
-                title={activityData?.title}
-                bannerImageUrl={activityData?.bannerImageUrl}
-                description={activityData?.description}
-                activityId={id}
-              />
-            </div>
+          <div className="flex t:items-center m:items-end">
+            <ShareButton
+              type="none-bg"
+              title={activityData?.title}
+              bannerImageUrl={activityData?.bannerImageUrl}
+              description={activityData?.description}
+              activityId={id}
+            />
             {isAuthor && (
               <div className="flex items-center">
                 <MeatballButton onClick={toggleMenu} />
@@ -252,7 +244,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
           />
         )}
         <div className="flex gap-4 m:block m:relative">
-          <div className="mb-20 ipad-pro:w-[725px] w-full m:px-[24px]">
+          <div className="mb-20 w-full ipad-pro:w-[725px] t:w-full m:w-full m:px-[24px]">
             <div className="border-t-2 border-var-gray3 dark:border-var-dark4 border-solid pt-10 m:pt-6" />
             <div className="flex flex-col gap-4">
               <p className="text-nomad-black dark:text-var-gray2 font-bold text-xl">
@@ -302,7 +294,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
                   >
                     <div className="flex-shrink-0">
                       <Image
-                        src={review.user.profileImageUrl}
+                        src={review.user.profileImageUrl || profileThumbnail}
                         alt={`${review.user.nickname}의 프로필 이미지`}
                         width={45}
                         height={45}
diff --git a/components/Button/TopButton.tsx b/components/Button/TopButton.tsx
index 5d0e046..547146b 100644
--- a/components/Button/TopButton.tsx
+++ b/components/Button/TopButton.tsx
@@ -1,8 +1,11 @@
 import Image from 'next/image';
 import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
 
 const TopButton = () => {
   const [showButton, setShowButton] = useState(false);
+  const router = useRouter();
+  const isActivityDetailPage = router.pathname.startsWith('/activity-details/');
 
   const scrollToTop = () => {
     window.scroll({
@@ -26,7 +29,13 @@ const TopButton = () => {
   return (
     <>
       {showButton && (
-        <div className="fixed right-[30px] m:right-[14px] bottom-[30px] z-30">
+        <div
+          className="fixed z-30"
+          style={{
+            bottom: isActivityDetailPage ? '70px' : '30px',
+            right: isActivityDetailPage ? '13px' : '30px',
+          }}
+        >
           <button
             onClick={scrollToTop}
             type="button"
diff --git a/components/CatergoryBtn/CatergoryBtn.tsx b/components/CatergoryBtn/CatergoryBtn.tsx
index 8ba2aa2..c3430d0 100644
--- a/components/CatergoryBtn/CatergoryBtn.tsx
+++ b/components/CatergoryBtn/CatergoryBtn.tsx
@@ -37,7 +37,7 @@ export default function CatergoryBtn({ categoryName }: CategoryBtnProps) {
 
   return (
     <button
-      className={`flex items-center justify-center rounded-[15px] border-[1px] border-solid border-2 m:border-[1px] border-var-green2 dark:border-none w-[127px] h-[53px] t:min-w-[120px] m:min-w-[80px] m:h-[41px] ${backgroundColor}`}
+      className={`flex items-center justify-center rounded-[15px] border-[2px] border-solid border-2 m:border-[1px] border-var-green2 dark:border-none w-[127px] h-[53px] t:min-w-[120px] m:min-w-[80px] m:h-[41px] ${backgroundColor}`}
       onClick={handleClick}
     >
       <p className={`text-[18px] p:font-[600] m:text-[14px] ${textColor}`}>
diff --git a/components/Chat/SendChat.tsx b/components/Chat/SendChat.tsx
index e650447..18346da 100644
--- a/components/Chat/SendChat.tsx
+++ b/components/Chat/SendChat.tsx
@@ -7,7 +7,12 @@ import { useState } from 'react';
 import ChatPopup from '../Popup/ChatPopup';
 import { SendChatProps } from './SendChat.types';
 
-function SendChat({ receiver, activityId }: SendChatProps) {
+function SendChat({
+  receiver,
+  activityId,
+  activityTitle,
+  activityImage,
+}: SendChatProps) {
   const isDarkMode = useRecoilValue(darkModeState);
   const { userData } = useUserData();
   const [isPopupOpen, setIsPopupOpen] = useState(false);
@@ -41,25 +46,21 @@ function SendChat({ receiver, activityId }: SendChatProps) {
 
   return (
     <>
-      <button type="button" onClick={handleClick}>
-        {isDarkMode ? (
-          <Image
-            src="/icon/live_help_gray.svg"
-            alt="채팅 아이콘"
-            width={34}
-            height={34}
-          />
-        ) : (
-          <Image
-            src="/icon/live_help.svg"
-            alt="채팅 아이콘"
-            width={34}
-            height={34}
-          />
-        )}
+      <button type="button" onClick={handleClick} className="w-[34px] h-[34px]">
+        <Image
+          src={isDarkMode ? '/icon/live_help_gray.svg' : '/icon/live_help.svg'}
+          alt="채팅 아이콘"
+          width={34}
+          height={34}
+        />
       </button>
       {isPopupOpen && (
-        <ChatPopup closePopup={closePopup} activityId={activityId} />
+        <ChatPopup
+          closePopup={closePopup}
+          activityId={activityId}
+          activityTitle={activityTitle}
+          activityImage={activityImage}
+        />
       )}
     </>
   );
diff --git a/components/Chat/SendChat.types.ts b/components/Chat/SendChat.types.ts
index e67e308..9db2d2a 100644
--- a/components/Chat/SendChat.types.ts
+++ b/components/Chat/SendChat.types.ts
@@ -1,4 +1,6 @@
 export interface SendChatProps {
   receiver: number;
   activityId: number;
+  activityTitle: string;
+  activityImage: string;
 }
diff --git a/components/Lander/AllActivities.tsx b/components/Lander/AllActivities.tsx
index 49564db..5cc966e 100644
--- a/components/Lander/AllActivities.tsx
+++ b/components/Lander/AllActivities.tsx
@@ -157,7 +157,7 @@ function AllActivities() {
 
   return (
     <div ref={PaginationScrollRef}>
-      <div className="flex justify-between">
+      <div className="flex justify-between mt-[120px]">
         <div className="relative t:w-[520px] m:w-[230px]">
           <div className="flex gap-[24px] t:gap-[14px] m:gap-[8px] t:w-[520px] m:w-[230px] overflow-auto scrollbar-hide">
             {Kategories.map((Kategorie, index) => (
diff --git a/components/MyActivity/Card/Card.tsx b/components/MyActivity/Card/Card.tsx
index 1f2af02..3cdabef 100644
--- a/components/MyActivity/Card/Card.tsx
+++ b/components/MyActivity/Card/Card.tsx
@@ -12,6 +12,8 @@ import Link from 'next/link';
 import ChatPopup from '@/components/Popup/ChatPopup';
 import { useUserData } from '@/hooks/useUserData';
 import socket from '@/server/server';
+import { useRecoilValue } from 'recoil';
+import { darkModeState } from '@/states/themeState';
 
 function PopoverButton({ children, onClick }: PopoverButtonProps) {
   return (
@@ -69,7 +71,7 @@ function Card({
 }: CardProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [isPopupOpen, setIsPopupOpen] = useState(false);
-  const { userData } = useUserData();
+  const isDarkMode = useRecoilValue(darkModeState);
 
   const handleClickMeatball = () => {
     setIsPopoverOpen(!isPopoverOpen);
@@ -132,7 +134,11 @@ function Card({
           <div className="m:w-[32px] m:h-[32px] flex items-center">
             <button onClick={handleClickChat}>
               <Image
-                src="/icon/chat_bubble.svg"
+                src={
+                  isDarkMode
+                    ? '/icon/chat_bubble_gray.svg'
+                    : '/icon/chat_bubble.svg'
+                }
                 alt="문의 내역"
                 width={30}
                 height={30}
@@ -144,6 +150,8 @@ function Card({
             <ChatPopup
               closePopup={closePopup}
               activityId={activityId}
+              activityTitle={title}
+              activityImage={activityImage}
               isAdmin
             />
           )}
diff --git a/components/Popup/ChatPopup.tsx b/components/Popup/ChatPopup.tsx
index 5ebea67..31546dd 100644
--- a/components/Popup/ChatPopup.tsx
+++ b/components/Popup/ChatPopup.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { CloseButtonBold } from '../Button/Button';
 import {
   ChatListProps,
   ChatPopupProps,
@@ -13,14 +12,27 @@ import Image from 'next/image';
 function ChatPopup({
   closePopup,
   activityId,
+  activityTitle,
+  activityImage,
   isAdmin = false,
 }: ChatPopupProps) {
   const [message, setMessage] = useState('');
   const [senderId, setSenderId] = useState(0);
+  const [nickname, setNickName] = useState('문의 하기');
+  const [profile, setProfile] = useState(activityImage);
   const [isSendEnabled, setIsSendEnabled] = useState(true);
+  const [isEnter, setIsEnter] = useState(false);
+
+  const handleClickPrev = () => {
+    setIsEnter(false);
+    setIsSendEnabled(false);
+    setNickName('문의 내역');
+    setProfile(activityImage);
+  };
 
   const sendMessage = (event: any) => {
     event.preventDefault();
+    if (message === '') return;
     if (isAdmin) {
       socket.emit(
         'sendMessageAdmin',
@@ -43,15 +55,50 @@ function ChatPopup({
 
   useEffect(() => {
     setIsSendEnabled(!isAdmin);
+    if (isAdmin) {
+      setNickName('문의 내역');
+    }
   }, []);
 
   return (
-    <div className="flex items-center justify-center fixed w-[400px] bottom-[30px] right-[30px] z-50">
-      <div className="flex flex-col bg-var-gray2 w-full rounded-[20px]">
-        <div className="flex justify-between pt-[7px] pb-[3px] px-[20px] items-center bg-var-gray3 rounded-t-[20px]">
-          <p>문의 채팅</p>
+    <div className="flex items-center justify-center fixed w-[400px] bottom-[30px] right-[30px] z-50 m:inset-0 m:w-full m:bg-black m:bg-opacity-70">
+      <div className="flex flex-col bg-var-gray2 w-full rounded-[20px] dark:bg-var-dark2 dark:border-4 dark:border-solid dark:border-var-dark3">
+        <div className="flex justify-between h-[64px] pt-[10px] pb-[3px] px-[20px] items-center bg-var-gray3 rounded-t-[15px] dark:bg-var-dark3">
+          <div className="flex gap-[10px]">
+            <div className="w-[40px] h-[40px] rounded-full">
+              <Image
+                src={profile}
+                alt="프로필"
+                width={40}
+                height={40}
+                className="w-[40px] h-[40px] rounded-full"
+              />
+            </div>
+            <div>
+              <p className="font-[500] line-clamp-1">{activityTitle}</p>
+              <p className="text-var-gray6">{`@${nickname}`}</p>
+            </div>
+          </div>
+
           <div className="flex items-center h-[30px]">
-            <CloseButtonBold onClick={closePopup} />
+            {isEnter && (
+              <button onClick={handleClickPrev}>
+                <Image
+                  src="/icon/prev_arrow.svg"
+                  alt="이전"
+                  width={20}
+                  height={20}
+                />
+              </button>
+            )}
+            <button onClick={closePopup}>
+              <Image
+                src="/icon/chat_close.svg"
+                alt="닫기"
+                width={24}
+                height={24}
+              />
+            </button>
           </div>
         </div>
         <div className="flex flex-col h-[500px]">
@@ -60,6 +107,10 @@ function ChatPopup({
               activityId={activityId}
               handleSenderId={setSenderId}
               handleSendEnable={setIsSendEnabled}
+              isEnter={isEnter}
+              handleIsEnter={setIsEnter}
+              handleNickName={setNickName}
+              handleProfile={setProfile}
             />
           ) : (
             <ShowChatList />
@@ -91,18 +142,23 @@ function ShowChatRoomList({
   activityId,
   handleSenderId,
   handleSendEnable,
+  isEnter,
+  handleIsEnter,
+  handleNickName,
+  handleProfile,
 }: ChatRoomPopupProps) {
   const [rooms, setRooms] = useState<ChatRoomProps[]>([]);
-  const [isEnter, setIsEnter] = useState(false);
   const { userData } = useUserData();
 
-  const handleClickRoom = (userId: number) => {
+  const handleClickRoom = (userId: number, index: number) => {
     socket.emit('inquiryAdmin', userData.id, activityId, userId, (res: any) => {
       console.log('inquiryAdmin res', res);
     });
-    setIsEnter(true);
+    handleIsEnter(true);
     handleSenderId(userId);
     handleSendEnable(true);
+    handleNickName(rooms[index].user.name);
+    handleProfile(rooms[index].user.profile);
   };
 
   useEffect(() => {
@@ -129,8 +185,8 @@ function ShowChatRoomList({
               <div key={room.user.id} className="flex justify-center">
                 <button
                   type="button"
-                  onClick={() => handleClickRoom(room.user.id)}
-                  className={`flex items-center gap-[15px] p-[15px] h-[75px] bg-var-gray2 w-full max-w-[400px] border-b border-solid border-b-var-gray4`}
+                  onClick={() => handleClickRoom(room.user.id, index)}
+                  className={`flex items-center gap-[15px] p-[15px] h-[75px] bg-var-gray2 w-full max-w-[400px] border-b border-solid border-b-var-gray4 dark:bg-var-dark2`}
                 >
                   <div className="w-[50px] h-[50px] rounded-full overflow-hidden">
                     <Image
@@ -141,7 +197,7 @@ function ShowChatRoomList({
                     />
                   </div>
                   <div className="flex flex-col items-start">
-                    <div className="font-[500] text-nomad-black">
+                    <div className="font-[500] text-nomad-black dark:text-var-gray2">
                       {room.user.name}
                     </div>
                     <div className="text-var-gray6">
@@ -153,7 +209,7 @@ function ShowChatRoomList({
             ))}
           </div>
         ) : (
-          <div className="flex justify-center items-center">
+          <div className="flex justify-center items-center mt-[20px]">
             <p>아직 문의 채팅이 없습니다.</p>
           </div>
         ))}
@@ -200,7 +256,7 @@ function ShowChatList({ isAdmin = false }: ChatListProps) {
               className={`inline-block max-w-max rounded-[10px] p-[8px] pl-[10px] ${
                 sender[index] === 'user'
                   ? 'bg-var-green2 text-white'
-                  : 'bg-var-gray3'
+                  : 'bg-var-gray3 text-var-dark1'
               }`}
             >
               {message}
diff --git a/components/Popup/ChatPopup.types.tsx b/components/Popup/ChatPopup.types.tsx
index f28c74e..c14c0ec 100644
--- a/components/Popup/ChatPopup.types.tsx
+++ b/components/Popup/ChatPopup.types.tsx
@@ -3,6 +3,8 @@ import { Dispatch, SetStateAction } from 'react';
 export interface ChatPopupProps {
   closePopup: () => void;
   activityId: number;
+  activityTitle: string;
+  activityImage: string;
   isAdmin?: boolean;
 }
 
@@ -21,6 +23,10 @@ export interface ChatRoomPopupProps {
   activityId: number;
   handleSenderId: Dispatch<SetStateAction<number>>;
   handleSendEnable: Dispatch<SetStateAction<boolean>>;
+  isEnter: boolean;
+  handleIsEnter: Dispatch<SetStateAction<boolean>>;
+  handleNickName: Dispatch<SetStateAction<string>>;
+  handleProfile: Dispatch<SetStateAction<string>>;
 }
 
 export interface ChatListProps {
diff --git a/components/PriceFilterBtn/PriceFilterBtn.tsx b/components/PriceFilterBtn/PriceFilterBtn.tsx
index 753ae9a..c865c66 100644
--- a/components/PriceFilterBtn/PriceFilterBtn.tsx
+++ b/components/PriceFilterBtn/PriceFilterBtn.tsx
@@ -31,10 +31,10 @@ export default function PriceFilterBtn() {
   return (
     <div className="relative" ref={dropDownElement}>
       <button
-        className="flex justify-between items-center w-[147px] h-[53px] border-solid border-[1px] rounded-[15px] t:w-[140px] m:w-[94px] m:h-[41px] border-var-green2 px-[20px] m:px-[10px] bg-white dark:bg-var-dark2 dark:border-none"
+        className="flex justify-between items-center w-[147px] h-[53px] border-solid border-[2px] m:border-[1px] rounded-[15px] t:w-[140px] m:w-[94px] m:h-[41px] border-var-green2 px-[20px] m:px-[10px] bg-white dark:bg-var-dark2 dark:border-none"
         onClick={() => setShowMenuList((prev) => !prev)}
       >
-        <p className="text-[18px] t:text-[16px] m:text-[12px] text-var-green2 dark:text-var-gray2">
+        <p className="text-[18px] t:text-[16px] m:text-[12px] text-var-green2 dark:text-var-gray2 font-[600]">
           {isClient && !showMenuList ? sortedName || '정렬' : sortedName}
         </p>
         <Image
diff --git a/components/ViewedActivities/ViewedActivities.tsx b/components/ViewedActivities/ViewedActivities.tsx
index f962b77..08de79c 100644
--- a/components/ViewedActivities/ViewedActivities.tsx
+++ b/components/ViewedActivities/ViewedActivities.tsx
@@ -1,11 +1,14 @@
-import RecordImg from '@/public/icon/Record.svg';
-import Ximg from '@/public/icon/btn_x_big.svg';
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import ViewedActivity from './ViewedActivity';
 import useClickOutside from '@/hooks/useClickOutside';
 import { useRecoilValue } from 'recoil';
 import { ViewedActivitiesState } from '@/states/ViewedState';
+import HistoryImg_black from '@/public/icon/History_black.svg';
+import HistoryImg_white from '@/public/icon/History_white.svg';
+import CloseImg_black from '@/public/icon/close_black.svg';
+import CloseImg_white from '@/public/icon/close_white.svg';
+import { darkModeState } from '@/states/themeState';
 
 function ViewedActivities() {
   const [isOpen, setIsOpen] = useState(false);
@@ -15,6 +18,7 @@ function ViewedActivities() {
     setIsOpen(false)
   );
   const ViewedActivitiesVlue = useRecoilValue(ViewedActivitiesState);
+  const isDarkMode = useRecoilValue(darkModeState);
 
   const openModal = () => {
     setAnimationClass('rotate-open');
@@ -29,10 +33,10 @@ function ViewedActivities() {
 
   return (
     <div ref={ViewedActivitiesElement}>
-      <div className="fixed right-[32px] m:right-[14px] bottom-[90px] z-30 w-[40px] h-[40px] bg-gray-200 flex items-center justify-center rounded-xl cursor-pointer hover:bg-gray-300">
+      <div className="fixed right-[32px] m:right-[14px] bottom-[90px] z-30 w-[40px] h-[40px] bg-gray-200 border-[1px] dark:bg-black dark:border-[2px] dark:bg-var-dark2 border-solid dark:border-var-dark3 flex items-center justify-center rounded-xl cursor-pointer hover:bg-gray-300">
         {!isOpen ? (
           <Image
-            src={RecordImg}
+            src={isDarkMode ? HistoryImg_white : HistoryImg_black}
             alt="방문한 체험 표시 이미지"
             width={32}
             height={32}
@@ -41,7 +45,7 @@ function ViewedActivities() {
           />
         ) : (
           <Image
-            src={Ximg}
+            src={isDarkMode ? CloseImg_white : CloseImg_black}
             alt="닫기 이미지"
             width={32}
             height={32}
@@ -52,7 +56,7 @@ function ViewedActivities() {
       </div>
       {isOpen && (
         <div
-          className={`w-[180px] h-[300px] rounded-lg fixed right-[32px] m:right-[14px] bottom-[138px] z-30 bg-white border-solid border-4 border-gray-800 ${faded} flex flex-col items-center px-[10px] pt-[10px] gap-[10px] overflow-y-auto overflow-x-hidden pb-[10px] custom-scrollbar`}
+          className={`w-[180px] h-[300px] rounded-lg fixed right-[32px] m:right-[14px] bottom-[138px] z-30 bg-white border-solid border-4 border-gray-800 ${faded} flex flex-col items-center px-[10px] pt-[10px] gap-[10px] overflow-y-auto overflow-x-hidden pb-[10px] custom-scrollbar dark:border-gray-400 dark:bg-gray-900`}
         >
           <div className="font-sans text-[14px] font-[600]">
             최근 방문한 체험
diff --git a/components/ViewedActivities/ViewedActivity.tsx b/components/ViewedActivities/ViewedActivity.tsx
index 4513a98..b5529c7 100644
--- a/components/ViewedActivities/ViewedActivity.tsx
+++ b/components/ViewedActivities/ViewedActivity.tsx
@@ -12,7 +12,7 @@ function ViewedActivity({ id, bannerImage, title }: ViewedActivityProps) {
 
   return (
     <div
-      className="min-w-[140px] min-h-[80px] rounded bg-gray-200 flex items-center justify-between cursor-pointer block hover:bg-gray-300"
+      className="min-w-[140px] min-h-[80px] rounded bg-gray-200 flex items-center justify-between cursor-pointer block hover:bg-gray-300 dark:bg-gray-600"
       onClick={linkToClick}
     >
       <Image
diff --git a/components/temp.ts b/components/temp.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/hooks/useLogout.ts b/hooks/useLogout.ts
index 04a755f..83b0305 100644
--- a/hooks/useLogout.ts
+++ b/hooks/useLogout.ts
@@ -3,6 +3,7 @@ import useLoginState from './useLoginState';
 import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
 import { userDefaultState, userState } from '@/states/userState';
 import { useQueryClient } from '@tanstack/react-query';
+import socket from '@/server/server';
 
 export default function useLogout() {
   const { setIsLoggedIn } = useLoginState();
@@ -19,6 +20,7 @@ export default function useLogout() {
     sessionStorage.removeItem('refreshToken');
     sessionStorage.removeItem('userId');
     setIsLoggedIn(false);
+    socket.disconnect();
     route.push('/');
   };
 
diff --git a/public/icon/History_black.svg b/public/icon/History_black.svg
new file mode 100644
index 0000000..dc74deb
--- /dev/null
+++ b/public/icon/History_black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#000000"><path d="M478-120q-145.33 0-248.83-100.83-103.5-100.84-108.5-246.5H188q4.67 118 88.17 199.33 83.5 81.33 201.83 81.33 123.67 0 209.5-86.5t85.83-210.16q0-121.67-86.5-205.84-86.5-84.16-208.83-84.16-68.33 0-128 31.33t-102.67 84H354v66.67H134.67V-810h66.66v102q51.67-62 123.84-97 72.16-35 152.83-35 75 0 140.83 28.17 65.84 28.16 115 76.66Q783-686.67 811.5-621.5T840-481.33q0 75-28.5 140.83-28.5 65.83-77.67 114.67-49.16 48.83-115 77.33Q553-120 478-120Zm122.67-195.33-153.34-152V-682H514v187.33l134 132-47.33 47.34Z"/></svg>
\ No newline at end of file
diff --git a/public/icon/History_white.svg b/public/icon/History_white.svg
new file mode 100644
index 0000000..9c82aa4
--- /dev/null
+++ b/public/icon/History_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#FFFFFF"><path d="M478-120q-145.33 0-248.83-100.83-103.5-100.84-108.5-246.5H188q4.67 118 88.17 199.33 83.5 81.33 201.83 81.33 123.67 0 209.5-86.5t85.83-210.16q0-121.67-86.5-205.84-86.5-84.16-208.83-84.16-68.33 0-128 31.33t-102.67 84H354v66.67H134.67V-810h66.66v102q51.67-62 123.84-97 72.16-35 152.83-35 75 0 140.83 28.17 65.84 28.16 115 76.66Q783-686.67 811.5-621.5T840-481.33q0 75-28.5 140.83-28.5 65.83-77.67 114.67-49.16 48.83-115 77.33Q553-120 478-120Zm122.67-195.33-153.34-152V-682H514v187.33l134 132-47.33 47.34Z"/></svg>
\ No newline at end of file
diff --git a/public/icon/chat_close.svg b/public/icon/chat_close.svg
new file mode 100644
index 0000000..751b33f
--- /dev/null
+++ b/public/icon/chat_close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
\ No newline at end of file
diff --git a/public/icon/close_black.svg b/public/icon/close_black.svg
new file mode 100644
index 0000000..9fa34c5
--- /dev/null
+++ b/public/icon/close_black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#000000"><path d="m251.33-204.67-46.66-46.66L433.33-480 204.67-708.67l46.66-46.66L480-526.67l228.67-228.66 46.66 46.66L526.67-480l228.66 228.67-46.66 46.66L480-433.33 251.33-204.67Z"/></svg>
\ No newline at end of file
diff --git a/public/icon/close_white.svg b/public/icon/close_white.svg
new file mode 100644
index 0000000..eeafc65
--- /dev/null
+++ b/public/icon/close_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#FFFFFF"><path d="m251.33-204.67-46.66-46.66L433.33-480 204.67-708.67l46.66-46.66L480-526.67l228.67-228.66 46.66 46.66L526.67-480l228.66 228.67-46.66 46.66L480-433.33 251.33-204.67Z"/></svg>
\ No newline at end of file
diff --git a/public/icon/prev_arrow.svg b/public/icon/prev_arrow.svg
new file mode 100644
index 0000000..b117403
--- /dev/null
+++ b/public/icon/prev_arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>
\ No newline at end of file
diff --git a/public/mockData/roadActivitiesData.json b/public/mockData/roadActivitiesData.json
deleted file mode 100644
index 5e0ac6f..0000000
--- a/public/mockData/roadActivitiesData.json
+++ /dev/null
@@ -1,160 +0,0 @@
-{
-  "activities": [
-    {
-      "id": 1591,
-      "userId": 592,
-      "title": "함께 배우면 즐거운 스트릿댄스",
-      "description": "둠칫 둠칫 두둠칫",
-      "category": "투어",
-      "price": 10000,
-      "address": "서울특별시 강남구 테헤란로 427",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/a.png",
-      "rating": 0,
-      "reviewCount": 0,
-      "createdAt": "2024-07-09T15:20:05.886Z",
-      "updatedAt": "2024-07-09T15:20:05.886Z"
-    },
-    {
-      "id": 1592,
-      "userId": 593,
-      "title": "강남 한복 체험",
-      "description": "전통 한복을 입고 강남을 거닐어요",
-      "category": "문화 예술",
-      "price": 20000,
-      "address": "서울특별시 강남구 봉은사로 102",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/b.png",
-      "rating": 4.5,
-      "reviewCount": 15,
-      "createdAt": "2024-07-08T10:15:00.886Z",
-      "updatedAt": "2024-07-08T10:15:00.886Z"
-    },
-    {
-      "id": 1593,
-      "userId": 594,
-      "title": "강남 쿠킹 클래스",
-      "description": "강남에서 즐기는 한국 요리 클래스",
-      "category": "식음료",
-      "price": 30000,
-      "address": "서울특별시 강남구 논현로 205",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/c.png",
-      "rating": 4.8,
-      "reviewCount": 25,
-      "createdAt": "2024-07-07T14:25:05.886Z",
-      "updatedAt": "2024-07-07T14:25:05.886Z"
-    },
-    {
-      "id": 1594,
-      "userId": 595,
-      "title": "한강 자전거 투어",
-      "description": "한강을 따라 자전거로 서울을 둘러보세요",
-      "category": "관광",
-      "price": 15000,
-      "address": "서울특별시 송파구 올림픽로 300",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/d.png",
-      "rating": 4.9,
-      "reviewCount": 30,
-      "createdAt": "2024-07-06T16:30:05.886Z",
-      "updatedAt": "2024-07-06T16:30:05.886Z"
-    },
-    {
-      "id": 1595,
-      "userId": 596,
-      "title": "서울 야경 투어",
-      "description": "서울의 아름다운 야경을 감상해보세요",
-      "category": "투어",
-      "price": 20000,
-      "address": "서울특별시 중구 명동길 14",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/e.png",
-      "rating": 4.7,
-      "reviewCount": 20,
-      "createdAt": "2024-07-05T18:35:05.886Z",
-      "updatedAt": "2024-07-05T18:35:05.886Z"
-    },
-    {
-      "id": 1596,
-      "userId": 597,
-      "title": "인사동 전통 차 체험",
-      "description": "인사동에서 전통 차를 즐겨보세요",
-      "category": "문화 예술",
-      "price": 12000,
-      "address": "서울특별시 종로구 인사동길 30",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/f.png",
-      "rating": 4.6,
-      "reviewCount": 18,
-      "createdAt": "2024-07-04T12:45:05.886Z",
-      "updatedAt": "2024-07-04T12:45:05.886Z"
-    },
-    {
-      "id": 1597,
-      "userId": 598,
-      "title": "이태원 글로벌 음식 투어",
-      "description": "이태원에서 다양한 세계 음식을 맛보세요",
-      "category": "투어",
-      "price": 25000,
-      "address": "서울특별시 용산구 이태원로 177",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/g.png",
-      "rating": 4.8,
-      "reviewCount": 22,
-      "createdAt": "2024-07-03T17:50:05.886Z",
-      "updatedAt": "2024-07-03T17:50:05.886Z"
-    },
-    {
-      "id": 1598,
-      "userId": 599,
-      "title": "한강 낚시 체험",
-      "description": "한강에서 즐기는 낚시 체험",
-      "category": "투어",
-      "price": 20000,
-      "address": "서울특별시 마포구 마포대로 109",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/h.png",
-      "rating": 4.5,
-      "reviewCount": 10,
-      "createdAt": "2024-07-02T08:20:05.886Z",
-      "updatedAt": "2024-07-02T08:20:05.886Z"
-    },
-    {
-      "id": 1599,
-      "userId": 600,
-      "title": "서울 미술관 투어",
-      "description": "서울의 대표적인 미술관을 둘러보세요",
-      "category": "투어",
-      "price": 18000,
-      "address": "서울특별시 종로구 삼청로 30",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/i.png",
-      "rating": 4.7,
-      "reviewCount": 12,
-      "createdAt": "2024-07-01T11:15:05.886Z",
-      "updatedAt": "2024-07-01T11:15:05.886Z"
-    },
-    {
-      "id": 1600,
-      "userId": 601,
-      "title": "홍대 스트릿 아트 투어",
-      "description": "홍대의 다양한 스트릿 아트를 감상해보세요",
-      "category": "투어",
-      "price": 15000,
-      "address": "서울특별시 마포구 양화로 136",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/j.png",
-      "rating": 4.9,
-      "reviewCount": 28,
-      "createdAt": "2024-06-30T14:40:05.886Z",
-      "updatedAt": "2024-06-30T14:40:05.886Z"
-    },
-    {
-      "id": 1601,
-      "userId": 602,
-      "title": "강남 요가 클래스",
-      "description": "강남에서의 힐링 요가 클래스",
-      "category": "스포츠",
-      "price": 22000,
-      "address": "서울특별시 강남구 도산대로 54",
-      "bannerImageUrl": "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/globalnomad/activity_registration_image/k.png",
-      "rating": 4.6,
-      "reviewCount": 19,
-      "createdAt": "2024-06-29T09:55:05.886Z",
-      "updatedAt": "2024-06-29T09:55:05.886Z"
-    }
-  ],
-  "totalCount": 11,
-  "cursorId": null
-}
diff --git a/server/server.js b/server/server.js
index 3b2cbc3..9497359 100644
--- a/server/server.js
+++ b/server/server.js
@@ -1,4 +1,5 @@
 import io from 'socket.io-client';
 const socket = io('https://rear-ninnetta-codeitsprinter-6a0e09e4.koyeb.app/');
+// const socket = io('http://localhost:5001');
 
 export default socket;
diff --git a/states/mainPageState.tsx b/states/mainPageState.tsx
index 671bb9c..c21df97 100644
--- a/states/mainPageState.tsx
+++ b/states/mainPageState.tsx
@@ -20,7 +20,7 @@ export const mainPageState = atom<mainPageStateProps>({
     itemsPerPage: 8,
     selectedKategorie: '',
     selectedSorted: '',
-    sortedName: '',
+    sortedName: '정렬',
   },
   effects_UNSTABLE: [persistAtom],
 });