diff --git a/frontend/src/assets/grayHighlighter.svg b/frontend/src/assets/grayHighlighter.svg
new file mode 100644
index 000000000..251127658
--- /dev/null
+++ b/frontend/src/assets/grayHighlighter.svg
@@ -0,0 +1,9 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="90" height="90" fill="url(#pattern0_2346_1962)"/>
+<defs>
+<pattern id="pattern0_2346_1962" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2346_1962" transform="scale(0.0111111)"/>
+</pattern>
+<image id="image0_2346_1962" width="90" height="90" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAADiklEQVR4nO2bu4oUQRSGa0W8IbriG5j6BmsqGCkimPgOrWw0E0z//0ZjIiKaqCA7poZeVlE0EhFEUFYxlBUNBfEymrWU24PLMj1d3T116z4fdNaXU9+eqTp1WaUEQRAEQRAEQRAE+yRJspvkJQBfSf4EcGN5eXmvg093TvIayWzrpWX7jq31krl5ffcdXxckZyS/+Y6xC5Izkpd9x9kFyWv6Pt+xRgvJXSTvlkh+RHKP71ijhSJZJLcCSiaL5FZAyWSR3AoomSySu5TJmUxI3EjORLY7yZnIdic5E9lzXoWjrNS5KeEo5Z679eRE1qBrZfOwzqK9yK4meRHAr7qDm3Qj5qLPN60iRLYBANbnUbKJ7NlylirUx6Wbq777bJI79KVCg+So4mQkSNn6XQCu6bEGwG8AqyT3q1AGQZLjGjO/oGTPOH62qkIAQFIgYAzgSQyyZ31DZ3YQ3QgKBkEAt/XAB+BhyLLL3g3gh1JqQYU6CKZpeiy/J1jZhu+8okIdBAGsb7svONm+K5u5zAQBJLaOfM3jPVHV6iyeCY77/f6hgme8y45KcslMcDTrOZ+yo5OsBzoWB7pU9rwP2dFJzmdPTwsCfWf6HtcDZBQD34SyrMCUQTCgzI4jkw0aMy4aBAOXHZbksp85gIsN3u+yGwmzuzBcnVtrGrAH2cFJPufqp8euTUYmkNxJ8pPLrGCDzI5mWr0dkqd9BMwasqOVrCF5syDgN7b/8b2K7KglawC8Lgj6lIvvm8qOWrJmRv98wGEMJrLjlawBsDEt+F6vd9BlHA1khy9ZQ/Klz65jK/nC0OPWSdaQvOprMJyyZTaqsNsej2RNmqYnihoD4IHNxuQ7OInhCah4JecsAPgyo1H3LUxYqmZv9JJ1o1fKGoc5ZHaD7J1c+o8ybK1kNpSdTzSGNbP33257foBnUcVIFcmsuVDTYP34D8k7JI97P9jiQXJWRXYdyQA+AOj1+/3DKnYaSs5MZOebCPc6lb0WJGeTPntanU1yn8kML/q+14Vk/pf1Nl9mXcyvMwZVxbPJmb3WYUMyLfbvUSKSOyQZm322ZLJlybd0FaLaiINM/mwgeAPAWdVWHEhe0fWurnv1SXmSL3KpHwG8Ink9TdOTenddtRmSRwBcIPncQjdA3+1rvXSIZPvSIZLtZzpEsn3pEMl2GAwGR3VVAeB9Xl0IgiAIgiAIgiAIKlD+Ao7U6oxIjTrTAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
diff --git a/frontend/src/assets/primaryHighlighter.svg b/frontend/src/assets/primaryHighlighter.svg
new file mode 100644
index 000000000..23faf8946
--- /dev/null
+++ b/frontend/src/assets/primaryHighlighter.svg
@@ -0,0 +1,9 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="90" height="90" fill="url(#pattern0_2346_1963)"/>
+<defs>
+<pattern id="pattern0_2346_1963" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2346_1963" transform="scale(0.0111111)"/>
+</pattern>
+<image id="image0_2346_1963" width="90" height="90" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD5klEQVR4nO2bS2sUQRCAJyK+EB/4D7z6D+JV8KSIkEtEt9tDDoE1sTqQ3DqneBERvRhBEq8efSSiqBcRQQQlESGQqmxIjoL4SLyN9K4LUXd2Zmd3+jFbH+xtd7b720pV9SNRxDAMwzAMwzAMwxRPtbqyFwReVwK/gMQfStDs1aH1/Ra+uu8kLyhJ8V8vQbOux1Z+yZJiEPTN9fhKL1k1RH91PcbSS1Z10XjD9Tj7QfKCeZ/rsQaLHlreA5IetpOsJD3VFdrneqzBolkySy4FmiOZJZcCzZHMkkuB5khmyf0UyTEvSOxIjlm2Pckxy7YnOWbZPd6FA96ps9PCaW737O0nV3kPunNA4kyeTXuW3QFjFToCAn/mLW6cRjKiJF7ptotg2RkAQUu9aNlYdlvJa4NZ++Msh6uuc7bW8S7zinwDJM13shjxVXb9OyXdNrUGJG4rgXOjo8sHI1+KoJK41enKzzfZydfPcC7yAahgtbUE3AJBz0OQ3fb6mcRtL9IIJBVBQfdN4VMSF32WnfpsQd+jKB6IfC2CE5W1k+Y9PsvO8kwl6WbkaxEEQUs73+ejbNedTU9WglDBalH9cS+eE1SvrhJXgrg1NVw72uozPsgOSnK7IgiS5tt9zqXs4CSbQqcS89raYNrnXcgOTnJj9YQvEtLGctbn2C6QQRS+JmlRAS2KoEeRHUYkp08GE4ug57L9kpz2Z64EXsv9fItpxNt0kWV3DnowYNuyvZM8IWjY1p+e7rfFSBOtX+1WktZtRoXuIrKDWVb/C1TonIsB6xyyg5VsAEl3Wxc++lD0P753IjtoyQaQ+L7loC/jWRvfn1V20JINSfm5emHlkK0xZJEdtGQDSKq1GvzkyOphm+PIKzsIyQYQ9NZl6vhfNj0rnWSDknTLVTHcidkRbCyasp22ByXZAAJPJ08InxQ5mfoJTgWrGW9AhSu5QTwAAjfbTOpxryfVafSWQHI9dUynTxC7juy80btjDFvmynCJJVNXsv8cIszkid5GBNOS+YHMDxWFSGeSKddGTe79Y0G/lKQHE3L1lPOLLQ4kx53IzicZPyuBk1MXN45FodOl5DiL7PohgqBHfRW9BUiOmzm7VZ+tRzYPZFnhBZ977UimpqyPZpvVyKpf7RV0PrWrEPiyeWevdBQhWRWY34OEJfeVZFzkSC5e8j3ThURlpPhIxo3UQimpBgKHorJiIV1Mm37X9L3mpjwIfNM4PEBSgt4pSXeUWD1jTtejMjMua8dB4BhIfN1rySBQu55f6aUDSy5eOrDk4iMdWHLx0oElF8P4pdoJ01WAwE+N7oJhGIZhGIZhGIaJfOU3+RJ3R978IUEAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/frontend/src/components/highlight/EditSwitchButton/style.ts b/frontend/src/components/highlight/EditSwitchButton/style.ts
index 160647eb1..7e1dcc9da 100644
--- a/frontend/src/components/highlight/EditSwitchButton/style.ts
+++ b/frontend/src/components/highlight/EditSwitchButton/style.ts
@@ -6,7 +6,8 @@ interface EditorSwitchProps {
 export const EditSwitchButton = styled.button<EditorSwitchProps>`
   cursor: pointer;
 
-  width: 4rem;
+  width: 3.5rem;
+  height: 2rem;
   padding: 0.5rem;
 
   background-color: ${({ theme, $isEditable }) => ($isEditable ? theme.colors.primary : theme.colors.gray)};
@@ -18,8 +19,8 @@ export const EditSwitchButton = styled.button<EditorSwitchProps>`
 export const Circle = styled.div<EditorSwitchProps>`
   transform: translateX(${({ $isEditable }) => ($isEditable ? 0 : '1.5rem')});
 
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1rem;
+  height: 1rem;
 
   background-color: ${({ theme }) => theme.colors.white};
   border-radius: 50%;
diff --git a/frontend/src/components/highlight/HighlightEditor/index.tsx b/frontend/src/components/highlight/HighlightEditor/index.tsx
index acbf6d298..b62918def 100644
--- a/frontend/src/components/highlight/HighlightEditor/index.tsx
+++ b/frontend/src/components/highlight/HighlightEditor/index.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
+import GrayHighlighterIcon from '@/assets/grayHighlighter.svg';
+import PrimaryHighlighterIcon from '@/assets/primaryHighlighter.svg';
 import {
   EDITOR_ANSWER_CLASS_NAME,
   EDITOR_LINE_CLASS_NAME,
@@ -22,6 +24,16 @@ import HighlightToggleButtonContainer from '../HighlightToggleButtonContainer';
 
 import * as S from './style';
 
+const MODE_ICON = {
+  on: {
+    icon: PrimaryHighlighterIcon,
+    alt: '형광펜 기능 켜짐',
+  },
+  off: {
+    icon: GrayHighlighterIcon,
+    alt: '형광펜 기능 꺼짐',
+  },
+};
 interface HighlightEditorProps {
   questionId: number;
   answerList: ReviewAnswerResponseData[];
@@ -94,6 +106,11 @@ const HighlightEditor = ({ questionId, answerList }: HighlightEditorProps) => {
   return (
     <div ref={editorRef} style={{ position: 'relative' }}>
       <S.SwitchButtonWrapper>
+        <S.HighlightText $isEditable={isEditable}>형광펜</S.HighlightText>
+        <S.SwitchModIcon
+          src={MODE_ICON[isEditable ? 'on' : 'off'].icon}
+          alt={MODE_ICON[isEditable ? 'on' : 'off'].alt}
+        />
         <EditSwitchButton isEditable={isEditable} handleEditToggleButton={handleEditToggleButton} />
       </S.SwitchButtonWrapper>
       {[...editorAnswerMap.values()].map(({ answerId, answerIndex, lineList }) => (
diff --git a/frontend/src/components/highlight/HighlightEditor/style.ts b/frontend/src/components/highlight/HighlightEditor/style.ts
index f1069f686..3be605d6a 100644
--- a/frontend/src/components/highlight/HighlightEditor/style.ts
+++ b/frontend/src/components/highlight/HighlightEditor/style.ts
@@ -2,7 +2,20 @@ import styled from '@emotion/styled';
 
 export const SwitchButtonWrapper = styled.div`
   display: flex;
+  gap: 0.5rem;
+  align-items: center;
   justify-content: end;
+
   width: 100%;
   margin-bottom: 1rem;
 `;
+
+export const SwitchModIcon = styled.img`
+  width: 1.6rem;
+  height: 1.6rem;
+`;
+
+export const HighlightText = styled.span<{ $isEditable: boolean }>`
+  display: inline-block;
+  color: ${({ $isEditable, theme }) => ($isEditable ? theme.colors.primary : theme.colors.gray)};
+`;