diff --git a/ui/public/resource/icon.json b/ui/public/resource/icon.json
index f45e264d..bfd8f47e 100644
--- a/ui/public/resource/icon.json
+++ b/ui/public/resource/icon.json
@@ -154,5 +154,53 @@
 				"name": ""
 			}
 		]
+	},
+	{
+		"name": "iconsax",
+		"category": "Icons",
+		"subCategory": ["React", "Frontend"],
+		"url": "https://iconsax.io/",
+		"socials": [
+			{
+				"url": "",
+				"name": ""
+			}
+		]
+	},
+	{
+		"name": "Iconizer",
+		"category": "Icons",
+		"subCategory": ["React", "Frontend"],
+		"url": "https://www.iconizer.io/",
+		"socials": [
+			{
+				"url": "",
+				"name": ""
+			}
+		]
+	},
+	{
+		"name": "Iconly",
+		"category": "Icons",
+		"subCategory": ["React", "Frontend"],
+		"url": "https://iconly.pro/",
+		"socials": [
+			{
+				"url": "",
+				"name": ""
+			}
+		]
+	},
+	{
+		"name": "Flaticon",
+		"category": "Icons",
+		"subCategory": ["React", "Frontend"],
+		"url": "https://www.flaticon.com/",
+		"socials": [
+			{
+				"url": "",
+				"name": ""
+			}
+		]
 	}
 ]
diff --git a/ui/src/hooks/useParamsValue.ts b/ui/src/hooks/useParamsValue.ts
index 6745fd3e..558e4009 100644
--- a/ui/src/hooks/useParamsValue.ts
+++ b/ui/src/hooks/useParamsValue.ts
@@ -27,7 +27,6 @@ const useParamsValue = (initialParams: Params) => {
 			for (const key in initialParams) {
 				if (initialParams[key]) {
 					const element = initialParams[key];
-					console.log("element", element);
 					updateParamsValue(key, element);
 					hasRan.current = true;
 				}
diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss
index dc93ece3..7020ae4e 100644
--- a/ui/src/pages/About/About.module.scss
+++ b/ui/src/pages/About/About.module.scss
@@ -25,10 +25,9 @@
 						rgba(0, 0, 0, 0.2),
 						rgba(0, 0, 0, 0.1)
 					),
-					url("src/assets/About/card_bg.jpg") no-repeat left / cover;
+					url("../../assets/About/card_bg.jpg") no-repeat left / cover;
 
 				background-blend-mode: color-dodge;
-
 				object-fit: cover;
 				background-color: #9c9c9c98;
 				display: flex;
diff --git a/ui/src/pages/Colors/ColorPicker/index.tsx b/ui/src/pages/Colors/ColorPicker/index.tsx
index 2432c42c..e165d958 100644
--- a/ui/src/pages/Colors/ColorPicker/index.tsx
+++ b/ui/src/pages/Colors/ColorPicker/index.tsx
@@ -23,20 +23,18 @@ const ColorPicker: React.FC = () => {
 		format: INITIAL_FORMAT,
 	});
 
-	const [color, setColor] = useState(String(searchParams.get("color")));
+	const [colorPickerRan, setColorPickerRan] = useState(false);
+	const [formatState, setFormatState] = useState("");
+	const color = String(searchParams.get("color"));
 	const format = String(searchParams.get("format")) as FormatType;
 	const colors = useMemo(() => calculateColors(color), [color]);
