diff --git a/front/src/api/server.ts b/front/src/api/server.ts
index 4c797879..d85c42c8 100644
--- a/front/src/api/server.ts
+++ b/front/src/api/server.ts
@@ -70,3 +70,20 @@ export const createServer = async (
     throw new Error("");
   }
 };
+
+// 서버 탈퇴
+export const leaveServer = async (serverId: string, token: string) => {
+  console.log(serverId, token);
+  try {
+    await axiosInstance({
+      ...SERVER_API.DELETE_REQUEST.leaveServer(serverId),
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    console.log("서버탈퇴 성공");
+  } catch (error) {
+    throw new Error("탈퇴실패");
+  }
+};
diff --git a/front/src/api/user.ts b/front/src/api/user.ts
index c5c54773..e11a16be 100644
--- a/front/src/api/user.ts
+++ b/front/src/api/user.ts
@@ -90,6 +90,34 @@ export const searchUser = async (
     console.log(error);
   }
 };
+// 사용자 프로필 수정
+export const editUserProfile = async (
+  userId: string,
+  token: string,
+  editValues: UserTypes.EditProfileFormValues
+) => {
+  try {
+    const response = await axiosInstance({
+      ...USER_API.PATCH_REQUEST.editProfile,
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "multipart/form-data",
+      },
+      data: {
+        userId,
+        email: editValues.email,
+        username: editValues.nickname,
+        password: editValues.password,
+        newPassword: editValues.newPassword,
+      },
+    });
+    console.log(response.data);
+
+    // return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};
 
 // 사용자 프로필 조회
 export const getUserProfile = async (
@@ -188,3 +216,19 @@ export const deleteFriend = async (
     console.log(error);
   }
 };
+
+// 회원 탈퇴
+export const deleteUser = async (userId: string, token: string) => {
+  try {
+    const response = await axiosInstance({
+      ...USER_API.DELETE_REQUEST.deleteAccount(userId),
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    console.log(response.data);
+  } catch (error) {
+    console.log(error);
+  }
+};
diff --git a/front/src/components/Phaser/MapTheme/BeachMap.ts b/front/src/components/Phaser/MapTheme/BeachMap.ts
index 042a51b5..ce061bb1 100644
--- a/front/src/components/Phaser/MapTheme/BeachMap.ts
+++ b/front/src/components/Phaser/MapTheme/BeachMap.ts
@@ -1,16 +1,27 @@
 import { Scene } from "phaser";
-import { createRandomAvatar, randomSkin } from "../Scenes/Avatar";
-import { controlAvatarAnimations } from "../Avatar/controlAvatar";
+import { createRandomAvatar } from "../Scenes/Avatar";
+import { setupCameraControls } from "../Scenes/cameraControls";
 
 export class BeachMap extends Scene {
   private avatar!: Phaser.GameObjects.Container;
   private keyboards!: Phaser.Types.Input.Keyboard.CursorKeys | null;
+  private spaceKey!: Phaser.Input.Keyboard.Key | undefined;
+  private isJumping: boolean = false;
+  private nickname: string;
 
-  constructor() {
+  constructor(nickname: string) {
     super("BeachMap");
+    this.nickname = nickname;
+  }
+
+  init(data: { nickname: string }) {
+    this.nickname = data.nickname;
   }
 
   create() {
+    this.spaceKey = this.input.keyboard?.addKey(
+      Phaser.Input.Keyboard.KeyCodes.SPACE
+    );
     const beachMap = this.make.tilemap({ key: "beach" });
     const beachTilesets = beachMap.addTilesetImage(
       "beach_tilesets",
@@ -33,15 +44,21 @@ export class BeachMap extends Scene {
         faceColor: new Phaser.Display.Color(48, 38, 37, 255),
       });
 
-      this.avatar = createRandomAvatar(this, 550, 350);
+      this.avatar = createRandomAvatar(this, 550, 350, this.nickname);
+      this.cameras.main.startFollow(this.avatar);
+      this.cameras.main.setZoom(2);
+      this.avatar.setDepth(10);
+
       this.add.existing(this.avatar);
       this.avatar.setScale(2);
-      this.cameras.main.startFollow(this.avatar);
 
       if (bottomGroundLayer)
         this.physics.add.collider(this.avatar, bottomGroundLayer);
     }
 
+    setupCameraControls(this, this.avatar);
+    this.isJumping = false;
+
     if (this.input.keyboard) {
       this.keyboards = this.input.keyboard.createCursorKeys();
     } else {
diff --git a/front/src/components/Phaser/MapTheme/CampingMap.ts b/front/src/components/Phaser/MapTheme/CampingMap.ts
index 11f2692c..9d353484 100644
--- a/front/src/components/Phaser/MapTheme/CampingMap.ts
+++ b/front/src/components/Phaser/MapTheme/CampingMap.ts
@@ -7,13 +7,53 @@ export class CampingMap extends Scene {
   private avatar!: Phaser.GameObjects.Container;
   private keyboards!: Phaser.Types.Input.Keyboard.CursorKeys | null;
   private spaceKey!: Phaser.Input.Keyboard.Key | undefined;
+  private chatText!: Phaser.GameObjects.Text | null;
   private isJumping: boolean = false;
+  private nickname: string = "";
+  private boundHandleChatMessage: (event: Event) => void;
 
-  constructor() {
+  constructor(nickname: string) {
     super("CampingMap");
+    this.nickname = nickname;
+    this.boundHandleChatMessage = this.handleChatMessage.bind(this);
+  }
+
+  handleChatMessage = (event: Event) => {
+    const customEvent = event as CustomEvent<string>;
+    const message = customEvent.detail;
+
+    if (!this.scene.isActive() || !this.avatar) {
+      return;
+    }
+
+    if (this.chatText) {
+      this.chatText.destroy();
+    }
+
+    this.chatText = this.add.text(this.avatar.x, this.avatar.y - 50, message, {
+      font: "14px Arial",
+      color: "#ffffff",
+      backgroundColor: "#000000",
+      padding: { x: 10, y: 5 },
+    });
+
+    this.chatText.setOrigin(0.5, 1);
+
+    this.time.delayedCall(3000, () => {
+      if (this.chatText) {
+        this.chatText.destroy();
+        this.chatText = null;
+      }
+    });
+  };
+
+  init(data: { nickname: string }) {
+    this.nickname = data.nickname || "Guest";
   }
 
   create() {
+    window.addEventListener("chatMessage", this.boundHandleChatMessage);
+    // this.avatar = this.add.container(300, 300);
     this.spaceKey = this.input.keyboard?.addKey(
       Phaser.Input.Keyboard.KeyCodes.SPACE
     );
@@ -22,7 +62,6 @@ export class CampingMap extends Scene {
       "camping_tilesets",
       "camping_tilesets"
     );
-
     if (campingTilesets) {
       const layers = [
         "bottom_ground_layer",
@@ -42,9 +81,9 @@ export class CampingMap extends Scene {
         "rv_layer",
       ];
 
-      this.avatar = createRandomAvatar(this, 520, 350);
-
+      this.avatar = createRandomAvatar(this, 520, 350, this.nickname);
       this.add.existing(this.avatar);
+
       this.cameras.main.startFollow(this.avatar);
       this.cameras.main.setZoom(2);
       this.avatar.setDepth(10);
@@ -140,4 +179,8 @@ export class CampingMap extends Scene {
       );
     }
   }
+
+  shutdown() {
+    window.removeEventListener("chatMessage", this.boundHandleChatMessage);
+  }
 }
diff --git a/front/src/components/Phaser/Scenes/Avatar.ts b/front/src/components/Phaser/Scenes/Avatar.ts
index 573e6b9c..0a6e7a05 100644
--- a/front/src/components/Phaser/Scenes/Avatar.ts
+++ b/front/src/components/Phaser/Scenes/Avatar.ts
@@ -13,7 +13,8 @@ export const randomSkin = getRandomAssets(skins);
 export const createRandomAvatar = (
   scene: Scene,
   x: number,
-  y: number
+  y: number,
+  nickname: string
 ): Phaser.GameObjects.Container => {
   if (scene.textures.exists(randomSkin)) {
     const avatarContainer = scene.add.container(x, y);
@@ -85,7 +86,7 @@ export const createRandomAvatar = (
     const userNickName = scene.add.text(
       0,
       skinSprite.height / 2 + 10,
-      "nickname",
+      nickname,
       {
         font: "10px Arial",
         color: "#ffffff",
diff --git a/front/src/components/Phaser/ServerMap.tsx b/front/src/components/Phaser/ServerMap.tsx
index bf380791..01bcb296 100644
--- a/front/src/components/Phaser/ServerMap.tsx
+++ b/front/src/components/Phaser/ServerMap.tsx
@@ -7,31 +7,43 @@ import { EventBus } from "./EventBus";
 import { ServerMapProps, ServerMapTypes } from "../../types/map";
 import VideoCallBoxList from "../VideoCall/VideoCallBoxList";
 import VideoCallToolBar from "../VideoCall/VideoCallToolBar";
+import { useThemeStore } from "@/store/useThemeStore";
+import useUserProfile from "@/hooks/user/useUserProfile";
+import ChatInput from "../organisms/ChatBox";
+import ChatBox from "../organisms/ChatBox";
 
 export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
-  function ServerMap({ currentActiveScene, selectedTheme }, ref) {
+  function ServerMap({ currentActiveScene }, ref) {
     const mapRef = useRef<Phaser.Game | null>(null!);
+    const nickname = useUserProfile();
 
+    console.log(nickname.userProfile?.data.username);
+
+    const selectedTheme = useThemeStore((state) => state.selectedTheme);
     useLayoutEffect(() => {
-      if (mapRef.current === null) {
-        mapRef.current = StartGame(selectedTheme, "map-container");
+      if (mapRef.current) {
+        mapRef.current.destroy(true);
+        mapRef.current = null;
+      }
 
-        if (typeof ref === "function") {
-          ref({ server: mapRef.current, scene: null });
-        } else if (ref) {
-          ref.current = { server: mapRef.current, scene: null };
-        }
+      mapRef.current = StartGame(
+        selectedTheme,
+        "map-container",
+        nickname.userProfile?.data.username || ""
+      );
+      if (typeof ref === "function") {
+        ref({ server: mapRef.current, scene: null });
+      } else if (ref) {
+        ref.current = { server: mapRef.current, scene: null };
       }
 
       return () => {
         if (mapRef.current) {
           mapRef.current.destroy(true);
-          if (mapRef.current !== null) {
-            mapRef.current = null;
-          }
+          mapRef.current = null;
         }
       };
-    }, [ref]);
+    }, [selectedTheme, ref]);
 
     useEffect(() => {
       EventBus.on("current-scene-ready", (scene_instance: Phaser.Scene) => {
@@ -52,10 +64,9 @@ export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
 
     return (
       <div id="map-container">
-        <div className="absolute flex left-36 top-20">
-          <VideoCallBoxList />
+        <div className="absolute">
+          <ChatBox />
         </div>
-
         <div className="fixed bottom-[20px] left-1/2 -translate-x-1/3">
           <VideoCallToolBar />
         </div>
diff --git a/front/src/components/Phaser/main.ts b/front/src/components/Phaser/main.ts
index 1e9f47ff..7d325b45 100644
--- a/front/src/components/Phaser/main.ts
+++ b/front/src/components/Phaser/main.ts
@@ -34,15 +34,27 @@ const config: Phaser.Types.Core.GameConfig = {
   },
 };
 
-export const EnterServer = (theme: ThemeType | null, parent: string) => {
-  let scenes: Phaser.Types.Scenes.SceneType[] = [];
+export const EnterServer = (
+  theme: ThemeType | null,
+  parent: string,
+  nickname: string
+) => {
+  const game = new Game({ ...config, parent, scene: [] });
 
   if (theme?.name === "숲") {
-    scenes = [CampingPreloader, CampingMap];
+    game.scene.add("CampingPreloader", CampingPreloader, true);
+    game.scene.add("CampingMap", CampingMap, false);
+
+    game.scene.start("CampingPreloader");
+    game.scene.start("CampingMap", { nickname });
   } else if (theme?.name === "오피스") {
-    scenes = [BeachPreloader, BeachMap];
+    game.scene.add("BeachPreloader", BeachPreloader, true);
+    game.scene.add("BeachMap", BeachMap, false);
+
+    game.scene.start("BeachPreloader");
+    game.scene.start("BeachMap", { nickname });
   }
-  return new Game({ ...config, parent, scene: scenes });
+  return game;
 };
 
 export default EnterServer;
diff --git a/front/src/components/atoms/BookmarkStar.tsx b/front/src/components/atoms/BookmarkStar.tsx
index f36fc891..8df10e04 100644
--- a/front/src/components/atoms/BookmarkStar.tsx
+++ b/front/src/components/atoms/BookmarkStar.tsx
@@ -17,7 +17,7 @@ const FavoriteStar: React.FC<BookmarkStarProps> = ({ id }) => {
   };
   return (
     <div onClick={handleBookmarkClick}>
-      {!isBookmark ? <IoStarOutline /> : <IoStar />}
+      {!isBookmark ? <IoStarOutline size={28} /> : <IoStar size={28} />}
     </div>
   );
 };
diff --git a/front/src/components/atoms/Button.tsx b/front/src/components/atoms/Button.tsx
index cd93d370..64311f1a 100644
--- a/front/src/components/atoms/Button.tsx
+++ b/front/src/components/atoms/Button.tsx
@@ -4,8 +4,9 @@ type ButtonProps<
   children: React.ReactNode;
   icon?: React.ReactNode;
   onClick?: (e: E) => void;
-  color: string;
+  style?: string;
   disabled?: boolean;
+  type?: "button" | "submit" | "reset";
 };
 
 // TODO: 스타일 변경
@@ -13,13 +14,15 @@ const Button: React.FC<ButtonProps> = ({
   children,
   icon,
   onClick,
-  color,
+  style,
+  type,
   disabled = false,
 }) => {
   return (
     <button
-      className={`flex justify-center items-center text-center ${color} px-3 py-1.5 rounded-md w-full`}
+      className={`flex justify-center items-center gap-1 text-center px-3 py-2 rounded-md w-full font-bold ${style}`}
       onClick={onClick}
+      type={type}
       disabled={disabled}>
       {icon}
       {children}
diff --git a/front/src/components/atoms/Divider.tsx b/front/src/components/atoms/Divider.tsx
index 20bcd95b..43ef0e24 100644
--- a/front/src/components/atoms/Divider.tsx
+++ b/front/src/components/atoms/Divider.tsx
@@ -1,7 +1,11 @@
 import React from "react";
 
-const Divider = () => {
-  return <div className="w-full h-[1px] bg-black m-3"></div>;
+interface DividerProps {
+  style: string;
+}
+
+const Divider: React.FC<DividerProps> = ({ style }) => {
+  return <div className={`w-full h-[.5px] ${style}`}></div>;
 };
 
 export default Divider;
diff --git a/front/src/components/atoms/Message.tsx b/front/src/components/atoms/Message.tsx
index 76251b32..f1017876 100644
--- a/front/src/components/atoms/Message.tsx
+++ b/front/src/components/atoms/Message.tsx
@@ -6,7 +6,7 @@ type MessageProps = {
 
 // TODO: 스타일 변경
 const Message: React.FC<MessageProps> = ({ value }) => {
-  return <p className="text-red-500">{value}</p>;
+  return <p className="text-error text-small font-bold">{value}</p>;
 };
 
 export default Message;
diff --git a/front/src/components/atoms/TabButton.tsx b/front/src/components/atoms/TabButton.tsx
index 5c65ca48..4ceb7da5 100644
--- a/front/src/components/atoms/TabButton.tsx
+++ b/front/src/components/atoms/TabButton.tsx
@@ -8,8 +8,10 @@ const TabButton: React.FC<TabButtonProps> = ({ label, isActive, onClick }) => {
   return (
     <button
       onClick={onClick}
-      className={`px-4 py-2 text-sm font-medium rounded-md transition ${
-        isActive ? "bg-blue-500" : "bg-slate-100"
+      className={`px-4 py-2 text-p font-semibold rounded-md transition duration-300 hover:bg-secondary ${
+        isActive
+          ? "bg-primary text-white hover:text-primary "
+          : "bg-quaternary  hover:text-primary"
       }`}>
       {label}
     </button>
diff --git a/front/src/components/atoms/Text.tsx b/front/src/components/atoms/Text.tsx
index f89f74cc..12b147ab 100644
--- a/front/src/components/atoms/Text.tsx
+++ b/front/src/components/atoms/Text.tsx
@@ -2,12 +2,11 @@ import React from "react";
 
 type TextProps = {
   children: React.ReactNode;
-  color: string;
-  size: string;
+  styles: string;
 };
 
-const Text: React.FC<TextProps> = ({ children, color, size }) => {
-  return <p className={`${color} ${size}`}>{children}</p>;
+const Text: React.FC<TextProps> = ({ children, styles }) => {
+  return <p className={`${styles}`}>{children}</p>;
 };
 
 export default Text;
diff --git a/front/src/components/atoms/TextInput.tsx b/front/src/components/atoms/TextInput.tsx
index 2dd00faf..c95eae8b 100644
--- a/front/src/components/atoms/TextInput.tsx
+++ b/front/src/components/atoms/TextInput.tsx
@@ -7,6 +7,7 @@ type TextInputProps = {
   label?: string;
   placeholder?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  style?: string;
 };
 
 // TODO: 스타일 변경
@@ -17,11 +18,12 @@ const TextInput: React.FC<TextInputProps> = ({
   onChange,
   placeholder,
   name,
+  style,
 }) => {
   const id = `input-${label || Math.random().toString(36).substring(2, 5)}`;
   return (
-    <label htmlFor={id}>
-      {label && <span className="">{label}</span>}
+    <label htmlFor={id} className={`${style}`}>
+      {label && <span>{label}</span>}
       <input
         id={id}
         name={name}
@@ -29,7 +31,7 @@ const TextInput: React.FC<TextInputProps> = ({
         value={value}
         onChange={onChange}
         placeholder={placeholder}
-        className="bg-slate-200 rounded-md p-2 w-full"
+        className="text-black bg-quaternary rounded-md p-2 w-full focus:border-tertiary focus:border-2 focus:outline-none"
       />
     </label>
   );
diff --git a/front/src/components/molecules/AddFriendForm.tsx b/front/src/components/molecules/AddFriendForm.tsx
index 160a84a5..7b3b3cdf 100644
--- a/front/src/components/molecules/AddFriendForm.tsx
+++ b/front/src/components/molecules/AddFriendForm.tsx
@@ -4,9 +4,9 @@ import FriendItem from "./FriendItem";
 import { deleteFriend, requestFriend, searchUser } from "@/api/user";
 import { useLoginStore } from "@/store/useLoginStore";
 import { SearchUsers } from "@/types/user";
-import Button from "../atoms/Button";
 import useFriendsList from "@/hooks/user/useFriendsList";
 import Cookies from "js-cookie";
+import { HiUser, HiUserAdd, HiUserRemove } from "react-icons/hi";
 
 const AddFriendForm = () => {
   const [searchValue, setSearchValue] = useState("");
@@ -15,6 +15,8 @@ const AddFriendForm = () => {
   const { friends } = useFriendsList();
   const { accessToken } = useLoginStore();
 
+  console.log(userId);
+
   const handleSearchFriend = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     try {
@@ -55,40 +57,57 @@ const AddFriendForm = () => {
         <FormField
           value={searchValue}
           name="search friend"
+          placeholder="회원검색"
+          style={`text-black font-bold`}
           onChange={(e) => {
             setSearchValue(e.target.value);
           }}
           message=""
         />
       </form>
-      <ul>
-        {searchResults.length > 0 &&
-          searchResults.map((results) => (
-            <div
-              className="flex items-center justify-between gap-3"
-              key={results.userId}>
-              <FriendItem
-                username={results.username}
-                onAvatarClick={() => {}}
-              />
 
-              {friends?.friends.some(
-                (friend) => friend.friendId === results.userId
-              ) ? (
-                <Button
-                  color="bg-sky-200"
-                  onClick={() => handleDeleteFriend(results.userId)}>
-                  친구끊기
-                </Button>
-              ) : (
-                <Button
-                  color="bg-sky-200"
-                  onClick={() => handleRequestFriend(results.userId)}>
-                  친구요청
-                </Button>
-              )}
-            </div>
-          ))}
+      <ul className="mt-5">
+        {searchResults.length > 0 ? (
+          searchResults
+            .filter((results) => String(results.userId) !== String(userId))
+            .map((result) => {
+              const isFriend = friends?.friends.some(
+                (friend) => friend.friendId === result.userId
+              );
+
+              return (
+                <div
+                  className="flex items-center justify-between gap-3"
+                  key={result.userId}>
+                  <FriendItem
+                    username={result.username}
+                    email={result.email}
+                    userId={result.userId}
+                    selectecUserId={result.userId}
+                    onAvatarClick={() => {}}
+                  />
+
+                  {isFriend ? (
+                    <HiUserRemove
+                      className="bg-red-500 text-white px-3 py-1 rounded"
+                      size={40}
+                      onClick={() => handleDeleteFriend(result.userId)}
+                    />
+                  ) : (
+                    <HiUserAdd
+                      className="bg-primary text-blue-50 px-2 py-1 rounded cursor-pointer"
+                      size={40}
+                      onClick={() => handleRequestFriend(result.userId)}
+                    />
+                  )}
+                </div>
+              );
+            })
+        ) : (
+          <span className="flex justify-center font-bold text-black">
+            검색 결과가 없습니다.
+          </span>
+        )}
       </ul>
     </div>
   );
diff --git a/front/src/components/molecules/AvatarWithAddServer.tsx b/front/src/components/molecules/AvatarWithAddServer.tsx
index 37655c28..044fd114 100644
--- a/front/src/components/molecules/AvatarWithAddServer.tsx
+++ b/front/src/components/molecules/AvatarWithAddServer.tsx
@@ -13,9 +13,28 @@ const AvatarWithAddServer: React.FC<AvatarWithAddServerProps> = ({
   onAddServerClick,
 }) => {
   return (
-    <div className="flex flex-col gap-3">
-      <Avatar name={nickname} onClick={onAvatarClick} variant="beam" />
-      <IoAddCircle fontSize="48" onClick={onAddServerClick} />
+    <div className="flex flex-col gap-2 group-hover:items-start w-full p-2">
+      <div
+        className="flex items-center ml-1 gap-2 cursor-pointer"
+        onClick={onAvatarClick}>
+        <Avatar
+          name={nickname}
+          variant="beam"
+          size={42}
+          className="transition duration-300 hover:opacity-80 shadow-sm"
+        />
+        <span className="hidden group-hover:inline-block text-small font-semibold">
+          {nickname}
+        </span>
+      </div>
+      <div
+        className="flex items-center gap-2 cursor-pointer"
+        onClick={onAddServerClick}>
+        <IoAddCircle fontSize="48" />
+        <span className="hidden group-hover:inline-block text-small font-semibold">
+          서버 추가
+        </span>
+      </div>
     </div>
   );
 };
diff --git a/front/src/components/molecules/CategorySelector.tsx b/front/src/components/molecules/CategorySelector.tsx
index bee356f7..96ba2333 100644
--- a/front/src/components/molecules/CategorySelector.tsx
+++ b/front/src/components/molecules/CategorySelector.tsx
@@ -19,10 +19,8 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({
 
   return (
     <div className="flex flex-col">
-      <Text color="" size="">
-        카테고리
-      </Text>
-      <div className="flex flex-row justify-center items-center gap-3">
+      <Text styles="text-h6 font-bold text-black">카테고리</Text>
+      <div className="flex flex-row justify-center items-center gap-3 text-h6 font-bold">
         {categories?.map((category) => (
           <RadioButton
             key={category.id}
diff --git a/front/src/components/molecules/ChatInput.tsx b/front/src/components/molecules/ChatInput.tsx
deleted file mode 100644
index b391473a..00000000
--- a/front/src/components/molecules/ChatInput.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import useChatInputStore from "@/store/useChatInputStore";
-import TextInput from "../atoms/TextInput";
-import { BsSend } from "react-icons/bs";
-
-// TODO:
-const ChatInput = () => {
-  const chatInputValue = useChatInputStore((state) => state.inputValue);
-  const setChatInputValue = useChatInputStore((state) => state.setInputValue);
-
-  const handleSendMessage = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (chatInputValue.trim() !== "") {
-      setChatInputValue(chatInputValue);
-
-      const event = new CustomEvent("updateBalloonText", {
-        detail: chatInputValue,
-      });
-      window.dispatchEvent(event);
-
-      setChatInputValue("");
-    }
-  };
-
-  const onChangeChat = () => {
-    // TODO: 채팅 내용
-  };
-
-  return (
-    <form onSubmit={handleSendMessage}>
-      <TextInput value="" onChange={onChangeChat} name="chat" />
-      <BsSend />
-    </form>
-  );
-};
-
-export default ChatInput;
diff --git a/front/src/components/molecules/FormField.tsx b/front/src/components/molecules/FormField.tsx
index 4c78c35d..933f0474 100644
--- a/front/src/components/molecules/FormField.tsx
+++ b/front/src/components/molecules/FormField.tsx
@@ -9,6 +9,7 @@ type FormFieldProps = {
   placeholder?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   message: string;
+  style?: string;
 };
 
 const FormField: React.FC<FormFieldProps> = ({
@@ -19,9 +20,10 @@ const FormField: React.FC<FormFieldProps> = ({
   onChange,
   message,
   name,
+  style,
 }) => {
   return (
-    <div>
+    <div className="flex flex-col gap-1">
       <TextInput
         value={value}
         name={name}
@@ -29,6 +31,7 @@ const FormField: React.FC<FormFieldProps> = ({
         label={label}
         placeholder={placeholder}
         onChange={onChange}
+        style={style}
       />
       <Message value={message} />
     </div>
diff --git a/front/src/components/molecules/FriendItem.tsx b/front/src/components/molecules/FriendItem.tsx
index 16896d83..05139667 100644
--- a/front/src/components/molecules/FriendItem.tsx
+++ b/front/src/components/molecules/FriendItem.tsx
@@ -3,19 +3,30 @@ import React from "react";
 
 type FriendItemProps = {
   username: string;
+  email?: string;
+  userId: string;
+  selectecUserId: string;
   onAvatarClick: () => void;
 };
 
-const FriendItem: React.FC<FriendItemProps> = ({ username, onAvatarClick }) => {
+const FriendItem: React.FC<FriendItemProps> = ({
+  username,
+  email,
+  userId,
+  selectecUserId,
+  onAvatarClick,
+}) => {
   return (
     <li className="flex items-center gap-3">
       <Avatar
         name={username}
+        email={email}
         variant="beam"
         onClick={onAvatarClick}
+        selectecUserId={selectecUserId}
         size={40}
       />
-      <span>{username}</span>
+      <span className="text-p font-bold">{username}</span>
     </li>
   );
 };
diff --git a/front/src/components/molecules/PreviewServerMap.tsx b/front/src/components/molecules/PreviewServerMap.tsx
deleted file mode 100644
index 647b4479..00000000
--- a/front/src/components/molecules/PreviewServerMap.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import useEmblaCarousel from "embla-carousel-react";
-import Autoplay from "embla-carousel-autoplay";
-import { useThemeStore } from "@/store/useThemeStore";
-import { useNavigate } from "react-router";
-import { ThemeType } from "@/types/server";
-
-const PreviewServerMap = () => {
-  const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]);
-  const setTheme = useThemeStore((state) => state.setTheme);
-  const navigate = useNavigate();
-
-  const onClickTheme = (selectedtheme: ThemeType, themeTitle: string) => {
-    setTheme(selectedtheme);
-    navigate(`/${themeTitle}`);
-  };
-
-  return (
-    <div className="embla ">
-      <div className="overflow-hidden" ref={emblaRef}>
-        <div className="embla__container rounded-xl">
-          <div
-            className="embla__slide bg-camping min-h-72 cursor-pointer bg-no-repeat bg-cover bg-center"
-            onClick={() =>
-              onClickTheme({ id: "SERVER_THEME_001", name: "숲" }, "camping")
-            }></div>
-          <div
-            className="embla__slide bg-beach min-h-72 cursor-pointer bg-no-repeat bg-cover bg-center"
-            onClick={() =>
-              onClickTheme({ id: "SERVER_THEME_002", name: "오피스" }, "beach")
-            }></div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PreviewServerMap;
diff --git a/front/src/components/molecules/ServerCardItem.tsx b/front/src/components/molecules/ServerCardItem.tsx
index adf20334..4f6cf908 100644
--- a/front/src/components/molecules/ServerCardItem.tsx
+++ b/front/src/components/molecules/ServerCardItem.tsx
@@ -1,8 +1,10 @@
-import Avatar from "boring-avatars";
 import React from "react";
 import Text from "../atoms/Text";
+import FavoriteStar from "../atoms/BookmarkStar";
+import Button from "../atoms/Button";
 
 type ServerCardItemProps = {
+  id: string;
   serverName: string;
   categories: { id: string; name: string }[] | undefined;
 };
@@ -10,18 +12,35 @@ type ServerCardItemProps = {
 const ServerCardItem: React.FC<ServerCardItemProps> = ({
   serverName,
   categories,
+  id,
 }) => {
   return (
-    <div className="flex-1 basis-1/4 border">
-      <Avatar name={serverName} variant="beam" square height={100}>
-        <Avatar />
-      </Avatar>
-      <Text color="black" size="23">
-        {serverName}
-        {categories
-          ? ` - ${categories.map((category) => category.name).join(", ")}`
-          : ""}
-      </Text>
+    <div className="relative group border-[1px] border-gray rounded-md h-36 p-2 overflow-hidden shadow-sm">
+      <div
+        className="absolute inset-0 bg-gradient-to-r from-primary  to-tertiary 
+              opacity-0 group-hover:opacity-30 
+              bg-[length:200%_200%] group-hover:bg-[length:100%_100%] 
+              transition-all duration-500 "></div>
+      <div className="flex flex-col justify-between z-10 p-3">
+        <div>
+          <div className="flex justify-between items-center">
+            <Text styles="text-h6 text-white font-bold text-black">
+              {serverName}
+            </Text>
+            <FavoriteStar id={id} />
+          </div>
+          <Text styles="text-small text-white">
+            {categories &&
+              `${categories.map((category) => category.name).join(", ")}`}
+          </Text>
+        </div>
+        <span
+          className="absolute bottom-0 right-2 opacity-0 
+           group-hover:translate-y-0 group-hover:opacity-100 
+           transition-all duration-500 text-white px-4 py-2 rounded-lg shadow-lg">
+          입장하기
+        </span>
+      </div>
     </div>
   );
 };
diff --git a/front/src/components/molecules/ServerInfo.tsx b/front/src/components/molecules/ServerInfo.tsx
index 4b6866f2..c8d4a44a 100644
--- a/front/src/components/molecules/ServerInfo.tsx
+++ b/front/src/components/molecules/ServerInfo.tsx
@@ -3,6 +3,8 @@ import Text from "../atoms/Text";
 import Button from "../atoms/Button";
 import { CategoriesType } from "@/types/server";
 import FavoriteStar from "../atoms/BookmarkStar";
+import { useLoginStore } from "@/store/useLoginStore";
+import { leaveServer } from "@/api/server";
 
 type ServerInfoProps = {
   hostName: string;
@@ -19,22 +21,36 @@ const ServerInfo: React.FC<ServerInfoProps> = ({
   onDelete,
   onEnter,
 }) => {
+  const { accessToken } = useLoginStore();
+
+  const handleOnLeaveServer = async () => {
+    try {
+      if (serverId && accessToken) {
+        await leaveServer(serverId, accessToken);
+
+        console.log("서버탈퇴 성공");
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
   return (
     <div>
-      <Text color="red" size="23">
-        {categories?.map((category) => category.name).join(", ")}
-      </Text>
-      <Text color="red" size="23">
-        {hostName}
+      <Text styles="text-p font-bold text-black">
+        카테고리: {categories?.map((category) => category.name).join(", ")}
       </Text>
+      <Text styles="text-p font-bold text-black">서버장: {hostName}</Text>
       <FavoriteStar id={serverId} />
 
-      <Button onClick={onDelete} color="red">
+      <Button onClick={onDelete} style={`bg-primary text-white`}>
         서버삭제
       </Button>
-      <Button onClick={onEnter} color="red">
+      <Button onClick={onEnter} style={`bg-primary text-white`}>
         서버입장
       </Button>
+      <Button onClick={handleOnLeaveServer} style={`bg-primary text-white`}>
+        서버탈퇴
+      </Button>
     </div>
   );
 };
diff --git a/front/src/components/molecules/ServerList.tsx b/front/src/components/molecules/ServerList.tsx
index 92380969..1208a1dc 100644
--- a/front/src/components/molecules/ServerList.tsx
+++ b/front/src/components/molecules/ServerList.tsx
@@ -1,65 +1,70 @@
 import useServers from "@/hooks/server/useServers";
 import Avatar from "boring-avatars";
 import Modal from "../organisms/Modal";
-import useModal from "@/hooks/common/useModal";
 import ServerInfo from "./ServerInfo";
 import { useState } from "react";
 import { GetServerType } from "@/types/server";
 import { deleteServer } from "@/api/server";
 import { useLoginStore } from "@/store/useLoginStore";
 import { useNavigate } from "react-router";
+import { useThemeStore } from "@/store/useThemeStore";
+import useModalStore from "@/store/useModalStore";
 
 const ServerList: React.FC = () => {
   const { accessToken } = useLoginStore();
   const { servers } = useServers();
-  const { isOpen, closeModal, openModal } = useModal();
   const [selectedServer, setSelectedServer] = useState<GetServerType[]>();
   const navigate = useNavigate();
+  const { selectedTheme, setSelectedTheme } = useThemeStore();
+  const { openModal, closeModal, modalType, isOpen } = useModalStore();
 
-  console.log(servers);
   const openSelectedServer = (id: string) => {
-    openModal("server");
+    openModal("showServer");
     const filtered = servers?.filter((server) => server.id === id);
     setSelectedServer(filtered);
   };
 
   const enterServerHandler = (id: string) => {
     navigate(`server/${id}`);
-    closeModal("server");
+    closeModal();
+    const server = servers?.find((server) => server.id === id);
+    if (server) {
+      setSelectedTheme(server.theme);
+    }
   };
 
   const deleteServerHandler = (id: string) => {
     deleteServer(id, accessToken);
-    closeModal("server");
+    closeModal();
   };
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col ml-1 group-hover:items-start gap-3">
       {servers?.map((server) => (
-        <Avatar
+        <div
+          className="flex items-center gap-2 cursor-pointer"
           key={server.id}
-          name={server.name}
-          variant="bauhaus"
-          size={40}
-          onClick={() => openSelectedServer(server.id)}
-        />
+          onClick={() => openSelectedServer(server.id)}>
+          <Avatar name={server.name} variant="bauhaus" size={40} />
+          <span className="hidden group-hover:inline-block text-small font-semibold">
+            {server.name}
+          </span>
+        </div>
       ))}
 
-      {selectedServer?.map((server) => (
-        <Modal
-          key={server.id}
-          title={server.name}
-          isOpen={isOpen}
-          closeModal={() => closeModal("server")}>
-          <ServerInfo
-            hostName={server.hostName}
-            serverId={server.id}
-            categories={server.categories}
-            onDelete={() => deleteServerHandler(server.id)}
-            onEnter={() => enterServerHandler(server.id)}
-          />
-        </Modal>
-      ))}
+      {isOpen &&
+        modalType === "showServer" &&
+        selectedServer?.map((server) => (
+          <Modal key={server.id} title={server.name}>
+            <ServerInfo
+              hostName={server.hostName}
+              serverId={server.id}
+              categories={server.categories}
+              onDelete={() => deleteServerHandler(server.id)}
+              onEnter={() => enterServerHandler(server.id)}
+            />
+          </Modal>
+        ))}
     </div>
   );
 };
diff --git a/front/src/components/molecules/SideBarHaeder.tsx b/front/src/components/molecules/SideBarHaeder.tsx
index 83bea99f..578ec3f0 100644
--- a/front/src/components/molecules/SideBarHaeder.tsx
+++ b/front/src/components/molecules/SideBarHaeder.tsx
@@ -11,10 +11,14 @@ const SideBarHaeder: React.FC<SideBarHeaderProps> = ({
 }) => {
   return (
     <div className="flex justify-between items-center mb-5 max-h-12">
-      {activeSideBar === "friends" ? <p>Friends</p> : <p>Massages</p>}
+      {activeSideBar === "friends" ? (
+        <span className="text-h6 font-bold">Friends</span>
+      ) : (
+        <span className="text-h6 font-bold">Massages</span>
+      )}
       <IoCloseCircle
         onClick={onClose}
-        className="text-3xl text-white hover:text-red-500"
+        className="text-h4 text-black cursor-pointer transition duration-300 hover:text-red-500"
       />
     </div>
   );
diff --git a/front/src/components/molecules/TabHeader.tsx b/front/src/components/molecules/TabHeader.tsx
index e5b43aea..b4bc2205 100644
--- a/front/src/components/molecules/TabHeader.tsx
+++ b/front/src/components/molecules/TabHeader.tsx
@@ -12,7 +12,7 @@ const TabHeader: React.FC<TabHeaderProps> = ({
   onTabChange,
 }) => {
   return (
-    <div>
+    <div className="flex flex-row gap-3">
       {tabs.map((tab) => (
         <TabButton
           key={tab.id}
diff --git a/front/src/components/molecules/ThemeSelector.tsx b/front/src/components/molecules/ThemeSelector.tsx
index 99b732c2..63f0c92b 100644
--- a/front/src/components/molecules/ThemeSelector.tsx
+++ b/front/src/components/molecules/ThemeSelector.tsx
@@ -24,10 +24,8 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = ({
 }) => {
   return (
     <div className="flex flex-col">
-      <Text color="" size="">
-        테마
-      </Text>
-      <div className="flex flex-row justify-center items-center gap-3">
+      <Text styles="text-h6 font-bold text-black">맵 테마</Text>
+      <div className="flex flex-row justify-center items-center gap-3 text-h6 font-bold">
         {themeObj.map((theme) => (
           <RadioButton
             key={theme.id}
diff --git a/front/src/components/molecules/UserProfile.tsx b/front/src/components/molecules/UserProfile.tsx
index b5b2241f..a9f36fe3 100644
--- a/front/src/components/molecules/UserProfile.tsx
+++ b/front/src/components/molecules/UserProfile.tsx
@@ -1,50 +1,103 @@
 import Avatar from "boring-avatars";
-import React from "react";
-import { RiDeleteBin2Fill, RiEditCircleFill } from "react-icons/ri";
+import React, { useEffect } from "react";
+import { RiEditCircleFill } from "react-icons/ri";
 import Text from "../atoms/Text";
 import Button from "../atoms/Button";
+import Divider from "../atoms/Divider";
+import { useLocation, useNavigate } from "react-router";
+import { HiUserRemove } from "react-icons/hi";
+import { deleteFriend } from "@/api/user";
+import { useLoginStore } from "@/store/useLoginStore";
+import Cookies from "js-cookie";
+import useModalStore from "@/store/useModalStore";
 
 type UserProfileProps = {
   nickname: string | undefined;
   isCurrentUser: boolean;
-  onEditProfile?: () => void;
+  email?: string | undefined;
+  selectedUserId: string | undefined;
   onLogout?: () => void;
-  onDeleteFriend?: () => void;
   onSendDM?: () => void;
 };
 
 const UserProfile: React.FC<UserProfileProps> = ({
   nickname,
+  email,
+  selectedUserId,
   isCurrentUser,
-  onEditProfile,
   onLogout,
-  onDeleteFriend,
   onSendDM,
 }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { closeModal } = useModalStore();
+  const userId = Cookies.get("userId");
+  const { accessToken } = useLoginStore();
+
+  const handleNavigate = () => {
+    navigate("/profile");
+  };
+
+  const handleOnDeleteFriend = async () => {
+    try {
+      if (userId && selectedUserId) {
+        await deleteFriend(userId, selectedUserId, accessToken);
+
+        console.log(userId, selectedUserId, accessToken);
+      }
+      console.log("친구 삭제 성공");
+    } catch (error) {
+      throw new Error("친구 삭제에 실패했습니다.");
+    }
+  };
+
+  useEffect(() => {
+    if (location.pathname === "/profile") {
+      closeModal();
+    }
+  }, [location.pathname, closeModal]);
+
   return (
-    <div>
-      <div className="flex ">
-        <Avatar name={nickname} size={48} variant="beam" />
-        <Text color="red" size="xl">
-          {nickname}
-        </Text>
-      </div>
+    <div className="flex flex-col gap-4">
+      <div className="flex justify-between items-center">
+        <div className="flex items-center">
+          <Avatar name={nickname} size={48} variant="beam" />
+          <div className="flex flex-col ml-2">
+            <Text styles="text-p font-bold text-black">{nickname}</Text>
+            <Text styles="text-small font-bold text-black">{email}</Text>
+          </div>
+        </div>
 
-      <div>
-        {isCurrentUser ? (
-          <RiEditCircleFill onClick={onEditProfile} />
-        ) : (
-          <RiDeleteBin2Fill onClick={onDeleteFriend} />
-        )}
+        <div>
+          {isCurrentUser ? (
+            <Button
+              onClick={handleNavigate}
+              icon={<RiEditCircleFill />}
+              style={`bg-quaternary text-primary transition duration-300 hover:bg-primary hover:text-white`}>
+              프로필 수정
+            </Button>
+          ) : (
+            <Button
+              onClick={handleOnDeleteFriend}
+              icon={<HiUserRemove />}
+              style={`bg-error text-black transition duration-300 hover:bg-error hover:text-white`}>
+              친구삭제
+            </Button>
+          )}
+        </div>
       </div>
 
+      <Divider style={`bg-lightGray`} />
+
       <div>
         {isCurrentUser ? (
-          <Button onClick={() => onLogout} color="">
-            로그아웃
-          </Button>
+          <>
+            <Button onClick={() => onLogout} style={`bg-primary text-white`}>
+              로그아웃
+            </Button>
+          </>
         ) : (
-          <Button onClick={() => onSendDM} color="">
+          <Button onClick={() => onSendDM} style={`bg-primary text-white`}>
             메세지보내기
           </Button>
         )}
diff --git a/front/src/components/organisms/ChatBox.tsx b/front/src/components/organisms/ChatBox.tsx
new file mode 100644
index 00000000..28ec619b
--- /dev/null
+++ b/front/src/components/organisms/ChatBox.tsx
@@ -0,0 +1,105 @@
+import useChatInputStore from "@/store/useChatInputStore";
+import TextInput from "../atoms/TextInput";
+import { BsSend } from "react-icons/bs";
+import { useState } from "react";
+import { RiArrowDownWideFill, RiArrowUpWideFill } from "react-icons/ri";
+
+const ChatBox = () => {
+  const chatInputValue = useChatInputStore((state) => state.inputValue);
+  const setChatInputValue = useChatInputStore((state) => state.setInputValue);
+  const addChatMessage = useChatInputStore((state) => state.addChatMessage);
+  const [expandChatBox, setExpandChatBox] = useState<boolean>(true);
+
+  // 챗 박스 드래그로 옮기기
+  const [position, setPosition] = useState({ x: 100, y: 100 });
+  const [dragging, setDragging] = useState(false);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    setDragging(true);
+    setOffset({
+      x: e.clientX - position.x,
+      y: e.clientY - position.y,
+    });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (dragging) {
+      const newX = Math.max(
+        0,
+        Math.min(window.innerWidth - 300, e.clientX - offset.x)
+      );
+      const newY = Math.max(
+        0,
+        Math.min(window.innerHeight - 500, e.clientY - offset.y)
+      );
+      setPosition({
+        x: newX,
+        y: newY,
+      });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setDragging(false);
+  };
+
+  const handleSendMessage = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const message = chatInputValue.trim();
+    if (message !== "") {
+      addChatMessage(message);
+      const event = new CustomEvent("chatMessage", { detail: message });
+      window.dispatchEvent(event);
+      setChatInputValue("");
+    }
+  };
+
+  const handleExpandChatBox = () => {
+    setExpandChatBox((prev) => !prev);
+  };
+
+  return (
+    <div>
+      <div
+        className={`absolute bg-white 
+        ${dragging ? "cursor-grabbing" : "cursor-grab"}
+      `}
+        style={{
+          left: `${position.x}px`,
+          top: `${position.y}px`,
+          width: "300px",
+          height: `${expandChatBox ? "500px" : "100px"}`,
+        }}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}>
+        {expandChatBox ? (
+          <RiArrowDownWideFill
+            onClick={handleExpandChatBox}
+            className="cursor-pointer"
+          />
+        ) : (
+          <RiArrowUpWideFill
+            onClick={handleExpandChatBox}
+            className="cursor-pointer"
+          />
+        )}
+        <ul>
+          {/* TODO: 채팅내용 */}
+          <li>Hello</li>
+        </ul>
+        <form onSubmit={handleSendMessage} className="flex w-full">
+          <TextInput
+            value={chatInputValue}
+            onChange={(e) => setChatInputValue(e.target.value)}
+            name="chat"
+          />
+          <BsSend />
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ChatBox;
diff --git a/front/src/components/organisms/CreateServerForm.tsx b/front/src/components/organisms/CreateServerForm.tsx
index 0aa88099..00b56d40 100644
--- a/front/src/components/organisms/CreateServerForm.tsx
+++ b/front/src/components/organisms/CreateServerForm.tsx
@@ -8,11 +8,13 @@ import useUserProfile from "@/hooks/user/useUserProfile";
 import { createServer } from "@/api/server";
 import { useLoginStore } from "@/store/useLoginStore";
 import { CreateServerRequest } from "@/types/server";
+import useModalStore from "@/store/useModalStore";
 
 const CreateServerForm: React.FC = () => {
   const userId = Cookies.get("userId");
   const { accessToken } = useLoginStore();
   const { userProfile } = useUserProfile();
+  const { closeModal } = useModalStore();
 
   const [serverFormValues, setServerFormValues] = useState<CreateServerRequest>(
     {
@@ -46,9 +48,11 @@ const CreateServerForm: React.FC = () => {
 
   const onSubmitForm = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    closeModal();
 
     try {
       const response = await createServer(accessToken, serverFormValues);
+
       return response;
     } catch (error) {
       console.error(error);
@@ -56,11 +60,12 @@ const CreateServerForm: React.FC = () => {
   };
 
   return (
-    <form className="flex flex-col gap-5" onSubmit={onSubmitForm}>
+    <form className="flex flex-col gap-5 mt-5" onSubmit={onSubmitForm}>
       <FormField
         label="서버명"
         name="serverName"
         value={serverFormValues.serverName}
+        style={`text-h6 font-bold text-black`}
         onChange={(e) => onChangeServerValues("serverName", e.target.value)}
         message=""
       />
@@ -77,7 +82,7 @@ const CreateServerForm: React.FC = () => {
         }}
         selectedTheme={serverFormValues.theme}
       />
-      <Button color="">서버생성</Button>
+      <Button style={`bg-primary text-white`}>서버생성</Button>
     </form>
   );
 };
diff --git a/front/src/components/organisms/EditProfileForm.tsx b/front/src/components/organisms/EditProfileForm.tsx
new file mode 100644
index 00000000..fdc19fe2
--- /dev/null
+++ b/front/src/components/organisms/EditProfileForm.tsx
@@ -0,0 +1,115 @@
+import { useEditProfileValidator } from "@/hooks/user/useEditProfileValidator";
+import React, { useEffect } from "react";
+import FormField from "../molecules/FormField";
+import Button from "../atoms/Button";
+import { useNavigate } from "react-router";
+import Cookies from "js-cookie";
+import { editUserProfile } from "@/api/user";
+import { useLoginStore } from "@/store/useLoginStore";
+
+const EditProfileForm: React.FC<{
+  userData: { email: string; username: string };
+}> = ({ userData }) => {
+  const navigate = useNavigate();
+  const userId = Cookies.get("userId");
+  const { accessToken } = useLoginStore();
+  const { values, setValues, errors, validateFieldAndSetError, isFormValid } =
+    useEditProfileValidator(userData);
+
+  useEffect(() => {
+    setValues({
+      email: userData.email,
+      nickname: userData.username,
+      password: "",
+      newPassword: "",
+    });
+  }, [userData, setValues]);
+
+  const onChangeHandler =
+    (field: keyof typeof values) =>
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      setValues((prevValues) => ({ ...prevValues, [field]: value }));
+      validateFieldAndSetError(field, value);
+    };
+
+  const handleEditProfile = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (isFormValid()) {
+      try {
+        const response = await editUserProfile(
+          userId || "",
+          accessToken,
+          values
+        );
+
+        console.log(response);
+        // TODO: CORS 문제 해결 필요
+        // if (response) {
+        //   console.log(response);
+        //   navigate("/profile");
+        // }
+      } catch (error) {
+        throw new Error("프로필 수정 실패");
+      }
+    } else {
+      console.log("");
+    }
+  };
+
+  return (
+    <form className="w-96 flex flex-col gap-5" onSubmit={handleEditProfile}>
+      <FormField
+        value={values.email}
+        label="Email"
+        name="email"
+        type="email"
+        onChange={onChangeHandler("email")}
+        style={`text-black font-bold`}
+        message={errors.email}
+      />
+      <FormField
+        value={values.nickname}
+        name="nickname"
+        label="Nickname"
+        type="text"
+        onChange={onChangeHandler("nickname")}
+        style={`text-black font-bold`}
+        message={errors.nickname}
+      />
+      <FormField
+        value={values.password}
+        name="password"
+        label="Password"
+        type="password"
+        onChange={onChangeHandler("password")}
+        style={`text-black font-bold`}
+        message={errors.password}
+      />
+      <FormField
+        value={values.newPassword}
+        name="newPassword"
+        label="Confirm Password"
+        type="password"
+        onChange={onChangeHandler("newPassword")}
+        style={`text-black font-bold`}
+        message={errors.newPassword}
+      />
+
+      <Button
+        style={`bg-primary text-white transition duration-300 hover:bg-secondary hover:text-primary`}
+        type="submit">
+        수정하기
+      </Button>
+      <Button
+        style={`bg-quaternary text-primary transition duration-300 hover:bg-secondary hover:text-primary`}
+        type="button"
+        onClick={() => navigate("/")}>
+        취소
+      </Button>
+    </form>
+  );
+};
+
+export default EditProfileForm;
diff --git a/front/src/components/organisms/FriendsSidebar.tsx b/front/src/components/organisms/FriendsSidebar.tsx
index c2c52312..de1bc9a3 100644
--- a/front/src/components/organisms/FriendsSidebar.tsx
+++ b/front/src/components/organisms/FriendsSidebar.tsx
@@ -3,7 +3,11 @@ import React from "react";
 import FriendItem from "../molecules/FriendItem";
 
 type FriendsSideBarProps = {
-  onAvatarClick: () => void;
+  onAvatarClick: (friend: {
+    friendId: string;
+    username: string;
+    email: string;
+  }) => void;
 };
 
 const FriendsSideBar: React.FC<FriendsSideBarProps> = ({ onAvatarClick }) => {
@@ -12,13 +16,18 @@ const FriendsSideBar: React.FC<FriendsSideBarProps> = ({ onAvatarClick }) => {
   return (
     <React.Fragment>
       <ul>
-        {friends?.friends.map((friend) => (
-          <FriendItem
-            key={friend.friendId}
-            username={friend.username}
-            onAvatarClick={onAvatarClick}
-          />
-        ))}
+        {friends?.friends
+          .sort((a, b) => a.username.localeCompare(b.username))
+          .map((friend) => (
+            <FriendItem
+              key={friend.friendId}
+              username={friend.username}
+              userId={friend.friendId}
+              email={friend.email}
+              selectecUserId={friend.friendId}
+              onAvatarClick={() => onAvatarClick(friend)}
+            />
+          ))}
       </ul>
     </React.Fragment>
   );
diff --git a/front/src/components/organisms/Header.tsx b/front/src/components/organisms/Header.tsx
index 34dd5669..3ad0b9db 100644
--- a/front/src/components/organisms/Header.tsx
+++ b/front/src/components/organisms/Header.tsx
@@ -3,12 +3,14 @@ import { BsChatQuoteFill } from "react-icons/bs";
 import { RiGroup2Fill } from "react-icons/ri";
 import RightSideBar from "./RightSideBar";
 import { IoPersonAddSharp } from "react-icons/io5";
-import useModal from "@/hooks/common/useModal";
 import Modal from "./Modal";
 import AddFriendForm from "../molecules/AddFriendForm";
+import { useNavigate } from "react-router";
+import useModalStore from "@/store/useModalStore";
 
 const Header: React.FC = () => {
-  const { isOpen, openModal, closeModal } = useModal();
+  const navigate = useNavigate();
+  const { isOpen, openModal, closeModal, modalType } = useModalStore();
   const [activeSideBar, setActiveSideBar] = useState<
     "friends" | "messages" | null
   >(null);
@@ -19,24 +21,26 @@ const Header: React.FC = () => {
   const handleAddFriend = () => openModal("addFriend");
 
   return (
-    <nav className="flex justify-between items-center p-4 min-h-14 bg-black">
-      <div>
-        <span className="text-white">Dicotown</span>
-      </div>
-      <div className="flex justify-center items-center gap-3">
+    <nav className="flex justify-between items-center px-5 min-h-14 bg-tertiary">
+      <span
+        className="text-white font-bold cursor-pointer"
+        onClick={() => navigate("/")}>
+        Dicotown
+      </span>
+      <div className="flex justify-center items-center gap-4">
         <BsChatQuoteFill
-          className="text-white"
+          className="text-white cursor-pointer transition duration-300 hover:text-secondary"
           fontSize={24}
           onClick={handleOpenMessageList}
         />
         <RiGroup2Fill
-          className="text-white"
+          className="text-white cursor-pointer transition duration-300 hover:text-secondary"
           fontSize={24}
           onClick={handleOpenFriendsList}
         />
 
         <IoPersonAddSharp
-          className="text-white"
+          className="text-white cursor-pointer transition duration-300 hover:text-secondary"
           fontSize={20}
           onClick={handleAddFriend}
         />
@@ -46,12 +50,11 @@ const Header: React.FC = () => {
           onClose={handleCloseSidebar}
         />
       </div>
-      <Modal
-        isOpen={isOpen}
-        title="친구 추가"
-        closeModal={() => closeModal(null)}>
-        <AddFriendForm />
-      </Modal>
+      {isOpen && modalType === "addFriend" && (
+        <Modal title="친구 추가">
+          <AddFriendForm />
+        </Modal>
+      )}
     </nav>
   );
 };
diff --git a/front/src/components/organisms/Hero.tsx b/front/src/components/organisms/Hero.tsx
index 6a56b553..10161090 100644
--- a/front/src/components/organisms/Hero.tsx
+++ b/front/src/components/organisms/Hero.tsx
@@ -1,14 +1,17 @@
-import React from "react";
-import PreviewServerMap from "../molecules/PreviewServerMap";
 import Text from "../atoms/Text";
 
 const Hero = () => {
   return (
-    <div>
-      <Text color="black" size="text-18">
-        새로운 테마
-      </Text>
-      <PreviewServerMap />
+    <div className="py-10">
+      <Text styles="text-h4 font-bold text-white">새로운 테마</Text>
+      <div className="flex justify-between h-96">
+        <img
+          src="/assets/map/camping/camping.png"
+          alt="캠핑테마 이미지"
+          className="rounded-md object-cover"
+          width="100%"
+        />
+      </div>
     </div>
   );
 };
diff --git a/front/src/components/organisms/JoinForm.tsx b/front/src/components/organisms/JoinForm.tsx
index fd5f19ad..2bb570d5 100644
--- a/front/src/components/organisms/JoinForm.tsx
+++ b/front/src/components/organisms/JoinForm.tsx
@@ -33,13 +33,14 @@ const JoinForm = () => {
     }
   };
   return (
-    <form className="flex flex-col gap-3">
+    <form className="w-96 flex flex-col gap-5" onSubmit={clickSubmitHandler}>
       <FormField
         value={values.email}
         label="Email"
         name="email"
         type="email"
         onChange={onChangeHandler("email")}
+        style={`text-white font-bold`}
         message={errors.email}
       />
       <FormField
@@ -48,6 +49,7 @@ const JoinForm = () => {
         label="Nickname"
         type="text"
         onChange={onChangeHandler("nickname")}
+        style={`text-white font-bold`}
         message={errors.nickname}
       />
       <FormField
@@ -56,6 +58,7 @@ const JoinForm = () => {
         label="Password"
         type="password"
         onChange={onChangeHandler("password")}
+        style={`text-white font-bold`}
         message={errors.password}
       />
       <FormField
@@ -64,11 +67,14 @@ const JoinForm = () => {
         label="Confirm Password"
         type="password"
         onChange={onChangeHandler("passwordConfirm")}
+        style={`text-white font-bold`}
         message={errors.passwordConfirm}
       />
 
-      <Button color="" onClick={clickSubmitHandler}>
-        회원가입
+      <Button
+        style={`bg-primary text-white transition duration-300 hover:bg-secondary hover:text-primary`}
+        type="submit">
+        가입하기
       </Button>
     </form>
   );
diff --git a/front/src/components/organisms/LeftSideBar.tsx b/front/src/components/organisms/LeftSideBar.tsx
index c83c5e48..80adda97 100644
--- a/front/src/components/organisms/LeftSideBar.tsx
+++ b/front/src/components/organisms/LeftSideBar.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import useModal from "@/hooks/common/useModal";
 import AvatarWithAddServer from "../molecules/AvatarWithAddServer";
 import Modal from "./Modal";
 import useUserProfile from "@/hooks/user/useUserProfile";
@@ -7,45 +6,42 @@ import UserProfile from "../molecules/UserProfile";
 import CreateServerForm from "./CreateServerForm";
 import Divider from "../atoms/Divider";
 import ServerList from "../molecules/ServerList";
+import useModalStore from "@/store/useModalStore";
 
 const LeftSideBar = () => {
-  const { isOpen, openModal, closeModal, modalType } = useModal();
+  const { isOpen, openModal, modalType } = useModalStore();
   const { userProfile } = useUserProfile();
 
   const onLogout = () => {};
 
   return (
     <React.Fragment>
-      <div className="max-w-20 h-screen flex flex-col items-center p-4 bg-slate-300">
+      <div className="flex flex-col group-hover:items-start p-2 transition-all duration-300">
         <AvatarWithAddServer
           nickname={userProfile?.data.username}
-          onAvatarClick={() => openModal("profile")}
+          onAvatarClick={() => openModal("showProfile")}
           onAddServerClick={() => openModal("addServer")}></AvatarWithAddServer>
-        <Divider />
-        <ServerList />
+        <Divider style={`bg-black`} />
+        <div className="flex flex-col group-hover:items-start p-2 transition-all duration-300">
+          <ServerList />
+        </div>
       </div>
 
-      {isOpen && modalType === "profile" && (
-        <Modal
-          isOpen={isOpen}
-          closeModal={() => closeModal(null)}
-          title="유저 프로필">
+      {isOpen && modalType === "showProfile" && (
+        <Modal title="유저 프로필">
           <UserProfile
             nickname={userProfile?.data.username}
+            email={userProfile?.data.email}
+            selectedUserId={userProfile?.data.userId}
             onLogout={onLogout}
             isCurrentUser
-            onEditProfile={onLogout}
-            onDeleteFriend={onLogout}
             onSendDM={onLogout}
           />
         </Modal>
       )}
 
       {isOpen && modalType === "addServer" && (
-        <Modal
-          isOpen={isOpen}
-          closeModal={() => closeModal(null)}
-          title="새로운 서버 생성">
+        <Modal title="새로운 서버 생성">
           <CreateServerForm />
         </Modal>
       )}
diff --git a/front/src/components/organisms/LoginForm.tsx b/front/src/components/organisms/LoginForm.tsx
index 3fb4b9d4..8a5588d9 100644
--- a/front/src/components/organisms/LoginForm.tsx
+++ b/front/src/components/organisms/LoginForm.tsx
@@ -1,5 +1,4 @@
 import { useNavigate } from "react-router";
-import { RiLoginBoxFill } from "react-icons/ri";
 import { useLoginStore } from "@/store/useLoginStore";
 import { useLoginValidator } from "@/hooks/user/useLoginValidator";
 import { login } from "@/api/user";
@@ -39,12 +38,13 @@ const LoginForm = () => {
     }
   };
   return (
-    <form onSubmit={clickSubmitHandler} className="w-96 flex flex-col gap-3">
+    <form className="w-96 flex flex-col gap-5" onSubmit={clickSubmitHandler}>
       <FormField
         value={values.email}
         name="email"
         label="Email"
         type="email"
+        style={`text-white font-bold`}
         onChange={onChangeHandler("email")}
         message={errors.email}
       />
@@ -53,14 +53,14 @@ const LoginForm = () => {
         name="password"
         label="Password"
         type="password"
+        style={`text-white font-bold`}
         onChange={onChangeHandler("password")}
         message={errors.password}
       />
 
       <Button
-        color="bg-dark"
-        onClick={clickSubmitHandler}
-        icon={<RiLoginBoxFill />}>
+        style={`bg-primary text-white transition duration-300 hover:bg-secondary hover:text-primary`}
+        type="submit">
         로그인
       </Button>
     </form>
diff --git a/front/src/components/organisms/MessageList.tsx b/front/src/components/organisms/MessageList.tsx
index a3cd044c..ce00be86 100644
--- a/front/src/components/organisms/MessageList.tsx
+++ b/front/src/components/organisms/MessageList.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-// * 친구들과 대화 기록 및 새로운 메세지를 확인하는 컴포넌트
+//TODO: 친구들과 대화 기록 및 새로운 메세지를 확인하는 컴포넌트
 
 const MessageList = () => {
   return <div>MessageList</div>;
diff --git a/front/src/components/organisms/Modal.tsx b/front/src/components/organisms/Modal.tsx
index 0d403a9b..f3ab60c5 100644
--- a/front/src/components/organisms/Modal.tsx
+++ b/front/src/components/organisms/Modal.tsx
@@ -1,31 +1,25 @@
 import React, { ReactNode } from "react";
 import { IoCloseCircle } from "react-icons/io5";
 import Text from "../atoms/Text";
+import useModalStore from "@/store/useModalStore";
 
-type ModalProps = {
+interface ModalProps {
   children: ReactNode;
-  isOpen: boolean;
-  closeModal: () => void;
   title: string;
-};
+}
 
-const Modal: React.FC<ModalProps> = ({
-  children,
-  isOpen,
-  closeModal,
-  title,
-}) => {
+const Modal: React.FC<ModalProps> = ({ children, title }) => {
+  const { isOpen, closeModal } = useModalStore();
   if (!isOpen) return null;
+
   return (
     <div className="fixed inset-0 flex flex-col items-center justify-center bg-black bg-opacity-50 z-50">
       <div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
         <div className="flex justify-between">
-          <Text size="text-xl" color="black">
-            {title}
-          </Text>
+          <Text styles="text-h5 font-bold text-black">{title}</Text>
           <IoCloseCircle
             onClick={closeModal}
-            className="text-3xl mb-3 hover:text-red-500"
+            className="text-h5 mb-3 transition duration-300 hover:text-error cursor-pointer"
           />
         </div>
         <div>{children}</div>
diff --git a/front/src/components/organisms/RequestedFriendsList.tsx b/front/src/components/organisms/RequestedFriendsList.tsx
index b119f1b4..ac7f5df7 100644
--- a/front/src/components/organisms/RequestedFriendsList.tsx
+++ b/front/src/components/organisms/RequestedFriendsList.tsx
@@ -4,19 +4,24 @@ import FriendItem from "../molecules/FriendItem";
 
 const RequestedFriendsList = () => {
   const { requetedFriends } = useRequestedFriends();
-  console.log(requetedFriends);
 
   return (
     <ul>
-      {requetedFriends?.friendRequests.length === 0
-        ? "새로운 친구 요청이 없습니다."
-        : requetedFriends?.friendRequests.map((request) => (
-            <FriendItem
-              key={request.friendId}
-              username={request.username}
-              onAvatarClick={() => console.log("clicked")}
-            />
-          ))}
+      {requetedFriends?.friendRequests.length === 0 ? (
+        <span className="flex justify-center font-bold text-black">
+          새로운 친구 요청이 없습니다.
+        </span>
+      ) : (
+        requetedFriends?.friendRequests.map((request) => (
+          <FriendItem
+            key={request.friendId}
+            username={request.username}
+            userId={request.friendId}
+            selectecUserId={request.friendId}
+            onAvatarClick={() => console.log("clicked")}
+          />
+        ))
+      )}
     </ul>
   );
 };
diff --git a/front/src/components/organisms/RightSideBar.tsx b/front/src/components/organisms/RightSideBar.tsx
index 8710abf7..31d79a39 100644
--- a/front/src/components/organisms/RightSideBar.tsx
+++ b/front/src/components/organisms/RightSideBar.tsx
@@ -1,11 +1,13 @@
 import Modal from "./Modal";
 import UserProfile from "../molecules/UserProfile";
 import useUserProfile from "@/hooks/user/useUserProfile";
-import useModal from "@/hooks/common/useModal";
+import useModal from "@/store/useModalStore";
 import React from "react";
 import SideBarHaeder from "../molecules/SideBarHaeder";
 import FriendsSidebar from "./FriendsSidebar";
 import MessageSidebar from "../templates/MessageSidebar";
+import useFriendsList from "@/hooks/user/useFriendsList";
+import useModalStore from "@/store/useModalStore";
 
 type RightSideBarProps = {
   activeSideBar: "friends" | "messages" | null;
@@ -16,8 +18,20 @@ const RightSideBar: React.FC<RightSideBarProps> = ({
   activeSideBar,
   onClose,
 }) => {
-  const { userProfile } = useUserProfile();
-  const { isOpen, closeModal, modalType, openModal } = useModal();
+  const [selectedUser, setSelectedUser] = React.useState<{
+    friendId: string;
+    username: string;
+  } | null>(null);
+  const { isOpen, closeModal, openModal, modalType } = useModalStore();
+
+  const handleAvatarClick = (friend: {
+    friendId: string;
+    username: string;
+    email: string;
+  }) => {
+    setSelectedUser(friend);
+    openModal("showProfile");
+  };
 
   const deleteFriendHandler = () => {
     // TODO: 로직추가
@@ -29,25 +43,22 @@ const RightSideBar: React.FC<RightSideBarProps> = ({
   return (
     <React.Fragment>
       <div
-        className={`fixed top-0 right-0 h-full w-80 bg-gray-800 p-4 text-white transform transition-transform duration-300 ${
+        className={`fixed top-0 right-0 h-full w-80 bg-quaternary p-4 text-black transform transition-transform duration-300 ${
           activeSideBar ? "translate-x-0" : "translate-x-full"
         } shadow-lg`}>
         <SideBarHaeder activeSideBar={activeSideBar} onClose={onClose} />
         {activeSideBar === "friends" ? (
-          <FriendsSidebar onAvatarClick={() => openModal("profile")} />
+          <FriendsSidebar onAvatarClick={handleAvatarClick} />
         ) : (
           <MessageSidebar />
         )}
       </div>
-      {isOpen && modalType === "profile" && (
-        <Modal
-          isOpen={isOpen}
-          closeModal={() => closeModal(null)}
-          title="유저 프로필">
+      {isOpen && modalType === "showProfile" && (
+        <Modal title="유저 프로필">
           <UserProfile
-            nickname={userProfile?.data.username}
+            nickname={selectedUser?.username}
+            selectedUserId={selectedUser?.friendId}
             isCurrentUser={false}
-            onDeleteFriend={deleteFriendHandler}
             onSendDM={sendMessageHandler}
           />
         </Modal>
diff --git a/front/src/components/organisms/Tabs.tsx b/front/src/components/organisms/Tabs.tsx
index 92eebfc2..47a05f60 100644
--- a/front/src/components/organisms/Tabs.tsx
+++ b/front/src/components/organisms/Tabs.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import TabHeader from "../molecules/TabHeader";
 
 type TabsProps = {
diff --git a/front/src/components/pages/EditProfile.tsx b/front/src/components/pages/EditProfile.tsx
new file mode 100644
index 00000000..211a56e1
--- /dev/null
+++ b/front/src/components/pages/EditProfile.tsx
@@ -0,0 +1,46 @@
+import useUserProfile from "@/hooks/user/useUserProfile";
+import EditProfileForm from "../organisms/EditProfileForm";
+import Text from "../atoms/Text";
+import Divider from "../atoms/Divider";
+import Cookies from "js-cookie";
+import { deleteUser } from "@/api/user";
+import { useLoginStore } from "@/store/useLoginStore";
+
+const EditProfile = () => {
+  const { userProfile } = useUserProfile();
+  const userId = Cookies.get("userId");
+  const { accessToken } = useLoginStore();
+
+  const handleDeleteUser = async () => {
+    try {
+      const response = await deleteUser(userId || "", accessToken);
+
+      // TODO: 서버먼저 탈퇴 후 회원탈퇴 안내 알람 띄우기
+      console.log(response, "회원탈퇴");
+    } catch (error) {
+      throw new Error("회원탈퇴 실패");
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center mt-10">
+      <Text styles={`text-h4 font-bold mb-10 align-left`}>프로필 수정</Text>
+      <EditProfileForm
+        userData={{
+          email: userProfile?.data.email || "",
+          username: userProfile?.data.username || "",
+        }}
+      />
+      <div className="w-96 my-7">
+        <Divider style={`bg-lightGray `} />
+      </div>
+      <span
+        className="text-p text-error font-bold cursor-pointer hover:underline"
+        onClick={handleDeleteUser}>
+        회원탈퇴
+      </span>
+    </div>
+  );
+};
+
+export default EditProfile;
diff --git a/front/src/components/pages/Home.tsx b/front/src/components/pages/Home.tsx
index 25438a57..add94a72 100644
--- a/front/src/components/pages/Home.tsx
+++ b/front/src/components/pages/Home.tsx
@@ -3,9 +3,11 @@ import ServerCards from "../templates/ServerCards";
 
 const Home = () => {
   return (
-    <div className="max-w-7xl p-7">
-      <Hero />
-      <ServerCards />
+    <div className="bg-black w-full min-h-screen">
+      <div className="w-[80%] mx-auto">
+        <Hero />
+        <ServerCards />
+      </div>
     </div>
   );
 };
diff --git a/front/src/components/pages/Join.tsx b/front/src/components/pages/Join.tsx
index 34d3eb02..385def13 100644
--- a/front/src/components/pages/Join.tsx
+++ b/front/src/components/pages/Join.tsx
@@ -3,11 +3,13 @@ import JoinTemplate from "../templates/JoinTemplate";
 
 const Join = () => {
   return (
-    <div className="h-screen flex flex-col items-center justify-center">
-      <Text color="text-dark" size="32">
-        회원가입
-      </Text>
-      <JoinTemplate />
+    <div className="bg-black h-svh flex flex-col items-center justify-center">
+      <div className="bg-darkBlack p-10 rounded-lg drop-shadow-xl">
+        <Text styles="text-h4 text-white text-center font-bold mb-5">
+          회원가입
+        </Text>
+        <JoinTemplate />
+      </div>
     </div>
   );
 };
diff --git a/front/src/components/pages/Login.tsx b/front/src/components/pages/Login.tsx
index ea916abe..81741d8c 100644
--- a/front/src/components/pages/Login.tsx
+++ b/front/src/components/pages/Login.tsx
@@ -3,11 +3,13 @@ import LoginTemplate from "../templates/LoginTemplate";
 
 const Login = () => {
   return (
-    <div className="h-svh flex flex-col items-center justify-center">
-      <Text color="text-dark" size="">
-        로그인
-      </Text>
-      <LoginTemplate />
+    <div className="bg-black h-svh flex flex-col items-center justify-center ">
+      <div className="bg-darkBlack p-10 rounded-lg drop-shadow-xl">
+        <Text styles="text-h4 text-white text-center font-bold mb-5">
+          로그인
+        </Text>
+        <LoginTemplate />
+      </div>
     </div>
   );
 };
diff --git a/front/src/components/Server/ServerMapWithTheme.tsx b/front/src/components/pages/Server.tsx
similarity index 61%
rename from front/src/components/Server/ServerMapWithTheme.tsx
rename to front/src/components/pages/Server.tsx
index 62e5306e..d34ba96f 100644
--- a/front/src/components/Server/ServerMapWithTheme.tsx
+++ b/front/src/components/pages/Server.tsx
@@ -1,10 +1,10 @@
+import { useThemeStore } from "@/store/useThemeStore";
 import React from "react";
-import { useThemeStore } from "../../store/useThemeStore";
 import { ServerMap } from "../Phaser/ServerMap";
 
-const ServerMapWithTheme = () => {
+const Server = () => {
   const selectedTheme = useThemeStore((state) => state.selectedTheme);
   return <ServerMap selectedTheme={selectedTheme} />;
 };
 
-export default ServerMapWithTheme;
+export default Server;
diff --git a/front/src/components/templates/JoinTemplate.tsx b/front/src/components/templates/JoinTemplate.tsx
index 02f5d553..3313b069 100644
--- a/front/src/components/templates/JoinTemplate.tsx
+++ b/front/src/components/templates/JoinTemplate.tsx
@@ -1,18 +1,22 @@
 import { useNavigate } from "react-router";
 import JoinForm from "../organisms/JoinForm";
-import Button from "../atoms/Button";
 import Divider from "../atoms/Divider";
 
 const JoinTemplate = () => {
   const navigate = useNavigate();
   return (
-    <div className="flex flex-col justify-center items-center">
+    <div className="w-96 flex flex-col justify-center items-center gap-5">
       <JoinForm />
-      <Divider />
-      <span>이미 계정이 있으시면 로그인을 클릭해주세요.</span>
-      <Button onClick={() => navigate("login")} color="bg-dark">
-        로그인
-      </Button>
+      <Divider style={`bg-white`} />
+      <span className="text-white">
+        이미 계정이 있으시면{" "}
+        <span
+          className="text-secondary underline font-bold cursor-pointer"
+          onClick={() => navigate("login")}>
+          로그인
+        </span>
+        을 클릭해주세요.
+      </span>
     </div>
   );
 };
diff --git a/front/src/components/templates/Layout.tsx b/front/src/components/templates/Layout.tsx
index ae115c2d..c6f94c0e 100644
--- a/front/src/components/templates/Layout.tsx
+++ b/front/src/components/templates/Layout.tsx
@@ -4,11 +4,17 @@ import Header from "../organisms/Header";
 
 const Layout: React.FC = () => {
   return (
-    <div className="flex flex-col h-screen">
-      <Header />
-      <div className="flex flex-1">
-        <LeftSideBar />
-        <div className="flex-1 flex justify-center items-center bg-gray-100">
+    <div className="relative flex flex-col h-screen">
+      <div className="sticky top-0 z-10">
+        <Header />
+      </div>
+
+      <div className="flex flex-grow overflow-hidden">
+        <div className="fixed top-14 z-10 h-screen w-20 bg-quaternary transition-all duration-300 group hover:w-60 overflow-y-auto">
+          <LeftSideBar />
+        </div>
+
+        <div className="flex-grow overflow-y-auto">
           <Outlet />
         </div>
       </div>
diff --git a/front/src/components/templates/LoginTemplate.tsx b/front/src/components/templates/LoginTemplate.tsx
index 75a2645a..60a68b2e 100644
--- a/front/src/components/templates/LoginTemplate.tsx
+++ b/front/src/components/templates/LoginTemplate.tsx
@@ -1,18 +1,22 @@
 import { useNavigate } from "react-router";
 import LoginForm from "../organisms/LoginForm";
-import Button from "../atoms/Button";
 import Divider from "../atoms/Divider";
 
 const LoginTemplate = () => {
   const navigate = useNavigate();
   return (
-    <div className="flex flex-col justify-center items-center">
+    <div className="w-96 flex flex-col justify-center items-center gap-5">
       <LoginForm />
-      <Divider />
-      <span>계정이 없으신가요?</span>
-      <Button onClick={() => navigate("/join")} color="bg-dark">
-        회원가입
-      </Button>
+      <Divider style={`bg-white`} />
+      <span className="text-white ">
+        계정이 없으신가요?{" "}
+        <span
+          className="text-secondary underline font-bold cursor-pointer"
+          onClick={() => navigate("/join")}>
+          회원가입
+        </span>
+        을 클릭해 주세요.
+      </span>
     </div>
   );
 };
diff --git a/front/src/components/templates/MessageSidebar.tsx b/front/src/components/templates/MessageSidebar.tsx
index 610aa2da..9b0f6238 100644
--- a/front/src/components/templates/MessageSidebar.tsx
+++ b/front/src/components/templates/MessageSidebar.tsx
@@ -13,11 +13,13 @@ const MessageSidebar = () => {
 
   return (
     <div>
-      <Tabs
-        tabs={messageTab}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-      />
+      <div className="flex justify-center mb-5">
+        <Tabs
+          tabs={messageTab}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        />
+      </div>
 
       {activeTab === "message" ? <MessageList /> : <RequestedFriendsList />}
     </div>
diff --git a/front/src/components/templates/ServerCards.tsx b/front/src/components/templates/ServerCards.tsx
index 119bafda..59ee5e11 100644
--- a/front/src/components/templates/ServerCards.tsx
+++ b/front/src/components/templates/ServerCards.tsx
@@ -3,6 +3,7 @@ import useServers from "@/hooks/server/useServers";
 import ServerCardItem from "../molecules/ServerCardItem";
 import ServerFilterBar from "../organisms/ServerFilterBar";
 import useServerCategories from "@/hooks/server/useCategories";
+import Text from "../atoms/Text";
 
 const ServerCards = () => {
   const { servers } = useServers();
@@ -14,22 +15,27 @@ const ServerCards = () => {
     return server.categories?.some((category) => category.id === activeTab);
   });
 
-  const processedCategories =
-    categories?.map((category) => ({
+  const processedCategories = [
+    { id: "all", name: "전체" },
+    ...(categories?.map((category) => ({
       id: category.id,
       name: category.name,
-    })) || [];
-
+    })) || []),
+  ];
   return (
     <React.Fragment>
-      <ServerFilterBar
-        tabs={processedCategories}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-      />
-      <div className="flex flex-row flex-wrap gap-3">
+      <div className="flex flex-row justify-between items-center mb-5">
+        <Text styles="text-h4 font-bold text-white">즐겨찾기 서버</Text>
+        <ServerFilterBar
+          tabs={processedCategories}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-5 md:grid-cols-3">
         {filteredServers?.map((server) => (
           <ServerCardItem
+            id={server.id}
             key={server.id}
             serverName={server.name}
             categories={server.categories || undefined}
diff --git a/front/src/hooks/common/useModal.tsx b/front/src/hooks/common/useModal.tsx
deleted file mode 100644
index 7cbb244e..00000000
--- a/front/src/hooks/common/useModal.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useState } from "react";
-
-type ModalType = "profile" | "addServer" | "server" | "addFriend" | null;
-
-const useModal = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [modalType, setModalType] = useState<ModalType>(null);
-
-  const openModal = (type: ModalType) => {
-    setModalType(type);
-    setIsOpen(true);
-  };
-
-  const closeModal = (type: ModalType) => {
-    setModalType(null);
-    setIsOpen(false);
-  };
-
-  return { isOpen, openModal, closeModal, modalType };
-};
-
-export default useModal;
diff --git a/front/src/hooks/user/useEditProfileValidator.ts b/front/src/hooks/user/useEditProfileValidator.ts
new file mode 100644
index 00000000..e09e18a3
--- /dev/null
+++ b/front/src/hooks/user/useEditProfileValidator.ts
@@ -0,0 +1,46 @@
+import { EditProfileFormValues } from "@/types/user";
+import useFormValidator from "../common/useFromValidator";
+
+export const useEditProfileValidator = (userData: {
+  email: string;
+  username: string;
+}) => {
+  const initialValues: EditProfileFormValues = {
+    email: userData.email || "",
+    nickname: userData.username || "",
+    password: "",
+    newPassword: "",
+  };
+
+  const validators = {
+    email: (value: string) => {
+      if (!value) return "수정할 이메일을 입력해주세요.";
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      return emailRegex.test(value) ? "" : "올바른 이메일 형식이 아닙니다.";
+    },
+
+    nickname: (value: string) => {
+      if (!value) return "닉네임을 입력해주세요.";
+      return value.length >= 2 ? "" : "닉네임은 최소 2글자 이상이어야 합니다.";
+    },
+
+    password: (value: string) => {
+      if (!value) return "기존 비밀번호를 입력해주세요.";
+      const passwordRegex =
+        /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9!@#$]{8,15}$/;
+
+      return passwordRegex.test(value)
+        ? ""
+        : "비밀번호는 최소 8자에서 15자 사이, 대문자와 소문자, 숫자가 포함되어야 하며, 특수문자 ! @ # $도 사용할 수 있습니다.";
+    },
+
+    newPassword: (value: string, formValues?: EditProfileFormValues) => {
+      if (!value) return "새 비밀번호를 입력해주세요.";
+      if (formValues && value === formValues.password)
+        return "새 비밀번호는 기존 비밀번호와 다르게 설정해야 합니다.";
+      return "";
+    },
+  };
+
+  return useFormValidator<EditProfileFormValues>(initialValues, validators);
+};
diff --git a/front/src/index.css b/front/src/index.css
index 376ca3b0..fc0162da 100644
--- a/front/src/index.css
+++ b/front/src/index.css
@@ -2,11 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "NEXON Lv1 Gothic OTF";
+  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff")
+    format("woff");
+}
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: "NEXON Lv1 Gothic OTF", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/front/src/router.tsx b/front/src/router.tsx
index 6a5deffb..f8de4871 100644
--- a/front/src/router.tsx
+++ b/front/src/router.tsx
@@ -4,8 +4,9 @@ import Join from "./components/pages/Join";
 import Login from "./components/pages/Login";
 import PrivateRoute from "./utils/PrivateRoute";
 import Home from "./components/pages/Home";
-import ServerMapWithTheme from "./components/Server/ServerMapWithTheme";
 import AuthLayout from "./utils/AuthLayout";
+import EditProfile from "./components/pages/EditProfile";
+import Server from "./components/pages/Server";
 
 const router = createBrowserRouter([
   {
@@ -36,15 +37,16 @@ const router = createBrowserRouter([
         path: "/server/:serverId",
         element: (
           <PrivateRoute>
-            <ServerMapWithTheme />
+            <Server />
           </PrivateRoute>
         ),
       },
+
       {
-        path: "/:theme",
+        path: "/profile",
         element: (
           <PrivateRoute>
-            <ServerMapWithTheme />
+            <EditProfile />
           </PrivateRoute>
         ),
       },
diff --git a/front/src/store/useChatInputStore.ts b/front/src/store/useChatInputStore.ts
index 0abc6601..cc8e3b7f 100644
--- a/front/src/store/useChatInputStore.ts
+++ b/front/src/store/useChatInputStore.ts
@@ -2,12 +2,19 @@ import { create } from "zustand";
 
 interface ChatInputState {
   inputValue: string;
+  chatHistory: string[];
   setInputValue: (value: string) => void;
+  addChatMessage: (message: string) => void;
 }
 
 const useChatInputStore = create<ChatInputState>((set) => ({
   inputValue: "",
+  chatHistory: [],
   setInputValue: (value) => set({ inputValue: value }),
+  addChatMessage: (message) =>
+    set((state) => ({
+      chatHistory: [...state.chatHistory, message],
+    })),
 }));
 
 export default useChatInputStore;
diff --git a/front/src/store/useModalStore.tsx b/front/src/store/useModalStore.tsx
new file mode 100644
index 00000000..dc501e58
--- /dev/null
+++ b/front/src/store/useModalStore.tsx
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+
+type ModalType =
+  | "addServer"
+  | "showProfile"
+  | "addFriend"
+  | "showServer"
+  | null;
+
+interface ModalState {
+  isOpen: boolean;
+  openModal: (type: ModalType) => void;
+  closeModal: () => void;
+  modalType: ModalType;
+}
+
+const useModalStore = create<ModalState>((set) => ({
+  isOpen: false,
+  modalType: null,
+  openModal: (type) => set({ isOpen: true, modalType: type }),
+  closeModal: () => set({ isOpen: false, modalType: null }),
+}));
+
+export default useModalStore;
diff --git a/front/src/store/useThemeStore.ts b/front/src/store/useThemeStore.ts
index 4ecff908..610db133 100644
--- a/front/src/store/useThemeStore.ts
+++ b/front/src/store/useThemeStore.ts
@@ -4,12 +4,12 @@ import { persist, devtools } from "zustand/middleware";
 
 interface ThemeState {
   selectedTheme: ThemeType | null;
-  setTheme: (theme: ThemeType | null) => void;
+  setSelectedTheme: (theme: ThemeType | null) => void;
 }
 
 const themeStore: StateCreator<ThemeState> = (set) => ({
   selectedTheme: null,
-  setTheme: (theme: ThemeType | null) => set({ selectedTheme: theme }),
+  setSelectedTheme: (theme: ThemeType | null) => set({ selectedTheme: theme }),
 });
 
 export const useThemeStore = create<ThemeState>()(
diff --git a/front/src/types/user.ts b/front/src/types/user.ts
index d70ed367..5c01d516 100644
--- a/front/src/types/user.ts
+++ b/front/src/types/user.ts
@@ -37,6 +37,13 @@ export type SearchUserResultsResponse = {
     users: SearchUsers[];
   };
 };
+// 사용자 프로필 수정
+export type EditProfileFormValues = {
+  email: string;
+  nickname: string;
+  password: string;
+  newPassword: string;
+};
 
 //  유저 프로필 조회
 export type UserProfile = {
diff --git a/front/tailwind.config.js b/front/tailwind.config.js
index 18888918..b9b7ee44 100644
--- a/front/tailwind.config.js
+++ b/front/tailwind.config.js
@@ -4,26 +4,45 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        dark: {
-          DEFAULT: "#2A2F4F",
-        },
-        pink: {
-          DEFAULT: "#FDE2F3",
-        },
-        darkPink: {
-          DEFAULT: "#E5BEEC",
-        },
-        gray: {
-          DEFAULT: "hsla(0, 0%, 100%, .9)",
-        },
-        darkGray: {
-          DEFAULT: "rgb(39 38 46/var(--tw-text-opacity))",
-        },
+        primary: "#5d2fd6",
+        secondary: "#aba8ff", // hover
+        tertiary: "#343096", // active
+        quaternary: "#d5d4ff",
+        white: "#f7f7f7",
+        black: "#2f2f2f",
+        darkBlack: "#191A1E",
+        gray: "#697484",
+        lightGray: "#f0f2f5",
+        disabled: "#d9d9d9",
+        error: "#ff5a48",
+        confirm: "#3cf584",
+      },
+
+      fontSize: {
+        h1: "3.8rem",
+        h2: "3rem",
+        h3: "2.4rem",
+        h4: "1.9rem",
+        h5: "1.5rem",
+        h6: "1.2rem",
+        p: "1rem",
+        small: "0.8rem",
+      },
+
+      fontWeight: {
+        bold: 700,
+        regular: 400,
+        thin: 300,
+      },
+    },
+    keyframes: {
+      "move-gradient": {
+        "0%": { backgroundPosition: "10% 50%" },
+        "100%": { backgroundPosition: "100% 50%" },
       },
     },
-    backgroundImage: {
-      camping: "url('/public/assets/map/camping/camping.png')",
-      beach: "url('/public/assets/map/beach/beach.png')",
+    animation: {
+      "move-gradient": "move-gradient 3s infinite alternate",
     },
   },
   plugins: [],