diff --git a/client/web/assets/16px-solid/viewport-guide-mode.svg b/client/web/assets/16px-solid/viewport-guide-mode.svg
new file mode 100644
index 00000000..d78860e9
--- /dev/null
+++ b/client/web/assets/16px-solid/viewport-guide-mode.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="11.85,0 11.15,0 0,11.15 0,12.85 1.5,11.35 2.58,12.42 3.42,11.58 2.35,10.5 3.5,9.35 5.58,11.42 6.42,10.58 4.35,8.5 5.5,7.35 6.58,8.42 7.42,7.58 6.35,6.5 7.5,5.35 9.58,7.42 10.42,6.58 8.35,4.5 9.5,3.35 10.58,4.42 11.42,3.58 10.35,2.5 11.5,1.35 14.65,4.5 3.15,16 4.85,16 16,4.85 16,4.15" />
+	<polygon points="14,0 16,2 16,0" />
+	<polygon points="15,8.68 15,15 8.68,15 7.68,16 16,16 16,7.68" />
+	<polygon points="0,0 0,8.32 1,7.32 1,1 7.32,1 8.32,0" />
+</svg>
diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue
index 2663afe8..a7063113 100644
--- a/client/web/src/components/panels/Document.vue
+++ b/client/web/src/components/panels/Document.vue
@@ -182,6 +182,7 @@ const modeMenuEntries: SectionsOfMenuListEntries = [
 	[
 		{ label: "Design Mode", icon: "ViewportDesignMode" },
 		{ label: "Select Mode", icon: "ViewportSelectMode" },
+		{ label: "Guide Mode", icon: "ViewportGuideMode" },
 	],
 ];
 
diff --git a/client/web/src/components/widgets/labels/Icon.vue b/client/web/src/components/widgets/labels/Icon.vue
index c3e9b0f6..1cf0416f 100644
--- a/client/web/src/components/widgets/labels/Icon.vue
+++ b/client/web/src/components/widgets/labels/Icon.vue
@@ -79,6 +79,7 @@ import Copy from "../../../../assets/16px-solid/copy.svg";
 import Paste from "../../../../assets/16px-solid/paste.svg";
 import ViewportDesignMode from "../../../../assets/16px-solid/viewport-design-mode.svg";
 import ViewportSelectMode from "../../../../assets/16px-solid/viewport-select-mode.svg";
+import ViewportGuideMode from "../../../../assets/16px-solid/viewport-guide-mode.svg";
 
 import SwapButton from "../../../../assets/12px-solid/swap.svg";
 import ResetColorsButton from "../../../../assets/12px-solid/reset-colors.svg";
@@ -152,6 +153,7 @@ const icons = {
 	Paste: { component: Paste, size: 16 },
 	ViewportDesignMode: { component: ViewportDesignMode, size: 16 },
 	ViewportSelectMode: { component: ViewportSelectMode, size: 16 },
+	ViewportGuideMode: { component: ViewportGuideMode, size: 16 },
 	SwapButton: { component: SwapButton, size: 12 },
 	ResetColorsButton: { component: ResetColorsButton, size: 12 },
 	DropdownArrow: { component: DropdownArrow, size: 12 },