-	const debouncedSearchTerm = useDebounce(color);
+	const debouncedSearchTerm = useDebounce(formatState);
 
 	useEffect(() => {
-		updateParamsValue("color", debouncedSearchTerm);
-	}, [debouncedSearchTerm, updateParamsValue]);
-
-	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const inputValue = e.target.value;
-		setColor(inputValue);
-		updateParamsValue("format", determineFormat(inputValue));
-	};
+		if (debouncedSearchTerm && !colorPickerRan) {
+			updateParamsValue("color", debouncedSearchTerm);
+		}
+	}, [debouncedSearchTerm, updateParamsValue, colorPickerRan]);
 
 	return (
 		<Form layout="vertical">
@@ -47,7 +45,14 @@ const ColorPicker: React.FC = () => {
 							<ResponsiveInputWithLabel
 								label="Color code"
 								value={color}
-								onChange={handleInputChange}
+								onChange={(e) => {
+									updateParamsValue("color", e.target.value);
+									setColorPickerRan(true);
+									updateParamsValue(
+										"format",
+										determineFormat(e.target.value)
+									);
+								}}
 								type="text"
 							/>
 							<Clipboard
@@ -67,7 +72,10 @@ const ColorPicker: React.FC = () => {
 						<CP
 							format={format}
 							value={color}
-							onChange={setColor}
+							onChange={(value) => {
+								setFormatState(value);
+								setColorPickerRan(false);
+							}}
 							size="xl"
 						/>
 					</Space>
diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss
index fe9a8d64..34b206b4 100644
--- a/ui/src/pages/Home/Home.module.scss
+++ b/ui/src/pages/Home/Home.module.scss
@@ -23,7 +23,7 @@
 			gap: var(--bt-size-10);
 			&_title {
 				text-align: left;
-				font-family: "Pixelify Sans";
+				// font-family: var(--font-pixelify-sans);
 			}
 			&_paragraph {
 				text-align: left;
diff --git a/ui/src/pages/Tools/Diagramming/index.tsx b/ui/src/pages/Tools/Diagramming/index.tsx
index f513876e..3c3d1144 100644
--- a/ui/src/pages/Tools/Diagramming/index.tsx
+++ b/ui/src/pages/Tools/Diagramming/index.tsx
@@ -1,12 +1,53 @@
 import { Excalidraw } from "@excalidraw/excalidraw";
 import style from "./Diagramming.module.scss";
 import useMode from "hooks/useMode";
+// import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
+// import { ExcalidrawInitialDataState } from "@excalidraw/excalidraw/types/types";
+// import { useRef, useState } from "react";
+// import useCombinedKeyPress from "hooks/useCombinedKeyPress";
 
 const Diagramming = () => {
 	const { isDarkMode } = useMode();
+	// const lastElementsRef = useRef<readonly ExcalidrawElement[]>([]);
+	// const [btEcalidraw, setBtEcalidraw] =
+	// 	useState<ExcalidrawInitialDataState | null>({
+	// 		elements: [],
+	// 	});
+
+	// useCombinedKeyPress(() => {
+	// 	console.log("Element removed");
+	// 	if (
+	// 		btEcalidraw &&
+	// 		btEcalidraw.elements &&
+	// 		btEcalidraw.elements.length > 0
+	// 	) {
+	// 		const newElements = btEcalidraw.elements.slice(0, -1); // Remove the last element
+	// 		setBtEcalidraw({
+	// 			...btEcalidraw,
+	// 			elements: newElements,
+	// 		});
+	// 		console.log("Element removed");
+	// 	}
+	// }, "KeyZ");
+
+	// const onChange = (elements: readonly ExcalidrawElement[]) => {
+	// 	if (elements !== lastElementsRef.current) {
+	// 		setBtEcalidraw((prevData) => ({
+	// 			...prevData,
+	// 			elements: elements,
+	// 		}));
+	// 		lastElementsRef.current = elements;
+	// 		console.log("btEcalidraw", btEcalidraw);
+	// 	}
+	// };
+
 	return (
 		<div className={style.diagramming}>
-			<Excalidraw theme={isDarkMode ? "dark" : "light"} />
+			<Excalidraw
+				theme={isDarkMode ? "dark" : "light"}
+				// onChange={onChange}
+				// initialData={btEcalidraw}
+			/>
 		</div>
 	);
 };
diff --git a/ui/src/styles/typography.css b/ui/src/styles/typography.css
index e5f47103..0c7ff669 100644
--- a/ui/src/styles/typography.css
+++ b/ui/src/styles/typography.css
@@ -1,22 +1,22 @@
 :where(html) {
 	@font-face {
-		font-family: "Pixelify Sans";
-		src: url("./src/assets/fonts/PixelifySans-Regular.ttf")
+		font-family: "AAA";
+		src: url("./../assets/fonts/PixelifySans-Regular.ttf")
 			format("truetype");
 		font-weight: 400;
 		font-style: normal;
 	}
 
-	@font-face {
+	/* @font-face {
 		font-family: "FreightText";
-		src: url("./src/assets/fonts/fFreightText-Light.otf") format("truetype");
+		src: url("./src/assets/fonts/FreightText-Light.otf") format("truetype");
 		font-weight: 400;
 		font-style: normal;
-	}
+	} */
 
-	--font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
-		Cantarell, Noto Sans, sans-serif;
+	/* --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
+		Cantarell, Noto Sans, sans-serif; */
 
-	--font-pixelify-sans: "Pixelify Sans", system-ui, -apple-system, Segoe UI,
-		Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+	--font-pixelify-sans: "AAA", system-ui, -apple-system, Segoe UI, Roboto,
+		Ubuntu, Cantarell, Noto Sans, sans-serif, Aacute;
 }