diff --git a/frontend/src/components/common/TooltipToggleButton.tsx b/frontend/src/components/common/TooltipToggleButton.tsx
index 85247ce8..26d8a1aa 100644
--- a/frontend/src/components/common/TooltipToggleButton.tsx
+++ b/frontend/src/components/common/TooltipToggleButton.tsx
@@ -4,9 +4,6 @@ const style = {
 	toggleButton: {
 		width: "25px",
 		height: "25px",
-		minWidth: "25px",
-		padding: "0",
-		margin: "2px",
 		border: "none",
 		fontWeight: "bold",
 	},
diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx
index 12b6e92c..d7010279 100644
--- a/frontend/src/components/editor/Editor.tsx
+++ b/frontend/src/components/editor/Editor.tsx
@@ -14,9 +14,9 @@ import { useCreateUploadUrlMutation, useUploadFileMutation } from "../../hooks/a
 import { selectWorkspace } from "../../store/workspaceSlice";
 import { ScrollSyncPane } from "react-scroll-sync";
 import { selectSetting } from "../../store/settingSlice";
-import { FormatBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils";
+import { ToolBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils";
 
-import FormatBar from "./FormatBar";
+import ToolBar from "./ToolBar";
 
 function Editor() {
 	const dispatch = useDispatch();
@@ -28,7 +28,7 @@ function Editor() {
 	const { mutateAsync: createUploadUrl } = useCreateUploadUrlMutation();
 	const { mutateAsync: uploadFile } = useUploadFileMutation();
 
-	const [formatBarState, setFormatBarState] = useState<FormatBarState>({
+	const [toolBarState, setToolBarState] = useState<ToolBarState>({
 		show: false,
 		position: { top: 0, left: 0 },
 		selectedFormats: new Set<FormatType>(),
@@ -73,18 +73,19 @@ function Editor() {
 					checkAndAddFormat("`", FormatType.CODE);
 					checkAndAddFormat("~~", FormatType.STRIKETHROUGH);
 
-					setFormatBarState((prev) => ({
+					// TODO: Modify the rendering method so that it is not affected by the size of the Toolbar
+					setToolBarState((prev) => ({
 						...prev,
 						show: true,
 						position: {
-							top: coords.top - 8,
-							left: coords.left + 190,
+							top: coords.top - 5,
+							left: coords.left,
 						},
 						selectedFormats: formats,
 					}));
 				}
 			} else {
-				setFormatBarState((prev) => ({
+				setToolBarState((prev) => ({
 					...prev,
 					show: false,
 					selectedFormats: new Set(),
@@ -185,11 +186,8 @@ function Editor() {
 						minHeight: "100%",
 					}}
 				/>
-				{Boolean(formatBarState.show && editorStore.cmView) && (
-					<FormatBar
-						formatBarState={formatBarState}
-						onChangeFormatBarState={setFormatBarState}
-					/>
+				{Boolean(toolBarState.show) && (
+					<ToolBar toolBarState={toolBarState} onChangeToolBarState={setToolBarState} />
 				)}
 			</div>
 		</ScrollSyncPane>
diff --git a/frontend/src/components/editor/FormatBar.tsx b/frontend/src/components/editor/FormatBar.tsx
deleted file mode 100644
index e58516f2..00000000
--- a/frontend/src/components/editor/FormatBar.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Popover, ToggleButtonGroup } from "@mui/material";
-import TooltipToggleButton from "../common/TooltipToggleButton";
-import { FormatBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils";
-
-interface FormatBarProps {
-	formatBarState: FormatBarState;
-	onChangeFormatBarState: React.Dispatch<React.SetStateAction<FormatBarState>>;
-}
-
-function FormatBar({
-	formatBarState: { show: showFormatBar, position: formatBarPosition, selectedFormats },
-	onChangeFormatBarState,
-}: FormatBarProps) {
-	const { toggleButtonChangeHandler } = useFormatUtils();
-
-	return (
-		<Popover
-			open={showFormatBar}
-			anchorReference="anchorPosition"
-			anchorPosition={{
-				top: formatBarPosition.top,
-				left: formatBarPosition.left,
-			}}
-			onClose={() => onChangeFormatBarState((prev) => ({ ...prev, show: false }))}
-			anchorOrigin={{
-				vertical: "top",
-				horizontal: "left",
-			}}
-			transformOrigin={{
-				vertical: "bottom",
-				horizontal: "left",
-			}}
-			disableAutoFocus
-		>
-			<ToggleButtonGroup
-				sx={{ padding: "3px 5px" }}
-				value={Array.from(selectedFormats)}
-				onChange={toggleButtonChangeHandler(selectedFormats, onChangeFormatBarState)}
-				exclusive
-				aria-label="text formatting"
-			>
-				<TooltipToggleButton
-					color={selectedFormats.has(FormatType.ITALIC) ? "primary" : "secondary"}
-					title={"Cmd+I / Ctrl+I"}
-					value={FormatType.ITALIC}
-				>
-					<i>i</i>
-				</TooltipToggleButton>
-				<TooltipToggleButton
-					color={selectedFormats.has(FormatType.BOLD) ? "primary" : "secondary"}
-					title={"Cmd+B / Ctrl+B"}
-					value={FormatType.BOLD}
-				>
-					<strong>B</strong>
-				</TooltipToggleButton>
-				<TooltipToggleButton
-					color={selectedFormats.has(FormatType.STRIKETHROUGH) ? "primary" : "secondary"}
-					title={"Cmd+Shift+X / Ctrl+Shfit+X"}
-					value={FormatType.STRIKETHROUGH}
-				>
-					~
-				</TooltipToggleButton>
-				<TooltipToggleButton
-					color={selectedFormats.has(FormatType.CODE) ? "primary" : "secondary"}
-					title={"Cmd+E / Ctrl+E"}
-					value={FormatType.CODE}
-				>
-					{"</>"}
-				</TooltipToggleButton>
-			</ToggleButtonGroup>
-		</Popover>
-	);
-}
-
-export default FormatBar;
diff --git a/frontend/src/components/editor/ToolBar.tsx b/frontend/src/components/editor/ToolBar.tsx
new file mode 100644
index 00000000..d5f57e0e
--- /dev/null
+++ b/frontend/src/components/editor/ToolBar.tsx
@@ -0,0 +1,104 @@
+import { Popover, ToggleButtonGroup, Divider, Stack, Fade } from "@mui/material";
+import TooltipToggleButton from "../common/TooltipToggleButton";
+import { ToolBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils";
+import YorkieIntelligence from "./YorkieIntelligence";
+import { useDebounce } from "react-use";
+import { useState } from "react";
+
+interface ToolBarProps {
+	toolBarState: ToolBarState;
+	onChangeToolBarState: React.Dispatch<React.SetStateAction<ToolBarState>>;
+}
+
+function ToolBar({
+	toolBarState: { show: showToolBar, position: formatBarPosition, selectedFormats },
+	onChangeToolBarState,
+}: ToolBarProps) {
+	const { toggleButtonChangeHandler } = useFormatUtils();
+	const [debouncedShowToolBar, setDebouncedShowToolBar] = useState<boolean | null>(null);
+
+	useDebounce(
+		() => {
+			setDebouncedShowToolBar(showToolBar);
+		},
+		500,
+		[showToolBar]
+	);
+
+	if (!debouncedShowToolBar) return;
+
+	return (
+		<Popover
+			open={debouncedShowToolBar}
+			anchorReference="anchorPosition"
+			anchorPosition={{
+				top: formatBarPosition.top,
+				left: formatBarPosition.left,
+			}}
+			onClose={() => onChangeToolBarState((prev) => ({ ...prev, show: false }))}
+			anchorOrigin={{
+				vertical: "top",
+				horizontal: "left",
+			}}
+			transformOrigin={{
+				vertical: "bottom",
+				horizontal: "left",
+			}}
+			disableAutoFocus
+			TransitionComponent={Fade}
+			TransitionProps={{ timeout: 300 }}
+		>
+			<Stack direction={"row"} margin={"5px 7px"}>
+				<YorkieIntelligence />
+				<Divider
+					orientation="vertical"
+					flexItem
+					sx={{ height: "20px", alignSelf: "center", margin: "0 5px" }}
+				/>
+				<ToggleButtonGroup
+					value={Array.from(selectedFormats)}
+					onChange={toggleButtonChangeHandler(selectedFormats, onChangeToolBarState)}
+					exclusive
+					aria-label="text formatting"
+				>
+					<Stack direction={"row"} gap={"5px"} alignItems={"center"}>
+						<TooltipToggleButton
+							color={selectedFormats.has(FormatType.ITALIC) ? "primary" : "secondary"}
+							title={"Cmd+I / Ctrl+I"}
+							value={FormatType.ITALIC}
+						>
+							<i>i</i>
+						</TooltipToggleButton>
+						<TooltipToggleButton
+							color={selectedFormats.has(FormatType.BOLD) ? "primary" : "secondary"}
+							title={"Cmd+B / Ctrl+B"}
+							value={FormatType.BOLD}
+						>
+							<strong>B</strong>
+						</TooltipToggleButton>
+						<TooltipToggleButton
+							color={
+								selectedFormats.has(FormatType.STRIKETHROUGH)
+									? "primary"
+									: "secondary"
+							}
+							title={"Cmd+Shift+X / Ctrl+Shfit+X"}
+							value={FormatType.STRIKETHROUGH}
+						>
+							~
+						</TooltipToggleButton>
+						<TooltipToggleButton
+							color={selectedFormats.has(FormatType.CODE) ? "primary" : "secondary"}
+							title={"Cmd+E / Ctrl+E"}
+							value={FormatType.CODE}
+						>
+							{"</>"}
+						</TooltipToggleButton>
+					</Stack>
+				</ToggleButtonGroup>
+			</Stack>
+		</Popover>
+	);
+}
+
+export default ToolBar;
diff --git a/frontend/src/components/editor/YorkieIntelligence.tsx b/frontend/src/components/editor/YorkieIntelligence.tsx
index 1fcac643..26b7c335 100644
--- a/frontend/src/components/editor/YorkieIntelligence.tsx
+++ b/frontend/src/components/editor/YorkieIntelligence.tsx
@@ -1,36 +1,26 @@
-import { Card, CardActionArea, Fade, Popper, Stack, Typography, useTheme } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { useDebounce } from "react-use";
-import { INTELLIGENCE_FOOTER_ID, INTELLIGENCE_HEADER_ID } from "../../constants/intelligence";
+import { INTELLIGENCE_FOOTER_ID } from "../../constants/intelligence";
 import YorkieIntelligenceFooter from "./YorkieIntelligenceFooter";
+import { useSelector } from "react-redux";
+import { selectSetting } from "../../store/settingSlice";
 
 function YorkieIntelligence() {
-	const theme = useTheme();
 	const [footerOpen, setFooterOpen] = useState(false);
-	const [intelligenceHeaderPivot, setIntelligenceHeaderPivot] = useState<Element | null>(null);
 	const [intelligenceFooterPivot, setIntelligenceFooterPivot] = useState<Element | null>(null);
-	const [debouncedPivot, setDebouncedPivot] = useState<Element | null>(null);
 
-	useDebounce(
-		() => {
-			setDebouncedPivot(intelligenceHeaderPivot);
-		},
-		500,
-		[intelligenceHeaderPivot]
-	);
+	const { yorkieIntelligence } = useSelector(selectSetting);
 
 	useEffect(() => {
+		// initialize intelligence footer pivot
+		const intelligenceFooterPivot = document.getElementById(INTELLIGENCE_FOOTER_ID);
+		setIntelligenceFooterPivot(intelligenceFooterPivot);
+
 		document.addEventListener("selectionchange", function () {
-			const intelligenceHeaderPivot = document.getElementById(INTELLIGENCE_HEADER_ID);
+			// If changed selection (ex : text formatting), update the intelligence footer pivot
 			const intelligenceFooterPivot = document.getElementById(INTELLIGENCE_FOOTER_ID);
-			setIntelligenceHeaderPivot(intelligenceHeaderPivot);
 			setIntelligenceFooterPivot(intelligenceFooterPivot);
-
-			if (!intelligenceHeaderPivot) {
-				setFooterOpen(false);
-				setDebouncedPivot(null);
-			}
 		});
 	}, []);
 
@@ -38,41 +28,32 @@ function YorkieIntelligence() {
 		setFooterOpen((prev) => !prev);
 	};
 
-	if (!debouncedPivot || !intelligenceFooterPivot) return;
+	if (!intelligenceFooterPivot) return;
 
 	return (
 		<>
-			<Popper
-				open={Boolean(debouncedPivot)}
-				anchorEl={debouncedPivot}
-				placement="top-start"
-				transition
+			<Button
+				onClick={handleFooterOpen}
+				sx={{
+					padding: "3px 5px",
+					border: "none",
+					"&:hover": {
+						border: "none",
+					},
+				}}
+				disabled={!yorkieIntelligence?.enable}
 			>
-				{({ TransitionProps }) => (
-					<Fade {...TransitionProps}>
-						<Card
-							sx={{
-								boxShadow: theme.shadows[11],
-								borderRadius: 2,
-								mb: 1,
-							}}
-						>
-							<CardActionArea
-								sx={{
-									paddingX: 1.3,
-									paddingY: 0.3,
-								}}
-								onClick={handleFooterOpen}
-							>
-								<Stack direction="row" alignItems="center" gap={1}>
-									<img src="/yorkie.png" height={20} />
-									<Typography variant="subtitle1">Yorkie Intelligence</Typography>
-								</Stack>
-							</CardActionArea>
-						</Card>
-					</Fade>
-				)}
-			</Popper>
+				<img
+					src="/yorkie.png"
+					height={20}
+					alt="yorkie_img"
+					style={{ filter: yorkieIntelligence?.enable ? "none" : "grayscale(100%)" }}
+				/>
+				<Typography variant="subtitle1" fontSize={14}>
+					Yorkie Intelligence
+				</Typography>
+			</Button>
+
 			{footerOpen &&
 				createPortal(
 					<YorkieIntelligenceFooter onClose={handleFooterOpen} />,
diff --git a/frontend/src/hooks/useFormatUtils.ts b/frontend/src/hooks/useFormatUtils.ts
index 9443350d..deedf1e0 100644
--- a/frontend/src/hooks/useFormatUtils.ts
+++ b/frontend/src/hooks/useFormatUtils.ts
@@ -6,7 +6,7 @@ import { Dispatch, SetStateAction } from "react";
 import { useSelector } from "react-redux";
 import { selectEditor } from "../store/editorSlice";
 
-export interface FormatBarState {
+export interface ToolBarState {
 	show: boolean;
 	position: { top: number; left: number };
 	selectedFormats: Set<FormatType>;
@@ -122,7 +122,7 @@ export const useFormatUtils = () => {
 	const toggleButtonChangeHandler = useCallback(
 		(
 			selectedFormats: Set<FormatType>,
-			onChangeFormatBarState: Dispatch<SetStateAction<FormatBarState>>
+			onChangeToolBarState: Dispatch<SetStateAction<ToolBarState>>
 		) => {
 			return (_event: MouseEvent<HTMLElement>, format: FormatType) => {
 				if (!cmView) return;
@@ -133,7 +133,7 @@ export const useFormatUtils = () => {
 				} else {
 					newSelectedFormats.add(format);
 				}
-				onChangeFormatBarState((prev) => ({
+				onChangeToolBarState((prev) => ({
 					...prev,
 					selectedFormats: newSelectedFormats,
 				}));
diff --git a/frontend/src/pages/workspace/document/Index.tsx b/frontend/src/pages/workspace/document/Index.tsx
index 2a3fa823..8ae61c30 100644
--- a/frontend/src/pages/workspace/document/Index.tsx
+++ b/frontend/src/pages/workspace/document/Index.tsx
@@ -8,15 +8,12 @@ import { useGetDocumentQuery } from "../../../hooks/api/workspaceDocument";
 import { useGetWorkspaceQuery } from "../../../hooks/api/workspace";
 import DocumentView from "../../../components/editor/DocumentView";
 import { useYorkieDocument } from "../../../hooks/useYorkieDocument";
-import YorkieIntelligence from "../../../components/editor/YorkieIntelligence";
-import { selectSetting } from "../../../store/settingSlice";
 
 function DocumentIndex() {
 	const dispatch = useDispatch();
 	const params = useParams();
 
 	const userStore = useSelector(selectUser);
-	const settingStore = useSelector(selectSetting);
 	const { data: workspace, isLoading: isWorkspaceLoading } = useGetWorkspaceQuery(
 		params.workspaceSlug
 	);
@@ -49,7 +46,6 @@ function DocumentIndex() {
 	return (
 		<Box height="calc(100% - 64px)">
 			<DocumentView />
-			{settingStore.yorkieIntelligence?.enable && <YorkieIntelligence />}
 		</Box>
 	);
 }