diff --git a/ui/src/components/General/CodeEditor/CodeEditor.module.scss b/ui/src/components/General/CodeEditor/CodeEditor.module.scss
index 40db8f77..3d7d0e90 100644
--- a/ui/src/components/General/CodeEditor/CodeEditor.module.scss
+++ b/ui/src/components/General/CodeEditor/CodeEditor.module.scss
@@ -4,14 +4,14 @@
 		position: absolute;
 		top: var(--bt-size-16);
 		right: var(--bt-size-10);
-		z-index: 10;
+		z-index: var(--bt-z-index-dropdown);
 
 		&__success {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			padding: 2px 6px;
-			border: 1px solid green;
+			padding: var(--bt-size-2) var(--bt-size-6);
+			border: var(--bt-size-1) solid green;
 			border-radius: var(--bt-size-5);
 		}
 
@@ -19,8 +19,8 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			padding: 2px 6px;
-			border: 1px solid red;
+			padding: var(--bt-size-2) var(--bt-size-6);
+			border: var(--bt-size-1) solid red;
 			border-radius: var(--bt-size-5);
 		}
 
diff --git a/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss b/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss
index ae37b344..1b948e11 100644
--- a/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss
+++ b/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss
@@ -1,3 +1,7 @@
+$cp-right: 10px;
+$cp-left: 1000px;
+$cp-bg-color: rgb(68, 68, 68);
+
 .cpwi {
 	&__color {
 		position: relative;
@@ -6,13 +10,13 @@
 		align-items: center;
 
 		&_dp {
-			background-color: rgb(68, 68, 68);
-			padding: 10px;
-			border-radius: 10px;
+			background-color: $cp-bg-color;
+			padding: var(--bt-size-10);
+			border-radius: var(--bt-size-10);
 			position: absolute;
-			top: 100%;
-			right: 10;
-			left: 1000;
+			top: var(--bt-size-percent-100);
+			right: $cp-right;
+			left: $cp-left;
 			z-index: var(--bt-z-index-dropdown);
 			display: none;
 		}
diff --git a/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss b/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss
index e4867cb2..58c557e7 100644
--- a/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss
+++ b/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss
@@ -1,3 +1,3 @@
 .fallback {
-	width: 500px;
+	width: var(--bt-list-card-container);
 }
diff --git a/ui/src/components/General/ListItems/Resource/Resource.module.scss b/ui/src/components/General/ListItems/Resource/Resource.module.scss
index 01603ce2..14d53b1e 100644
--- a/ui/src/components/General/ListItems/Resource/Resource.module.scss
+++ b/ui/src/components/General/ListItems/Resource/Resource.module.scss
@@ -3,7 +3,9 @@
 
 	&_space {
 		display: grid;
-		grid-template-columns: 1fr 1fr 1fr auto;
+		grid-template-columns: var(--bt-grid-template-1) var(
+				--bt-grid-template-1
+			) var(--bt-grid-template-1) auto;
 	}
 
 	&__avatar {
@@ -21,6 +23,6 @@
 	}
 
 	@media screen and (max-width: 550px) {
-		width: 100%;
+		width: var(--bt-size-percent-100);
 	}
 }
diff --git a/ui/src/components/General/Notification/Notification.module.scss b/ui/src/components/General/Notification/Notification.module.scss
index 55af5543..87ef6df7 100644
--- a/ui/src/components/General/Notification/Notification.module.scss
+++ b/ui/src/components/General/Notification/Notification.module.scss
@@ -1,9 +1,14 @@
+$notification-size-200: 200px;
+$notification-size-300: 300px;
+$notification-status-color: #c83939;
+$notification-size-minus-25: -25px;
+
 .notification {
-	height: 300px;
-	width: 200px;
+	height: $notification-size-300;
+	width: $notification-size-200;
 	overflow-y: auto;
 	overflow-x: hidden;
-	border-radius: 8px;
+	border-radius: var(--bt-size-8);
 
 	&__error {
 		text-align: center;
@@ -22,13 +27,13 @@
 		&__status {
 			width: var(--bt-size-7);
 			height: var(--bt-size-7);
-			background-color: #c83939;
+			background-color: $notification-status-color;
 			position: absolute;
-			border-radius: 100%;
+			border-radius: var(--bt-size-percent-100);
 			top: var(--bt-size-5);
-			right: 17px;
+			right: var(--bt-size-17);
 			border-color: white;
-			border-width: 1px;
+			border-width: var(--bt-size-1);
 			border-style: solid;
 		}
 	}
@@ -41,7 +46,7 @@
 
 		&_features {
 			padding-top: var(--bt-size-8);
-			margin-left: var(--bt-size-minus-25);
+			margin-left: $notification-size-minus-25;
 			padding-bottom: var(--bt-size-8);
 			list-style-type: square;
 
diff --git a/ui/src/components/General/PopupSearch/PopSearch.module.scss b/ui/src/components/General/PopupSearch/PopSearch.module.scss
index caed2733..4e660ddc 100644
--- a/ui/src/components/General/PopupSearch/PopSearch.module.scss
+++ b/ui/src/components/General/PopupSearch/PopSearch.module.scss
@@ -1,6 +1,10 @@
+$popsearch-height: 200px;
+$popsearch-bg-dark: #646363;
+$popsearch-bg-color: #e0e0e0;
+
 .popsearch {
 	&__container {
-		max-height: 200px;
+		max-height: $popsearch-height;
 		overflow-y: auto;
 		margin-top: var(--bt-size-10);
 
@@ -14,17 +18,17 @@
 
 			&_light:hover,
 			&_light:first-child {
-				background-color: #e0e0e0;
+				background-color: $popsearch-bg-color;
 				border-radius: var(--bt-size-5);
 			}
 
 			&_dark:hover {
-				background-color: #646363;
+				background-color: $popsearch-bg-dark;
 				border-radius: var(--bt-size-5);
 			}
 
 			&_dark:first-child {
-				background-color: #646363;
+				background-color: $popsearch-bg-dark;
 				border-radius: var(--bt-size-5);
 			}
 		}
diff --git a/ui/src/components/General/Spin/Spin.module.scss b/ui/src/components/General/Spin/Spin.module.scss
index 7b889f72..e2e23375 100644
--- a/ui/src/components/General/Spin/Spin.module.scss
+++ b/ui/src/components/General/Spin/Spin.module.scss
@@ -1,5 +1,5 @@
 .spin {
 	display: flex;
 	justify-content: center;
-	translate: 0px 100px;
+	translate: var(--bt-size-0) var(--bt-size-100);
 }
diff --git a/ui/src/components/General/Text/text.module.scss b/ui/src/components/General/Text/text.module.scss
index 647a6cd0..7d152ecc 100644
--- a/ui/src/components/General/Text/text.module.scss
+++ b/ui/src/components/General/Text/text.module.scss
@@ -1,6 +1,6 @@
 .title {
 	&__pageHeader {
 		max-width: var(--bt-list-card-container);
-		margin: 0 auto;
+		margin: var(--bt-size-0) auto;
 	}
 }
diff --git a/ui/src/components/General/Warning/Warning.module.scss b/ui/src/components/General/Warning/Warning.module.scss
index 07758dea..3c2c52dc 100644
--- a/ui/src/components/General/Warning/Warning.module.scss
+++ b/ui/src/components/General/Warning/Warning.module.scss
@@ -3,5 +3,5 @@
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
-	height: 100%;
+	height: var(--bt-size-percent-100);
 }
diff --git a/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss b/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss
index e0b659fd..05eba770 100644
--- a/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss
+++ b/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss
@@ -1,6 +1,6 @@
 .withpagetitle {
 	padding: 0 var(--bt-size-10) 0 var(--bt-size-10);
 	&__header_title {
-		height: 64px;
+		height: var(--bt-size-64);
 	}
 }
diff --git a/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss b/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss
index 1870bcd5..d077f6b9 100644
--- a/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss
+++ b/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss
@@ -1,13 +1,12 @@
 .fb {
 	z-index: var(--bt-z-index-dropdown);
 	display: flex;
-	height: 64px;
+	height: var(--bt-size-64);
 	align-items: center;
 	justify-content: flex-end;
 	flex-direction: row;
-	// background-color: transparent;
 	position: absolute;
-	right: 18px;
+	right: var(--bt-size-18);
 
 	&__container {
 		right: var(--bt-size-10);
@@ -16,6 +15,6 @@
 		align-items: center;
 		justify-content: flex-end;
 		flex-direction: row;
-		gap: 10px;
+		gap: var(--bt-size-10);
 	}
 }
diff --git a/ui/src/components/Layouts/Footer/Footer.module.scss b/ui/src/components/Layouts/Footer/Footer.module.scss
index 53268465..b40c61f2 100644
--- a/ui/src/components/Layouts/Footer/Footer.module.scss
+++ b/ui/src/components/Layouts/Footer/Footer.module.scss
@@ -1,15 +1,24 @@
+$footer-vw-6: 6vw;
+$footer-vw-5: 5vw;
+$footer-color: #e8e8e8;
+
 .footer {
-	padding: 30px 10% 30px 10%;
+	padding: var(--bt-size-30) var(--bt-size-percent-10) var(--bt-size-30)
+		var(--bt-size-percent-10);
 	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-	box-shadow: inset 0px 1px 0px #e8e8e8;
+	grid-template-columns:
+		var(--bt-grid-template-1) var(--bt-grid-template-1) var(
+			--bt-grid-template-1
+		)
+		var(--bt-grid-template-1) var(--bt-grid-template-1);
+	box-shadow: var(--bt-footer-box-shadow);
 	position: sticky;
-	width: 100%;
+	width: var(--bt-size-percent-100);
 
 	&__left {
-		padding-right: 5vw;
-		border-right: 1px solid #e8e8e8;
-		margin-right: 6vw;
+		padding-right: $footer-vw-5;
+		border-right: var(--bt-size-1) solid $footer-color;
+		margin-right: $footer-vw-6;
 	}
 
 	&__right {
@@ -17,10 +26,10 @@
 	}
 
 	&__list {
-		padding: 0px;
+		padding: var(--bt-size-0);
 		list-style-type: none;
 		li {
-			margin: var(--bt-size-10) 0px;
+			margin: var(--bt-size-10) var(--bt-size-0);
 		}
 	}
 }
@@ -30,9 +39,9 @@
 		text-align: center;
 		&__left {
 			border-right: none;
-			padding-right: 0px;
-			margin-right: 0px;
+			padding-right: var(--bt-size-0);
+			margin-right: var(--bt-size-0);
 		}
-		grid-template-columns: 1fr;
+		grid-template-columns: var(--bt-grid-template-1);
 	}
 }
diff --git a/ui/src/components/Layouts/Legal/Legal.module.scss b/ui/src/components/Layouts/Legal/Legal.module.scss
index e21a74a9..ec9300ad 100644
--- a/ui/src/components/Layouts/Legal/Legal.module.scss
+++ b/ui/src/components/Layouts/Legal/Legal.module.scss
@@ -1,5 +1,6 @@
 .legal {
-	padding: 64px 10% 64px 10%;
+	padding: var(--bt-size-64) var(--bt-size-percent-10) var(--bt-size-64)
+		var(--bt-size-percent-10);
 	display: flex;
 
 	ul {
@@ -7,17 +8,17 @@
 	}
 
 	ul li {
-		padding: 5px;
+		padding: var(--bt-size-5);
 	}
 
 	h1 {
 		background-color: #c0c0c0;
-		border-radius: 10px;
+		border-radius: var(--bt-size-10);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 10%;
+		padding: var(--bt-size-percent-10);
 		/* can we do better */
-		margin-bottom: 64px !important;
+		margin-bottom: var(--bt-size-64) !important;
 	}
 }
diff --git a/ui/src/components/Layouts/Menu/Menu.module.scss b/ui/src/components/Layouts/Menu/Menu.module.scss
index 384d0599..0ff0d615 100644
--- a/ui/src/components/Layouts/Menu/Menu.module.scss
+++ b/ui/src/components/Layouts/Menu/Menu.module.scss
@@ -1,12 +1,16 @@
+$menu-height: calc(100dvh - 204px);
+$menu-mobile-height: calc(100dvh - 168px);
+$menu-collapsed-height: calc(100dvh - 202px);
+
 .menu {
-	height: calc(100dvh - 204px);
+	height: $menu-height;
 	overflow-y: auto;
 
 	&__collapsed {
-		height: calc(100dvh - 202px);
+		height: $menu-collapsed-height;
 	}
 
 	@media (max-width: 768px) {
-		height: calc(100dvh - 168px);
+		height: $menu-mobile-height;
 	}
 }
diff --git a/ui/src/components/Layouts/Sidebar/Sidebar.module.scss b/ui/src/components/Layouts/Sidebar/Sidebar.module.scss
index cfa438ae..d51eca75 100644
--- a/ui/src/components/Layouts/Sidebar/Sidebar.module.scss
+++ b/ui/src/components/Layouts/Sidebar/Sidebar.module.scss
@@ -1,4 +1,4 @@
 .sidebar {
-	height: 100dvh;
+	height: var(--bt-dvh-100);
 	overflow: hidden;
 }
diff --git a/ui/src/components/RenderProps/ListSearchResults/ListSearchResults.module.scss b/ui/src/components/RenderProps/ListSearchResults/ListSearchResults.module.scss
index e89049da..8585adfa 100644
--- a/ui/src/components/RenderProps/ListSearchResults/ListSearchResults.module.scss
+++ b/ui/src/components/RenderProps/ListSearchResults/ListSearchResults.module.scss
@@ -3,7 +3,7 @@
 	flex-direction: column;
 	max-width: var(--bt-list-card-container);
 	gap: var(--bt-size-16);
-	margin: 0 auto;
+	margin: var(--bt-size-0) auto;
 	overflow-x: hidden;
 
 	&__tag {
diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss
index 7020ae4e..2242efe2 100644
--- a/ui/src/pages/About/About.module.scss
+++ b/ui/src/pages/About/About.module.scss
@@ -1,8 +1,11 @@
+$about-bg-color: #9c9c9c98;
+
 .about {
-	padding: 64px 10% 64px 10%;
+	padding: var(--bt-size-64) var(--bt-size-percent-10) var(--bt-size-64)
+		var(--bt-size-percent-10);
 
 	&__card {
-		margin: 0 auto;
+		margin: var(--bt-size-0) auto;
 		max-width: var(--bt-converter-width);
 
 		&__container {
@@ -29,11 +32,11 @@
 
 				background-blend-mode: color-dodge;
 				object-fit: cover;
-				background-color: #9c9c9c98;
+				background-color: $about-bg-color;
 				display: flex;
 				justify-content: center;
 				flex-direction: column;
-				padding: 50px;
+				padding: var(--bt-size-50);
 
 				p {
 					text-align: right;
diff --git a/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss b/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss
index 5145f737..64f30868 100644
--- a/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss
+++ b/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss
@@ -1,3 +1,3 @@
 .gi {
-	height: 100%;
+	height: var(--bt-size-percent-100);
 }
diff --git a/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss b/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
index 7e995f5f..77311288 100644
--- a/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
+++ b/ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
@@ -1,10 +1,12 @@
+$br-dvh-25: 25dvh;
+
 .br {
 	display: flex;
 	flex-direction: column;
 	gap: var(--bt-size-20);
 	&__input,
 	&__output {
-		height: 100%;
+		height: var(--bt-size-percent-100);
 	}
 
 	&__output {
@@ -18,11 +20,11 @@
 			gap: var(--bt-size-20);
 
 			&_text {
-				aspect-ratio: 1 / 1;
+				aspect-ratio: var(--bt-number-1) / var(--bt-number-1);
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				height: 25dvh;
+				height: $br-dvh-25;
 			}
 
 			&_text {
diff --git a/ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss b/ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss
index 8925095f..3c8fddc4 100644
--- a/ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss
+++ b/ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss
@@ -3,10 +3,10 @@
 	flex-direction: column;
 	gap: var(--bt-size-20);
 	&__input {
-		height: 100%;
+		height: var(--bt-size-percent-100);
 	}
 	&__output {
-		height: 100%;
+		height: var(--bt-size-percent-100);
 		display: flex;
 		align-items: center;
 		justify-content: center;
diff --git a/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss b/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
index 2df2fb72..0a08bc94 100644
--- a/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
+++ b/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
@@ -1,6 +1,13 @@
+$cp-size-435: 435px;
+$cp-size-380: 380px;
+$cp-size-360: 360px;
+$cp-size-minus-10: -10px;
+
 .cp {
 	display: grid;
-	grid-template-columns: 380px 360px 435px 435px;
+	grid-template-columns:
+		$cp-size-380 $cp-size-360 $cp-size-435
+		$cp-size-435;
 	gap: var(--bt-size-16);
 	justify-content: center;
 
@@ -24,21 +31,23 @@
 	}
 
 	@media (max-width: 1900px) {
-		grid-template-columns: 435px 360px 435px;
+		grid-template-columns:
+			$cp-size-435 $cp-size-360
+			$cp-size-435;
 	}
 
 	@media (max-width: 1800px) {
-		grid-template-columns: 435px 435px;
+		grid-template-columns: $cp-size-435 $cp-size-435;
 	}
 
 	@media (max-width: 1200px) {
-		grid-template-columns: 435px;
+		grid-template-columns: $cp-size-435;
 	}
 }
 
 .cd {
 	padding: var(--bt-size-5);
-	border-radius: 10px;
+	border-radius: var(--bt-size-10);
 	&__container {
 		display: flex;
 		gap: var(--bt-size-16);
@@ -57,8 +66,10 @@
 				linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 25%, transparent 25%),
 				linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.6) 75%),
 				linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.6) 70%);
-			background-size: 20px 20px;
-			background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+			background-size: var(--bt-size-20) var(--bt-size-20);
+			background-position: 0 0, 0 var(--bt-size-10),
+				var(--bt-size-10) $cp-size-minus-10,
+				$cp-size-minus-10 var(--bt-size-0);
 		}
 	}
 }
diff --git a/ui/src/pages/Converter/Image/Image.module.scss b/ui/src/pages/Converter/Image/Image.module.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/ui/src/pages/Converter/Image/index.tsx b/ui/src/pages/Converter/Image/index.tsx
deleted file mode 100644
index e28c0129..00000000
--- a/ui/src/pages/Converter/Image/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import styles from "./Image.module.scss";
-
-const Image: React.FC = () => {
-	return <div className={styles.root}></div>;
-};
-
-export default Image;
diff --git a/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss b/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
index 7a4141c1..99389657 100644
--- a/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
+++ b/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
@@ -5,10 +5,10 @@
 	}
 
 	&__output {
-		height: 100%;
+		height: var(--bt-size-percent-100);
 
 		&_warning {
-			min-height: 500px;
+			min-height: var(--bt-size-500);
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
@@ -17,7 +17,7 @@
 		// xl(1280px)
 		@media screen and (min-width: 1280px) {
 			&_warning {
-				min-height: 600px;
+				min-height: var(--bt-size-600);
 			}
 		}
 	}
diff --git a/ui/src/pages/Converter/Svg/Svg.module.scss b/ui/src/pages/Converter/Svg/Svg.module.scss
index 76d69a37..42af62a6 100644
--- a/ui/src/pages/Converter/Svg/Svg.module.scss
+++ b/ui/src/pages/Converter/Svg/Svg.module.scss
@@ -1,3 +1,5 @@
+$svg-size-335: 335px;
+
 .svgformatter {
 	&__left,
 	&__right {
@@ -6,7 +8,7 @@
 		gap: var(--bt-size-20);
 
 		&__code {
-			min-height: 335px;
+			min-height: $svg-size-335;
 			display: grid;
 		}
 	}
diff --git a/ui/src/pages/Feedback/Feedback.module.scss b/ui/src/pages/Feedback/Feedback.module.scss
index bd08d29d..458a45b7 100644
--- a/ui/src/pages/Feedback/Feedback.module.scss
+++ b/ui/src/pages/Feedback/Feedback.module.scss
@@ -1,5 +1,10 @@
+$feedback-size-1400: 1400px;
+$feedback-size-1949: 1949.375px;
+$feedback-border-color: #ccc;
+
 .feedback {
-	padding: 64px 0 64px 0;
+	padding: var(--bt-size-64) var(--bt-size-0) var(--bt-size-64)
+		var(--bt-size-0);
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
@@ -7,14 +12,14 @@
 
 	.iframe,
 	&__skeletons {
-		width: 55%;
-		max-width: 1400px;
+		width: var(--bt-size-percent-55);
+		max-width: $feedback-size-1400;
 	}
 
 	&__skeletons {
 		padding: var(--bt-size-50);
-		height: 1949.375px;
-		border: 1px solid #ccc;
+		height: $feedback-size-1949;
+		border: var(--bt-size-1) solid $feedback-border-color;
 		background: white;
 		display: flex;
 		flex-direction: column;
@@ -22,7 +27,7 @@
 	}
 
 	.iframe {
-		border: 1px solid #ccc;
+		border: var(--bt-size-1) solid $feedback-border-color;
 		display: block;
 		background: transparent;
 	}
@@ -30,14 +35,14 @@
 	@media (max-width: 1300px) {
 		.iframe,
 		&__skeletons {
-			width: 70%;
+			width: var(--bt-size-percent-70);
 		}
 	}
 
 	@media (max-width: 1000px) {
 		.iframe,
 		&__skeletons {
-			width: 95%;
+			width: var(--bt-size-percent-90);
 		}
 	}
 }
diff --git a/ui/src/pages/Generator/Avatar/Avatar.module.scss b/ui/src/pages/Generator/Avatar/Avatar.module.scss
index a5070b29..b4879818 100644
--- a/ui/src/pages/Generator/Avatar/Avatar.module.scss
+++ b/ui/src/pages/Generator/Avatar/Avatar.module.scss
@@ -1,6 +1,8 @@
+$avatar-size-424: 424px;
+
 .avatar {
 	&__output {
-		min-height: 424px;
+		min-height: $avatar-size-424;
 		display: flex;
 		align-items: center;
 		justify-content: center;
diff --git a/ui/src/pages/Generator/DataGenerator/DataGenerator.module.scss b/ui/src/pages/Generator/DataGenerator/DataGenerator.module.scss
index ecd6ca9e..612c8643 100644
--- a/ui/src/pages/Generator/DataGenerator/DataGenerator.module.scss
+++ b/ui/src/pages/Generator/DataGenerator/DataGenerator.module.scss
@@ -3,29 +3,29 @@
 		&__bottom {
 			display: grid;
 			grid-template-columns: repeat(3, 1fr);
-			grid-gap: 20px 10px;
+			grid-gap: var(--bt-size-20) var(--bt-size-10);
 
 			&__select {
-				margin-bottom: 10px;
-				width: 100%;
+				margin-bottom: var(--bt-size-10);
+				width: var(--bt-size-percent-100);
 			}
 
 			&__input {
-				margin-bottom: 10px;
-				width: 100%;
+				margin-bottom: var(--bt-size-10);
+				width: var(--bt-size-percent-100);
 			}
 
 			&__autocomplete {
-				margin-bottom: 10px;
-				width: 100%;
+				margin-bottom: var(--bt-size-10);
+				width: var(--bt-size-percent-100);
 			}
 		}
 	}
 
 	&__right {
 		display: grid;
-		row-gap: 10px;
-		grid-template-columns: 1fr;
+		row-gap: var(--bt-size-10);
+		grid-template-columns: var(--bt-grid-template-1);
 		overflow-x: auto;
 	}
 }
diff --git a/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss b/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
index aeebe73e..00857be3 100644
--- a/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
+++ b/ui/src/pages/Generator/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
@@ -1,13 +1,15 @@
+$igfc-bg-color: rgba(255, 255, 255, 0.2);
+
 .igfc {
 	&__card {
 		min-height: var(--bt-card-height);
 	}
 
 	&__colors {
-		grid-column: 1 / -1;
+		grid-column: var(--bt-number-1) / var(--bt-size-minus-1);
 		margin-top: var(--bt-size-16);
 		position: relative;
-		background: rgba(255, 255, 255, 0.2);
+		background: $igfc-bg-color;
 	}
 
 	&__images {
diff --git a/ui/src/pages/Generator/QRcode/QRcode.module.scss b/ui/src/pages/Generator/QRcode/QRcode.module.scss
index eb2de098..884537d4 100644
--- a/ui/src/pages/Generator/QRcode/QRcode.module.scss
+++ b/ui/src/pages/Generator/QRcode/QRcode.module.scss
@@ -1,12 +1,14 @@
+$qrcode-size-623: 623px;
+
 .qrcode {
 	&__label {
 		display: flex;
-		width: 100vw;
+		width: var(--bt-vw-100);
 		justify-content: space-between;
 	}
 
 	&__output {
-		height: 623px;
+		height: $qrcode-size-623;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss
index 563e8cbb..5a21cfd9 100644
--- a/ui/src/pages/Home/Home.module.scss
+++ b/ui/src/pages/Home/Home.module.scss
@@ -1,6 +1,12 @@
+$home-height: calc(100dvh - 272px);
+$home-number-2: 2;
+$home-hero-paragraph-width: 700px;
+$home-z-index-100: 100;
+
 .home {
-	padding: 100px 10% 64px 10%;
-	min-height: calc(100dvh - 272px);
+	padding: var(--bt-size-100) var(--bt-size-percent-10) var(--bt-size-64)
+		var(--bt-size-percent-10);
+	min-height: $home-height;
 	animation: var(--bt-animation-moveBackground);
 
 	&__container {
@@ -16,7 +22,7 @@
 		gap: var(--bt-size-100);
 		&_text {
 			display: flex;
-			flex: 2;
+			flex: $home-number-2;
 			flex-direction: column;
 			justify-content: center;
 			text-align: center;
@@ -26,23 +32,23 @@
 			}
 			&_paragraph {
 				text-align: left;
-				max-width: 700px;
+				max-width: $home-hero-paragraph-width;
 			}
 		}
 
 		&_image {
-			flex: 1;
+			flex: var(--bt-number-1);
 		}
 	}
 
 	&__features {
 		display: flex;
 		align-items: center;
-		border-radius: 8px;
-		z-index: 100;
+		border-radius: var(--bt-size-8);
+		z-index: $home-z-index-100;
 
 		&_card {
-			height: 100%;
+			height: var(--bt-size-percent-100);
 		}
 	}
 
@@ -54,10 +60,10 @@
 	}
 
 	@media screen and (max-width: 768px) {
-		padding-top: 64px;
+		padding-top: var(--bt-size-64);
 		&__hero {
 			flex-direction: column;
-			gap: 16px;
+			gap: var(--bt-size-16);
 		}
 	}
 }
diff --git a/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss b/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss
index 6a19b037..212fff3e 100644
--- a/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss
+++ b/ui/src/pages/Information/Npmpackages/Npmpackages.module.scss
@@ -1,13 +1,15 @@
+$npm-size-minus-7: 7.5px;
+
 .npm {
 	max-width: var(--bt-converter-width);
-	margin: 0 auto;
+	margin: var(--bt-size-0) auto;
 
 	&__card {
 		position: relative;
 		&_tag {
 			position: absolute;
-			top: 0;
-			right: -7.5px;
+			top: var(--bt-size-0);
+			right: $npm-size-minus-7;
 		}
 	}
 }
diff --git a/ui/src/pages/Markdown/MarkdownEditor/MarkdownEditor.module.scss b/ui/src/pages/Markdown/MarkdownEditor/MarkdownEditor.module.scss
index 0e10bd87..194f7131 100644
--- a/ui/src/pages/Markdown/MarkdownEditor/MarkdownEditor.module.scss
+++ b/ui/src/pages/Markdown/MarkdownEditor/MarkdownEditor.module.scss
@@ -5,8 +5,8 @@
 	flex-direction: column;
 
 	&__editor {
-		flex: 1;
-		margin-top: 20px;
+		flex: var(--bt-number-1);
+		margin-top: var(--bt-size-20);
 		overflow: auto;
 	}
 }
diff --git a/ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss b/ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss
index fb5ba013..4a7b48c0 100644
--- a/ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss
+++ b/ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss
@@ -6,15 +6,15 @@
 	gap: var(--bt-size-16);
 
 	&__editor {
-		flex: 1;
+		flex: var(--bt-number-1);
 		overflow: auto;
 		position: relative;
 
 		&__spinner {
 			position: absolute;
-			top: 5%;
-			left: 1%;
-			z-index: 10;
+			top: var(--bt-size-percent-5);
+			left: var(--bt-size-percent-1);
+			z-index: var(--bt-z-index-dropdown);
 		}
 	}
 }
diff --git a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
index 034be762..59ea4750 100644
--- a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
+++ b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
@@ -1,3 +1,5 @@
+$toc-height: calc(100dvh - 290px);
+
 .toc {
 	overflow: hidden;
 
@@ -16,6 +18,6 @@
 	}
 
 	&__textarea {
-		height: calc(100dvh - 290px) !important;
+		height: $toc-height !important;
 	}
 }
diff --git a/ui/src/pages/Newsfeed/Newsfeed.module.scss b/ui/src/pages/Newsfeed/Newsfeed.module.scss
index 5ef49e38..68fbeac3 100644
--- a/ui/src/pages/Newsfeed/Newsfeed.module.scss
+++ b/ui/src/pages/Newsfeed/Newsfeed.module.scss
@@ -1,7 +1,7 @@
 .newsfeed {
 	&_tabs {
 		max-width: var(--bt-list-card-container);
-		margin: 0 auto;
+		margin: var(--bt-size-0) auto;
 		flex-wrap: wrap;
 	}
 }
diff --git a/ui/src/pages/PageNotFound/PageNotFound.module.scss b/ui/src/pages/PageNotFound/PageNotFound.module.scss
index 1494721e..412e530e 100644
--- a/ui/src/pages/PageNotFound/PageNotFound.module.scss
+++ b/ui/src/pages/PageNotFound/PageNotFound.module.scss
@@ -1,12 +1,14 @@
+$pnf-height: calc(100vh - 70px);
+
 .pnf {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	height: calc(100vh - 70px);
+	height: $pnf-height;
 	img {
-		width: 100%;
-		height: 100%;
+		width: var(--bt-size-percent-100);
+		height: var(--bt-size-percent-100);
 		object-fit: cover;
 	}
 }
diff --git a/ui/src/pages/Text/TextEditor/TextEditor.module.scss b/ui/src/pages/Text/TextEditor/TextEditor.module.scss
index 5fc61d51..f3495914 100644
--- a/ui/src/pages/Text/TextEditor/TextEditor.module.scss
+++ b/ui/src/pages/Text/TextEditor/TextEditor.module.scss
@@ -1,3 +1,6 @@
+$te-footer-color: rgba(34, 47, 62, 0.7);
+$te-border-color: #eee;
+
 .te {
 	display: flex;
 	flex-direction: column;
@@ -7,24 +10,25 @@
 		flex-wrap: wrap;
 		justify-content: space-between;
 		background-color: white;
-		padding: 5px;
-		color: rgba(34, 47, 62, 0.7);
-		border-radius: 0px 0px 10px 10px;
-		border-left: 2px solid #eee;
-		border-bottom: 2px solid #eee;
-		border-right: 2px solid #eee;
+		padding: var(--bt-size-5);
+		color: $te-footer-color;
+		border-radius: var(--bt-size-0) var(--bt-size-0) var(--bt-size-10)
+			var(--bt-size-10);
+		border-left: var(--bt-size-2) solid $te-border-color;
+		border-bottom: var(--bt-size-2) solid $te-border-color;
+		border-right: var(--bt-size-2) solid $te-border-color;
 
 		&_dark {
-			background-color: rgba(34, 47, 62, 0.7);
+			background-color: $te-footer-color;
 			color: white;
-			border-color: rgba(34, 47, 62, 0.7);
+			border-color: $te-footer-color;
 		}
 	}
 
 	@media (max-width: 768px) {
 		&__footer span {
 			flex-basis: calc(33.333% - 10px);
-			margin-bottom: 5px;
+			margin-bottom: var(--bt-size-5);
 			text-align: center;
 		}
 	}
diff --git a/ui/src/pages/Tools/CodeFormatter/CodeFormatter.module.scss b/ui/src/pages/Tools/CodeFormatter/CodeFormatter.module.scss
index c5a29c5b..d408356b 100644
--- a/ui/src/pages/Tools/CodeFormatter/CodeFormatter.module.scss
+++ b/ui/src/pages/Tools/CodeFormatter/CodeFormatter.module.scss
@@ -2,14 +2,14 @@
 	&__input {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
+		height: var(--bt-size-percent-100);
 	}
 
 	&__output {
-		height: 100%;
+		height: var(--bt-size-percent-100);
 
 		&_warning {
-			min-height: 500px;
+			min-height: var(--bt-size-500);
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
@@ -18,7 +18,7 @@
 		// xl(1280px)
 		@media screen and (min-width: 1280px) {
 			&_warning {
-				min-height: 600px;
+				min-height: var(--bt-size-600);
 			}
 		}
 	}
diff --git a/ui/src/pages/Tools/Diagramming/Diagramming.module.scss b/ui/src/pages/Tools/Diagramming/Diagramming.module.scss
index e5b5daab..4ad1347a 100644
--- a/ui/src/pages/Tools/Diagramming/Diagramming.module.scss
+++ b/ui/src/pages/Tools/Diagramming/Diagramming.module.scss
@@ -1,3 +1,5 @@
+$diagramm-height: calc(100dvh - 90px);
+
 .diagramming {
-	height: calc(100dvh - 90px);
+	height: $diagramm-height;
 }
diff --git a/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss b/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss
index 1981be3c..a37ffbb6 100644
--- a/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss
+++ b/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss
@@ -2,7 +2,7 @@
 	&__button {
 		display: flex;
 		justify-content: center;
-		padding: var(--bt-size-20) 0;
+		padding: var(--bt-size-20) var(--bt-size-0);
 	}
 
 	&__part {
diff --git a/ui/src/pages/Tools/Sorting/Sorting.module.scss b/ui/src/pages/Tools/Sorting/Sorting.module.scss
index e3999299..e41416af 100644
--- a/ui/src/pages/Tools/Sorting/Sorting.module.scss
+++ b/ui/src/pages/Tools/Sorting/Sorting.module.scss
@@ -1,3 +1,6 @@
+$input-height: calc(100dvh - 210px);
+$output-height: calc(100dvh - 300px);
+
 .sort {
 	overflow: hidden;
 
@@ -13,16 +16,16 @@
 	&__input {
 		&_label {
 			display: flex;
-			width: 100vw;
+			width: var(--bt-vw-100);
 			justify-content: space-between;
 		}
 	}
 
 	&__input_textarea {
-		height: calc(100dvh - 210px);
+		height: $input-height;
 	}
 
 	&__output_textarea {
-		height: calc(100dvh - 300px) !important;
+		height: $output-height !important;
 	}
 }
diff --git a/ui/src/styles/shadows.css b/ui/src/styles/shadows.css
index 5c295d07..ea9bdd5a 100644
--- a/ui/src/styles/shadows.css
+++ b/ui/src/styles/shadows.css
@@ -1,3 +1,4 @@
 :where(html) {
 	--bt-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+	--bt-footer-box-shadow: inset 0px 1px 0px #e8e8e8;
 }
diff --git a/ui/src/styles/sizes.css b/ui/src/styles/sizes.css
index 1cf6da20..47314882 100644
--- a/ui/src/styles/sizes.css
+++ b/ui/src/styles/sizes.css
@@ -5,19 +5,36 @@
 
 	--bt-full-page-height: calc(100dvh - 110px);
 
-	--bt-size-minus-1: -1px;
-	--bt-size-minus-25: -25px;
+	--bt-number-1: 1;
+
+	--bt-grid-template-1: 1fr;
+
+	--bt-size-percent-1: 1%;
+	--bt-size-percent-5: 5%;
+	--bt-size-percent-10: 10%;
+	--bt-size-percent-55: 55%;
+	--bt-size-percent-70: 70%;
+	--bt-size-percent-95: 95%;
+	--bt-size-percent-100: 100%;
 
+	--bt-vw-100: 100vw;
+	--bt-dvh-100: 100dvh;
+
+	--bt-size-minus-1: -1px;
+	--bt-size-0: 0px;
+	--bt-size-1: 1px;
 	--bt-size-2: 2px;
 	--bt-size-3: 3px;
 	--bt-size-4: 4px;
 	--bt-size-5: 5px;
+	--bt-size-6: 6px;
 	--bt-size-7: 7px;
 	--bt-size-8: 8px;
 	--bt-size-10: 10px;
 	--bt-size-11: 11px;
 	--bt-size-15: 15px;
 	--bt-size-16: 16px;
+	--bt-size-17: 17px;
 	--bt-size-18: 18px;
 	--bt-size-20: 20px;
 	--bt-size-24: 24px;
@@ -29,4 +46,6 @@
 	--bt-size-64: 64px;
 	--bt-size-100: 100px;
 	--bt-size-135: 135px;
+	--bt-size-500: 500px;
+	--bt-size-600: 600px;
 }