diff --git a/src/features/team/components/real-team-rules-panel.tsx b/src/features/team/components/real-team-rules-panel.tsx
index 51c2ff8..9bda9c8 100644
--- a/src/features/team/components/real-team-rules-panel.tsx
+++ b/src/features/team/components/real-team-rules-panel.tsx
@@ -1,5 +1,18 @@
-import { LoaderCircle, RefreshCw, RotateCcw, Save } from "lucide-react";
-import { type FormEvent, useEffect, useState } from "react";
+import {
+	LoaderCircle,
+	PencilLine,
+	RefreshCw,
+	RotateCcw,
+	Save,
+	X,
+} from "lucide-react";
+import {
+	type FormEvent,
+	type ReactNode,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
 
 import { AppPanel, AppPanelHeader } from "@/components/app-shell";
 import { Badge } from "@/components/ui/badge";
@@ -13,6 +26,12 @@ import {
 	useTeamRuleQuery,
 	useUpdateTeamRuleMutation,
 } from "@/features/team/hooks/use-team-space-queries";
+import {
+	type TeamRuleMarkdownBlock,
+	type TeamRuleMarkdownListItem,
+	parseTeamRuleInlineCode,
+	parseTeamRuleMarkdown,
+} from "@/features/team/lib/team-rule-markdown";
 import { ApiError, getApiErrorMessage } from "@/lib/api/client";
 import type { MyProjectGroup } from "@/lib/types/project-group";
 import type { TeamRuleResponse } from "@/lib/types/team-space";
@@ -32,7 +51,12 @@ export function RealTeamRulesPanel({
 	const [draftContent, setDraftContent] = useState("");
 	const [syncedRuleKey, setSyncedRuleKey] = useState<string | null>(null);
 	const [feedback, setFeedback] = useState<ActionFeedback | null>(null);
+	const [isEditing, setIsEditing] = useState(false);
 	const teamRuleKey = teamRule ? getTeamRuleKey(teamRule) : null;
+	const markdownBlocks = useMemo(
+		() => parseTeamRuleMarkdown(teamRule?.content ?? ""),
+		[teamRule?.content],
+	);
 	const isBlank = draftContent.trim().length === 0;
 	const isTooLong = draftContent.length > maxTeamRuleContentLength;
 	const isDirty = Boolean(teamRule && draftContent !== teamRule.content);
@@ -59,7 +83,28 @@ export function RealTeamRulesPanel({
 		if (result.data) {
 			setDraftContent(result.data.content);
 			setSyncedRuleKey(getTeamRuleKey(result.data));
+			setIsEditing(false);
+		}
+	}
+
+	function handleStartEdit() {
+		if (!teamRule) {
+			return;
+		}
+
+		setDraftContent(teamRule.content);
+		setFeedback(null);
+		setIsEditing(true);
+	}
+
+	function handleCancelEdit() {
+		if (!teamRule) {
+			return;
 		}
+
+		setDraftContent(teamRule.content);
+		setFeedback(null);
+		setIsEditing(false);
 	}
 
 	function handleResetDraft() {
@@ -106,6 +151,7 @@ export function RealTeamRulesPanel({
 				message: "팀 룰을 저장했어요.",
 				tone: "success",
 			});
+			setIsEditing(false);
 		} catch (error: unknown) {
 			setFeedback({
 				message: getTeamRuleSaveErrorMessage(error),
@@ -180,108 +226,252 @@ export function RealTeamRulesPanel({
 		<AppPanel>
 			<AppPanelHeader
 				action={
-					<Badge variant={isDirty ? "warm" : "brand"}>
-						{getTeamRuleStatusLabel({
-							isDirty,
-							isFetching: teamRuleQuery.isFetching,
-							isSaving: updateTeamRuleMutation.isPending,
-						})}
-					</Badge>
+					<div className="flex flex-wrap items-center justify-end gap-2">
+						<Badge variant={isEditing && isDirty ? "warm" : "brand"}>
+							{getTeamRuleStatusLabel({
+								isDirty: isEditing && isDirty,
+								isFetching: teamRuleQuery.isFetching,
+								isSaving: updateTeamRuleMutation.isPending,
+							})}
+						</Badge>
+						{isEditing ? null : (
+							<Button onClick={handleStartEdit} size="sm" type="button">
+								<PencilLine data-icon="inline-start" />
+								수정
+							</Button>
+						)}
+					</div>
 				}
 				description="브랜치, 커밋, 리뷰, 공유 방식을 Markdown으로 정리해요."
 				eyebrow="Rulebook"
 				title="팀 룰"
 			/>
-			<form className="grid gap-4 p-5" onSubmit={handleSubmit}>
-				<RealActionFeedback feedback={feedback} />
-				<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_17rem]">
-					<div className="min-w-0">
-						<div className="flex flex-wrap items-end justify-between gap-2">
-							<label
-								className="text-sm font-semibold text-brand-ink"
-								htmlFor="team-rule-content"
-							>
-								Markdown
-							</label>
-							<span
-								className={cn(
-									"font-mono text-xs",
-									isTooLong ? "text-red-700" : "text-muted-foreground",
-								)}
-							>
-								{draftContent.length.toLocaleString()} /{" "}
-								{maxTeamRuleContentLength.toLocaleString()}
-							</span>
+			{isEditing ? (
+				<form className="grid gap-4 p-5" onSubmit={handleSubmit}>
+					<RealActionFeedback feedback={feedback} />
+					<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_17rem]">
+						<div className="min-w-0">
+							<div className="flex flex-wrap items-end justify-between gap-2">
+								<label
+									className="text-sm font-semibold text-brand-ink"
+									htmlFor="team-rule-content"
+								>
+									Markdown 편집
+								</label>
+								<span
+									className={cn(
+										"font-mono text-xs",
+										isTooLong ? "text-red-700" : "text-muted-foreground",
+									)}
+								>
+									{draftContent.length.toLocaleString()} /{" "}
+									{maxTeamRuleContentLength.toLocaleString()}
+								</span>
+							</div>
+							<textarea
+								className="mt-2 min-h-[28rem] w-full resize-y rounded-lg border border-input bg-white px-4 py-3 font-mono text-sm leading-7 text-brand-ink outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-70"
+								disabled={updateTeamRuleMutation.isPending}
+								id="team-rule-content"
+								onChange={(event) => {
+									setDraftContent(event.target.value);
+									setFeedback(null);
+								}}
+								spellCheck={false}
+								value={draftContent}
+							/>
+							{isBlank || isTooLong ? (
+								<p className="mt-2 text-sm leading-6 text-red-700">
+									{isBlank
+										? "팀 룰 내용을 입력해 주세요."
+										: "팀 룰 내용은 10000자 이하로 입력해 주세요."}
+								</p>
+							) : null}
 						</div>
-						<textarea
-							className="mt-2 min-h-[28rem] w-full resize-y rounded-lg border border-input bg-white px-4 py-3 font-mono text-sm leading-7 text-brand-ink outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-70"
+
+						<TeamRuleMetadataPanel teamRule={teamRule} />
+					</div>
+
+					<div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+						<Button
+							disabled={
+								teamRuleQuery.isFetching || updateTeamRuleMutation.isPending
+							}
+							onClick={() => void handleRefresh()}
+							type="button"
+							variant="outline"
+						>
+							{teamRuleQuery.isFetching ? (
+								<LoaderCircle
+									className="animate-spin"
+									data-icon="inline-start"
+								/>
+							) : (
+								<RefreshCw data-icon="inline-start" />
+							)}
+							다시 불러오기
+						</Button>
+						<Button
+							disabled={!isDirty || updateTeamRuleMutation.isPending}
+							onClick={handleResetDraft}
+							type="button"
+							variant="outline"
+						>
+							<RotateCcw data-icon="inline-start" />
+							되돌리기
+						</Button>
+						<Button
 							disabled={updateTeamRuleMutation.isPending}
-							id="team-rule-content"
-							onChange={(event) => {
-								setDraftContent(event.target.value);
-								setFeedback(null);
-							}}
-							spellCheck={false}
-							value={draftContent}
-						/>
-						{isBlank || isTooLong ? (
-							<p className="mt-2 text-sm leading-6 text-red-700">
-								{isBlank
-									? "팀 룰 내용을 입력해 주세요."
-									: "팀 룰 내용은 10000자 이하로 입력해 주세요."}
-							</p>
-						) : null}
+							onClick={handleCancelEdit}
+							type="button"
+							variant="outline"
+						>
+							<X data-icon="inline-start" />
+							취소
+						</Button>
+						<Button disabled={!canSave} type="submit">
+							{updateTeamRuleMutation.isPending ? (
+								<LoaderCircle
+									className="animate-spin"
+									data-icon="inline-start"
+								/>
+							) : (
+								<Save data-icon="inline-start" />
+							)}
+							저장
+						</Button>
+					</div>
+				</form>
+			) : (
+				<div className="grid gap-4 p-5">
+					<RealActionFeedback feedback={feedback} />
+					<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_17rem]">
+						<TeamRuleMarkdownPreview blocks={markdownBlocks} />
+						<TeamRuleMetadataPanel teamRule={teamRule} />
+					</div>
+					<div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+						<Button
+							disabled={teamRuleQuery.isFetching}
+							onClick={() => void handleRefresh()}
+							type="button"
+							variant="outline"
+						>
+							{teamRuleQuery.isFetching ? (
+								<LoaderCircle
+									className="animate-spin"
+									data-icon="inline-start"
+								/>
+							) : (
+								<RefreshCw data-icon="inline-start" />
+							)}
+							다시 불러오기
+						</Button>
+						<Button onClick={handleStartEdit} type="button">
+							<PencilLine data-icon="inline-start" />
+							수정
+						</Button>
 					</div>
+				</div>
+			)}
+		</AppPanel>
+	);
+}
 
-					<aside className="grid content-start gap-3 rounded-lg border border-border/70 bg-secondary/35 p-4">
-						<RuleMetadataItem
-							label="마지막 수정"
-							value={formatDateTime(teamRule.updatedAt)}
-						/>
-						<RuleMetadataItem
-							label="수정자"
-							value={teamRule.updatedByNickname}
+function TeamRuleMarkdownPreview({
+	blocks,
+}: {
+	blocks: TeamRuleMarkdownBlock[];
+}) {
+	if (!blocks.length) {
+		return (
+			<div className="rounded-lg border border-dashed border-border bg-secondary/30 p-5 text-sm text-muted-foreground">
+				아직 등록된 팀 룰이 없어요.
+			</div>
+		);
+	}
+
+	return (
+		<article className="min-w-0 rounded-lg border border-border/70 bg-white p-5 shadow-crisp">
+			<div className="grid gap-4">
+				{blocks.map((block) => (
+					<TeamRuleMarkdownBlockView block={block} key={block.id} />
+				))}
+			</div>
+		</article>
+	);
+}
+
+function TeamRuleMarkdownBlockView({
+	block,
+}: {
+	block: TeamRuleMarkdownBlock;
+}) {
+	if (block.type === "heading") {
+		const headingClassName =
+			block.level === 1
+				? "text-2xl font-semibold text-brand-ink"
+				: block.level === 2
+					? "border-border/70 border-b pb-2 text-lg font-semibold text-brand-ink"
+					: "text-base font-semibold text-brand-ink";
+
+		return (
+			<h3 className={cn("break-words", headingClassName)}>
+				{renderInlineCode(block.text)}
+			</h3>
+		);
+	}
+
+	if (block.type === "list") {
+		return <TeamRuleMarkdownList items={block.items} />;
+	}
+
+	return (
+		<p className="text-sm leading-7 text-muted-foreground">
+			{renderInlineCode(block.text)}
+		</p>
+	);
+}
+
+function TeamRuleMarkdownList({
+	depth = 0,
+	items,
+}: {
+	depth?: number;
+	items: TeamRuleMarkdownListItem[];
+}) {
+	return (
+		<ul className={cn("grid gap-2", depth > 0 ? "mt-2 pl-5" : "")}>
+			{items.map((item) => (
+				<li className="min-w-0 text-sm leading-7 text-brand-ink" key={item.id}>
+					<div className="flex gap-2">
+						<span
+							className={cn(
+								"mt-3 size-1.5 shrink-0 rounded-full",
+								depth > 0 ? "bg-muted-foreground/45" : "bg-primary",
+							)}
 						/>
-						<RuleMetadataItem label="버전" value={`#${teamRule.version}`} />
-					</aside>
-				</div>
+						<span className="min-w-0 break-words">
+							{renderInlineCode(item.text)}
+						</span>
+					</div>
+					{item.children.length > 0 ? (
+						<TeamRuleMarkdownList depth={depth + 1} items={item.children} />
+					) : null}
+				</li>
+			))}
+		</ul>
+	);
+}
 
-				<div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
-					<Button
-						disabled={
-							teamRuleQuery.isFetching || updateTeamRuleMutation.isPending
-						}
-						onClick={() => void handleRefresh()}
-						type="button"
-						variant="outline"
-					>
-						{teamRuleQuery.isFetching ? (
-							<LoaderCircle className="animate-spin" data-icon="inline-start" />
-						) : (
-							<RefreshCw data-icon="inline-start" />
-						)}
-						다시 불러오기
-					</Button>
-					<Button
-						disabled={!isDirty || updateTeamRuleMutation.isPending}
-						onClick={handleResetDraft}
-						type="button"
-						variant="outline"
-					>
-						<RotateCcw data-icon="inline-start" />
-						되돌리기
-					</Button>
-					<Button disabled={!canSave} type="submit">
-						{updateTeamRuleMutation.isPending ? (
-							<LoaderCircle className="animate-spin" data-icon="inline-start" />
-						) : (
-							<Save data-icon="inline-start" />
-						)}
-						저장
-					</Button>
-				</div>
-			</form>
-		</AppPanel>
+function TeamRuleMetadataPanel({ teamRule }: { teamRule: TeamRuleResponse }) {
+	return (
+		<aside className="grid content-start gap-3 rounded-lg border border-border/70 bg-secondary/35 p-4">
+			<RuleMetadataItem
+				label="마지막 수정"
+				value={formatDateTime(teamRule.updatedAt)}
+			/>
+			<RuleMetadataItem label="수정자" value={teamRule.updatedByNickname} />
+			<RuleMetadataItem label="버전" value={`#${teamRule.version}`} />
+		</aside>
 	);
 }
 
@@ -296,6 +486,25 @@ function RuleMetadataItem({ label, value }: { label: string; value: string }) {
 	);
 }
 
+function renderInlineCode(text: string): ReactNode[] {
+	return parseTeamRuleInlineCode(text).map((part, index) => {
+		const key = `${part.value}-${index}`;
+
+		if (part.type === "code") {
+			return (
+				<code
+					className="rounded-md border border-primary/15 bg-primary/10 px-1.5 py-0.5 font-mono text-xs text-primary"
+					key={key}
+				>
+					{part.value}
+				</code>
+			);
+		}
+
+		return <span key={key}>{part.value}</span>;
+	});
+}
+
 function getTeamRuleStatusLabel({
 	isDirty,
 	isFetching,
diff --git a/src/features/team/lib/team-rule-markdown.ts b/src/features/team/lib/team-rule-markdown.ts
new file mode 100644
index 0000000..dfde253
--- /dev/null
+++ b/src/features/team/lib/team-rule-markdown.ts
@@ -0,0 +1,203 @@
+export type TeamRuleMarkdownBlock =
+	| {
+			id: string;
+			level: number;
+			text: string;
+			type: "heading";
+	  }
+	| {
+			id: string;
+			items: TeamRuleMarkdownListItem[];
+			type: "list";
+	  }
+	| {
+			id: string;
+			text: string;
+			type: "paragraph";
+	  };
+
+export interface TeamRuleMarkdownListItem {
+	children: TeamRuleMarkdownListItem[];
+	id: string;
+	text: string;
+}
+
+export type TeamRuleInlinePart =
+	| {
+			type: "code";
+			value: string;
+	  }
+	| {
+			type: "text";
+			value: string;
+	  };
+
+interface MarkdownLine {
+	raw: string;
+	sourceIndex: number;
+}
+
+const headingPattern = /^(#{1,6})\s+(.+)$/;
+const unorderedListPattern = /^(\s*)[-*]\s+(.+)$/;
+const inlineCodePattern = /(`[^`]+`)/g;
+
+export function parseTeamRuleMarkdown(
+	markdown: string,
+): TeamRuleMarkdownBlock[] {
+	const lines = markdown
+		.replace(/\r\n/g, "\n")
+		.split("\n")
+		.map((raw, sourceIndex) => ({ raw, sourceIndex }));
+	const blocks: TeamRuleMarkdownBlock[] = [];
+	let lineIndex = 0;
+
+	while (lineIndex < lines.length) {
+		const line = lines[lineIndex];
+		const trimmedLine = line.raw.trim();
+
+		if (!trimmedLine) {
+			lineIndex += 1;
+			continue;
+		}
+
+		const headingMatch = trimmedLine.match(headingPattern);
+
+		if (headingMatch) {
+			blocks.push({
+				id: `heading-${line.sourceIndex}`,
+				level: headingMatch[1].length,
+				text: headingMatch[2],
+				type: "heading",
+			});
+			lineIndex += 1;
+			continue;
+		}
+
+		const listMatch = line.raw.match(unorderedListPattern);
+
+		if (listMatch) {
+			const { items, nextIndex } = parseList(lines, lineIndex, getIndent(line));
+
+			blocks.push({
+				id: `list-${line.sourceIndex}`,
+				items,
+				type: "list",
+			});
+			lineIndex = nextIndex;
+			continue;
+		}
+
+		const { nextIndex, text } = parseParagraph(lines, lineIndex);
+		blocks.push({
+			id: `paragraph-${line.sourceIndex}`,
+			text,
+			type: "paragraph",
+		});
+		lineIndex = nextIndex;
+	}
+
+	return blocks;
+}
+
+export function parseTeamRuleInlineCode(text: string): TeamRuleInlinePart[] {
+	return text
+		.split(inlineCodePattern)
+		.filter(Boolean)
+		.map((part) => {
+			if (part.startsWith("`") && part.endsWith("`")) {
+				return {
+					type: "code",
+					value: part.slice(1, -1),
+				};
+			}
+
+			return {
+				type: "text",
+				value: part,
+			};
+		});
+}
+
+function parseList(
+	lines: MarkdownLine[],
+	startIndex: number,
+	baseIndent: number,
+): {
+	items: TeamRuleMarkdownListItem[];
+	nextIndex: number;
+} {
+	const items: TeamRuleMarkdownListItem[] = [];
+	let lineIndex = startIndex;
+
+	while (lineIndex < lines.length) {
+		const line = lines[lineIndex];
+		const listMatch = line.raw.match(unorderedListPattern);
+
+		if (!listMatch) {
+			break;
+		}
+
+		const indent = getIndent(line);
+
+		if (indent < baseIndent) {
+			break;
+		}
+
+		if (indent > baseIndent) {
+			if (!items.length) {
+				break;
+			}
+
+			const nestedList = parseList(lines, lineIndex, indent);
+			items[items.length - 1].children.push(...nestedList.items);
+			lineIndex = nestedList.nextIndex;
+			continue;
+		}
+
+		items.push({
+			children: [],
+			id: `item-${line.sourceIndex}`,
+			text: listMatch[2],
+		});
+		lineIndex += 1;
+	}
+
+	return { items, nextIndex: lineIndex };
+}
+
+function parseParagraph(
+	lines: MarkdownLine[],
+	startIndex: number,
+): {
+	nextIndex: number;
+	text: string;
+} {
+	const paragraphLines: string[] = [];
+	let lineIndex = startIndex;
+
+	while (lineIndex < lines.length) {
+		const line = lines[lineIndex];
+		const trimmedLine = line.raw.trim();
+
+		if (
+			!trimmedLine ||
+			headingPattern.test(trimmedLine) ||
+			unorderedListPattern.test(line.raw)
+		) {
+			break;
+		}
+
+		paragraphLines.push(trimmedLine);
+		lineIndex += 1;
+	}
+
+	return {
+		nextIndex: lineIndex,
+		text: paragraphLines.join(" "),
+	};
+}
+
+function getIndent(line: MarkdownLine) {
+	const indentMatch = line.raw.match(/^(\s*)/);
+	return indentMatch?.[1].replace(/\t/g, "  ").length ?? 0;
+}