diff --git a/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss b/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss
new file mode 100644
index 00000000..e4867cb2
--- /dev/null
+++ b/ui/src/components/General/FallbackComponent/FallbackComponent.module.scss
@@ -0,0 +1,3 @@
+.fallback {
+	width: 500px;
+}
diff --git a/ui/src/components/General/FallbackComponent/index.tsx b/ui/src/components/General/FallbackComponent/index.tsx
index 4f24b8a1..2e58eb6f 100644
--- a/ui/src/components/General/FallbackComponent/index.tsx
+++ b/ui/src/components/General/FallbackComponent/index.tsx
@@ -1,9 +1,10 @@
 import { Alert, Button, Card } from "antd";
 import React from "react";
+import style from "./FallbackComponent.module.scss";
 
 const FallbackComponent: React.FC = () => {
 	return (
-		<Card style={{ width: "500px" }}>
+		<Card className={style.fallback}>
 			<Alert
 				message={"Something went wrong"}
 				description={
diff --git a/ui/src/data/menuData.ts b/ui/src/data/menuData.ts
index 716b1e00..d9f00780 100644
--- a/ui/src/data/menuData.ts
+++ b/ui/src/data/menuData.ts
@@ -3,8 +3,6 @@ import { IconName } from "components/General/Icon/utils/types";
 import { getItem } from "components/Layouts/Menu/utils/helper";
 import { routesById } from "data/routeData";
 
-const IN_DEVELOPMENT = import.meta.env.DEV;
-
 export const MENU_ITEMS = [
 	{
 		name: "Newsfeed",
@@ -198,7 +196,7 @@ export const MENU_ITEMS = [
 				name: routesById.githubissue.title,
 				url: routesById.githubissue.path,
 				icon: "Bug",
-				show: IN_DEVELOPMENT,
+				show: true,
 			},
 		],
 	},
diff --git a/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss b/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss
new file mode 100644
index 00000000..5145f737
--- /dev/null
+++ b/ui/src/pages/Automation/GithubIssue/GithubIssue.module.scss
@@ -0,0 +1,3 @@
+.gi {
+	height: 100%;
+}
diff --git a/ui/src/pages/Automation/GithubIssue/index.tsx b/ui/src/pages/Automation/GithubIssue/index.tsx
index 74c68ca3..8173dd25 100644
--- a/ui/src/pages/Automation/GithubIssue/index.tsx
+++ b/ui/src/pages/Automation/GithubIssue/index.tsx
@@ -10,6 +10,7 @@ import { steps } from "./utils/constants";
 import { IssueType, SavedIssueType } from "./types";
 import ErrorComponent from "components/General/ErrorComponent";
 import DownloadCsv from "./components/DownloadCsv";
+import style from "./GithubIssue.module.scss";
 
 const GithubIssue: React.FC = () => {
 	//? input state
@@ -141,7 +142,7 @@ const GithubIssue: React.FC = () => {
 				<CsvTable data={fileData} />
 			</Card>
 
-			<Card title="Saved Issue" style={{ height: "100%" }}>
+			<Card title="Saved Issue" className={style.gi}>
 				{isError && (
 					<>
 						<ErrorComponent
diff --git a/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss b/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
index 118187b7..2df2fb72 100644
--- a/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
+++ b/ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss
@@ -68,3 +68,7 @@
 	flex-direction: column;
 	justify-content: center;
 }
+
+.cf {
+	cursor: pointer;
+}
diff --git a/ui/src/pages/Colors/ColorPicker/components/ColorFormatTags.tsx b/ui/src/pages/Colors/ColorPicker/components/ColorFormatTags.tsx
index cd0fd714..909e6656 100644
--- a/ui/src/pages/Colors/ColorPicker/components/ColorFormatTags.tsx
+++ b/ui/src/pages/Colors/ColorPicker/components/ColorFormatTags.tsx
@@ -1,6 +1,7 @@
 import { Tag } from "antd";
 import { DATA_OPTIONS } from "pages/Colors/ColorPicker/utils/constants";
 import { FormatType } from "pages/Colors/ColorPicker/utils/types";
+import style from "pages/Colors/ColorPicker/ColorPicker.module.scss";
 
 const ColorFormatTags = ({
 	currentFormat,
@@ -14,7 +15,7 @@ const ColorFormatTags = ({
 			onClick={() => onSelect(option.value)}
 			color={currentFormat === option.value ? "success" : "default"}
 			key={option.value}
-			style={{ cursor: "pointer" }}
+			className={style.cf}
 		>
 			{option.label}
 		</Tag>
diff --git a/ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss b/ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss
new file mode 100644
index 00000000..bb6f3d90
--- /dev/null
+++ b/ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss
@@ -0,0 +1,5 @@
+.pp {
+	&__list {
+		list-style-type: disc;
+	}
+}
diff --git a/ui/src/pages/Footer/PrivacyPolicy/utils/constants.tsx b/ui/src/pages/Footer/PrivacyPolicy/utils/constants.tsx
index f3f36c60..4f79c9f7 100644
--- a/ui/src/pages/Footer/PrivacyPolicy/utils/constants.tsx
+++ b/ui/src/pages/Footer/PrivacyPolicy/utils/constants.tsx
@@ -1,4 +1,5 @@
 import { ColumnsType } from "antd/es/table";
+import style from "pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss";
 
 interface PurposeTableDataType {
 	purpose: string;
@@ -71,7 +72,7 @@ const ACTIVITY_COLUMNS: ColumnsType<ActivityTableDataType> = [
 		dataIndex: "categories",
 		key: "categories",
 		render: (categories: string[]) => (
-			<ul style={{ listStyleType: "disc" }}>
+			<ul className={style.pp__list}>
 				{categories.map((cat) => (
 					<li key={cat}>{cat}</li>
 				))}
diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss
index 34b206b4..563e8cbb 100644
--- a/ui/src/pages/Home/Home.module.scss
+++ b/ui/src/pages/Home/Home.module.scss
@@ -6,14 +6,14 @@
 	&__container {
 		display: flex;
 		flex-direction: column;
-		gap: 50px;
+		gap: var(--bt-size-50);
 	}
 
 	&__hero {
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
-		gap: 100px;
+		gap: var(--bt-size-100);
 		&_text {
 			display: flex;
 			flex: 2;
@@ -23,7 +23,6 @@
 			gap: var(--bt-size-10);
 			&_title {
 				text-align: left;
-				// font-family: var(--font-pixelify-sans);
 			}
 			&_paragraph {
 				text-align: left;
diff --git a/ui/src/pages/Markdown/MdTableGenerator/index.tsx b/ui/src/pages/Markdown/MdTableGenerator/index.tsx
index c36776a8..21919d96 100644
--- a/ui/src/pages/Markdown/MdTableGenerator/index.tsx
+++ b/ui/src/pages/Markdown/MdTableGenerator/index.tsx
@@ -85,7 +85,6 @@ const TableGenerator: React.FC = () => {
 					value={output}
 					onChange={(val) => setOutput(val || "")}
 					height="100%"
-					style={{ fontSize: "52" }}
 				/>
 			</div>
 		</div>
diff --git a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
index da51aa47..034be762 100644
--- a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
+++ b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
@@ -14,4 +14,8 @@
 			margin-top: var(--bt-size-24);
 		}
 	}
+
+	&__textarea {
+		height: calc(100dvh - 290px) !important;
+	}
 }
diff --git a/ui/src/pages/Markdown/TableOfContent/index.tsx b/ui/src/pages/Markdown/TableOfContent/index.tsx
index afbf3c7f..47986676 100644
--- a/ui/src/pages/Markdown/TableOfContent/index.tsx
+++ b/ui/src/pages/Markdown/TableOfContent/index.tsx
@@ -116,9 +116,7 @@ const TableOfContent: React.FC = () => {
 					</CopyInput>
 					<Form.Item label="Content">
 						<TextArea
-							style={{
-								height: "calc(100dvh - 290px)",
-							}}
+							className={style.toc__textarea}
 							placeholder=""
 							value={markdown}
 							onChange={(event) =>
@@ -140,9 +138,7 @@ const TableOfContent: React.FC = () => {
 						<Form.Item label="Output">
 							<TextArea
 								value={tableOfContents}
-								style={{
-									height: "calc(100vh - 290px)", // corrected "100dvh" to "100vh"
-								}}
+								className={style.toc__textarea}
 								autoSize={false}
 							/>
 						</Form.Item>
diff --git a/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss b/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss
index 35ed64fd..1981be3c 100644
--- a/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss
+++ b/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss
@@ -4,4 +4,14 @@
 		justify-content: center;
 		padding: var(--bt-size-20) 0;
 	}
+
+	&__part {
+		white-space: pre-wrap;
+	}
+	&__removed {
+		background-color: salmon;
+	}
+	&__added {
+		background-color: lightgreen;
+	}
 }
diff --git a/ui/src/pages/Tools/Diffchecker/index.tsx b/ui/src/pages/Tools/Diffchecker/index.tsx
index ca46cbe7..bbc0b3bf 100644
--- a/ui/src/pages/Tools/Diffchecker/index.tsx
+++ b/ui/src/pages/Tools/Diffchecker/index.tsx
@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { diffLines, Change } from "diff";
 import { ResponsiveButton } from "components/General/FormComponents";
 import style from "./Diffchecker.module.scss";
+import { classNames } from "utils/helper-functions/string";
 
 const { TextArea } = Input;
 
@@ -62,12 +63,12 @@ const Diffchecker: React.FC = () => {
 								.map((part, index) => (
 									<span
 										key={index}
-										style={{
-											backgroundColor: part.removed
-												? "salmon"
-												: "white",
-											whiteSpace: "pre-wrap",
-										}}
+										className={classNames(
+											style.diffchecker__part,
+											part.removed
+												? style.diffchecker__removed
+												: ""
+										)}
 									>
 										{part.value}
 									</span>
@@ -84,12 +85,12 @@ const Diffchecker: React.FC = () => {
 								.map((part, index) => (
 									<span
 										key={index}
-										style={{
-											backgroundColor: part.added
-												? "lightgreen"
-												: "white",
-											whiteSpace: "pre-wrap",
-										}}
+										className={classNames(
+											style.diffchecker__part,
+											part.added
+												? style.diffchecker__added
+												: ""
+										)}
 									>
 										{part.value}
 									</span>
diff --git a/ui/src/pages/Tools/Sorting/Sorting.module.scss b/ui/src/pages/Tools/Sorting/Sorting.module.scss
index 9d3c8b31..e3999299 100644
--- a/ui/src/pages/Tools/Sorting/Sorting.module.scss
+++ b/ui/src/pages/Tools/Sorting/Sorting.module.scss
@@ -17,4 +17,12 @@
 			justify-content: space-between;
 		}
 	}
+
+	&__input_textarea {
+		height: calc(100dvh - 210px);
+	}
+
+	&__output_textarea {
+		height: calc(100dvh - 300px) !important;
+	}
 }
diff --git a/ui/src/pages/Tools/Sorting/index.tsx b/ui/src/pages/Tools/Sorting/index.tsx
index 142e52a4..f77e76b8 100644
--- a/ui/src/pages/Tools/Sorting/index.tsx
+++ b/ui/src/pages/Tools/Sorting/index.tsx
@@ -50,9 +50,7 @@ const Sorting: React.FC = () => {
 						<TextArea
 							placeholder="Enter data separated by space or comma or new line"
 							value={input}
-							style={{
-								height: "calc(100dvh - 210px)",
-							}}
+							className={style.sort__input_textarea}
 							onChange={(event) => {
 								setInput(event.currentTarget.value);
 							}}
@@ -110,9 +108,7 @@ const Sorting: React.FC = () => {
 								<TextArea
 									placeholder="output"
 									value={output}
-									style={{
-										height: "calc(100dvh - 300px)",
-									}}
+									className={style.sort__output_textarea}
 									readOnly
 									data-gramm={false}
 								/>
diff --git a/ui/src/styles/typography.css b/ui/src/styles/typography.css
index 0c7ff669..c85d362d 100644
--- a/ui/src/styles/typography.css
+++ b/ui/src/styles/typography.css
@@ -7,16 +7,6 @@
 		font-style: normal;
 	}
 
-	/* @font-face {
-		font-family: "FreightText";
-		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-pixelify-sans: "AAA", system-ui, -apple-system, Segoe UI, Roboto,
 		Ubuntu, Cantarell, Noto Sans, sans-serif, Aacute;
 }