From 600f10c9b9f292685bdf3e35bf4ab202c7e440b6 Mon Sep 17 00:00:00 2001
From: Koustav <kdkdas8@gmail.com>
Date: Fri, 20 Dec 2024 15:43:26 +0530
Subject: [PATCH] WIP: Dynamic Font Size

---
 .../Header/styles/LogQuery.module.css         |  54 ++-
 src/components/Misc/CreatableSelect.tsx       |   1 +
 src/components/Misc/DeleteOrResetModal.tsx    |   5 +-
 .../Misc/styles/DeleteOrResetModal.module.css |  75 +++-
 src/components/Navbar/UserModal.tsx           |  19 +-
 .../Navbar/styles/InfoModal.module.css        | 123 +++++-
 .../Navbar/styles/Navbar.module.css           | 179 +++++----
 src/pages/AccessManagement/RoleTR.tsx         |   2 +-
 src/pages/AccessManagement/Roles.tsx          |  17 +-
 src/pages/AccessManagement/Users.tsx          |  16 +-
 .../styles/AccessManagement.module.css        | 377 ++++++++++++++----
 src/pages/Home/CreateStreamModal.tsx          |  22 +-
 src/pages/Home/index.tsx                      |  12 +-
 src/pages/Home/styles/Card.module.css         |  55 ++-
 .../Home/styles/CreateStreamModal.module.css  | 101 ++++-
 src/pages/Home/styles/Home.module.css         | 157 ++++++--
 .../Stream/Views/Explore/StaticLogTable.tsx   |   2 +-
 src/pages/Stream/Views/Manage/Settings.tsx    |  21 +-
 .../Stream/components/PrimaryToolbar.tsx      |   1 +
 .../styles/SavedFiltersModalStyles.module.css |  12 +-
 .../styles/PrimaryToolbar.module.css          |  38 +-
 src/pages/Stream/styles/Logs.module.css       |  25 ++
 src/pages/Stream/styles/Management.module.css | 131 +++++-
 src/pages/Systems/MachineInfo.tsx             |  14 +-
 src/pages/Systems/ServerList.tsx              |   7 +-
 src/pages/Systems/styles/Systems.module.css   | 207 +++++++++-
 26 files changed, 1393 insertions(+), 280 deletions(-)

diff --git a/src/components/Header/styles/LogQuery.module.css b/src/components/Header/styles/LogQuery.module.css
index 8daf263d..8f7ee7b2 100644
--- a/src/components/Header/styles/LogQuery.module.css
+++ b/src/components/Header/styles/LogQuery.module.css
@@ -16,7 +16,7 @@
 	background: #fff;
 	padding: 0;
 	width: 36px;
-	color: #211F1F;
+	color: #211f1f;
 	border: 1px #e9ecef solid;
 	border-radius: rem(8px);
 
@@ -26,12 +26,12 @@
 }
 
 .refreshNowBtn:hover {
-	background-color: #E0E0E0;
+	background-color: #e0e0e0;
 }
 
 .streamButton {
 	background: #fff;
-	color: #211F1F;
+	color: #211f1f;
 	border: 1px #e9ecef solid;
 	border-radius: rem(8px);
 }
@@ -49,7 +49,34 @@
 }
 
 .intervalbtn:hover {
-	background-color: #E0E0E0;
+	background-color: #e0e0e0;
+}
+
+.streamSelect {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .homeIcon {
@@ -97,7 +124,6 @@
 	background: #424242;
 	font-weight: 600;
 	color: #fff;
-
 }
 
 .customRangeContainer {
@@ -158,7 +184,7 @@
 	background-color: white;
 	padding: 6px 12px;
 	margin-right: 0.625rem;
-	color: #211F1F;
+	color: #211f1f;
 	border: 1px #e9ecef solid;
 }
 
@@ -177,7 +203,7 @@
 }
 
 .timeRangeBTn:hover {
-	background-color: #E0E0E0;
+	background-color: #e0e0e0;
 	color: black;
 }
 
@@ -187,7 +213,7 @@
 }
 
 .dropdownOption {
-	color: #211F1F;
+	color: #211f1f;
 	font-size: var(--mantine-font-size-md);
 }
 
@@ -210,11 +236,11 @@
 }
 
 .customTimeRangeApplyBtn {
-	background: #545BEB;
+	background: #545beb;
 	color: white;
 
 	&:hover {
-		background: #FC466B;
+		background: #fc466b;
 	}
 }
 
@@ -263,8 +289,6 @@
 	white-space: nowrap;
 }
 
-
-
 .modeContainer {
 	width: 5rem;
 	height: 100%;
@@ -301,7 +325,7 @@
 	overflow: hidden;
 	border-radius: rem(8px);
 	align-items: center;
-	height: 1.6rem
+	height: 1.6rem;
 }
 
 .timeRangeCtrlIcon {
@@ -310,7 +334,7 @@
 	justify-content: center;
 
 	&:hover {
-		background-color: #E0E0E0;
+		background-color: #e0e0e0;
 		color: black;
 	}
 
@@ -350,4 +374,4 @@
 	background-color: var(--mantine-color-gray-5);
 	color: white;
 	border-radius: 0.15rem;
-}
\ No newline at end of file
+}
diff --git a/src/components/Misc/CreatableSelect.tsx b/src/components/Misc/CreatableSelect.tsx
index f2994314..e93cc580 100644
--- a/src/components/Misc/CreatableSelect.tsx
+++ b/src/components/Misc/CreatableSelect.tsx
@@ -75,6 +75,7 @@ export function CreatableSelect(props: Props) {
 			}}>
 			<Combobox.Target>
 				<InputBase
