diff --git a/src/features/base64/Base64Page.tsx b/src/features/base64/Base64Page.tsx
index 763976d..0528be2 100644
--- a/src/features/base64/Base64Page.tsx
+++ b/src/features/base64/Base64Page.tsx
@@ -1,66 +1,168 @@
-import type { JSX } from "react";
+import type { JSX, ReactNode } from "react";
 import { useMemo, useState } from "react";
-import { ArrowLeftRight, Copy, RotateCcw } from "lucide-react";
+import {
+  ArrowLeftRight,
+  CheckCircle2,
+  Copy,
+  Download,
+  FileCode2,
+  RotateCcw,
+  TextCursorInput,
+  ToggleLeft,
+  ToggleRight,
+  TriangleAlert,
+} from "lucide-react";
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Tooltip } from "@/shared/ui/tooltip";
+import { PaneHeader, ToolSurface, ToolToolbar } from "@/shared/components/ToolSurface";
 import {
-  PaneHeader,
-  ToolOutput,
-  ToolSurface,
-  ToolTextarea,
-  ToolToolbar,
-  ToolTitle,
-} from "@/shared/components/ToolSurface";
-import { decodeBase64, encodeBase64 } from "./base64.service";
+  detectBase64Variant,
+  transformBase64,
+  type Base64Mode,
+  type Base64Result,
+  type Base64TextEncoding,
+  type Base64Variant,
+} from "./base64.service";
 
