diff --git a/src/components/YamlEditor/YamlEditor.module.css b/src/components/YamlEditor/YamlEditor.module.css
new file mode 100644
index 00000000..29f496bd
--- /dev/null
+++ b/src/components/YamlEditor/YamlEditor.module.css
@@ -0,0 +1,235 @@
+.yamlEditorContainer {
+	margin: 1rem 0;
+	border-radius: 8px;
+	overflow: hidden;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.yamlEditor {
+	border-radius: 8px;
+	font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace !important;
+	font-size: 14px !important;
+	line-height: 1.5 !important;
+}
+
+/* Dark theme styling to match the image - using higher specificity */
+.yamlEditor .ace_editor,
+.yamlEditor .ace_editor.ace_terminal,
+.yamlEditor .ace_scroller,
+.yamlEditor .ace_content {
+	background-color: #000000 !important;
+	color: #ffffff !important;
+}
+
+.yamlEditor .ace_gutter,
+.yamlEditor .ace_editor.ace_terminal .ace_gutter {
+	background-color: #000000 !important;
+	color: #6c6c6c !important;
+	border-right: 1px solid #404040 !important;
+}
+
+.yamlEditor .ace_gutter-active-line,
+.yamlEditor .ace_editor.ace_terminal .ace_gutter-active-line {
+	background-color: #404040 !important;
+}
+
+.yamlEditor .ace_line,
+.yamlEditor .ace_editor.ace_terminal .ace_line {
+	background-color: #000000 !important;
+}
+
+.yamlEditor .ace_cursor,
+.yamlEditor .ace_editor.ace_terminal .ace_cursor {
+	color: #ffffff !important;
+}
+
+.yamlEditor .ace_selection,
+.yamlEditor .ace_editor.ace_terminal .ace_selection {
+	background-color: #44475a !important;
+}
+
+.yamlEditor .ace_selected-word,
+.yamlEditor .ace_editor.ace_terminal .ace_selected-word {
+	background-color: #44475a !important;
+}
+
+.yamlEditor .ace_active-line,
+.yamlEditor .ace_editor.ace_terminal .ace_active-line {
+	background-color: #44475a !important;
+}
+
+/* Additional overrides for all possible background elements */
+.yamlEditor .ace_layer,
+.yamlEditor .ace_text-layer,
+.yamlEditor .ace_marker-layer,
+.yamlEditor .ace_cursor-layer {
+	background-color: #000000 !important;
+}
+
+/* Global override for any remaining elements */
+.yamlEditor * {
+	background-color: transparent !important;
+}
+
+.yamlEditor .ace_editor,
+.yamlEditor .ace_editor *,
+.yamlEditor .ace_scroller,
+.yamlEditor .ace_content {
+	background-color: #000000 !important;
+}
+
+/* YAML syntax highlighting to match the image - using higher specificity */
+.yamlEditor .ace_comment,
+.yamlEditor .ace_editor.ace_terminal .ace_comment {
+	color: #999999 !important;
+	font-style: italic !important;
+}
+
+/* Target lines that start with # (comments) */
+.yamlEditor .ace_text-layer .ace_line:first-child,
+.yamlEditor .ace_text-layer .ace_line:first-child * {
+	color: #999999 !important;
+	font-style: italic !important;
+}
+
+/* More specific targeting for any element containing comment-like content */
+.yamlEditor [class*="comment"],
+.yamlEditor [class*="Comment"] {
+	color: #999999 !important;
+	font-style: italic !important;
+}
+
+.yamlEditor .ace_string,
+.yamlEditor .ace_editor.ace_terminal .ace_string {
+	color: #ff84d6 !important;
+}
+
+.yamlEditor .ace_constant.ace_numeric,
+.yamlEditor .ace_editor.ace_terminal .ace_constant.ace_numeric {
+	color: #b5cea8 !important;
+}
+
+.yamlEditor .ace_constant.ace_language,
+.yamlEditor .ace_editor.ace_terminal .ace_constant.ace_language {
+	color: #569cd6 !important;
+	font-weight: bold !important;
+}
+
+.yamlEditor .ace_variable,
+.yamlEditor .ace_editor.ace_terminal .ace_variable {
+	color: #ffffff !important;
+}
+
+.yamlEditor .ace_keyword,
+.yamlEditor .ace_editor.ace_terminal .ace_keyword {
+	color: #ffffff !important;
+}
+
+.yamlEditor .ace_storage,
+.yamlEditor .ace_editor.ace_terminal .ace_storage {
+	color: #ffffff !important;
+}
+
+.yamlEditor .ace_entity.ace_name.ace_tag,
+.yamlEditor .ace_editor.ace_terminal .ace_entity.ace_name.ace_tag {
+	color: #ffffff !important;
+}
+
+.yamlEditor .ace_markup.ace_heading,
+.yamlEditor .ace_editor.ace_terminal .ace_markup.ace_heading {
+	color: #ffffff !important;
+}
+
+/* Light theme support */
+[data-theme="light"] .yamlEditor .ace_editor {
+	background-color: #ffffff !important;
+	color: #24292e !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_gutter {
+	background-color: #f6f8fa !important;
+	color: #6a737d !important;
+	border-right: 1px solid #e1e4e8 !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_gutter-active-line {
+	background-color: #f6f8fa !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_line {
+	background-color: #ffffff !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_cursor {
+	color: #24292e !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_selection {
+	background-color: #c8e1ff !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_selected-word {
+	background-color: #c8e1ff !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_active-line {
+	background-color: #f6f8fa !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_comment {
+	color: #999999 !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_string {
+	color: #032f62 !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_constant.ace_numeric {
+	color: #005cc5 !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_constant.ace_language {
+	color: #d73a49 !important;
+	font-weight: bold !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_variable {
+	color: #005cc5 !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_keyword {
+	color: #d73a49 !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_storage {
+	color: #d73a49 !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_entity.ace_name.ace_tag {
+	color: #005cc5 !important;
+}
+
+[data-theme="light"] .yamlEditor .ace_markup.ace_heading {
+	color: #005cc5 !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+	.yamlEditor {
+		font-size: 12px !important;
+	}
+
+	.yamlEditorContainer {
+		margin: 0.8rem 0;
+	}
+}
+
+@media (max-width: 480px) {
+	.yamlEditor {
+		font-size: 11px !important;
+	}
+
+	.yamlEditorContainer {
+		margin: 0.6rem 0;
+	}
+}
diff --git a/src/components/YamlEditor/YamlEditor.tsx b/src/components/YamlEditor/YamlEditor.tsx
index 533d2d90..7488f8f8 100644
--- a/src/components/YamlEditor/YamlEditor.tsx
+++ b/src/components/YamlEditor/YamlEditor.tsx
@@ -18,11 +18,15 @@ import React, { useState, useEffect } from "react"
 
 import AceEditor from "react-ace"
 import "ace-builds/src-noconflict/theme-github"
+import "ace-builds/src-noconflict/theme-monokai"
+import "ace-builds/src-noconflict/theme-terminal"
 import "ace-builds/src-noconflict/ext-language_tools"
 
 import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/mode-yaml"
 
+import styles from "./YamlEditor.module.css"
+
 import jsYaml from "js-yaml"
 
 import Ajv from "ajv"
@@ -58,7 +62,7 @@ export default function YamlEditor() {
 
 	function validateAndSetAnnotations(yaml) {
 		try {
-			const doc = jsYaml.load(yaml, { strict: true })
+			const doc = jsYaml.load(yaml)
 			const isValid = validate(doc)
 
 			if (!isValid && validate.errors) {
@@ -151,24 +155,26 @@ export default function YamlEditor() {
 	}
 
 	return (
-		<div className="m4">
+		<div className={styles.yamlEditorContainer}>
 			<AceEditor
 				mode="yaml"
-				theme="github"
+				theme="terminal"
 				onChange={onChange}
 				value={value}
 				name="yaml-editor"
+				className={styles.yamlEditor}
 				editorProps={{ $blockScrolling: true }}
 				setOptions={{
 					useWorker: false,
 					showPrintMargin: false,
 					showGutter: true,
+					fontSize: 14,
+					fontFamily: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
 				}}
 				annotations={annotations}
 				width="100%"
 				height="400px"
 			/>
-			<br />
 		</div>
 	)
 }
diff --git a/src/css/custom.css b/src/css/custom.css
index 7365089e..02722064 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -41,6 +41,16 @@
 	--ifm-background-color-primary: #f6f6f1;
 	--ifm-background-color-secondary: #e8e8e8;
 	--ifm-breadcrumb-item-background-active: #ffe9e2;
+	--imf-list-card-background-color: #ffffff;
+	--imf-list-bullets-color: #25bab1;
+	--imf-color-background-orange-light: #fffcfb;
+	--imf-color-border-orange: #ffceb6;
+	--imf-note-border-color: #25bab1;
+	--imf-note-background-color: #f1fffe;
+	--imf-note-text-color: #208682;
+	--imf-text-color-bg: #f6f7f8;
+	--imf-text-color: #1a1a1a;
+	--imf-text-button-color-bg: #e8e8e8;
 }
 
 [data-theme="dark"] {
@@ -55,6 +65,15 @@
 	--ifm-background-color-primary: #171717;
 	--ifm-background-color-secondary: #232323;
 	--ifm-breadcrumb-item-background-active: #3f322e;
+	--imf-list-card-background-color: #232323;
+	--imf-list-bullets-color: #208682;
+	--imf-color-background-orange-light: #232323;
+	--imf-color-border-orange: #232323;
+	--imf-note-border-color: #208682;
+	--imf-note-background-color: #252828;
+	--imf-text-color-bg: #232323;
+	--imf-text-color: #f5f5f5;
+	--imf-text-button-color-bg: #232323;
 }
 
 #__docusaurus {
@@ -73,27 +92,6 @@ a[docid="docs"] > svg {
 	display: none;
 }
 
-/* Adjustments for mobile view */
-@media (max-width: 768px) {
-	/* Reduce the logo size for smaller screens */
-	.navbar__logo img {
-		height: 32px;
-		align-items: center;
-	}
-
-	/* Reduce the padding around the logo for smaller screens */
-	.navbar__logo {
-		padding: 2px; /* Adjust the padding for smaller screens */
-	}
-}
-
-/* Center the Discord link within its parent */
-.navbar__items.navbar__items--right {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
 [data-theme="light"] img[src$="#gh-dark-mode-only"],
 [data-theme="dark"] img[src$="#gh-light-mode-only"] {
 	display: none;
@@ -129,7 +127,12 @@ a[docid="docs"] > svg {
 	display: none;
 }
 
-/* Adjustments for mobile view */
+.navbar__items.navbar__items--right {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
 @media (max-width: 768px) {
 	/* Reduce the logo size for smaller screens */
 	.navbar__logo img {
@@ -139,15 +142,12 @@ a[docid="docs"] > svg {
 
 	/* Reduce the padding around the logo for smaller screens */
 	.navbar__logo {
-		padding: 2px; /* Adjust the padding for smaller screens */
+		padding: 2px;
 	}
-}
 
-/* Center the Discord link within its parent */
-.navbar__items.navbar__items--right {
-	display: flex;
-	justify-content: center;
-	align-items: center;
+	.markdown {
+		padding-left: 1rem;
+	}
 }
 
 /* Light mode Discord icon */
@@ -304,6 +304,17 @@ a[docid="docs"] > svg {
 .pagination-nav {
 	display: none;
 }
+.language-text {
+	background-color: var(--imf-text-color-bg) !important;
+}
+.language-text .token-line {
+	color: var(--imf-text-color) !important;
+}
+.language-text [class*="buttonGroup"] button {
+	background-color: var(--imf-text-color-bg) !important;
+	color: var(--imf-text-color) !important;
+	border-radius: 4px;
+}
 /* ===== MARKDOWN STYLES ===== */
 .theme-doc-markdown.markdown {
 	line-height: 1.8rem;
@@ -335,3 +346,797 @@ a[docid="docs"] > svg {
 	cursor: default;
 	background-color: var(--ifm-breadcrumb-item-background-active);
 }
+
+/* ===== MARKDOWN LAYOUT ===== */
+.markdown {
+	padding-left: 1.5rem;
+}
+
+.markdown ol {
+	padding-left: 1.2rem;
+	margin-left: 0;
+}
+
+.markdown ol > li {
+	margin-left: 0;
+	padding-left: 0.5rem;
+}
+
+/* ===== TABLE STYLING ===== */
+.markdown table {
+	display: table;
+	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+	border: none !important;
+	table-layout: auto;
+	margin: 2rem 0;
+	border-radius: 12px !important;
+	overflow: hidden;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	background: #ffffff !important;
+}
+
+.markdown table * {
+	background: inherit !important;
+	border: none !important;
+}
+
+.markdown table th,
+.markdown table td {
+	padding: 1.5rem 2rem;
+	box-sizing: border-box;
+	border-right: 1px solid #f3f4f6 !important;
+}
+
+.markdown table th {
+	color: var(--ifm-heading-color);
+	text-align: left;
+	font-weight: 600;
+	font-size: 1.1rem;
+	border-bottom: 1px solid #e5e7eb !important;
+	margin: 0;
+}
+
+.markdown table td {
+	color: var(--ifm-color-content);
+	vertical-align: middle;
+	font-size: 1rem;
+	border-bottom: 1px solid #f3f4f6 !important;
+}
+
+.markdown table th:first-child { border-top-left-radius: 12px; }
+.markdown table th:last-child { border-top-right-radius: 12px; border-right: none !important; }
+.markdown table td:last-child,
+.markdown table th:last-child { border-right: none !important; }
+.markdown table tbody tr:last-child td { border-bottom: none !important; }
+.markdown table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
+.markdown table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
+
+/* Dark theme tables */
+[data-theme="dark"] .markdown table {
+	background: #232323 !important;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .markdown table th {
+	border-bottom: 1px solid #404040 !important;
+	border-right: 1px solid #363636 !important;
+}
+
+[data-theme="dark"] .markdown table td {
+	border-bottom: 1px solid #363636 !important;
+	border-right: 1px solid #363636 !important;
+}
+
+/* Responsive tables */
+@media (max-width: 768px) {
+	.markdown {
+		overflow-x: auto;
+	}
+
+	.markdown table {
+		min-width: 600px;
+		width: auto;
+		margin: 1.5rem 0;
+	}
+
+	.markdown table th,
+	.markdown table td {
+		padding: 1.2rem 1.5rem;
+		font-size: 0.95rem;
+		white-space: nowrap;
+	}
+
+	.markdown table th {
+		font-size: 1rem;
+	}
+
+	/* Table icon responsive */
+	.markdown table td a[href*="github-com"]::before,
+	.markdown table td a[href*="github-enterprise-server"]::before,
+	.markdown table td a[href*="gitlab-com"]::before,
+	.markdown table td a[href*="self-hosted-gitlab"]::before,
+	.markdown table td a[href*="azure-devops"]::before,
+	.markdown table td a[href*="bitbucket"]::before {
+		width: 14px;
+		height: 14px;
+	}
+}
+
+@media (max-width: 480px) {
+	.markdown table {
+		min-width: 500px;
+		margin: 1rem 0;
+		font-size: 0.9rem;
+	}
+
+	.markdown table th,
+	.markdown table td {
+		padding: 1rem 1.2rem;
+		font-size: 0.9rem;
+	}
+
+	.markdown table th {
+		font-size: 0.95rem;
+	}
+
+	.support-icon {
+		width: 16px !important;
+		height: 16px !important;
+		margin-right: 0.5rem !important;
+	}
+
+	/* Table icon responsive */
+	.markdown table td a[href*="github-com"]::before,
+	.markdown table td a[href*="github-enterprise-server"]::before,
+	.markdown table td a[href*="gitlab-com"]::before,
+	.markdown table td a[href*="self-hosted-gitlab"]::before,
+	.markdown table td a[href*="azure-devops"]::before,
+	.markdown table td a[href*="bitbucket"]::before {
+		width: 12px;
+		height: 12px;
+	}
+}
+
+
+/* Platform links with checkmark icons */
+.markdown table td a[href*="github-com"],
+.markdown table td a[href*="github-enterprise-server"],
+.markdown table td a[href*="gitlab-com"],
+.markdown table td a[href*="self-hosted-gitlab"],
+.markdown table td a[href*="azure-devops"],
+.markdown table td a[href*="bitbucket"] {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.markdown table td a[href*="github-com"]::before,
+.markdown table td a[href*="github-enterprise-server"]::before,
+.markdown table td a[href*="gitlab-com"]::before,
+.markdown table td a[href*="self-hosted-gitlab"]::before,
+.markdown table td a[href*="azure-devops"]::before,
+.markdown table td a[href*="bitbucket"]::before {
+	content: "";
+	width: 16px;
+	height: 16px;
+	background: url('/img/Icons/Vector.png') center/contain no-repeat;
+	flex-shrink: 0;
+}
+
+[data-theme="dark"] .markdown table td a[href*="github-com"]::before,
+[data-theme="dark"] .markdown table td a[href*="github-enterprise-server"]::before,
+[data-theme="dark"] .markdown table td a[href*="gitlab-com"]::before,
+[data-theme="dark"] .markdown table td a[href*="self-hosted-gitlab"]::before,
+[data-theme="dark"] .markdown table td a[href*="azure-devops"]::before,
+[data-theme="dark"] .markdown table td a[href*="bitbucket"]::before {
+	filter: none;
+}
+
+/* ===== DOCUSAURUS BLOCKQUOTE OVERRIDE ===== */
+/* Override standard markdown blockquotes (>) to match custom design */
+.markdown blockquote {
+	border-left: 3px solid #9b9b9b;
+	background-color: transparent;
+	padding: 1.2rem 1.5rem;
+	margin: 1.5rem 0;
+	color: var(--ifm-color-content);
+	line-height: 1.6;
+	border-radius: 0;
+	font-style: normal;
+	position: relative;
+}
+
+.markdown blockquote p {
+	margin: 0;
+	line-height: 1.6;
+}
+
+.markdown blockquote p:not(:last-child) {
+	margin-bottom: 1rem;
+}
+
+/* Dark theme support for blockquotes */
+[data-theme="dark"] .markdown blockquote {
+	background-color: #2a2a2a;
+	border-left: 4px solid #666666;
+}
+
+
+
+
+/* ===== ADMONITION COMPONENTS ===== */
+/* Base admonition styles */
+.theme-admonition {
+	border: 2px solid !important;
+	font-family: "Roboto", sans-serif !important;
+	margin: 1.5rem 0 !important;
+}
+
+.theme-admonition p {
+	color: #333 !important;
+	font-size: 1rem !important;
+	line-height: 1.6 !important;
+}
+
+.theme-admonition a {
+	text-decoration: none !important;
+}
+
+.theme-admonition a:hover {
+	text-decoration: underline !important;
+}
+
+.admonitionHeading_Gvgb {
+	display: flex !important;
+	align-items: center !important;
+	font-size: 1rem !important;
+	flex-direction: row !important;
+	text-transform: capitalize !important;
+}
+
+.admonitionIcon_Rf37 svg {
+	display: none !important;
+}
+
+/* Individual admonition types */
+.theme-admonition-info {
+	background-color: #e3f2fd !important;
+	border-color: #4cb3d4 !important;
+	padding: 16px !important;
+	border-radius: 8px !important;
+}
+
+.theme-admonition-info a { color: #1976d2 !important; }
+.theme-admonition-info .admonitionHeading_Gvgb { color: #4cb3d4 !important; }
+.theme-admonition-info .admonitionIcon_Rf37 svg {
+	display: block !important;
+	color: #4cb3d4 !important;
+	fill: #4cb3d4 !important;
+	width: 16px !important;
+	height: 16px !important;
+}
+
+.theme-admonition-note {
+	background-color: #eaf6f4 !important;
+	border-color: #00b8a9 !important;
+	padding: 16px !important;
+	border-radius: 8px !important;
+}
+
+.theme-admonition-note a { color: #ff6600 !important; }
+.theme-admonition-note .admonitionHeading_Gvgb { color: #208682 !important; }
+.theme-admonition-note .admonitionIcon_Rf37 {
+	background-image: url("/static/img/Icons/Icons.png");
+	background-position: center;
+	width: 20px;
+	height: 20px;
+	background-size: cover;
+}
+
+.theme-admonition-tip {
+	background-color: #FFFCFB !important;
+	border-color: #ff865b !important;
+	padding: 1rem 1.25rem !important;
+	border-radius: 16px !important;
+}
+
+.theme-admonition-tip p {
+	font-size: 0.9rem !important;
+	margin: 0 !important;
+}
+
+.theme-admonition-tip a { color: #ff570a !important; }
+.theme-admonition-tip .admonitionHeading_Gvgb {
+	color: #ff570a !important;
+	font-size: 1.1rem !important;
+	font-weight: 600 !important;
+	margin-bottom: 0.5rem !important;
+}
+
+.theme-admonition-tip .admonitionIcon_Rf37 {
+	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z' fill='%23ff570a'/%3E%3C/svg%3E") !important;
+	background-position: center !important;
+	background-repeat: no-repeat !important;
+	background-size: contain !important;
+	width: 20px !important;
+	height: 20px !important;
+	margin-right: 0.5rem !important;
+}
+
+.theme-admonition-warning {
+	background-color: #ffffff !important;
+	border-color: #f1c232 !important;
+	padding: 1rem 1.25rem !important;
+	border-radius: 16px !important;
+}
+
+.theme-admonition-warning p { margin: 0 !important; }
+.theme-admonition-warning a { color: #b38705 !important; }
+.theme-admonition-warning .admonitionHeading_Gvgb {
+	color: #b38705 !important;
+	font-size: 1.1rem !important;
+	font-weight: 600 !important;
+	margin-bottom: 0.5rem !important;
+}
+
+.theme-admonition-warning .admonitionIcon_Rf37 {
+	background-image: url("/static/img/icons/Warning.png") !important;
+	background-position: center !important;
+	background-repeat: no-repeat !important;
+	background-size: contain !important;
+	width: 20px !important;
+	height: 20px !important;
+	margin-right: 0.5rem !important;
+}
+
+/* Dark theme admonitions */
+[data-theme="dark"] .theme-admonition p { color: #f5f5f5 !important; }
+
+[data-theme="dark"] .theme-admonition-info {
+	background-color: #252828 !important;
+}
+
+[data-theme="dark"] .theme-admonition-info p { color: #f5f5f5 !important; }
+[data-theme="dark"] .theme-admonition-info a { color: #64b5f6 !important; }
+[data-theme="dark"] .theme-admonition-info .admonitionHeading_Gvgb { color: #4cb3d4 !important; }
+
+[data-theme="dark"] .theme-admonition-note {
+	background-color: #252828 !important;
+	border-color: #208682 !important;
+}
+
+[data-theme="dark"] .theme-admonition-note a { color: #ff865b !important; }
+[data-theme="dark"] .theme-admonition-note .admonitionHeading_Gvgb,
+[data-theme="dark"] .admonitionHeading_Gvgb { color: #25bab1 !important; }
+
+[data-theme="dark"] .theme-admonition-tip {
+	background-color: #232323 !important;
+	border-color: #e97c57 !important;
+}
+
+[data-theme="dark"] .theme-admonition-tip p { font-size: 0.9rem !important; }
+[data-theme="dark"] .theme-admonition-tip a { color: #ff865b !important; }
+[data-theme="dark"] .theme-admonition-tip .admonitionHeading_Gvgb { color: #e97c57 !important; }
+[data-theme="dark"] .theme-admonition-tip .admonitionIcon_Rf37 {
+	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z' fill='%23e97c57'/%3E%3C/svg%3E") !important;
+}
+
+[data-theme="dark"] .theme-admonition-warning {
+	background-color: #232323 !important;
+	border-color: #4b4a47 !important;
+}
+
+[data-theme="dark"] .theme-admonition-warning a { color: #e9af01 !important; }
+[data-theme="dark"] .theme-admonition-warning .admonitionHeading_Gvgb { color: #e9af01 !important; }
+
+/* Responsive admonitions */
+@media (max-width: 768px) {
+	.theme-admonition {
+		padding: 12px !important;
+		margin: 1rem 0 !important;
+		border-radius: 6px !important;
+	}
+	
+	.theme-admonition p { font-size: 0.95rem !important; }
+	.admonitionHeading_Gvgb { font-size: 0.95rem !important; }
+	.admonitionIcon_Rf37 { width: 18px !important; height: 18px !important; }
+	
+	.theme-admonition-tip {
+		padding: 0.9rem 1.1rem !important;
+		border-radius: 12px !important;
+	}
+	
+	.theme-admonition-tip p { font-size: 0.85rem !important; }
+	.theme-admonition-tip .admonitionHeading_Gvgb {
+		font-size: 1rem !important;
+		margin-bottom: 0.4rem !important;
+	}
+	
+	.theme-admonition-warning {
+		padding: 0.9rem 1.1rem !important;
+		border-radius: 12px !important;
+	}
+	
+	.theme-admonition-warning .admonitionHeading_Gvgb {
+		font-size: 1rem !important;
+		margin-bottom: 0.4rem !important;
+	}
+}
+
+@media (max-width: 480px) {
+	.theme-admonition {
+		padding: 10px !important;
+		margin: 0.8rem 0 !important;
+		border-radius: 4px !important;
+	}
+	
+	.theme-admonition p {
+		font-size: 0.9rem !important;
+		line-height: 1.5 !important;
+	}
+	
+	.admonitionHeading_Gvgb { font-size: 0.9rem !important; }
+	.admonitionIcon_Rf37 { width: 16px !important; height: 16px !important; }
+	
+	.theme-admonition-tip {
+		padding: 0.8rem 1rem !important;
+		border-radius: 10px !important;
+	}
+	
+	.theme-admonition-tip p {
+		font-size: 0.8rem !important;
+		line-height: 1.5 !important;
+	}
+	
+	.theme-admonition-tip .admonitionHeading_Gvgb {
+		font-size: 0.95rem !important;
+		margin-bottom: 0.3rem !important;
+	}
+	
+	.theme-admonition-warning {
+		padding: 0.8rem 1rem !important;
+		border-radius: 10px !important;
+	}
+	
+	.theme-admonition-warning .admonitionHeading_Gvgb {
+		font-size: 0.95rem !important;
+		margin-bottom: 0.3rem !important;
+	}
+}
+
+.prism-code,
+pre[class*="language-"],
+.theme-code-block pre {
+	background-color: #f6f7f8 !important;
+	border: 1px solid #e0e1e2 !important;
+	border-radius: 8px !important;
+	padding: 0.6rem 0.8rem !important;
+	margin: 1rem 0 !important;
+	font-family: "Fira Mono", "Menlo", "Monaco", "Consolas", monospace !important;
+	font-size: 0.9rem !important;
+	line-height: 1.2 !important;
+	color: #333 !important;
+}
+
+.codeBlockContainer_Ckt0,
+div[class*="codeBlockContainer"] {
+	background-color: transparent !important;
+	border: none !important;
+	border-radius: 8px !important;
+	margin: 1rem 0 !important;
+}
+
+.codeBlockContent_biex,
+div[class*="codeBlockContent"] {
+	background-color: transparent !important;
+	border: none !important;
+	padding: 0 !important;
+}
+
+.prism-code .token-line,
+pre[class*="language-"] .token-line {
+	color: #333 !important;
+}
+
+/* Override for text blocks specifically - force dark text */
+.language-text .token-line,
+.prism-code.language-text .token-line,
+pre[class*="language-text"] .token-line,
+.language-text,
+.prism-code.language-text,
+pre.language-text,
+code[class*="language-text"],
+.language-text * {
+	color: #000000 !important;
+}
+
+
+/* Dark theme support for code blocks */
+[data-theme="dark"] .prism-code,
+[data-theme="dark"] pre[class*="language-"],
+[data-theme="dark"] .theme-code-block pre {
+	background-color: #232323 !important;
+	border: 1px solid #363636 !important;
+	color: #f5f5f5 !important;
+	padding: 0.6rem 0.8rem !important;
+	margin: 1rem 0 !important;
+	line-height: 1.2 !important;
+}
+
+[data-theme="dark"] .codeBlockContainer_Ckt0,
+[data-theme="dark"] div[class*="codeBlockContainer"] {
+	background-color: transparent !important;
+	border: none !important;
+	margin: 1rem 0 !important;
+}
+
+[data-theme="dark"] .prism-code .token-line,
+[data-theme="dark"] pre[class*="language-"] .token-line {
+	color: #f5f5f5 !important;
+}
+
+
+/* Responsive design for code blocks */
+@media (max-width: 768px) {
+	.prism-code,
+	pre[class*="language-"],
+	.theme-code-block pre {
+		padding: 0.5rem 0.7rem !important;
+		margin: 0.8rem 0 !important;
+		font-size: 0.85rem !important;
+		line-height: 1.15 !important;
+		border-radius: 6px !important;
+	}
+
+	.codeBlockContainer_Ckt0,
+	div[class*="codeBlockContainer"] {
+		margin: 0.8rem 0 !important;
+		border-radius: 6px !important;
+	}
+
+}
+
+@media (max-width: 480px) {
+	.prism-code,
+	pre[class*="language-"],
+	.theme-code-block pre {
+		padding: 0.4rem 0.6rem !important;
+		margin: 0.6rem 0 !important;
+		font-size: 0.8rem !important;
+		line-height: 1.1 !important;
+		border-radius: 4px !important;
+	}
+
+	.codeBlockContainer_Ckt0,
+	div[class*="codeBlockContainer"] {
+		margin: 0.6rem 0 !important;
+		border-radius: 4px !important;
+	}
+
+}
+
+/* ===== CODE BLOCK STYLING ===== */
+.prism-code[class*="language-python"], pre[class*="language-python"], .prism-code[class*="language-yaml"], pre[class*="language-yaml"], .prism-code[class*="language-yml"], pre[class*="language-yml"], .prism-code[class*="language-bash"], pre[class*="language-bash"], .prism-code[class*="language-shell"], pre[class*="language-shell"] { background: #171717 !important; color: #e8e8e8 !important; border: 1px solid #363636 !important; }
+
+/* Syntax highlighting */
+.prism-code[class*="language-"] .token, pre[class*="language-"] .token { color: #e8e8e8 !important; font-style: normal !important; }
+.prism-code[class*="language-"] .token.string, pre[class*="language-"] .token.string { color: #ff6b9d !important; }
+.prism-code[class*="language-"] .token.keyword, pre[class*="language-"] .token.keyword { color: #79D5FF !important; }
+.prism-code[class*="language-"] .token.function, pre[class*="language-"] .token.function { color: #FFB07B !important; }
+.prism-code[class*="language-"] .token.builtin, pre[class*="language-"] .token.builtin { color: #7dd3fc !important; }
+.prism-code[class*="language-"] .token.number, pre[class*="language-"] .token.number { color: #53FFE8 !important; }
+.prism-code[class*="language-"] .token.operator, .prism-code[class*="language-"] .token.punctuation, pre[class*="language-"] .token.operator, pre[class*="language-"] .token.punctuation { color: #d1d5db !important; }
+.prism-code[class*="language-"] .token.comment, pre[class*="language-"] .token.comment { color: #9ca3af !important; font-style: italic !important; }
+
+
+/* ===== INTEGRATION GRIDS ===== */
+/* Base styles for both Git and Issue management integration grids */
+#git-platform-integration ~ p + ul,
+#issue-management-integration ~ p + ul {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 1rem;
+	list-style: none;
+	padding: 0;
+	margin: 1.5rem 0;
+	align-items: start;
+}
+
+#git-platform-integration ~ p + ul li,
+#issue-management-integration ~ p + ul li {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 1.5rem 2rem;
+	border: 2px solid #e0e0e0;
+	border-radius: 8px;
+	background-color: #fafafa;
+	font-weight: 500;
+	min-height: 100px;
+	height: 100px;
+	box-sizing: border-box;
+	margin: 0;
+	position: relative;
+	top: 0;
+}
+
+#git-platform-integration ~ p + ul li::before,
+#issue-management-integration ~ p + ul li::before {
+	content: "";
+	width: 24px;
+	height: 24px;
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+	flex-shrink: 0;
+}
+
+/* Git platform icons */
+#git-platform-integration ~ p + ul li:nth-child(1)::before { background-image: url('/img/overview/Github.png'); }
+#git-platform-integration ~ p + ul li:nth-child(2)::before { background-image: url('/img/overview/Gitlab.png'); }
+#git-platform-integration ~ p + ul li:nth-child(3)::before { background-image: url('/img/overview/Bitbucket.png'); }
+#git-platform-integration ~ p + ul li:nth-child(4)::before { background-image: url('/img/overview/Azure.png'); }
+
+/* Issue management icons */
+#issue-management-integration ~ p + ul li:nth-child(1)::before { background-image: url('/img/overview/Github.png'); }
+#issue-management-integration ~ p + ul li:nth-child(2)::before { background-image: url('/img/overview/Gitlab.png'); }
+#issue-management-integration ~ p + ul li:nth-child(3)::before { background-image: url('/img/overview/Jira.png'); }
+#issue-management-integration ~ p + ul li:nth-child(4)::before { background-image: url('/img/overview/Linear.png'); }
+
+/* Dark theme support */
+[data-theme="dark"] #git-platform-integration ~ p + ul li,
+[data-theme="dark"] #issue-management-integration ~ p + ul li {
+	background-color: #232323;
+	border-color: #363636;
+	color: #ffffff;
+}
+
+[data-theme="dark"] #git-platform-integration ~ p + ul li::before,
+[data-theme="dark"] #issue-management-integration ~ p + ul li::before {
+	filter: invert(1) brightness(0.8);
+}
+
+/* Responsive integration grids */
+@media (max-width: 768px) {
+	#git-platform-integration ~ p + ul,
+	#issue-management-integration ~ p + ul {
+		gap: 0.8rem;
+	}
+
+	#git-platform-integration ~ p + ul li {
+		padding: 1.2rem 1.5rem;
+		font-size: 0.95rem;
+	}
+
+	#issue-management-integration ~ p + ul li {
+		padding: 0.8rem 1rem;
+		font-size: 0.95rem;
+	}
+}
+
+@media (max-width: 480px) {
+	#git-platform-integration ~ p + ul,
+	#issue-management-integration ~ p + ul {
+		grid-template-columns: 1fr;
+		gap: 0.6rem;
+	}
+
+	#git-platform-integration ~ p + ul li {
+		padding: 1rem 1.2rem;
+		font-size: 0.9rem;
+	}
+
+	#issue-management-integration ~ p + ul li {
+		padding: 0.7rem 0.8rem;
+		font-size: 0.9rem;
+	}
+
+	#git-platform-integration ~ p + ul li::before,
+	#issue-management-integration ~ p + ul li::before {
+		width: 20px;
+		height: 20px;
+	}
+}
+
+/* ===== DATA PRIVACY SECTION PLAIN BULLETS ===== */
+/* Ensure data privacy section uses regular bullet points, not boxes */
+#data-privacy-and-security ~ p + ul {
+	display: block !important;
+	grid-template-columns: none !important;
+	gap: 0 !important;
+	list-style: disc !important;
+	padding-left: 1.5rem !important;
+	margin: 1rem 0 !important;
+}
+
+#data-privacy-and-security ~ p + ul li {
+	display: list-item !important;
+	align-items: initial !important;
+	gap: 0 !important;
+	padding: 0.25rem 0 !important;
+	border: none !important;
+	border-radius: 0 !important;
+	background-color: transparent !important;
+	font-weight: normal !important;
+	min-height: auto !important;
+	height: auto !important;
+	box-sizing: content-box !important;
+	margin: 0 !important;
+	position: static !important;
+	top: auto !important;
+}
+
+#data-privacy-and-security ~ p + ul li::before {
+	display: none !important;
+	content: none !important;
+	width: 0 !important;
+	height: 0 !important;
+	background: none !important;
+}
+
+[data-theme="dark"] #data-privacy-and-security ~ p + ul li {
+	background-color: transparent !important;
+	border: none !important;
+	color: inherit !important;
+}
+
+/* ===== FORCE DARK TEXT FOR TEXT CODE BLOCKS ===== */
+/* Aggressive override for text code blocks in light theme */
+:root {
+	--prism-color-text: #000000 !important;
+}
+
+[data-theme="light"] .language-text .token-line,
+[data-theme="light"] .prism-code.language-text .token-line,
+[data-theme="light"] pre.language-text .token-line,
+[data-theme="light"] .language-text span,
+[data-theme="light"] .prism-code.language-text span,
+[data-theme="light"] pre.language-text span,
+.theme-code-block .language-text .token-line,
+.theme-code-block .language-text span,
+.codeBlockContent_biex .language-text .token-line,
+.codeBlockContent_biex .language-text span {
+	color: #1c1e21 !important;
+	opacity: 1 !important;
+}
+
+/* Also target text nodes directly */
+[data-theme="light"] .language-text,
+[data-theme="light"] .prism-code.language-text,
+[data-theme="light"] pre.language-text,
+.theme-code-block .language-text,
+.codeBlockContent_biex .language-text {
+	color: #1c1e21 !important;
+}
+
+/* Reset button styling in text blocks */
+[data-theme="light"] .language-text button,
+[data-theme="light"] .language-text [class*="button"],
+[data-theme="light"] .prism-code.language-text button,
+[data-theme="light"] .prism-code.language-text [class*="button"],
+[data-theme="light"] pre.language-text button,
+[data-theme="light"] pre.language-text [class*="button"],
+.theme-code-block .language-text button,
+.theme-code-block .language-text [class*="button"],
+.codeBlockContent_biex .language-text button,
+.codeBlockContent_biex .language-text [class*="button"] {
+	color: initial;
+}
+
+/* Make copy button icon lighter in dark mode - target all possible SVG elements */
+[data-theme="dark"] .copyButtonIcons_IEyt,
+[data-theme="dark"] .copyButtonIcons_IEyt *,
+[data-theme="dark"] .copyButtonIcons_IEyt svg,
+[data-theme="dark"] .copyButtonIcons_IEyt svg *,
+[data-theme="dark"] .copyButtonIcons_IEyt path,
+[data-theme="dark"] button .copyButtonIcons_IEyt,
+[data-theme="dark"] button .copyButtonIcons_IEyt *,
+[data-theme="dark"] button .copyButtonIcons_IEyt svg,
+[data-theme="dark"] button .copyButtonIcons_IEyt svg *,
+[data-theme="dark"] button .copyButtonIcons_IEyt path {
+	color: #f5f5f5 !important;
+	fill: #f5f5f5 !important;
+	stroke: #f5f5f5 !important;
+}
diff --git a/static/img/Icons/Icons.png b/static/img/Icons/Icons.png
new file mode 100644
index 00000000..4fd5b868
Binary files /dev/null and b/static/img/Icons/Icons.png differ
diff --git a/static/img/Icons/Tip.png b/static/img/Icons/Tip.png
new file mode 100644
index 00000000..8cfb10cb
Binary files /dev/null and b/static/img/Icons/Tip.png differ
diff --git a/static/img/Icons/Vector.png b/static/img/Icons/Vector.png
new file mode 100644
index 00000000..cec316fe
Binary files /dev/null and b/static/img/Icons/Vector.png differ
diff --git a/static/img/Icons/Warning.png b/static/img/Icons/Warning.png
new file mode 100644
index 00000000..73aecee6
Binary files /dev/null and b/static/img/Icons/Warning.png differ
diff --git a/static/img/overview/Azure.png b/static/img/overview/Azure.png
new file mode 100644
index 00000000..6e8b02ee
Binary files /dev/null and b/static/img/overview/Azure.png differ
diff --git a/static/img/overview/Bitbucket.png b/static/img/overview/Bitbucket.png
new file mode 100644
index 00000000..0f349913
Binary files /dev/null and b/static/img/overview/Bitbucket.png differ
diff --git a/static/img/overview/Github.png b/static/img/overview/Github.png
new file mode 100644
index 00000000..cfe4be2e
Binary files /dev/null and b/static/img/overview/Github.png differ
diff --git a/static/img/overview/Gitlab.png b/static/img/overview/Gitlab.png
new file mode 100644
index 00000000..9ed9a1a8
Binary files /dev/null and b/static/img/overview/Gitlab.png differ
diff --git a/static/img/overview/Jira.png b/static/img/overview/Jira.png
new file mode 100644
index 00000000..abb1c8b1
Binary files /dev/null and b/static/img/overview/Jira.png differ
diff --git a/static/img/overview/Linear.png b/static/img/overview/Linear.png
new file mode 100644
index 00000000..8960789c
Binary files /dev/null and b/static/img/overview/Linear.png differ