+					size="lg"
 					rightSection={<Combobox.Chevron />}
 					value={search}
 					onChange={(event) => {
diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx
index 686f0def..981873aa 100644
--- a/src/components/Misc/DeleteOrResetModal.tsx
+++ b/src/components/Misc/DeleteOrResetModal.tsx
@@ -98,7 +98,7 @@ const DeleteOrResetModal = ({
 								Please type <span className={classes.confirmationTextHighlight}>{`"${confirmationText}"`}</span> to
 								confirm {type === 'delete' ? 'deletion' : 'reset'}.
 							</Text>
-							<TextInput value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
+							<TextInput size="lg" value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
 						</>
 					)}
 
@@ -109,13 +109,14 @@ const DeleteOrResetModal = ({
 				{/* Action buttons */}
 				<Stack className={classes.actionButtonsContainer}>
 					<Box>
-						<Button variant="outline" onClick={closeModal}>
+						<Button variant="outline" size="lg" onClick={closeModal}>
 							Cancel
 						</Button>
 					</Box>
 					<Box>
 						{/* Disable the button if the confirmation text is not correct or the action is processing. */}
 						<Button
+							size="lg"
 							disabled={(type !== 'simple' && confirmationText !== confirmText) || isActionInProgress}
 							onClick={tryConfirm}>
 							{type === 'reset' ? 'Reset' : 'Delete'}
diff --git a/src/components/Misc/styles/DeleteOrResetModal.module.css b/src/components/Misc/styles/DeleteOrResetModal.module.css
index d50dc802..2ae8cb6c 100644
--- a/src/components/Misc/styles/DeleteOrResetModal.module.css
+++ b/src/components/Misc/styles/DeleteOrResetModal.module.css
@@ -9,20 +9,89 @@
 }
 
 .headerText {
-	font-size: 0.9rem;
 	font-weight: 600;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .warningText {
 	margin-top: 0.4rem;
-	font-size: 0.7rem;
 	font-weight: 500;
 	color: var(--mantine-color-gray-8);
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .confirmationText {
-	font-size: 0.7rem;
 	color: var(--mantine-color-gray-7);
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .confirmationTextHighlight {
diff --git a/src/components/Navbar/UserModal.tsx b/src/components/Navbar/UserModal.tsx
index ad58fc7e..dc87c58b 100644
--- a/src/components/Navbar/UserModal.tsx
+++ b/src/components/Navbar/UserModal.tsx
@@ -2,9 +2,14 @@ import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { Modal, Stack } from '@mantine/core';
 import { Text } from '@mantine/core';
 import Cookies from 'js-cookie';
+import classes from './styles/Navbar.module.css';
 
 const ModalTitle = () => {
-	return <Text style={{ fontWeight: 600, marginLeft: '0.5rem' }}>User Details</Text>;
+	return (
+		<Text className={classes.userModalSectionTitle} style={{ fontWeight: 600, marginLeft: '0.5rem' }}>
+			User Details
+		</Text>
+	);
 };
 
 type UserModalProps = {
@@ -28,14 +33,18 @@ const UserModal = (props: UserModalProps) => {
 			title={<ModalTitle />}>
 			<Stack style={{ padding: '1rem' }}>
 				<Stack gap={0}>
-					<Text style={{ fontWeight: 500 }}>Username:</Text>
-					<Text>{username}</Text>
+					<Text className={classes.userModalSectionTitle} style={{ fontWeight: 500 }}>
+						Username:
+					</Text>
+					<Text className={classes.userModalSectionTitle}>{username}</Text>
 				</Stack>
 				<Stack gap={0}>
-					<Text style={{ fontWeight: 500 }}>Roles:</Text>
+					<Text className={classes.userModalSectionTitle} style={{ fontWeight: 500 }}>
+						Roles:
+					</Text>
 					{Object.entries(userRoles).map(([key, value], index) => {
 						return (
-							<Text key={index}>
+							<Text key={index} className={classes.userModalSectionTitle}>
 								{index + 1}. {key} ({value[0].privilege})
 							</Text>
 						);
diff --git a/src/components/Navbar/styles/InfoModal.module.css b/src/components/Navbar/styles/InfoModal.module.css
index 2a6422e5..38d2b75a 100644
--- a/src/components/Navbar/styles/InfoModal.module.css
+++ b/src/components/Navbar/styles/InfoModal.module.css
@@ -4,9 +4,32 @@
 }
 
 .aboutTitle {
-	/* font-size: 1rem; */
 	font-weight: 500;
 	text-align: center;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .parseableText {
@@ -17,6 +40,30 @@
 .aboutDescription {
 	text-align: center;
 	color: #868e96;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 
 	&::after {
 		content: '';
@@ -52,18 +99,64 @@
 }
 
 .aboutTextKey {
-	font-size: 0.7rem;
 	color: #343a40;
 	line-height: normal;
 	width: 30%;
 	font-weight: 500;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .aboutTextValue {
-	font-size: 0.7rem;
 	color: #868e96;
 	line-height: normal;
 	width: 70%;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .helpTitle {
@@ -103,6 +196,30 @@
 	right: 2.25rem;
 	transform: transform 0.2s ease-in-out;
 	min-width: 14rem;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 8px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 18px;
+	}
 	&:hover {
 		transform: scale(1.03);
 		color: #fc466b;
diff --git a/src/components/Navbar/styles/Navbar.module.css b/src/components/Navbar/styles/Navbar.module.css
index 6dd700ea..877982ce 100644
--- a/src/components/Navbar/styles/Navbar.module.css
+++ b/src/components/Navbar/styles/Navbar.module.css
@@ -1,85 +1,85 @@
 .container {
-    display: flex;
-    background: white;
-    flex-direction: column;
-    align-items: center;
-    color: #4d4d4d;
-    font-family: 'Inter', sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: normal;
-    position: relative;
+	display: flex;
+	background: white;
+	flex-direction: column;
+	align-items: center;
+	color: #4d4d4d;
+	font-family: 'Inter', sans-serif;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: normal;
+	position: relative;
 }
 
 .userManagementBtn {
-    color: #4d4d4d;
-    padding-left: 0;
-    padding-right: 0;
+	color: #4d4d4d;
+	padding-left: 0;
+	padding-right: 0;
 }
 
 .userManagementBtnActive {
-    color: #545BEB;
-    font-weight: 700;
-    padding-left: 0;
-    padding-right: 0;
+	color: #545beb;
+	font-weight: 700;
+	padding-left: 0;
+	padding-right: 0;
 }
 
 .linkBtnActive {
-    color: #545BEB;
-    font-weight: 700;
-    &:hover {
-        color: #FC466B;
-    }
+	color: #545beb;
+	font-weight: 700;
+	&:hover {
+		color: #fc466b;
+	}
 }
 
 .linkBtn {
-    color: #4d4d4d;
+	color: #4d4d4d;
 }
 
 .actionBtn {
-    height: 40px;
-    color: #4d4d4d;
+	height: 40px;
+	color: #4d4d4d;
 }
 
 .userBtn {
-    cursor: default;
-    height: 40px;
-    color: #4d4d4d;
-    &:hover {
-        background-color: white;
-    }
+	cursor: default;
+	height: 40px;
+	color: #4d4d4d;
+	&:hover {
+		background-color: white;
+	}
 }
 
 .userContainer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .userText {
-    font-size: 14px;
+	font-size: 14px;
 }
 
 .modalStyle {
-    overflow-y: inherit;
+	overflow-y: inherit;
 }
 
 .modalActionBtn {
-    background-color: #4d4d4d;
-    color: white;
+	background-color: #4d4d4d;
+	color: white;
 }
 
 .modalActionBtn:disabled {
-    background-color: var(--mantine-color-gray-4);
+	background-color: var(--mantine-color-gray-4);
 }
 
 .modalActionBtn:disabled:hover {
-    background-color: var(--mantine-color-gray-4);
+	background-color: var(--mantine-color-gray-4);
 }
 
 .modalCancelBtn {
-    border-color: #e0e0e0;
-    color: white;
+	border-color: #e0e0e0;
+	color: white;
 }
 
 .navbar {
@@ -88,58 +88,85 @@
 	flex-direction: column;
 	transition: width 0.4s ease-in-out;
 	flex: '0 0 auto';
-    background-color: var(--mantine-color-gray-0);
-    border-right: 1px solid var(--mantine-color-gray-2);
+	background-color: var(--mantine-color-gray-0);
+	border-right: 1px solid var(--mantine-color-gray-2);
 }
 
 .navbarMain {
-    display: flex;
-    flex-direction: column;
+	display: flex;
+	flex-direction: column;
 	flex: 1;
-    justify-content: space-between;
+	justify-content: space-between;
 }
 
 .option {
-    font-size: var(--mantine-font-size-sm);
-    &:hover {
-        color: var(--mantine-color-brandSecondary-4);
-        background-color: var(--mantine-color-gray-4);
-    }
-    border-radius: rem(6px);
-    padding: 0.5rem;
-  }
-  
-  .option[aria-selected="true"] {
-    background-color: var(--mantine-color-brandPrimary-6);
-    color: white;
-  }
+	font-size: var(--mantine-font-size-sm);
+	&:hover {
+		color: var(--mantine-color-brandSecondary-4);
+		background-color: var(--mantine-color-gray-4);
+	}
+	border-radius: rem(6px);
+	padding: 0.5rem;
+}
+
+.option[aria-selected='true'] {
+	background-color: var(--mantine-color-brandPrimary-6);
+	color: white;
+}
 
 .navItemContainer {
-    width: 100%;
-    align-items: center;
-    padding: 0.5rem 0;
-    cursor: pointer;
-    color: var(--mantine-color-gray-6);
-    border-right: 2px solid transparent;
-    padding-left: 2px;
+	width: 100%;
+	align-items: center;
+	padding: 0.5rem 0;
+	cursor: pointer;
+	color: var(--mantine-color-gray-6);
+	border-right: 2px solid transparent;
+	padding-left: 2px;
 }
 
 .navItemLabel {
-    font-size: 0.75rem;
+	font-size: 0.75rem;
 }
 
 .navItemActive {
-    color: var(--mantine-color-gray-8);
-    border-right: 2px solid var(--mantine-color-brandPrimary-4);
+	color: var(--mantine-color-gray-8);
+	border-right: 2px solid var(--mantine-color-brandPrimary-4);
 }
 
 .lowerContainer {
-    color: var(--mantine-color-gray-5);
-    align-items: center;
+	color: var(--mantine-color-gray-5);
+	align-items: center;
 }
 
 .maximizeToggleContainer {
-    top: 4%;
-    right: -14%;
-    cursor: pointer;
-}
\ No newline at end of file
+	top: 4%;
+	right: -14%;
+	cursor: pointer;
+}
+
+.userModalSectionTitle {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx
index b1b19fb7..cde1c5a2 100644
--- a/src/pages/AccessManagement/RoleTR.tsx
+++ b/src/pages/AccessManagement/RoleTR.tsx
@@ -156,7 +156,7 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 				) : getUserRolesIsLoading ? (
 					'loading..'
 				) : getUserRolesData?.data ? (
-					<Stack style={{ flexDirection: 'row' }} gap={0} align="end">
+					<Stack className={classes.rolesPill} style={{ flexDirection: 'row' }} gap={0} align="end">
 						{getBadges()}
 						<Tooltip
 							label={'Add a Role'}
diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx
index 127c2b67..3571e6ae 100644
--- a/src/pages/AccessManagement/Roles.tsx
+++ b/src/pages/AccessManagement/Roles.tsx
@@ -10,7 +10,7 @@ import IconButton from '@/components/Button/IconButton';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 
 const navigateToDocs = () => {
-	return window.open('https://www.parseable.com/docs/server/api/rbac', '_blank');
+	return window.open('https://www.parseable.io/docs/server/features/rbac-role-based-access-control', '_blank');
 };
 
 const renderDocsIcon = () => <IconBook2 stroke={1.5} size="1rem" />;
@@ -167,7 +167,7 @@ const Roles: FC = () => {
 	return (
 		<Box className={classes.container}>
 			<Stack className={classes.header} gap={0}>
-				<Text component="h2" style={{ fontWeight: 600 }}>
+				<Text className={classes.sectionHeaderText} component="h2" style={{ fontWeight: 600 }}>
 					Roles
 				</Text>
 				<Stack style={{ flexDirection: 'row' }} gap={0}>
@@ -206,14 +206,16 @@ const Roles: FC = () => {
 				</Table>
 			</ScrollArea>
 			<Modal
+				size="lg"
 				opened={defaultRoleModalOpen}
 				onClose={handleDefaultRoleModalClose}
 				title="Set default oidc role"
 				centered
-				styles={{ title: { fontWeight: 500 } }}
+				styles={{ title: { fontWeight: 500, fontSize: '16px' } }}
 				className={classes.modalStyle}>
 				<Stack>
 					<Select
+						size="lg"
 						placeholder="Select Role"
 						label="Select a role to automatically assign to new oidc users"
 						data={getRolesData?.data ?? []}
@@ -228,6 +230,7 @@ const Roles: FC = () => {
 
 				<Group justify="right" mt={10}>
 					<Button
+						size="md"
 						variant="filled"
 						color="gray"
 						className={classes.modalActionBtn}
@@ -236,6 +239,7 @@ const Roles: FC = () => {
 						Set default
 					</Button>
 					<Button
+						size="md"
 						onClick={handleDefaultRoleModalClose}
 						variant="outline"
 						color="gray"
@@ -245,14 +249,16 @@ const Roles: FC = () => {
 				</Group>
 			</Modal>
 			<Modal
+				size="lg"
 				opened={modalOpen}
 				onClose={handleClose}
 				title="Create Role"
 				centered
 				className={classes.modalStyle}
-				styles={{ title: { fontWeight: 500 } }}>
+				styles={{ title: { fontWeight: 500, fontSize: '16px' } }}>
 				<Stack>
 					<TextInput
+						size="lg"
 						type="text"
 						label="Enter the name of the Role"
 						placeholder="Type the name of the Role to create"
@@ -266,6 +272,7 @@ const Roles: FC = () => {
 						placeholder="Select privilege"
 						label="Select a privilege to assign"
 						data={['admin', 'editor', 'writer', 'reader', 'ingestor']}
+						size="lg"
 						onChange={(value) => {
 							setSelectedPrivilege(value ?? '');
 						}}
@@ -312,6 +319,7 @@ const Roles: FC = () => {
 
 				<Group justify="right" mt={10}>
 					<Button
+						size="md"
 						variant="filled"
 						color="gray"
 						data-testid="create-role-modal-button"
@@ -321,6 +329,7 @@ const Roles: FC = () => {
 						Create
 					</Button>
 					<Button
+						size="md"
 						onClick={handleClose}
 						variant="outline"
 						color="gray"
diff --git a/src/pages/AccessManagement/Users.tsx b/src/pages/AccessManagement/Users.tsx
index 70c7a6ea..c398ef65 100644
--- a/src/pages/AccessManagement/Users.tsx
+++ b/src/pages/AccessManagement/Users.tsx
@@ -13,10 +13,10 @@ import IconButton from '@/components/Button/IconButton';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 
 const navigateToDocs = () => {
-	return window.open('https://www.parseable.io/docs/rbac', '_blank');
+	return window.open('https://www.parseable.io/docs/server/features/rbac-role-based-access-control', '_blank');
 };
 
-const renderDocsIcon = () => <IconBook2 stroke={1.5} size="1rem" />;
+const renderDocsIcon = () => <IconBook2 className={classes.docsIcon} stroke={1.5} size="1rem" />;
 
 const Users: FC = () => {
 	useDocumentTitle('Parseable | Users');
@@ -107,7 +107,9 @@ const Users: FC = () => {
 			className={classes.container}
 			style={{ maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT * 2}px - ${20}px)` }}>
 			<Stack className={classes.header} gap={0}>
-				<Text style={{ fontWeight: 600 }}>Users</Text>
+				<Text className={classes.sectionHeaderText} style={{ fontWeight: 600 }}>
+					Users
+				</Text>
 				<Stack style={{ flexDirection: 'row' }} gap={0}>
 					<Button
 						className={classes.createUserBtn}
@@ -141,9 +143,11 @@ const Users: FC = () => {
 				title="Create user"
 				centered
 				className={classes.modalStyle}
-				styles={{ title: { fontWeight: 500 } }}>
+				size="lg"
+				styles={{ title: { fontWeight: 500, fontSize: '16px' } }}>
 				<Stack>
 					<TextInput
+						size="lg"
 						type="text"
 						label="Enter the name of the user"
 						placeholder="Type the name of the user to create"
@@ -154,6 +158,7 @@ const Users: FC = () => {
 						required
 					/>
 					<Select
+						size="lg"
 						placeholder="Select a role to assign"
 						onChange={(value) => {
 							setSelectedRole(value ?? '');
@@ -198,6 +203,7 @@ const Users: FC = () => {
 
 				<Group justify="right" mt={10}>
 					<Button
+						size="md"
 						variant="filled"
 						color="gray"
 						className={classes.modalActionBtn}
@@ -205,7 +211,7 @@ const Users: FC = () => {
 						disabled={!createVaildtion() || !!createUserData?.data}>
 						Create
 					</Button>
-					<Button onClick={handleClose} variant="outline" color="gray" className={classes.modalCancelBtn}>
+					<Button size="md" onClick={handleClose} variant="outline" color="gray" className={classes.modalCancelBtn}>
 						Cancel
 					</Button>
 				</Group>
diff --git a/src/pages/AccessManagement/styles/AccessManagement.module.css b/src/pages/AccessManagement/styles/AccessManagement.module.css
index 8dab7a43..01762073 100644
--- a/src/pages/AccessManagement/styles/AccessManagement.module.css
+++ b/src/pages/AccessManagement/styles/AccessManagement.module.css
@@ -6,129 +6,308 @@
 	margin: 1rem;
 	border-radius: 0.5rem;
 	border: 1px solid var(--mantine-color-gray-2);
-  }
-  
-  .container:first-of-type {
+}
+
+.container:first-of-type {
 	margin-right: 0;
-  }
-  
-  .header {
+}
+
+.header {
 	justify-content: space-between;
 	align-items: center;
 	border-bottom: 1px solid var(--mantine-color-gray-1);
 	flex-direction: row;
 	padding: 1rem;
-  }
-  
-  .createBtn {
+
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
+
+.createBtn {
 	height: 34px;
 	padding: 0 15px;
 	margin-inline-end: 0.625rem;
 	color: #777777;
 	border-color: #828282;
-  }
-  
-  .createBtn:disabled,
-  .createBtn:disabled:hover {
+}
+
+.createBtn:disabled,
+.createBtn:disabled:hover {
 	background-color: var(--mantine-color-gray-4);
 	color: white;
-  }
-
+}
 
-  .tableContainer {
+.tableContainer {
 	/* height: calc(100% - 70px); */
-  }
-  
-  .tableStyle {
+}
+
+.tableStyle {
 	overflow: scroll;
 	width: 100%;
 	height: 100%;
 	padding: 0;
-  }
-  
-  .theadStyle {
+}
+
+.theadStyle {
 	position: sticky;
 	z-index: 1;
 	top: 0;
 	height: 50px;
 	background-color: white;
 	text-align: left;
-  }
-  
-  .theadStyle tr th {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
+
+.theadStyle tr th {
 	padding: 0.625rem;
-  }
-  
-  .trStyle:nth-child(odd) {
+}
+
+.trStyle:nth-child(odd) {
 	background-color: #ececec80;
-  }
-  
-  .trStyle td {
+}
+
+.trStyle td {
 	height: 100%;
 	vertical-align: middle;
 	padding: 0.625rem;
-  }
-  
-  .passwordPrims .mantine-Tooltip-tooltip {
+
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
+
+.passwordPrims .mantine-Tooltip-tooltip {
 	background-color: #757575;
 	color: #ffffff;
-  }
-  
-  .passwordPrims .mantine-Prism-code {
+}
+
+.passwordPrims .mantine-Prism-code {
 	background-color: white !important;
 	border: 1px solid #e0e0e0 !important;
-  }
-  
-  .modalStyle .mantine-Paper-root {
+}
+
+.modalStyle .mantine-Paper-root {
 	overflow-y: inherit;
-  }
-  
-  .modalStyle .mantine-Modal-header {
+}
+
+.modalStyle .mantine-Modal-header {
 	border-radius: 8px 8px 0px 0px;
 	background-color: #f5f5f5;
-  }
-  
-  .modalStyle .mantine-Modal-title {
+}
+
+.modalStyle .mantine-Modal-title {
 	font-weight: bold;
-  }
-  
-  .modalStyle .mantine-Modal-body {
+}
+
+.modalStyle .mantine-Modal-body {
 	padding-top: 1rem !important;
-  }
-  
-  .passwordText {
+}
+
+.passwordText {
 	font-weight: 500;
-	font-size: 0.875rem;
-  }
-  
-  .modalCancelBtn {
+	/* font-size: 0.875rem; */
+
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
+
+.rolesPill {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
+
+.modalCancelBtn {
 	border-color: #ced4da;
 	color: #000000;
-  }
-  
-  .modalActionBtn {
-	background-color: #545BEB;
+}
+
+.modalActionBtn {
+	background-color: #545beb;
 	color: white;
-  }
-  
-  .modalActionBtn:disabled,
-  .modalActionBtn:disabled:hover {
+}
+
+.modalActionBtn:disabled,
+.modalActionBtn:disabled:hover {
 	background-color: var(--mantine-color-gray-4);
 	color: white;
-  }
+}
 
-  .actionBtn {
+.actionBtn {
 	height: 24px;
 	width: 24px;
 	padding: 0;
 	margin-inline-end: 0.625rem;
 	color: #777777;
 	border-color: #828282;
-  }
-  
-  .actionBtn:hover {
-	color: #545BEB;
-  }
+}
+
+.actionBtn:hover {
+	color: #545beb;
+}
+
+.docsIcon {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
+
+.sectionHeaderText {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
 
 .createUserBtn {
 	display: flex;
@@ -136,16 +315,66 @@
 	align-items: center;
 	height: auto;
 	background-color: white;
-	color: #211F1F;
+	color: #211f1f;
 	border: 1px #e9ecef solid;
 	margin-right: 0.625rem;
 	border-radius: rem(8px);
+
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 	&:hover {
 		background-color: var(--mantine-color-gray-0);
-		color:  #211F1F;;
+		color: #211f1f;
 	}
 }
 
 .tableHeader {
 	font-weight: 600;
-}
\ No newline at end of file
+
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
diff --git a/src/pages/Home/CreateStreamModal.tsx b/src/pages/Home/CreateStreamModal.tsx
index 1c1539c7..0629c34b 100644
--- a/src/pages/Home/CreateStreamModal.tsx
+++ b/src/pages/Home/CreateStreamModal.tsx
@@ -129,11 +129,11 @@ const FieldRow = (props: {
 	const rmvBtnProps = _.isFunction(props.onRemove) ? { onClick: props.onRemove } : { color: 'gray' };
 	return (
 		<Stack style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-			<TextInput w="47%" withAsterisk placeholder="Field name" key="name" {...props.nameInputProps} />
-			<Select w="47%" placeholder="Select Datatype" data={datatypes} {...props.datatypeInputProps} />
+			<TextInput w="47%" size="md" withAsterisk placeholder="Field name" key="name" {...props.nameInputProps} />
+			<Select w="47%" size="md" placeholder="Select Datatype" data={datatypes} {...props.datatypeInputProps} />
 			<Stack w="6%" style={{ alignItems: 'center', paddingTop: 4 }}>
 				<ActionIcon className={styles.deleteRulebtn} variant="light" {...rmvBtnProps}>
-					<CloseIcon />
+					<CloseIcon size="2rem" />
 				</ActionIcon>
 			</Stack>
 		</Stack>
@@ -146,9 +146,10 @@ const AddFieldButton = ({ onClick }: { onClick: () => void }) => {
 	return (
 		<Box>
 			<Button
+				className={styles.fieldTitle}
 				variant="outline"
 				leftSection={
-					<ThemeIcon size="xs" p={0} variant="outline" m={0} style={{ border: 0 }}>
+					<ThemeIcon size="md" p={0} variant="outline" m={0} style={{ border: 0 }}>
 						<IconPlus stroke={2} />
 					</ThemeIcon>
 				}
@@ -176,7 +177,7 @@ const SchemaTypeField = (props: { inputProps: GetInputPropsReturnType }) => {
 				</Stack>
 				<Text className={styles.fieldDescription}>Choose dynamic or static schema</Text>
 			</Stack>
-			<Select w={200} data={[dynamicType, staticType]} {...props.inputProps} />
+			<Select size="lg" w={200} data={[dynamicType, staticType]} {...props.inputProps} />
 		</Stack>
 	);
 };
@@ -252,7 +253,7 @@ const PartitionField = (props: {
 				setValue={(value: string) => onFieldChange(value)}
 				placeholder="Select or Add"
 				error={props.error}
-				style={{ width: 200 }}
+				style={{ width: 250 }}
 			/>
 		</Stack>
 	);
@@ -292,6 +293,7 @@ const CustomPartitionField = (props: {
 						: 'Add upto 3 columns'
 				}
 				data={props.partitionFields}
+				size="lg"
 				mt={6}
 				onChange={(val) => props.onChangeValue('customPartitionFields', val)}
 				maxTags={3}
@@ -473,6 +475,7 @@ const DetectSchemaSection = (props: { form: StreamFormType }) => {
 				</Stack>
 				<Stack>
 					<Switch
+						size="lg"
 						checked={showAutoDetectInputs}
 						onChange={(event) => setShowAutoDetectInputs(event.currentTarget.checked)}
 					/>
@@ -482,6 +485,7 @@ const DetectSchemaSection = (props: { form: StreamFormType }) => {
 				style={{ marginBottom: showAutoDetectInputs ? '0.4rem' : 0, display: showAutoDetectInputs ? 'flex' : 'none' }}>
 				<FileInput
 					placeholder="Import JSON"
+					size="lg"
 					value={file}
 					disabled={isDetecting}
 					onChange={onImportFile}
@@ -491,6 +495,7 @@ const DetectSchemaSection = (props: { form: StreamFormType }) => {
 				<JsonInput
 					placeholder="Array of Log Records as JSON"
 					validationError="Invalid JSON"
+					size="lg"
 					autosize
 					minRows={4}
 					disabled={isDetecting}
@@ -564,6 +569,7 @@ const CreateStreamForm = (props: { toggleModal: () => void }) => {
 				withAsterisk
 				classNames={{ label: styles.fieldTitle }}
 				styles={{ label: { marginBottom: 8 } }}
+				size="lg"
 				label="Name"
 				placeholder="Name"
 				key="name"
@@ -605,7 +611,7 @@ const CreateStreamForm = (props: { toggleModal: () => void }) => {
 			<Stack style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
 				<Box>
 					{!createLogStreamIsLoading ? (
-						<Button w="6rem" onClick={onSubmit} disabled={!_.isEmpty(form.errors)}>
+						<Button w="8rem" className={styles.fieldTitle} onClick={onSubmit} disabled={!_.isEmpty(form.errors)}>
 							Create
 						</Button>
 					) : (
@@ -633,7 +639,7 @@ const CreateStreamModal: FC = () => {
 			opened={createStreamModalOpen}
 			onClose={closeModal}
 			withinPortal
-			size="xl"
+			size="60rem"
 			centered
 			padding={20}
 			title="Create Stream"
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 21cd2fb1..d28b0d2c 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -136,10 +136,14 @@ const Home: FC = () => {
 						flexDirection: 'row',
 						borderBottom: '1px solid var(--mantine-color-gray-3)',
 					}}>
-					<Text style={{ fontSize: '0.8rem' }} fw={500}>
+					<Text
+						className={classes.title}
+						// style={{ fontSize: '0.8rem' }}
+						fw={500}>
 						All Streams ({filteredMetaData && Object.keys(filteredMetaData).length})
 					</Text>
 					<TextInput
+						className={homeStyles.searchBox}
 						style={{ width: '30%' }}
 						placeholder="Search Stream"
 						leftSection={searchIcon}
@@ -191,7 +195,7 @@ const Home: FC = () => {
 									shouldHideFooter={Array.isArray(userSpecificStreams) && userSpecificStreams.length > 0}
 								/>
 							) : (
-								<Group style={{ margin: '0 1rem', gap: '1rem' }}>
+								<Group className={classes.streamList} style={{ margin: '0 1rem', gap: '1rem' }}>
 									{Object.entries(filteredMetaData || {}).map(([stream, data]) => (
 										<StreamInfo
 											key={stream}
@@ -216,7 +220,7 @@ export default Home;
 const BigNumber = (props: { label: string; value: any; color?: string }) => {
 	return (
 		<Box className={cardStyles.streamBoxCol} style={{ width: '11%' }}>
-			<Text style={{ color: 'black', fontSize: '0.6rem' }}>{props.label}</Text>
+			<Text style={{ color: 'black' }}>{props.label}</Text>
 			<Text fw={700} className={cardStyles.bigNo}>
 				{props.value}
 			</Text>
@@ -269,7 +273,7 @@ const StreamInfo: FC<StreamInfoProps> = (props) => {
 			<Box style={{ width: 200 }}>
 				<Box className={classes.streamBoxCol}>
 					<Tooltip label={stream}>
-						<Text fw={600} style={{ color: 'black', fontSize: '0.75rem' }} lineClamp={1}>
+						<Text className={classes.streamBoxText} fw={600} style={{ color: 'black' }} lineClamp={1}>
 							{stream}
 						</Text>
 					</Tooltip>
diff --git a/src/pages/Home/styles/Card.module.css b/src/pages/Home/styles/Card.module.css
index a2ffb434..cc9d09b0 100644
--- a/src/pages/Home/styles/Card.module.css
+++ b/src/pages/Home/styles/Card.module.css
@@ -12,7 +12,7 @@
 	flex-direction: row;
 	align-items: center;
 	width: 100%;
-	border: 1px solid var(--mantine-color-gray-1)
+	border: 1px solid var(--mantine-color-gray-1);
 }
 
 .streamBoxCol {
@@ -25,5 +25,56 @@
 
 .bigNo {
 	color: var(--mantine-color-brandPrimary-4);
-	font-size: 0.75rem;
+	/* font-size: 0.75rem; */
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
+
+.streamBoxText {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
diff --git a/src/pages/Home/styles/CreateStreamModal.module.css b/src/pages/Home/styles/CreateStreamModal.module.css
index b5e10db7..5bbae04f 100644
--- a/src/pages/Home/styles/CreateStreamModal.module.css
+++ b/src/pages/Home/styles/CreateStreamModal.module.css
@@ -1,32 +1,101 @@
 .aboutTitle {
-    font-size: 0.8rem;
-    font-weight: 500;
+	font-weight: 500;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .fieldTitle {
-    font-size: var(--mantine-font-size-md);
-    font-weight: 500;
+	font-weight: 500;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .fieldDescription {
-    font-size: var(--mantine-font-size-sm);
-    color: var(--mantine-color-gray-6);
+	color: var(--mantine-color-gray-6);
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .fieldsSectionContainer {
-    border: 1px solid var(--mantine-color-gray-4);
-    padding: var(--mantine-spacing-md);
-    padding-bottom: 0;
-    border-radius: 0.2rem;
+	border: 1px solid var(--mantine-color-gray-4);
+	padding: var(--mantine-spacing-md);
+	padding-bottom: 0;
+	border-radius: 0.2rem;
 }
 
 .fieldsContainer {
-    max-height: 10rem;
-    overflow: scroll;
-    padding-bottom: var(--mantine-spacing-md);
+	max-height: 10rem;
+	overflow: scroll;
+	padding-bottom: var(--mantine-spacing-md);
 }
 
 .infoTooltipIcon {
-    color: var(--mantine-color-gray-5);
-    cursor: pointer;
-}
\ No newline at end of file
+	color: var(--mantine-color-gray-5);
+	cursor: pointer;
+}
diff --git a/src/pages/Home/styles/Home.module.css b/src/pages/Home/styles/Home.module.css
index 049580bf..ba49c2f8 100644
--- a/src/pages/Home/styles/Home.module.css
+++ b/src/pages/Home/styles/Home.module.css
@@ -1,39 +1,144 @@
 .container {
-    flex: 1;
-    display: flex;
-    position: relative;
-    flex-direction: column;
+	flex: 1;
+	display: flex;
+	position: relative;
+	flex-direction: column;
 }
 
 .noDataViewContainer {
-    height: 100%; 
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    display: flex;
+	height: 100%;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	display: flex;
 }
 
 .messageStyle {
-    margin-top: 1rem;
-    color: #D4D4D4;
+	margin-top: 1rem;
+	color: #d4d4d4;
 }
 
 .btnStyle {
-    margin-top: 1rem;
-    color: #FFFFFF;
-	background: #545BEB;
+	margin-top: 1rem;
+	color: #ffffff;
+	background: #545beb;
 }
 
 .createStreamButton {
-    background-color: white;
-    color: #211F1F;
-    border: 1px #e9ecef solid;
-    margin-right: 0.625rem;
-    border-radius: rem(8px);
-    text-transform: capitalize;  
-    height: 1.65rem;
-    &:hover {
-        background-color: #E0E0E0;
-        color: black;
-    }
-}
\ No newline at end of file
+	background-color: white;
+	color: #211f1f;
+	border: 1px #e9ecef solid;
+	margin-right: 0.625rem;
+	border-radius: rem(8px);
+	text-transform: capitalize;
+	height: 1.65rem;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+	&:hover {
+		background-color: #e0e0e0;
+		color: black;
+	}
+}
+
+.title {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
+
+.streamList {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
+
+.searchBox {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
diff --git a/src/pages/Stream/Views/Explore/StaticLogTable.tsx b/src/pages/Stream/Views/Explore/StaticLogTable.tsx
index 6ffec611..be5f51f9 100644
--- a/src/pages/Stream/Views/Explore/StaticLogTable.tsx
+++ b/src/pages/Stream/Views/Explore/StaticLogTable.tsx
@@ -174,7 +174,7 @@ const Table = (props: { primaryHeaderHeight: number }) => {
 				className: tableStyles.customCell,
 				style: {
 					padding: '0.5rem 1rem',
-					fontSize: '0.6rem',
+					// fontSize: '0.6rem',
 					overflow: 'hidden',
 					textOverflow: 'ellipsis',
 					display: 'table-cell',
diff --git a/src/pages/Stream/Views/Manage/Settings.tsx b/src/pages/Stream/Views/Manage/Settings.tsx
index b7096348..373ed2ec 100644
--- a/src/pages/Stream/Views/Manage/Settings.tsx
+++ b/src/pages/Stream/Views/Manage/Settings.tsx
@@ -67,6 +67,7 @@ const RetentionForm = (props: { updateRetentionConfig: ({ config }: { config: an
 			<Stack gap={8}>
 				<Stack gap={16} style={{ flexDirection: 'row', width: '100%' }}>
 					<NumberInput
+						size="lg"
 						withAsterisk
 						classNames={{ label: classes.fieldDescription }}
 						styles={{ label: { marginBottom: 4 } }}
@@ -78,6 +79,7 @@ const RetentionForm = (props: { updateRetentionConfig: ({ config }: { config: an
 					/>
 					<TextInput
 						classNames={{ label: classes.fieldDescription }}
+						size="lg"
 						styles={{ label: { marginBottom: 4 } }}
 						label="Action"
 						key="action"
@@ -89,6 +91,7 @@ const RetentionForm = (props: { updateRetentionConfig: ({ config }: { config: an
 				<TextInput
 					classNames={{ label: classes.fieldDescription }}
 					styles={{ label: { marginBottom: 4 } }}
+					size="lg"
 					label="Description"
 					key="description"
 					placeholder="Description"
@@ -97,13 +100,18 @@ const RetentionForm = (props: { updateRetentionConfig: ({ config }: { config: an
 			</Stack>
 			<Stack style={{ flexDirection: 'row', justifyContent: 'flex-end' }} mt="0.6rem">
 				<Button
+					size="lg"
 					className={classes.submitBtn}
 					onClick={() => onSubmit({ reset: true })}
 					variant="outline"
 					disabled={retention.duration === 0}>
 					Reset
 				</Button>
-				<Button className={classes.submitBtn} onClick={() => onSubmit({ reset: false })} disabled={!form.isDirty()}>
+				<Button
+					size="lg"
+					className={classes.submitBtn}
+					onClick={() => onSubmit({ reset: false })}
+					disabled={!form.isDirty()}>
 					Submit
 				</Button>
 			</Stack>
@@ -136,7 +144,7 @@ const DeleteHotTierModal = (props: {
 		<Modal
 			opened={props.showDeleteModal}
 			onClose={props.closeModal}
-			size="auto"
+			size="lg"
 			centered
 			styles={{
 				body: { padding: '0 1rem 1rem 1rem', width: 400 },
@@ -151,12 +159,12 @@ const DeleteHotTierModal = (props: {
 				</Stack>
 				<Stack style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
 					<Box>
-						<Button onClick={props.closeModal} variant="outline">
+						<Button size="lg" onClick={props.closeModal} variant="outline">
 							Cancel
 						</Button>
 					</Box>
 					<Box>
-						<Button loading={props.isDeleting} onClick={onDelete}>
+						<Button size="lg" loading={props.isDeleting} onClick={onDelete}>
 							Delete
 						</Button>
 					</Box>
@@ -244,6 +252,7 @@ const HotTierConfig = (props: {
 						{streamType === 'UserDefined' ? (
 							<NumberInput
 								classNames={{ label: classes.fieldDescription }}
+								size="lg"
 								placeholder="Size in GiB"
 								key="size"
 								value={localSizeValue}
@@ -291,7 +300,7 @@ const HotTierConfig = (props: {
 					</Stack>
 					<Stack style={{ alignItems: 'flex-end', ...(!hotTierNotSet ? { display: 'none' } : {}) }}>
 						<Box>
-							<Button onClick={onUpdate} disabled={localSizeValue <= 0} loading={props.isUpdating}>
+							<Button size="lg" onClick={onUpdate} disabled={localSizeValue <= 0} loading={props.isUpdating}>
 								Submit
 							</Button>
 						</Box>
@@ -319,7 +328,7 @@ const Settings = (props: {
 	return (
 		<Stack className={classes.sectionContainer} gap={0} w="100%">
 			<Header />
-			<Stack gap={0} h="100%" pr="0.65rem" pl="0.65rem">
+			<Stack gap={26} h="100%" pr="0.65rem" pl="0.65rem">
 				{props.isLoading ? (
 					<Stack style={{ flex: 1, width: '100%', alignItems: 'centrer', justifyContent: 'center' }}>
 						<Stack style={{ alignItems: 'center' }}>
diff --git a/src/pages/Stream/components/PrimaryToolbar.tsx b/src/pages/Stream/components/PrimaryToolbar.tsx
index 23a51364..88775956 100644
--- a/src/pages/Stream/components/PrimaryToolbar.tsx
+++ b/src/pages/Stream/components/PrimaryToolbar.tsx
@@ -34,6 +34,7 @@ const SavedFiltersButton = () => {
 	const onClick = useCallback(() => setLogsStore((store) => toggleSavedFiltersModal(store, true)), []);
 	return (
 		<Button
+			size="lg"
 			className={classes.savedFiltersBtn}
 			h="100%"
 			leftSection={<IconFilterHeart size={px('1rem')} stroke={1.5} />}
diff --git a/src/pages/Stream/components/Querier/styles/SavedFiltersModalStyles.module.css b/src/pages/Stream/components/Querier/styles/SavedFiltersModalStyles.module.css
index 2b1bbf65..e5bc1d54 100644
--- a/src/pages/Stream/components/Querier/styles/SavedFiltersModalStyles.module.css
+++ b/src/pages/Stream/components/Querier/styles/SavedFiltersModalStyles.module.css
@@ -1,7 +1,7 @@
 .filterItemContainer {
-    border-bottom: 1px solid var(--mantine-color-gray-2);
-    
-    &:last-of-type {
-        border-bottom: none;
-    }
-}
\ No newline at end of file
+	border-bottom: 1px solid var(--mantine-color-gray-2);
+
+	&:last-of-type {
+		border-bottom: none;
+	}
+}
diff --git a/src/pages/Stream/components/styles/PrimaryToolbar.module.css b/src/pages/Stream/components/styles/PrimaryToolbar.module.css
index b6700582..a57ad5cb 100644
--- a/src/pages/Stream/components/styles/PrimaryToolbar.module.css
+++ b/src/pages/Stream/components/styles/PrimaryToolbar.module.css
@@ -2,13 +2,37 @@
 	background-color: white;
 	color: var(--mantine-color-gray-7);
 	border: 1px #e9ecef solid;
-    border-radius: rem(8px);
-	font-size: 0.65rem;
+	border-radius: rem(8px);
+	/* font-size: 0.65rem;*/
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 	&:hover {
 		color: black;
 	}
-  }
-  
-  .savedFiltersBtn:hover {
-    background-color: #E0E0E0;
-  }
\ No newline at end of file
+}
+
+.savedFiltersBtn:hover {
+	background-color: #e0e0e0;
+}
diff --git a/src/pages/Stream/styles/Logs.module.css b/src/pages/Stream/styles/Logs.module.css
index 384b27c4..7890425a 100644
--- a/src/pages/Stream/styles/Logs.module.css
+++ b/src/pages/Stream/styles/Logs.module.css
@@ -284,6 +284,31 @@
 			display: none;
 		}
 	}
+
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .contextMenuContainer {
diff --git a/src/pages/Stream/styles/Management.module.css b/src/pages/Stream/styles/Management.module.css
index 638b98ab..7febfe3d 100644
--- a/src/pages/Stream/styles/Management.module.css
+++ b/src/pages/Stream/styles/Management.module.css
@@ -21,7 +21,31 @@
 }
 
 .title {
-	font-size: 0.75rem;
+	/* font-size: 0.75rem; */
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 	font-weight: 600;
 }
 
@@ -54,12 +78,59 @@
 
 .fieldTitle {
 	font-weight: 500;
-	font-size: 0.7rem;
+
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .fieldDescription {
-	font-size: 0.65rem;
 	color: var(--mantine-color-gray-6);
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .fieldsContainer {
@@ -122,7 +193,30 @@
 }
 
 .bigNoText {
-	font-size: 0.7rem;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .compressionText {
@@ -167,4 +261,31 @@
 .deleteIcon {
 	color: var(--mantine-color-gray-6);
 	cursor: pointer;
-}
\ No newline at end of file
+}
+
+.deleteWarningText {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}
diff --git a/src/pages/Systems/MachineInfo.tsx b/src/pages/Systems/MachineInfo.tsx
index 8d735f46..e3364551 100644
--- a/src/pages/Systems/MachineInfo.tsx
+++ b/src/pages/Systems/MachineInfo.tsx
@@ -112,7 +112,7 @@ const IngestorInfo = () => {
 	const ingestor = _.find(ingestorMachines, (ingestor) => ingestor.domain_name === recentRecord?.address);
 	const [selectedMachine] = useClusterStore((store) => store.currentMachine);
 	const ingestorInfo = _.find(ingestorMachines, (ingestor) => ingestor.domain_name === selectedMachine);
-	const error = ingestor ? ingestor.error : null || null;
+	const error = ingestor ? ingestor.error : null;
 	const toggleDeleteModal = useCallback(() => {
 		setDeleteModalOpen((prev) => !prev);
 	}, []);
@@ -121,7 +121,9 @@ const IngestorInfo = () => {
 			<Stack style={{ flexDirection: 'row', alignItems: 'center' }} gap={8}>
 				<Group style={{ justifyContent: 'space-between', width: '100%' }}>
 					<Group>
-						<Text fw={500}>Instance Info</Text>
+						<Text className={classes.infoTitle} fw={500}>
+							Instance Info
+						</Text>
 						{error && (
 							<Tooltip label={error}>
 								<ThemeIcon className={classes.infoIcon} variant="filled" size="sm">
@@ -166,7 +168,9 @@ const QuerierInfo = () => {
 
 	return (
 		<Stack style={{ width: '70%', height: '100%' }} className={classes.machineInfoSection}>
-			<Text fw={500}>Instance Info</Text>
+			<Text className={classes.infoTitle} fw={500}>
+				Instance Info
+			</Text>
 			<Stack flex={1} style={{ justifyContent: 'space-around' }}>
 				<Stack style={{ width: '100%', flexDirection: 'row' }}>
 					<InfoItem title="Address" value={currentMachine || ''} showCopyBtn />
@@ -190,7 +194,9 @@ const MemoryInfo = () => {
 	return (
 		<Stack className={classes.memoryInfoSection} gap={4}>
 			<Stack style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-				<Text fw={500}>Memory Usage</Text>
+				<Text className={classes.infoTitle} fw={500}>
+					Memory Usage
+				</Text>
 				<Text>{formatBytes(recentRecord?.process_resident_memory_bytes || 0)}</Text>
 			</Stack>
 			<Stack h="100%" w="100%" flex={1}>
diff --git a/src/pages/Systems/ServerList.tsx b/src/pages/Systems/ServerList.tsx
index 27149d04..991a9468 100644
--- a/src/pages/Systems/ServerList.tsx
+++ b/src/pages/Systems/ServerList.tsx
@@ -24,7 +24,12 @@ const ServerItem = (props: { machine: MachineType }) => {
 
 	return (
 		<Stack className={itemClassName} gap={8} onClick={onClick}>
-			<Stack style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+			<Stack
+				style={{
+					flexDirection: 'row',
+					justifyContent: 'space-between',
+					alignItems: 'center',
+				}}>
 				<Pill className={classes.serverTypePill}>{_.capitalize(props.machine.type)}</Pill>
 				<ThemeIcon
 					className={props.machine.reachable ? classes.liveIcon : classes.serverDownIcon}
diff --git a/src/pages/Systems/styles/Systems.module.css b/src/pages/Systems/styles/Systems.module.css
index 9ebe92ea..11e58283 100644
--- a/src/pages/Systems/styles/Systems.module.css
+++ b/src/pages/Systems/styles/Systems.module.css
@@ -126,7 +126,30 @@
 }
 
 .leftSectionTitle {
-	font-size: 0.8rem;
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 	font-weight: 500;
 }
 
@@ -140,6 +163,32 @@
 	border-top: 1px solid var(--mantine-color-gray-2);
 	/* border-bottom: 1px solid var(--mantine-color-gray-2); */
 	cursor: pointer;
+
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+
 	&:hover {
 		background-color: var(--mantine-color-gray-0);
 	}
@@ -162,7 +211,30 @@
 	}
 
 	.serverDomain {
-		font-size: 0.7rem;
+		@media (min-width: 1024px) {
+			/* sm: Styles for HD devices */
+			font-size: 10px;
+		}
+
+		@media (min-width: 1980px) {
+			/* md: Styles for FULL HD devices */
+			font-size: 12px;
+		}
+
+		@media (min-width: 1600px) {
+			/* lg: Styles for 2K devices */
+			font-size: 14px;
+		}
+
+		@media (min-width: 2160px) {
+			/* xl: Styles for 4K devices */
+			font-size: 18px;
+		}
+
+		@media (min-width: 3200px) {
+			/* 2xl: Styles for 8K devices */
+			font-size: 24px;
+		}
 		color: var(--mantine-color-gray-7);
 	}
 }
@@ -239,18 +311,87 @@
 
 .compressionText {
 	color: var(--mantine-color-green-7);
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .fieldTitle {
-	font-size: var(--mantine-font-size-md);
+	/* font-size: var(--mantine-font-size-md); */
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 	font-weight: 500;
 }
 
 .fieldDescription {
-	font-size: var(--mantine-font-size-md);
-	color: var(--mantine-color-gray-6);
-	font-size: var(--mantine-font-size-md);
 	color: var(--mantine-color-gray-6);
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
 }
 
 .deleteBtn {
@@ -264,3 +405,57 @@
 .copyBtn:hover {
 	background: transparent;
 }
+
+.serverTypePill {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 6px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 8px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 14px;
+	}
+}
+
+.infoTitle {
+	@media (min-width: 1024px) {
+		/* sm: Styles for HD devices */
+		font-size: 10px;
+	}
+
+	@media (min-width: 1980px) {
+		/* md: Styles for FULL HD devices */
+		font-size: 12px;
+	}
+
+	@media (min-width: 1600px) {
+		/* lg: Styles for 2K devices */
+		font-size: 14px;
+	}
+
+	@media (min-width: 2160px) {
+		/* xl: Styles for 4K devices */
+		font-size: 18px;
+	}
+
+	@media (min-width: 3200px) {
+		/* 2xl: Styles for 8K devices */
+		font-size: 24px;
+	}
+}