diff --git a/frontend/public/assets/icons/flag.svg b/frontend/public/assets/icons/flag2.svg
similarity index 100%
rename from frontend/public/assets/icons/flag.svg
rename to frontend/public/assets/icons/flag2.svg
diff --git a/frontend/src/component/IconGuide/GuestMarker.tsx b/frontend/src/component/IconGuide/GuestMarker.tsx
new file mode 100644
index 00000000..5759db71
--- /dev/null
+++ b/frontend/src/component/IconGuide/GuestMarker.tsx
@@ -0,0 +1,33 @@
+import { MdAssistantNavigation, MdFlag, MdLocationOn } from 'react-icons/md';
+import { IconContext } from 'react-icons';
+import { ReactNode, useMemo } from 'react';
+
+interface IMarkerData {
+  name: string;
+  icon: ReactNode;
+}
+
+export const GusetMarker = () => {
+  const markerData: IMarkerData[] = [
+    { name: '내 위치', icon: <MdAssistantNavigation color="blue" /> },
+    { name: '도착지', icon: <MdFlag color="purple" /> },
+    { name: '출발지', icon: <MdLocationOn color="red" /> },
+  ];
+
+  const iconContextValue = useMemo(() => ({ color: 'purple', className: 'size-5' }), []);
+
+  return (
+    <div className="z-4000 absolute bottom-8 right-5 w-fit text-base">
+      <ul className="flex flex-col gap-1">
+        <IconContext.Provider value={iconContextValue}>
+          {markerData.map(data => (
+            <li className="flex items-center justify-between gap-2">
+              {data.icon}
+              <span>{data.name}</span>
+            </li>
+          ))}
+        </IconContext.Provider>
+      </ul>
+    </div>
+  );
+};
diff --git a/frontend/src/component/IconGuide/HostMarker.tsx b/frontend/src/component/IconGuide/HostMarker.tsx
new file mode 100644
index 00000000..54721b7c
--- /dev/null
+++ b/frontend/src/component/IconGuide/HostMarker.tsx
@@ -0,0 +1,21 @@
+import { MdAssistantNavigation } from 'react-icons/md';
+import { IGuestData } from '@/types/channel.types.ts';
+
+interface IUserMarkerProps {
+  userData: IGuestData[];
+}
+
+export const HostMarker = (props: IUserMarkerProps) => {
+  return (
+    <div className="z-4000 absolute bottom-8 right-5 w-fit text-base">
+      <ul className="flex flex-col gap-2">
+        {props.userData.map(data => (
+          <li key={data.name} className="flex items-center justify-between gap-2">
+            <MdAssistantNavigation color={data.markerStyle.color} className="size-5" />
+            {data.name}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
diff --git a/frontend/src/component/userMarker/UserMarker.tsx b/frontend/src/component/userMarker/UserMarker.tsx
deleted file mode 100644
index 2aeb209b..00000000
--- a/frontend/src/component/userMarker/UserMarker.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { MdLocationOn } from 'react-icons/md';
-import { IGuestData } from '@/types/channel.types.ts';
-
-interface IUserMarkerProps {
-  userData: IGuestData[];
-}
-
-export const UserMarker = (props: IUserMarkerProps) => {
-  return (
-    <div className="z-4000 absolute bottom-8 right-5 w-fit text-base">
-      <ul className="flex flex-col gap-1">
-        {props.userData.map(data => (
-          <li key={data.name} className="flex items-center">
-            <MdLocationOn color={data.markerStyle.color} className="size-5" />
-            {data.name}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx
index 5ced4c97..24e4a6c7 100644
--- a/frontend/src/pages/GuestView.tsx
+++ b/frontend/src/pages/GuestView.tsx
@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom';
 import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx';
 import { IPoint } from '@/lib/types/canvasInterface.ts';
 import { guestEntity } from '@/api/dto/channel.dto.ts';
-// import { UserMarker } from '@/component/userMarker/UserMarker.tsx';
+import { GusetMarker } from '@/component/IconGuide/GuestMarker.tsx';
 
 export const GuestView = () => {
   const [guestInfo, setGuestInfo] = useState<IGuest>({
@@ -73,7 +73,7 @@ export const GuestView = () => {
 
   return (
     <article className="absolute h-full w-screen flex-grow overflow-hidden">
-      {/* <UserMarker userData={[guestInfo]} /> */}
+      <GusetMarker />
       {component}
     </article>
   );
diff --git a/frontend/src/pages/HostView.tsx b/frontend/src/pages/HostView.tsx
index c1c2d36e..abdb80a6 100644
--- a/frontend/src/pages/HostView.tsx
+++ b/frontend/src/pages/HostView.tsx
@@ -6,7 +6,7 @@ import { useLocation } from 'react-router-dom';
 import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx';
 import { IGuestDataInMapProps, IPoint } from '@/lib/types/canvasInterface.ts';
 import { getChannelResEntity, guestEntity } from '@/api/dto/channel.dto.ts';
-import { UserMarker } from '@/component/userMarker/UserMarker.tsx';
+import { HostMarker } from '@/component/IconGuide/HostMarker.tsx';
 
 export const HostView = () => {
   const [channelInfo, setChannelInfo] = useState<IChannelInfo>();
@@ -102,7 +102,7 @@ export const HostView = () => {
 
   return (
     <article className="absolute h-full w-screen flex-grow overflow-hidden">
-      <UserMarker userData={guestData} />
+      <HostMarker userData={guestData} />
       {component}
     </article>
   );