-export function Base64Page(): JSX.Element {
-  const [mode, setMode] = useState<"encode" | "decode">("encode");
-  const [input, setInput] = useState("Forge developer workstation");
-  const result = useMemo(() => {
-    if (mode === "encode") {
-      return { value: encodeBase64(input) };
-    }
+const sampleText = `Forge developer workstation
+Local-first tools, polished workflows, and UTF-8 text.
+Symbols: / ? & = + - _ Vietnamese: Xin chao Forge`;
 
-    return decodeBase64(input);
-  }, [input, mode]);
+export function Base64Page(): JSX.Element {
+  const [mode, setMode] = useState<Base64Mode>("encode");
+  const [input, setInput] = useState(sampleText);
+  const [variant, setVariant] = useState<Base64Variant>("standard");
+  const [padding, setPadding] = useState(true);
+  const [lineWrap, setLineWrap] = useState(false);
+  const [textEncoding, setTextEncoding] = useState<Base64TextEncoding>("utf-8");
+  const result = useMemo(
+    () =>
+      transformBase64(input, mode, {
+        lineWrap,
+        padding,
+        textEncoding,
+        variant,
+      }),
+    [input, lineWrap, mode, padding, textEncoding, variant],
+  );
 
   function swapMode(): void {
-    setMode((value) => (value === "encode" ? "decode" : "encode"));
-    setInput(result.value);
+    setMode((current) => (current === "encode" ? "decode" : "encode"));
+    if (result.value) {
+      setInput(result.value);
+      if (mode === "encode") {
+        setVariant(detectBase64Variant(result.value));
+      }
+    }
   }
 
   async function copyOutput(): Promise<void> {
     await navigator.clipboard.writeText(result.value);
   }
 
+  function downloadOutput(): void {
+    const blob = new Blob([result.value], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+
+    anchor.href = url;
+    anchor.download = mode === "encode" ? "forge-base64.txt" : "forge-decoded.txt";
+    anchor.click();
+    URL.revokeObjectURL(url);
+  }
+
   return (
     <ToolSurface>
       <ToolToolbar
         left={
-          <>
-            <ToolTitle eyebrow="Encoding" title="Base64" />
-            <Button onClick={swapMode} size="sm" variant="secondary">
-              <ArrowLeftRight aria-hidden="true" className="h-4 w-4" />
-              {mode === "encode" ? "Encode" : "Decode"}
-            </Button>
-          </>
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
+            <ModeButton
+              active={mode === "encode"}
+              icon={<FileCode2 aria-hidden="true" className="h-4 w-4" />}
+              label="Encode"
+              onClick={() => setMode("encode")}
+            />
+            <ModeButton
+              active={mode === "decode"}
+              icon={<TextCursorInput aria-hidden="true" className="h-4 w-4" />}
+              label="Decode"
+              onClick={() => setMode("decode")}
+            />
+            <Tooltip content="Swap mode and use current output as input" side="bottom">
+              <Button
+                aria-label="Swap mode"
+                disabled={!result.value}
+                onClick={swapMode}
+                size="icon"
+                variant="ghost"
+              >
+                <ArrowLeftRight aria-hidden="true" className="h-4 w-4" />
+              </Button>
+            </Tooltip>
+            <div className="ml-1 hidden h-6 w-px bg-slate-200 md:block" />
+            <SegmentedControl
+              label="Alphabet"
+              onChange={setVariant}
+              options={[
+                { label: "Standard", value: "standard" },
+                { label: "URL", value: "url" },
+              ]}
+              value={variant}
+            />
+            <SegmentedControl
+              label="Text"
+              onChange={setTextEncoding}
+              options={[
+                { label: "UTF-8", value: "utf-8" },
+                { label: "UTF-16LE", value: "utf-16le" },
+              ]}
+              value={textEncoding}
+            />
+          </div>
         }
         right={
           <>
+            <StatusPill result={result} />
+            <ToggleButton
+              active={padding}
+              disabled={mode === "decode"}
+              label="Padding"
+              onClick={() => setPadding((current) => !current)}
+            />
+            <ToggleButton
+              active={lineWrap}
+              disabled={mode === "decode"}
+              label="MIME wrap"
+              onClick={() => setLineWrap((current) => !current)}
+            />
             <Tooltip content="Copy output" side="bottom">
               <Button
                 aria-label="Copy output"
+                className="h-9 px-3"
                 disabled={!result.value}
                 onClick={() => void copyOutput()}
+                size="sm"
+                variant="secondary"
+              >
+                <Copy aria-hidden="true" className="h-4 w-4" />
+                Copy
+              </Button>
+            </Tooltip>
+            <Tooltip content="Download output" side="bottom">
+              <Button
+                aria-label="Download output"
+                disabled={!result.value}
+                onClick={downloadOutput}
                 size="icon"
                 variant="ghost"
               >
-                <Copy aria-hidden="true" className="h-4 w-4" />
+                <Download aria-hidden="true" className="h-4 w-4" />
               </Button>
             </Tooltip>
-            <Tooltip content="Reset" side="bottom">
+            <Tooltip content="Clear" side="bottom">
               <Button
-                aria-label="Reset"
+                aria-label="Clear"
                 onClick={() => setInput("")}
                 size="icon"
                 variant="ghost"
@@ -71,23 +173,234 @@ export function Base64Page(): JSX.Element {
           </>
         }
       />
-      <div className="grid min-h-0 flex-1 overflow-hidden lg:grid-cols-2">
+
+      <div className="grid min-h-0 flex-1 overflow-hidden xl:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
         <div className="flex min-h-0 flex-col">
           <PaneHeader
+            actions={
+              <StatsInline
+                bytes={result.inputStats.bytes}
+                chars={result.inputStats.chars}
+                lines={result.inputStats.lines}
+                tone="sky"
+              />
+            }
             title={mode === "encode" ? "Plain text" : "Base64 input"}
             tone="blue"
           />
-          <ToolTextarea
+          <TextPane
             label="Base64 input"
             onChange={setInput}
-            placeholder={mode === "encode" ? "Text to encode..." : "Base64 to decode..."}
+            placeholder={
+              mode === "encode" ? "Text to encode..." : "Paste Base64 to decode..."
+            }
             value={input}
           />
         </div>
-        <div className="border-t border-slate-200 lg:border-l lg:border-t-0">
-          <ToolOutput error={result.error} label="Output" value={result.value} />
+
+        <div className="flex min-h-0 flex-col border-t border-slate-200 xl:border-l xl:border-t-0">
+          <PaneHeader
+            actions={
+              <StatsInline
+                bytes={result.outputStats.bytes}
+                chars={result.outputStats.chars}
+                lines={result.outputStats.lines}
+                tone={result.error ? "rose" : "emerald"}
+              />
+            }
+            title={mode === "encode" ? "Base64 output" : "Decoded text"}
+            tone={result.error ? "rose" : "emerald"}
+          />
+          {result.error ? (
+            <ErrorPanel message={result.error} />
+          ) : (
+            <TextPane label="Base64 output" readOnly value={result.value} />
+          )}
         </div>
       </div>
     </ToolSurface>
   );
 }
+
+interface ModeButtonProps {
+  active: boolean;
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+}
+
+function ModeButton({ active, icon, label, onClick }: ModeButtonProps): JSX.Element {
+  return (
+    <Button onClick={onClick} size="sm" variant={active ? "secondary" : "ghost"}>
+      {icon}
+      {label}
+    </Button>
+  );
+}
+
+interface SegmentedControlProps<T extends string> {
+  label: string;
+  onChange: (value: T) => void;
+  options: Array<{ label: string; value: T }>;
+  value: T;
+}
+
+function SegmentedControl<T extends string>({
+  label,
+  onChange,
+  options,
+  value,
+}: SegmentedControlProps<T>): JSX.Element {
+  return (
+    <div className="flex items-center gap-1 rounded-md border border-slate-200 bg-white p-1 shadow-sm">
+      <span className="hidden px-1 text-[11px] font-bold uppercase tracking-[0.08em] text-slate-400 md:inline">
+        {label}
+      </span>
+      {options.map((option) => (
+        <button
+          className={cn(
+            "h-7 rounded px-2 text-[12px] font-semibold transition",
+            value === option.value
+              ? "bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-100"
+              : "text-slate-500 hover:bg-slate-50 hover:text-slate-950",
+          )}
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          type="button"
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function ToggleButton({
+  active,
+  disabled = false,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  disabled?: boolean;
+  label: string;
+  onClick: () => void;
+}): JSX.Element {
+  return (
+    <button
+      aria-pressed={active}
+      className={cn(
+        "flex h-9 items-center gap-2 rounded-md px-2.5 text-[12px] font-semibold transition",
+        active
+          ? "bg-sky-50 text-sky-700 ring-1 ring-sky-100"
+          : "text-slate-600 hover:bg-slate-100 hover:text-slate-950",
+        disabled && "pointer-events-none opacity-40",
+      )}
+      disabled={disabled}
+      onClick={onClick}
+      type="button"
+    >
+      {active ? (
+        <ToggleRight aria-hidden="true" className="h-4 w-4" />
+      ) : (
+        <ToggleLeft aria-hidden="true" className="h-4 w-4" />
+      )}
+      {label}
+    </button>
+  );
+}
+
+function StatusPill({ result }: { result: Base64Result }): JSX.Element {
+  if (result.error) {
+    return (
+      <span className="hidden h-9 items-center gap-2 rounded-md border border-rose-200 bg-rose-50 px-3 text-[12px] font-semibold text-rose-700 md:flex">
+        <TriangleAlert aria-hidden="true" className="h-4 w-4" />
+        Invalid Base64
+      </span>
+    );
+  }
+
+  return (
+    <span className="hidden h-8 items-center gap-2 rounded-md border border-emerald-200 bg-emerald-50 px-2.5 text-[12px] font-semibold text-emerald-700 md:flex">
+      <CheckCircle2 aria-hidden="true" className="h-4 w-4" />
+      Ready
+    </span>
+  );
+}
+
+function StatsInline({
+  bytes,
+  chars,
+  lines,
+  tone,
+}: {
+  bytes: number;
+  chars: number;
+  lines: number;
+  tone: "emerald" | "rose" | "sky";
+}): JSX.Element {
+  const toneClass =
+    tone === "rose"
+      ? "text-rose-700"
+      : tone === "emerald"
+        ? "text-emerald-700"
+        : "text-sky-600";
+
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 flex-wrap items-center justify-end gap-2 text-[12px] font-semibold normal-case tracking-normal",
+        toneClass,
+      )}
+    >
+      <span>{chars.toLocaleString()} chars</span>
+      <span className="h-1 w-1 rounded-full bg-current opacity-40" />
+      <span>{bytes.toLocaleString()} bytes</span>
+      <span>{lines.toLocaleString()} lines</span>
+    </div>
+  );
+}
+
+function TextPane({
+  label,
+  onChange,
+  placeholder,
+  readOnly = false,
+  value,
+}: {
+  label: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  readOnly?: boolean;
+  value: string;
+}): JSX.Element {
+  return (
+    <label className="block min-h-0 flex-1 bg-white">
+      <span className="sr-only">{label}</span>
+      <textarea
+        className="scrollbar-forge h-full min-h-0 w-full resize-none border-0 bg-white p-4 font-mono text-[13px] leading-6 text-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/80 selection:text-slate-950"
+        onChange={(event) => onChange?.(event.target.value)}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        spellCheck={false}
+        value={value}
+      />
+    </label>
+  );
+}
+
+function ErrorPanel({ message }: { message: string }): JSX.Element {
+  return (
+    <div className="scrollbar-forge min-h-0 flex-1 overflow-auto bg-white p-4">
+      <div className="rounded-lg border border-rose-200 bg-rose-50 p-4 text-rose-800">
+        <div className="flex items-start gap-3">
+          <TriangleAlert aria-hidden="true" className="mt-0.5 h-5 w-5 shrink-0" />
+          <div>
+            <p className="text-[14px] font-semibold">Unable to decode</p>
+            <p className="mt-1 break-words font-mono text-[13px] leading-5">{message}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/base64/base64.service.test.ts b/src/features/base64/base64.service.test.ts
index e4b7b77..d9a392a 100644
--- a/src/features/base64/base64.service.test.ts
+++ b/src/features/base64/base64.service.test.ts
@@ -1,5 +1,12 @@
 import { describe, expect, it } from "vitest";
-import { hasBase64Input, normalizeBase64Input } from "./base64.service";
+import {
+  decodeBase64,
+  detectBase64Variant,
+  encodeBase64,
+  hasBase64Input,
+  normalizeBase64Input,
+  transformBase64,
+} from "./base64.service";
 
 describe("base64 service", () => {
   it("normalizes user input", () => {
@@ -9,4 +16,46 @@ describe("base64 service", () => {
   it("detects empty input", () => {
     expect(hasBase64Input("   ")).toBe(false);
   });
+
+  it("encodes and decodes UTF-8 text", () => {
+    const encoded = encodeBase64("Forge tiếng Việt");
+
+    expect(encoded).toBe("Rm9yZ2UgdGnhur9uZyBWaeG7h3Q=");
+    expect(decodeBase64(encoded).value).toBe("Forge tiếng Việt");
+  });
+
+  it("supports Base64URL without padding", () => {
+    const encoded = encodeBase64("https://forge.local/?a=1&b=2", {
+      padding: false,
+      variant: "url",
+    });
+
+    expect(encoded).not.toContain("=");
+    expect(encoded).not.toContain("+");
+    expect(decodeBase64(encoded, { variant: "url" }).value).toBe(
+      "https://forge.local/?a=1&b=2",
+    );
+    expect(detectBase64Variant(encoded)).toBe("url");
+  });
+
+  it("supports UTF-16LE text", () => {
+    const encoded = encodeBase64("Forge", { textEncoding: "utf-16le" });
+
+    expect(encoded).toBe("RgBvAHIAZwBlAA==");
+    expect(decodeBase64(encoded, { textEncoding: "utf-16le" }).value).toBe("Forge");
+  });
+
+  it("wraps MIME lines when requested", () => {
+    const encoded = encodeBase64("a".repeat(80), { lineWrap: true });
+
+    expect(encoded).toContain("\n");
+    expect(decodeBase64(encoded).value).toBe("a".repeat(80));
+  });
+
+  it("returns errors through transform", () => {
+    const result = transformBase64("not valid !!!", "decode");
+
+    expect(result.error).toBeTruthy();
+    expect(result.value).toBe("");
+  });
 });
diff --git a/src/features/base64/base64.service.ts b/src/features/base64/base64.service.ts
index 982b7b2..1e6cb95 100644
--- a/src/features/base64/base64.service.ts
+++ b/src/features/base64/base64.service.ts
@@ -2,11 +2,37 @@ export interface Base64Input {
   value: string;
 }
 
+export type Base64Mode = "encode" | "decode";
+export type Base64Variant = "standard" | "url";
+export type Base64TextEncoding = "utf-8" | "utf-16le";
+
+export interface Base64Options {
+  lineWrap: boolean;
+  padding: boolean;
+  textEncoding: Base64TextEncoding;
+  variant: Base64Variant;
+}
+
+export interface Base64Stats {
+  bytes: number;
+  chars: number;
+  lines: number;
+}
+
 export interface Base64Result {
   error?: string;
+  inputStats: Base64Stats;
+  outputStats: Base64Stats;
   value: string;
 }
 
+const defaultOptions: Base64Options = {
+  lineWrap: false,
+  padding: true,
+  textEncoding: "utf-8",
+  variant: "standard",
+};
+
 export function normalizeBase64Input(input: string): string {
   return input.trim();
 }
@@ -15,20 +41,175 @@ export function hasBase64Input(input: string): boolean {
   return normalizeBase64Input(input).length > 0;
 }
 
-export function encodeBase64(input: string): string {
-  const bytes = new TextEncoder().encode(input);
-  const binary = Array.from(bytes, (byte) => String.fromCharCode(byte)).join("");
+export function transformBase64(
+  input: string,
+  mode: Base64Mode,
+  options: Partial<Base64Options> = {},
+): Base64Result {
+  const mergedOptions = { ...defaultOptions, ...options };
+
+  if (!input) {
+    return {
+      inputStats: getTextStats(input, mergedOptions.textEncoding),
+      outputStats: getTextStats("", mergedOptions.textEncoding),
+      value: "",
+    };
+  }
+
+  try {
+    const value =
+      mode === "encode"
+        ? encodeBase64(input, mergedOptions)
+        : decodeBase64(input, mergedOptions).value;
+
+    return {
+      inputStats: getTextStats(input, mergedOptions.textEncoding),
+      outputStats: getTextStats(value, mergedOptions.textEncoding),
+      value,
+    };
+  } catch (error) {
+    return {
+      error: error instanceof Error ? error.message : "Unable to transform Base64.",
+      inputStats: getTextStats(input, mergedOptions.textEncoding),
+      outputStats: getTextStats("", mergedOptions.textEncoding),
+      value: "",
+    };
+  }
+}
+
+export function encodeBase64(
+  input: string,
+  options: Partial<Base64Options> = {},
+): string {
+  const mergedOptions = { ...defaultOptions, ...options };
+  const bytes = encodeText(input, mergedOptions.textEncoding);
+  let output = encodeBytesBase64(bytes);
+
+  if (mergedOptions.variant === "url") {
+    output = output.replaceAll("+", "-").replaceAll("/", "_");
+  }
+
+  if (!mergedOptions.padding) {
+    output = output.replace(/=+$/, "");
+  }
+
+  return mergedOptions.lineWrap ? wrapBase64Lines(output) : output;
+}
+
+export function decodeBase64(
+  input: string,
+  options: Partial<Base64Options> = {},
+): Base64Result {
+  const mergedOptions = { ...defaultOptions, ...options };
+  const normalized = normalizeEncodedInput(input, mergedOptions.variant);
+  const bytes = decodeBase64Bytes(normalized);
+  const value = decodeText(bytes, mergedOptions.textEncoding);
+
+  return {
+    inputStats: getEncodedStats(input),
+    outputStats: getTextStats(value, mergedOptions.textEncoding),
+    value,
+  };
+}
+
+export function detectBase64Variant(input: string): Base64Variant {
+  const normalized = normalizeBase64Input(input);
+
+  return /[-_]/.test(normalized) && !/[+/]/.test(normalized) ? "url" : "standard";
+}
+
+function normalizeEncodedInput(input: string, variant: Base64Variant): string {
+  const compact = normalizeBase64Input(input).replace(/\s+/g, "");
+  const standard =
+    variant === "url" ? compact.replaceAll("-", "+").replaceAll("_", "/") : compact;
+
+  if (!/^[A-Za-z0-9+/]*={0,2}$/.test(standard)) {
+    throw new Error("Input contains characters outside the selected Base64 alphabet.");
+  }
+
+  if (standard.length % 4 === 1) {
+    throw new Error("Input length is not valid Base64.");
+  }
+
+  return standard.padEnd(Math.ceil(standard.length / 4) * 4, "=");
+}
+
+function encodeBytesBase64(bytes: Uint8Array): string {
+  let binary = "";
+
+  bytes.forEach((byte) => {
+    binary += String.fromCharCode(byte);
+  });
 
   return btoa(binary);
 }
 
-export function decodeBase64(input: string): Base64Result {
+function decodeBase64Bytes(input: string): Uint8Array {
   try {
-    const binary = atob(normalizeBase64Input(input));
-    const bytes = Uint8Array.from(binary, (character) => character.charCodeAt(0));
+    const binary = atob(input);
 
-    return { value: new TextDecoder().decode(bytes) };
+    return Uint8Array.from(binary, (character) => character.charCodeAt(0));
   } catch {
-    return { error: "Input is not valid Base64.", value: "" };
+    throw new Error("Input is not valid Base64.");
+  }
+}
+
+function encodeText(input: string, encoding: Base64TextEncoding): Uint8Array {
+  if (encoding === "utf-16le") {
+    const bytes = new Uint8Array(input.length * 2);
+
+    for (let index = 0; index < input.length; index += 1) {
+      const code = input.charCodeAt(index);
+
+      bytes[index * 2] = code & 0xff;
+      bytes[index * 2 + 1] = code >> 8;
+    }
+
+    return bytes;
+  }
+
+  return new TextEncoder().encode(input);
+}
+
+function decodeText(bytes: Uint8Array, encoding: Base64TextEncoding): string {
+  if (encoding === "utf-16le") {
+    if (bytes.length % 2 !== 0) {
+      throw new Error("Decoded bytes are not valid UTF-16LE text.");
+    }
+
+    let output = "";
+
+    for (let index = 0; index < bytes.length; index += 2) {
+      output += String.fromCharCode(bytes[index] | (bytes[index + 1] << 8));
+    }
+
+    return output;
   }
+
+  return new TextDecoder("utf-8", { fatal: true }).decode(bytes);
+}
+
+function wrapBase64Lines(input: string): string {
+  return input.match(/.{1,76}/g)?.join("\n") ?? "";
+}
+
+function getTextStats(input: string, encoding: Base64TextEncoding): Base64Stats {
+  return {
+    bytes: encodeText(input, encoding).length,
+    chars: input.length,
+    lines: input ? input.split(/\r\n|\n|\r/).length : 0,
+  };
+}
+
+function getEncodedStats(input: string): Base64Stats {
+  const compact = input.replace(/\s+/g, "");
+
+  return {
+    bytes: Math.max(
+      0,
+      Math.floor((compact.length * 3) / 4) - (compact.match(/=/g)?.length ?? 0),
+    ),
+    chars: compact.length,
+    lines: input ? input.split(/\r\n|\n|\r/).length : 0,
+  };
 }
diff --git a/src/features/jwt-decoder/JwtDecoderPage.tsx b/src/features/jwt-decoder/JwtDecoderPage.tsx
index 3755267..9584068 100644
--- a/src/features/jwt-decoder/JwtDecoderPage.tsx
+++ b/src/features/jwt-decoder/JwtDecoderPage.tsx
@@ -362,55 +362,21 @@ function TokenInput({
   onChange: (value: string) => void;
   value: string;
 }): JSX.Element {
-  const segments = value.split(".");
-
   return (
-    <div className="relative min-h-0 flex-1 overflow-hidden bg-white">
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute inset-0 overflow-hidden p-4 font-mono text-[13px] leading-6"
-      >
-        <span
-          className={cn(
-            "block",
-            lineWrap ? "whitespace-pre-wrap break-all" : "w-max whitespace-pre",
-          )}
-        >
-          {segments.map((segment, index) => (
-            <span key={`${segment}-${index}`}>
-              <span
-                className={
-                  index === 0
-                    ? "text-sky-700"
-                    : index === 1
-                      ? "text-emerald-700"
-                      : "text-violet-700"
-                }
-              >
-                {segment}
-              </span>
-              {index < segments.length - 1 ? (
-                <span className="text-slate-400">.</span>
-              ) : null}
-            </span>
-          ))}
-        </span>
-      </div>
-      <label className="relative block h-full min-h-0 bg-transparent">
-        <span className="sr-only">JWT input</span>
-        <textarea
-          className={cn(
-            "scrollbar-forge h-full min-h-0 w-full resize-none border-0 bg-transparent p-4 font-mono text-[13px] leading-6 text-transparent caret-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/80 selection:text-slate-950",
-            lineWrap ? "overflow-auto" : "overflow-auto whitespace-pre",
-          )}
-          onChange={(event) => onChange(event.target.value)}
-          placeholder="Paste a JWT..."
-          spellCheck={false}
-          value={value}
-          wrap={lineWrap ? "soft" : "off"}
-        />
-      </label>
-    </div>
+    <label className="block min-h-0 flex-1 bg-white">
+      <span className="sr-only">JWT input</span>
+      <textarea
+        className={cn(
+          "scrollbar-forge h-full min-h-0 w-full resize-none border-0 bg-white p-4 font-mono text-[13px] leading-6 text-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/80 selection:text-slate-950",
+          lineWrap ? "overflow-auto break-all" : "overflow-auto whitespace-pre",
+        )}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder="Paste a JWT..."
+        spellCheck={false}
+        value={value}
+        wrap={lineWrap ? "soft" : "off"}
+      />
+    </label>
   );
 }
 
diff --git a/src/features/url-encoder/UrlEncoderPage.tsx b/src/features/url-encoder/UrlEncoderPage.tsx
index c9b12d6..f8fa1f9 100644
--- a/src/features/url-encoder/UrlEncoderPage.tsx
+++ b/src/features/url-encoder/UrlEncoderPage.tsx
@@ -1,66 +1,157 @@
-import type { JSX } from "react";
+import type { JSX, ReactNode } from "react";
 import { useMemo, useState } from "react";
-import { ArrowLeftRight, Copy, RotateCcw } from "lucide-react";
+import {
+  ArrowLeftRight,
+  CheckCircle2,
+  Copy,
+  Download,
+  Link2,
+  ListTree,
+  RotateCcw,
+  Rows3,
+  TextCursorInput,
+  ToggleLeft,
+  ToggleRight,
+  TriangleAlert,
+} from "lucide-react";
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Tooltip } from "@/shared/ui/tooltip";
+import { PaneHeader, ToolSurface, ToolToolbar } from "@/shared/components/ToolSurface";
 import {
-  PaneHeader,
-  ToolOutput,
-  ToolSurface,
-  ToolTextarea,
-  ToolToolbar,
-  ToolTitle,
-} from "@/shared/components/ToolSurface";
-import { decodeUrlComponent, encodeUrlComponent } from "./url-encoder.service";
+  transformUrl,
+  type QueryParam,
+  type UrlEncoderResult,
+  type UrlMode,
+  type UrlPart,
+  type UrlStrategy,
+} from "./url-encoder.service";
 
-export function UrlEncoderPage(): JSX.Element {
-  const [mode, setMode] = useState<"encode" | "decode">("encode");
-  const [input, setInput] = useState("https://forge.local/tools?name=Markdown Preview");
-  const result = useMemo(() => {
-    if (mode === "encode") {
-      return { value: encodeUrlComponent(input) };
-    }
+type ResultView = "text" | "breakdown";
 
-    return decodeUrlComponent(input);
-  }, [input, mode]);
+const sampleUrl =
+  "https://forge.local/tools/url-encoder?name=Markdown Preview&redirect=/tools/json-yaml&lang=vi-VN#result panel";
+
+export function UrlEncoderPage(): JSX.Element {
+  const [mode, setMode] = useState<UrlMode>("encode");
+  const [strategy, setStrategy] = useState<UrlStrategy>("component");
+  const [input, setInput] = useState(sampleUrl);
+  const [decodePlus, setDecodePlus] = useState(true);
+  const [encodeSpaceAsPlus, setEncodeSpaceAsPlus] = useState(false);
+  const [view, setView] = useState<ResultView>("text");
+  const result = useMemo(
+    () =>
+      transformUrl(input, mode, {
+        decodePlus,
+        encodeSpaceAsPlus,
+        strategy,
+      }),
+    [decodePlus, encodeSpaceAsPlus, input, mode, strategy],
+  );
 
   function swapMode(): void {
-    setMode((value) => (value === "encode" ? "decode" : "encode"));
-    setInput(result.value);
+    setMode((current) => (current === "encode" ? "decode" : "encode"));
+    if (result.value) {
+      setInput(result.value);
+    }
   }
 
   async function copyOutput(): Promise<void> {
     await navigator.clipboard.writeText(result.value);
   }
 
+  function downloadOutput(): void {
+    const blob = new Blob([result.value], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+
+    anchor.href = url;
+    anchor.download =
+      mode === "encode" ? "forge-url-encoded.txt" : "forge-url-decoded.txt";
+    anchor.click();
+    URL.revokeObjectURL(url);
+  }
+
   return (
     <ToolSurface>
       <ToolToolbar
         left={
-          <>
-            <ToolTitle eyebrow="Encoding" title="URL Encoder" />
-            <Button onClick={swapMode} size="sm" variant="secondary">
-              <ArrowLeftRight aria-hidden="true" className="h-4 w-4" />
-              {mode === "encode" ? "Encode URL" : "Decode URL"}
-            </Button>
-          </>
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
+            <ModeButton
+              active={mode === "encode"}
+              icon={<Link2 aria-hidden="true" className="h-4 w-4" />}
+              label="Encode"
+              onClick={() => setMode("encode")}
+            />
+            <ModeButton
+              active={mode === "decode"}
+              icon={<TextCursorInput aria-hidden="true" className="h-4 w-4" />}
+              label="Decode"
+              onClick={() => setMode("decode")}
+            />
+            <Tooltip content="Swap mode and use current output as input" side="bottom">
+              <Button
+                aria-label="Swap mode"
+                disabled={!result.value}
+                onClick={swapMode}
+                size="icon"
+                variant="ghost"
+              >
+                <ArrowLeftRight aria-hidden="true" className="h-4 w-4" />
+              </Button>
+            </Tooltip>
+            <div className="ml-1 hidden h-6 w-px bg-slate-200 md:block" />
+            <SegmentedControl
+              label="Mode"
+              onChange={setStrategy}
+              options={[
+                { label: "Component", value: "component" },
+                { label: "Full URL", value: "full-url" },
+                { label: "Form", value: "form" },
+              ]}
+              value={strategy}
+            />
+          </div>
         }
         right={
           <>
+            <StatusPill result={result} />
+            <ToggleButton
+              active={mode === "encode" ? encodeSpaceAsPlus : decodePlus}
+              label={mode === "encode" ? "Space as +" : "Decode +"}
+              onClick={() =>
+                mode === "encode"
+                  ? setEncodeSpaceAsPlus((current) => !current)
+                  : setDecodePlus((current) => !current)
+              }
+            />
             <Tooltip content="Copy output" side="bottom">
               <Button
                 aria-label="Copy output"
+                className="h-9 px-3"
                 disabled={!result.value}
                 onClick={() => void copyOutput()}
+                size="sm"
+                variant="secondary"
+              >
+                <Copy aria-hidden="true" className="h-4 w-4" />
+                Copy
+              </Button>
+            </Tooltip>
+            <Tooltip content="Download output" side="bottom">
+              <Button
+                aria-label="Download output"
+                disabled={!result.value}
+                onClick={downloadOutput}
                 size="icon"
                 variant="ghost"
               >
-                <Copy aria-hidden="true" className="h-4 w-4" />
+                <Download aria-hidden="true" className="h-4 w-4" />
               </Button>
             </Tooltip>
-            <Tooltip content="Reset" side="bottom">
+            <Tooltip content="Clear" side="bottom">
               <Button
-                aria-label="Reset"
+                aria-label="Clear"
                 onClick={() => setInput("")}
                 size="icon"
                 variant="ghost"
@@ -71,25 +162,308 @@ export function UrlEncoderPage(): JSX.Element {
           </>
         }
       />
-      <div className="grid min-h-0 flex-1 overflow-hidden lg:grid-cols-2">
+
+      <div className="grid min-h-0 flex-1 overflow-hidden xl:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
         <div className="flex min-h-0 flex-col">
           <PaneHeader
-            title={mode === "encode" ? "Raw URL or text" : "Encoded URL"}
-            tone="emerald"
+            actions={
+              <span className="text-[12px] font-semibold normal-case tracking-normal text-sky-600">
+                {input.length.toLocaleString()} chars
+              </span>
+            }
+            title={mode === "encode" ? "Raw URL or text" : "Encoded input"}
+            tone="blue"
           />
-          <ToolTextarea
+          <TextPane
             label="URL input"
             onChange={setInput}
             placeholder={
-              mode === "encode" ? "Text or URL to encode..." : "Percent-encoded text..."
+              mode === "encode"
+                ? "Paste URL, query string, or text..."
+                : "Paste percent-encoded text..."
             }
             value={input}
           />
         </div>
-        <div className="border-t border-slate-200 lg:border-l lg:border-t-0">
-          <ToolOutput error={result.error} label="Output" value={result.value} />
+
+        <div className="flex min-h-0 flex-col border-t border-slate-200 xl:border-l xl:border-t-0">
+          <PaneHeader
+            actions={
+              <div className="flex min-w-0 flex-wrap items-center justify-end gap-2 text-[12px] font-semibold normal-case tracking-normal text-emerald-700">
+                <span>{result.stats.chars.toLocaleString()} chars</span>
+                <span className="h-1 w-1 rounded-full bg-emerald-300" />
+                <span>{result.stats.params.toLocaleString()} params</span>
+              </div>
+            }
+            title={
+              <span className="flex min-w-0 items-center gap-2">
+                <span>{mode === "encode" ? "Encoded output" : "Decoded output"}</span>
+                <OutputTabs onChange={setView} value={view} />
+              </span>
+            }
+            tone={result.error ? "rose" : "emerald"}
+          />
+          {result.error ? (
+            <ErrorPanel message={result.error} />
+          ) : view === "breakdown" ? (
+            <BreakdownPanel parts={result.parts} queryParams={result.queryParams} />
+          ) : (
+            <TextPane label="URL output" readOnly value={result.value} />
+          )}
         </div>
       </div>
     </ToolSurface>
   );
 }
+
+interface ModeButtonProps {
+  active: boolean;
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+}
+
+function ModeButton({ active, icon, label, onClick }: ModeButtonProps): JSX.Element {
+  return (
+    <Button onClick={onClick} size="sm" variant={active ? "secondary" : "ghost"}>
+      {icon}
+      {label}
+    </Button>
+  );
+}
+
+interface SegmentedControlProps<T extends string> {
+  label: string;
+  onChange: (value: T) => void;
+  options: Array<{ label: string; value: T }>;
+  value: T;
+}
+
+function SegmentedControl<T extends string>({
+  label,
+  onChange,
+  options,
+  value,
+}: SegmentedControlProps<T>): JSX.Element {
+  return (
+    <div className="flex items-center gap-1 rounded-md border border-slate-200 bg-white p-1 shadow-sm">
+      <span className="hidden px-1 text-[11px] font-bold uppercase tracking-[0.08em] text-slate-400 md:inline">
+        {label}
+      </span>
+      {options.map((option) => (
+        <button
+          className={cn(
+            "h-7 rounded px-2 text-[12px] font-semibold transition",
+            value === option.value
+              ? "bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-100"
+              : "text-slate-500 hover:bg-slate-50 hover:text-slate-950",
+          )}
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          type="button"
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function ToggleButton({
+  active,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+}): JSX.Element {
+  return (
+    <button
+      aria-pressed={active}
+      className={cn(
+        "flex h-9 items-center gap-2 rounded-md px-2.5 text-[12px] font-semibold transition",
+        active
+          ? "bg-sky-50 text-sky-700 ring-1 ring-sky-100"
+          : "text-slate-600 hover:bg-slate-100 hover:text-slate-950",
+      )}
+      onClick={onClick}
+      type="button"
+    >
+      {active ? (
+        <ToggleRight aria-hidden="true" className="h-4 w-4" />
+      ) : (
+        <ToggleLeft aria-hidden="true" className="h-4 w-4" />
+      )}
+      {label}
+    </button>
+  );
+}
+
+function OutputTabs({
+  onChange,
+  value,
+}: {
+  onChange: (value: ResultView) => void;
+  value: ResultView;
+}): JSX.Element {
+  return (
+    <div className="flex rounded-md bg-white/80 p-1 normal-case tracking-normal ring-1 ring-inset ring-emerald-100">
+      <button
+        className={cn(
+          "flex h-7 items-center gap-1.5 rounded px-2 text-[12px] font-semibold transition",
+          value === "text"
+            ? "bg-white text-slate-950 shadow-sm"
+            : "text-slate-500 hover:text-slate-950",
+        )}
+        onClick={() => onChange("text")}
+        type="button"
+      >
+        <Rows3 aria-hidden="true" className="h-3.5 w-3.5" />
+        Text
+      </button>
+      <button
+        className={cn(
+          "flex h-7 items-center gap-1.5 rounded px-2 text-[12px] font-semibold transition",
+          value === "breakdown"
+            ? "bg-white text-slate-950 shadow-sm"
+            : "text-slate-500 hover:text-slate-950",
+        )}
+        onClick={() => onChange("breakdown")}
+        type="button"
+      >
+        <ListTree aria-hidden="true" className="h-3.5 w-3.5" />
+        Parts
+      </button>
+    </div>
+  );
+}
+
+function StatusPill({ result }: { result: UrlEncoderResult }): JSX.Element {
+  if (result.error) {
+    return (
+      <span className="hidden h-9 items-center gap-2 rounded-md border border-rose-200 bg-rose-50 px-3 text-[12px] font-semibold text-rose-700 md:flex">
+        <TriangleAlert aria-hidden="true" className="h-4 w-4" />
+        Invalid encoding
+      </span>
+    );
+  }
+
+  return (
+    <span className="hidden h-8 items-center gap-2 rounded-md border border-emerald-200 bg-emerald-50 px-2.5 text-[12px] font-semibold text-emerald-700 md:flex">
+      <CheckCircle2 aria-hidden="true" className="h-4 w-4" />
+      Ready
+    </span>
+  );
+}
+
+function TextPane({
+  label,
+  onChange,
+  placeholder,
+  readOnly = false,
+  value,
+}: {
+  label: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  readOnly?: boolean;
+  value: string;
+}): JSX.Element {
+  return (
+    <label className="block min-h-0 flex-1 bg-white">
+      <span className="sr-only">{label}</span>
+      <textarea
+        className="scrollbar-forge h-full min-h-0 w-full resize-none border-0 bg-white p-4 font-mono text-[13px] leading-6 text-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/80 selection:text-slate-950"
+        onChange={(event) => onChange?.(event.target.value)}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        spellCheck={false}
+        value={value}
+      />
+    </label>
+  );
+}
+
+function BreakdownPanel({
+  parts,
+  queryParams,
+}: {
+  parts: UrlPart[];
+  queryParams: QueryParam[];
+}): JSX.Element {
+  return (
+    <div className="scrollbar-forge min-h-0 flex-1 overflow-auto bg-white p-4">
+      <div className="grid gap-4">
+        <section className="overflow-hidden rounded-lg border border-sky-100 bg-sky-50/50">
+          <div className="border-b border-sky-100 px-3 py-2 text-[12px] font-bold uppercase tracking-[0.08em] text-sky-700">
+            URL parts
+          </div>
+          {parts.length > 0 ? (
+            parts.map((part) => (
+              <BreakdownRow key={part.label} label={part.label} value={part.value} />
+            ))
+          ) : (
+            <p className="p-3 text-[13px] font-medium text-slate-500">
+              No full URL parts detected.
+            </p>
+          )}
+        </section>
+
+        <section className="overflow-hidden rounded-lg border border-emerald-100 bg-emerald-50/50">
+          <div className="border-b border-emerald-100 px-3 py-2 text-[12px] font-bold uppercase tracking-[0.08em] text-emerald-700">
+            Query params
+          </div>
+          {queryParams.length > 0 ? (
+            queryParams.map((param, index) => (
+              <div
+                className="grid border-b border-emerald-100 last:border-b-0 md:grid-cols-[13rem_minmax(0,1fr)]"
+                key={`${param.key}-${index}`}
+              >
+                <div className="border-emerald-100 px-3 py-2 font-mono text-[13px] font-semibold text-sky-700 md:border-r">
+                  {param.key}
+                </div>
+                <div className="break-words px-3 py-2 font-mono text-[13px] leading-5 text-slate-950">
+                  {param.value}
+                </div>
+              </div>
+            ))
+          ) : (
+            <p className="p-3 text-[13px] font-medium text-slate-500">
+              No query parameters detected.
+            </p>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function BreakdownRow({ label, value }: UrlPart): JSX.Element {
+  return (
+    <div className="grid border-b border-sky-100 last:border-b-0 md:grid-cols-[10rem_minmax(0,1fr)]">
+      <div className="border-sky-100 px-3 py-2 text-[13px] font-semibold text-sky-700 md:border-r">
+        {label}
+      </div>
+      <div className="break-words px-3 py-2 font-mono text-[13px] leading-5 text-slate-950">
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function ErrorPanel({ message }: { message: string }): JSX.Element {
+  return (
+    <div className="scrollbar-forge min-h-0 flex-1 overflow-auto bg-white p-4">
+      <div className="rounded-lg border border-rose-200 bg-rose-50 p-4 text-rose-800">
+        <div className="flex items-start gap-3">
+          <TriangleAlert aria-hidden="true" className="mt-0.5 h-5 w-5 shrink-0" />
+          <div>
+            <p className="text-[14px] font-semibold">Unable to decode</p>
+            <p className="mt-1 break-words font-mono text-[13px] leading-5">{message}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/url-encoder/url-encoder.service.test.ts b/src/features/url-encoder/url-encoder.service.test.ts
index 4182cd3..98d028e 100644
--- a/src/features/url-encoder/url-encoder.service.test.ts
+++ b/src/features/url-encoder/url-encoder.service.test.ts
@@ -1,5 +1,13 @@
 import { describe, expect, it } from "vitest";
-import { hasUrlEncoderInput, normalizeUrlEncoderInput } from "./url-encoder.service";
+import {
+  decodeUrlComponent,
+  encodeUrlComponent,
+  getQueryParams,
+  getUrlParts,
+  hasUrlEncoderInput,
+  normalizeUrlEncoderInput,
+  transformUrl,
+} from "./url-encoder.service";
 
 describe("url-encoder service", () => {
   it("normalizes user input", () => {
@@ -9,4 +17,54 @@ describe("url-encoder service", () => {
   it("detects empty input", () => {
     expect(hasUrlEncoderInput("   ")).toBe(false);
   });
+
+  it("encodes and decodes URL components", () => {
+    const encoded = encodeUrlComponent("Markdown Preview & JSON/YAML");
+
+    expect(encoded).toBe("Markdown%20Preview%20%26%20JSON%2FYAML");
+    expect(decodeUrlComponent(encoded).value).toBe("Markdown Preview & JSON/YAML");
+  });
+
+  it("supports form encoding with plus spaces", () => {
+    const encoded = transformUrl("hello forge", "encode", {
+      encodeSpaceAsPlus: true,
+      strategy: "form",
+    });
+
+    expect(encoded.value).toBe("hello+forge");
+    expect(transformUrl(encoded.value, "decode", { strategy: "form" }).value).toBe(
+      "hello forge",
+    );
+  });
+
+  it("encodes full URLs while preserving structure", () => {
+    const result = transformUrl(
+      "https://forge.local/tools/url encoder?q=hello forge#result panel",
+      "encode",
+      { strategy: "full-url" },
+    );
+
+    expect(result.value).toContain("https://forge.local/");
+    expect(result.value).toContain("url%20encoder");
+    expect(result.value).toContain("hello%20forge");
+    expect(result.value).toContain("#result%20panel");
+  });
+
+  it("extracts URL parts and query parameters", () => {
+    const url = "https://forge.local/tools?name=Markdown%20Preview&lang=vi-VN";
+
+    expect(getUrlParts(url).find((part) => part.label === "Host")?.value).toBe(
+      "forge.local",
+    );
+    expect(getQueryParams(url)).toEqual([
+      { key: "name", value: "Markdown Preview" },
+      { key: "lang", value: "vi-VN" },
+    ]);
+  });
+
+  it("returns decode errors", () => {
+    const result = transformUrl("%E0%A4%A", "decode");
+
+    expect(result.error).toBeTruthy();
+  });
 });
diff --git a/src/features/url-encoder/url-encoder.service.ts b/src/features/url-encoder/url-encoder.service.ts
index 89f39c5..e051481 100644
--- a/src/features/url-encoder/url-encoder.service.ts
+++ b/src/features/url-encoder/url-encoder.service.ts
@@ -2,11 +2,44 @@ export interface UrlEncoderInput {
   value: string;
 }
 
+export type UrlMode = "encode" | "decode";
+export type UrlStrategy = "component" | "full-url" | "form";
+
+export interface UrlEncoderOptions {
+  decodePlus: boolean;
+  encodeSpaceAsPlus: boolean;
+  strategy: UrlStrategy;
+}
+
+export interface UrlPart {
+  label: string;
+  value: string;
+}
+
+export interface QueryParam {
+  key: string;
+  value: string;
+}
+
+export interface UrlStats {
+  chars: number;
+  params: number;
+}
+
 export interface UrlEncoderResult {
   error?: string;
+  parts: UrlPart[];
+  queryParams: QueryParam[];
+  stats: UrlStats;
   value: string;
 }
 
+const defaultOptions: UrlEncoderOptions = {
+  decodePlus: true,
+  encodeSpaceAsPlus: false,
+  strategy: "component",
+};
+
 export function normalizeUrlEncoderInput(input: string): string {
   return input.trim();
 }
@@ -15,14 +48,176 @@ export function hasUrlEncoderInput(input: string): boolean {
   return normalizeUrlEncoderInput(input).length > 0;
 }
 
+export function transformUrl(
+  input: string,
+  mode: UrlMode,
+  options: Partial<UrlEncoderOptions> = {},
+): UrlEncoderResult {
+  const mergedOptions = { ...defaultOptions, ...options };
+
+  if (!input) {
+    return createUrlResult("");
+  }
+
+  try {
+    const value =
+      mode === "encode"
+        ? encodeUrl(input, mergedOptions)
+        : decodeUrl(input, mergedOptions);
+
+    return createUrlResult(value);
+  } catch (error) {
+    return {
+      ...createUrlResult(""),
+      error:
+        error instanceof Error
+          ? error.message
+          : "Input is not valid percent-encoded text.",
+    };
+  }
+}
+
 export function encodeUrlComponent(input: string): string {
   return encodeURIComponent(input);
 }
 
 export function decodeUrlComponent(input: string): UrlEncoderResult {
   try {
-    return { value: decodeURIComponent(input) };
+    return createUrlResult(decodeURIComponent(input));
+  } catch {
+    return { ...createUrlResult(""), error: "Input is not valid percent-encoded text." };
+  }
+}
+
+export function getUrlParts(input: string): UrlPart[] {
+  try {
+    const url = new URL(input);
+
+    return [
+      { label: "Protocol", value: url.protocol.replace(/:$/, "") },
+      { label: "Host", value: url.host },
+      { label: "Path", value: url.pathname },
+      { label: "Query", value: url.search.replace(/^\?/, "") },
+      { label: "Hash", value: url.hash.replace(/^#/, "") },
+    ].filter((part) => part.value.length > 0);
+  } catch {
+    return [];
+  }
+}
+
+export function getQueryParams(input: string): QueryParam[] {
+  const query = getQueryText(input);
+
+  if (!query) {
+    return [];
+  }
+
+  return query
+    .split("&")
+    .filter(Boolean)
+    .map((entry) => {
+      const [rawKey = "", ...rawValue] = entry.split("=");
+
+      return {
+        key: safeDecode(rawKey.replaceAll("+", " ")),
+        value: safeDecode(rawValue.join("=").replaceAll("+", " ")),
+      };
+    });
+}
+
+function encodeUrl(input: string, options: UrlEncoderOptions): string {
+  if (options.strategy === "full-url") {
+    return encodeFullUrl(input);
+  }
+
+  const encoded = encodeURIComponent(input);
+
+  return options.strategy === "form" || options.encodeSpaceAsPlus
+    ? encoded.replaceAll("%20", "+")
+    : encoded;
+}
+
+function decodeUrl(input: string, options: UrlEncoderOptions): string {
+  const normalized =
+    options.strategy === "form" || options.decodePlus
+      ? input.replaceAll("+", " ")
+      : input;
+
+  return decodeURIComponent(normalized);
+}
+
+function encodeFullUrl(input: string): string {
+  try {
+    const url = new URL(input);
+    const encoded = new URL(url.toString());
+
+    encoded.pathname = url.pathname
+      .split("/")
+      .map((segment) => encodeURIComponent(decodeMaybe(segment)))
+      .join("/");
+    encoded.search = buildEncodedSearch(url.searchParams);
+    encoded.hash = url.hash
+      ? `#${encodeURIComponent(decodeMaybe(url.hash.slice(1)))}`
+      : "";
+
+    return encoded.toString();
+  } catch {
+    return encodeURIComponent(input);
+  }
+}
+
+function buildEncodedSearch(params: URLSearchParams): string {
+  const entries = Array.from(params.entries());
+
+  if (entries.length === 0) {
+    return "";
+  }
+
+  return `?${entries
+    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+    .join("&")}`;
+}
+
+function createUrlResult(value: string): UrlEncoderResult {
+  const queryParams = getQueryParams(value);
+
+  return {
+    parts: getUrlParts(value),
+    queryParams,
+    stats: {
+      chars: value.length,
+      params: queryParams.length,
+    },
+    value,
+  };
+}
+
+function getQueryText(input: string): string {
+  try {
+    return new URL(input).search.replace(/^\?/, "");
+  } catch {
+    const queryIndex = input.indexOf("?");
+
+    if (queryIndex >= 0) {
+      return input.slice(queryIndex + 1).split("#")[0] ?? "";
+    }
+
+    return input.includes("=") ? input.replace(/^\?/, "") : "";
+  }
+}
+
+function decodeMaybe(input: string): string {
+  try {
+    return decodeURIComponent(input);
+  } catch {
+    return input;
+  }
+}
+
+function safeDecode(input: string): string {
+  try {
+    return decodeURIComponent(input);
   } catch {
-    return { error: "Input is not valid percent-encoded text.", value: "" };
+    return input;
   }
 }