diff --git a/src/components/Header/Dropdown.tsx b/src/components/Header/Dropdown.tsx
index 01a3a944..e1845ac1 100644
--- a/src/components/Header/Dropdown.tsx
+++ b/src/components/Header/Dropdown.tsx
@@ -23,7 +23,11 @@ const Dropdown: FC<DropdownProps> = (props) => {
 			onChange={onChange}
 			allowDeselect={false}
 			value={value}
-			classNames={{ option: classes.dropdownOption, input: classes.dropdownBtn }}
+			classNames={{
+				option: classes.dropdownOption,
+				input: classes.dropdownBtn,
+				description: classes.dropdownDescription,
+			}}
 		/>
 	);
 };
diff --git a/src/components/Header/styles/LogQuery.module.css b/src/components/Header/styles/LogQuery.module.css
index 9de7b15b..d2c5b88f 100644
--- a/src/components/Header/styles/LogQuery.module.css
+++ b/src/components/Header/styles/LogQuery.module.css
@@ -188,6 +188,12 @@
 	font-size: var(--mantine-font-size-md);
 }
 
+.dropdownDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
 .liveTailFilterContainer {
 	display: flex;
 	gap: 12px;
diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx
index 686f0def..29b9886a 100644
--- a/src/components/Misc/DeleteOrResetModal.tsx
+++ b/src/components/Misc/DeleteOrResetModal.tsx
@@ -98,7 +98,13 @@ 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
+								classNames={{ input: classes.inputField }}
+								value={confirmText}
+								onChange={onChangeHandler}
+								placeholder={placeholder}
+								required
+							/>
 						</>
 					)}
 
diff --git a/src/components/Misc/styles/DeleteOrResetModal.module.css b/src/components/Misc/styles/DeleteOrResetModal.module.css
index 03a2273e..896293e4 100644
--- a/src/components/Misc/styles/DeleteOrResetModal.module.css
+++ b/src/components/Misc/styles/DeleteOrResetModal.module.css
@@ -35,3 +35,7 @@
 	align-items: center;
 	justify-content: flex-end;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx
index 7af21943..20f03c68 100644
--- a/src/pages/AccessManagement/PrivilegeTR.tsx
+++ b/src/pages/AccessManagement/PrivilegeTR.tsx
@@ -321,6 +321,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 						onChange={(value) => {
 							setSelectedPrivilege(value ?? '');
 						}}
+						classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 						value={selectedPrivilege}
 						nothingFoundMessage="No options"
 					/>
@@ -340,6 +341,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 								onDropdownOpen={() => setStreamSearchValue('')}
 								data={getLogStreamListData?.data?.map((stream) => ({ value: stream.name, label: stream.name })) ?? []}
 								searchable
+								classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 								label="Select a stream to assign"
 								required
 							/>
@@ -348,6 +350,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 									type="text"
 									placeholder={'Please enter the Tag.'}
 									label="Tag"
+									classNames={{ input: styles.inputField }}
 									onChange={(e) => {
 										setTagInput(e.target.value);
 									}}
diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx
index 0dc4f270..5305f249 100644
--- a/src/pages/AccessManagement/RoleTR.tsx
+++ b/src/pages/AccessManagement/RoleTR.tsx
@@ -286,6 +286,7 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 						onChange={(value) => {
 							setSelectedRole(value ?? '');
 						}}
+						classNames={{ input: styles.selectInput, description: styles.selectDescription }}
 						nothingFoundMessage="No roles found"
 						value={selectedRole}
 						searchValue={roleSearchValue}
diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx
index 562025f3..6d14d6cf 100644
--- a/src/pages/AccessManagement/Roles.tsx
+++ b/src/pages/AccessManagement/Roles.tsx
@@ -220,6 +220,7 @@ const Roles: FC = () => {
 						onChange={(value) => {
 							setInputDefaultRole(value ?? '');
 						}}
+						classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 						value={inputDefaultRole}
 						nothingFoundMessage="No options"
 						searchable
@@ -259,6 +260,7 @@ const Roles: FC = () => {
 						onChange={(e) => {
 							setCreateRoleInput(e.target.value);
 						}}
+						classNames={{ input: classes.inputField }}
 						value={createRoleInput}
 						required
 					/>
@@ -270,6 +272,7 @@ const Roles: FC = () => {
 							setSelectedPrivilege(value ?? '');
 						}}
 						value={selectedPrivilege}
+						classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 						nothingFoundMessage="No options"
 						required
 					/>
@@ -282,6 +285,7 @@ const Roles: FC = () => {
 								onChange={(value) => {
 									setSelectedStream(value ?? '');
 								}}
+								classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 								value={SelectedStream}
 								searchValue={streamSearchValue}
 								onSearchChange={(value) => setStreamSearchValue(value)}
@@ -300,6 +304,7 @@ const Roles: FC = () => {
 									onChange={(e) => {
 										setTagInput(e.target.value);
 									}}
+									classNames={{ input: classes.inputField }}
 								/>
 							) : (
 								''
diff --git a/src/pages/AccessManagement/Users.tsx b/src/pages/AccessManagement/Users.tsx
index 6bd63d73..051f80b5 100644
--- a/src/pages/AccessManagement/Users.tsx
+++ b/src/pages/AccessManagement/Users.tsx
@@ -150,6 +150,7 @@ const Users: FC = () => {
 						onChange={(e) => {
 							setCreateUserInput(e.target.value);
 						}}
+						classNames={{ input: classes.inputField }}
 						value={createUserInput}
 						required
 					/>
@@ -165,6 +166,7 @@ const Users: FC = () => {
 						onDropdownClose={() => setRoleSearchValue(selectedRole)}
 						onDropdownOpen={() => setRoleSearchValue('')}
 						data={getRolesData?.data || []}
+						classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 						searchable
 						label="Select a role to assign"
 						required
diff --git a/src/pages/AccessManagement/styles/AccessManagement.module.css b/src/pages/AccessManagement/styles/AccessManagement.module.css
index f00f519b..f11826e3 100644
--- a/src/pages/AccessManagement/styles/AccessManagement.module.css
+++ b/src/pages/AccessManagement/styles/AccessManagement.module.css
@@ -145,3 +145,19 @@
 .tableHeader {
 	font-weight: 600;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
+
+.selectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.selectInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Dashboards/CreateDashboardModal.tsx b/src/pages/Dashboards/CreateDashboardModal.tsx
index 07b571de..e39b9855 100644
--- a/src/pages/Dashboards/CreateDashboardModal.tsx
+++ b/src/pages/Dashboards/CreateDashboardModal.tsx
@@ -113,13 +113,13 @@ const CreateDashboardModal = () => {
 			<Stack style={{ padding: '0.5rem 0 1rem 0' }} gap={28}>
 				<Stack gap={10}>
 					<TextInput
-						classNames={{ label: classes.fieldTitle }}
+						classNames={{ label: classes.fieldTitle, input: classes.inputField }}
 						label="Name"
 						key="name"
 						{...form.getInputProps('name')}
 					/>
 					<TextInput
-						classNames={{ label: classes.fieldTitle }}
+						classNames={{ label: classes.fieldTitle, input: classes.inputField }}
 						label="Description (Optional)"
 						key="description"
 						{...form.getInputProps('description')}
@@ -129,6 +129,7 @@ const CreateDashboardModal = () => {
 							<Text style={{ fontSize: '0.7rem', fontWeight: 500 }}>Time Range</Text>
 							<Select
 								data={timeRangeOptions}
+								classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 								{...form.getInputProps('time_filter')}
 								{...(form.values.time_filter === null ? { value: 'none' } : {})}
 								disabled={!editMode}
diff --git a/src/pages/Dashboards/CreateTileForm.tsx b/src/pages/Dashboards/CreateTileForm.tsx
index 8b286768..70f2bce6 100644
--- a/src/pages/Dashboards/CreateTileForm.tsx
+++ b/src/pages/Dashboards/CreateTileForm.tsx
@@ -384,7 +384,11 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
 					<Select
 						data={allStreams}
 						onChange={onStreamSelect}
-						classNames={{ label: classes.fieldTitle }}
+						classNames={{
+							label: classes.fieldTitle,
+							input: classes.selectInput,
+							description: classes.selectDescription,
+						}}
 						key="stream"
 						placeholder="Select Stream"
 					/>
@@ -405,6 +409,7 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
 								name="ai_query"
 								id="ai_query"
 								value={aiQuery}
+								classNames={{ input: classes.inputField }}
 								onChange={(e) => setAiQuery(e.target.value)}
 								placeholder={
 									isValidStream
@@ -488,7 +493,7 @@ const Config = (props: { form: TileFormType; onChangeValue: (key: string, value:
 			<SectionHeader title="Tile Config" />
 			<Stack style={{ flexDirection: 'row', padding: '0 1rem' }}>
 				<TextInput
-					classNames={{ label: classes.fieldTitle }}
+					classNames={{ label: classes.fieldTitle, input: classes.inputField }}
 					label="Name"
 					key="name"
 					{...form.getInputProps('name')}
@@ -496,7 +501,7 @@ const Config = (props: { form: TileFormType; onChangeValue: (key: string, value:
 				/>
 				<Select
 					data={allDashboards}
-					classNames={{ label: classes.fieldTitle }}
+					classNames={{ label: classes.fieldTitle, input: classes.selectInput, description: classes.selectDescription }}
 					label="Dashboard"
 					key="dashboardId"
 					{...form.getInputProps('dashboardId')}
@@ -506,7 +511,7 @@ const Config = (props: { form: TileFormType; onChangeValue: (key: string, value:
 			</Stack>
 			<Stack style={{ padding: '0 1rem' }}>
 				<TextInput
-					classNames={{ label: classes.fieldTitle }}
+					classNames={{ label: classes.fieldTitle, input: classes.inputField }}
 					label="Description (Optional)"
 					key="description"
 					{...form.getInputProps('description')}
diff --git a/src/pages/Dashboards/Dashboard.tsx b/src/pages/Dashboards/Dashboard.tsx
index a15352ab..31252fb5 100644
--- a/src/pages/Dashboards/Dashboard.tsx
+++ b/src/pages/Dashboards/Dashboard.tsx
@@ -381,7 +381,7 @@ const DuplicateTileModal = () => {
 			title={<Text style={{ fontSize: '0.9rem', fontWeight: 600 }}>Duplicate Tile</Text>}>
 			<Stack>
 				<Stack gap={12}>
-					<TextInput value={inputValue} onChange={handleInputChange} />
+					<TextInput classNames={{ input: classes.inputField }} value={inputValue} onChange={handleInputChange} />
 				</Stack>
 				<Stack style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
 					<Box>
diff --git a/src/pages/Dashboards/styles/CreateDashboardModal.module.css b/src/pages/Dashboards/styles/CreateDashboardModal.module.css
index bfe979e1..9896da0a 100644
--- a/src/pages/Dashboards/styles/CreateDashboardModal.module.css
+++ b/src/pages/Dashboards/styles/CreateDashboardModal.module.css
@@ -7,3 +7,19 @@
 	font-weight: 500;
 	font-size: 0.7rem;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
+
+.selectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.selectInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Dashboards/styles/DashboardView.module.css b/src/pages/Dashboards/styles/DashboardView.module.css
index e76f7951..197a28fe 100644
--- a/src/pages/Dashboards/styles/DashboardView.module.css
+++ b/src/pages/Dashboards/styles/DashboardView.module.css
@@ -34,3 +34,7 @@
 	font-size: 0.8rem;
 	text-align: center;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Dashboards/styles/Form.module.css b/src/pages/Dashboards/styles/Form.module.css
index 08ee3bb7..d21aaca0 100644
--- a/src/pages/Dashboards/styles/Form.module.css
+++ b/src/pages/Dashboards/styles/Form.module.css
@@ -75,3 +75,19 @@
 	color: var(--mantine-color-gray-7);
 	cursor: pointer;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
+
+.selectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.selectInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Home/CreateStreamModal.tsx b/src/pages/Home/CreateStreamModal.tsx
index db2dae34..3da7f7cb 100644
--- a/src/pages/Home/CreateStreamModal.tsx
+++ b/src/pages/Home/CreateStreamModal.tsx
@@ -129,8 +129,21 @@ 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
+				classNames={{ input: styles.inputField }}
+				w="47%"
+				withAsterisk
+				placeholder="Field name"
+				key="name"
+				{...props.nameInputProps}
+			/>
+			<Select
+				classNames={{ input: styles.selectInput, description: styles.selectDescription }}
+				w="47%"
+				placeholder="Select Datatype"
+				data={datatypes}
+				{...props.datatypeInputProps}
+			/>
 			<Stack w="6%" style={{ alignItems: 'center', paddingTop: 4 }}>
 				<ActionIcon className={styles.deleteRulebtn} variant="light" {...rmvBtnProps}>
 					<CloseIcon />
@@ -176,7 +189,12 @@ 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
+				classNames={{ input: styles.selectInput, description: styles.selectDescription }}
+				w={200}
+				data={[dynamicType, staticType]}
+				{...props.inputProps}
+			/>
 		</Stack>
 	);
 };
@@ -563,7 +581,7 @@ const CreateStreamForm = (props: { toggleModal: () => void }) => {
 		<Stack>
 			<TextInput
 				withAsterisk
-				classNames={{ label: styles.fieldTitle }}
+				classNames={{ label: styles.fieldTitle, input: styles.inputField }}
 				styles={{ label: { marginBottom: 8 } }}
 				label="Name"
 				placeholder="Name"
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 21cd2fb1..207d8290 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -147,6 +147,7 @@ const Home: FC = () => {
 						key="search-stream"
 						value={searchTerm}
 						rightSection={shortcutKeyElement}
+						classNames={{ input: homeStyles.searchBar }}
 						rightSectionWidth={80}
 						onChange={(event) => {
 							setSearchTerm(event.target.value);
diff --git a/src/pages/Home/styles/CreateStreamModal.module.css b/src/pages/Home/styles/CreateStreamModal.module.css
index 0d79e3be..3f0cf8a6 100644
--- a/src/pages/Home/styles/CreateStreamModal.module.css
+++ b/src/pages/Home/styles/CreateStreamModal.module.css
@@ -30,3 +30,19 @@
 	color: var(--mantine-color-gray-5);
 	cursor: pointer;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
+
+.selectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.selectInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Home/styles/Home.module.css b/src/pages/Home/styles/Home.module.css
index e980a0cc..2408eca0 100644
--- a/src/pages/Home/styles/Home.module.css
+++ b/src/pages/Home/styles/Home.module.css
@@ -37,3 +37,7 @@
 		color: black;
 	}
 }
+
+.searchBar {
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 9c2183a4..53337244 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -58,6 +58,7 @@ const Login: FC = () => {
 							)}
 							<TextInput
 								mt="sm"
+								classNames={{ input: loginStyles.inputField }}
 								className={formInput}
 								placeholder="J.Doe"
 								label="Username"
diff --git a/src/pages/Login/styles/Login.module.css b/src/pages/Login/styles/Login.module.css
index 2a8f205c..b7187505 100644
--- a/src/pages/Login/styles/Login.module.css
+++ b/src/pages/Login/styles/Login.module.css
@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	width: 30vw;
-	background: radial-gradient(circle at 78.7% 87.8%, #FFFFFF 70%, #E1EAEE 60%);
+	background: radial-gradient(circle at 78.7% 87.8%, #ffffff 70%, #e1eaee 60%);
 	padding: 20px;
 }
 
@@ -27,7 +27,7 @@
 	padding: 24px;
 	border-radius: 4px;
 	box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.2);
-	border: 1px solid #D4D4D4;
+	border: 1px solid #d4d4d4;
 	width: 22rem;
 	display: flex;
 	flex-direction: column;
@@ -39,7 +39,7 @@
 }
 
 .titleStyle {
-	color: #10143E;
+	color: #10143e;
 	font-weight: 700;
 	font-size: 24px;
 }
@@ -51,15 +51,15 @@
 }
 
 .errorStyle {
-	color: #FC466B;
+	color: #fc466b;
 }
 
 .loginBtnStyle {
 	width: 100%;
-	background-color: #545BEB;
+	background-color: #545beb;
 
 	&:hover {
-		background-color: #FC466B;
+		background-color: #fc466b;
 	}
 }
 
@@ -71,4 +71,8 @@
 .consentDescription {
 	font-size: 0.66rem;
 	color: var(--mantine-color-gray-6);
-}
\ No newline at end of file
+}
+
+.inputField {
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Stream/Views/Explore/JSONView.tsx b/src/pages/Stream/Views/Explore/JSONView.tsx
index e75af73c..2ccb7552 100644
--- a/src/pages/Stream/Views/Explore/JSONView.tsx
+++ b/src/pages/Stream/Views/Explore/JSONView.tsx
@@ -167,6 +167,7 @@ const Toolbar = (props: { isSearching: boolean; setSearching: React.Dispatch<Rea
 				placeholder="Search loaded data with text or jq. For jq input try `jq .[]`"
 				value={searchValue}
 				onChange={onChange}
+				classNames={{ input: classes.inputField }}
 				style={{ '--input-left-section-width': '2rem', '--input-right-section-width': '6rem' }}
 				rightSection={
 					!_.isEmpty(searchValue) &&
diff --git a/src/pages/Stream/Views/Explore/LogsViewConfig.tsx b/src/pages/Stream/Views/Explore/LogsViewConfig.tsx
index aeec6f12..70b20691 100644
--- a/src/pages/Stream/Views/Explore/LogsViewConfig.tsx
+++ b/src/pages/Stream/Views/Explore/LogsViewConfig.tsx
@@ -35,6 +35,7 @@ const Header = () => {
 					{ label: 'Schema Fields', value: 'schema' },
 				]}
 				value={configViewType}
+				classNames={{ input: classes.streamInput, description: classes.streamSelectDescription }}
 				allowDeselect={false}
 				onChange={(value) => onChange(value)}
 				style={{ width: '100%', height: '100%' }}
@@ -73,7 +74,12 @@ const SearchBar = (props: {
 	const { placeholder, value, onChangeHandler } = props;
 	return (
 		<Stack className={classes.searchBarContainer}>
-			<TextInput placeholder={placeholder} value={value} onChange={onChangeHandler} />
+			<TextInput
+				placeholder={placeholder}
+				value={value}
+				onChange={onChangeHandler}
+				classNames={{ input: classes.searchBar }}
+			/>
 		</Stack>
 	);
 };
diff --git a/src/pages/Stream/Views/Manage/Settings.tsx b/src/pages/Stream/Views/Manage/Settings.tsx
index b7096348..d291851e 100644
--- a/src/pages/Stream/Views/Manage/Settings.tsx
+++ b/src/pages/Stream/Views/Manage/Settings.tsx
@@ -77,7 +77,7 @@ const RetentionForm = (props: { updateRetentionConfig: ({ config }: { config: an
 						style={{ width: '50%' }}
 					/>
 					<TextInput
-						classNames={{ label: classes.fieldDescription }}
+						classNames={{ label: classes.fieldDescription, input: classes.inputField }}
 						styles={{ label: { marginBottom: 4 } }}
 						label="Action"
 						key="action"
@@ -87,7 +87,7 @@ const RetentionForm = (props: { updateRetentionConfig: ({ config }: { config: an
 					/>
 				</Stack>
 				<TextInput
-					classNames={{ label: classes.fieldDescription }}
+					classNames={{ label: classes.fieldDescription, input: classes.inputField }}
 					styles={{ label: { marginBottom: 4 } }}
 					label="Description"
 					key="description"
diff --git a/src/pages/Stream/Views/Manage/UpdateTimePartitionLimit.tsx b/src/pages/Stream/Views/Manage/UpdateTimePartitionLimit.tsx
index ed868125..858e02b7 100644
--- a/src/pages/Stream/Views/Manage/UpdateTimePartitionLimit.tsx
+++ b/src/pages/Stream/Views/Manage/UpdateTimePartitionLimit.tsx
@@ -108,6 +108,7 @@ function UpdateTimePartitionLimit(props: { timePartition: string; currentStream:
 			{showEditField ? (
 				<Group style={{ flexDirection: 'row', alignItems: 'baseline' }} gap={6}>
 					<TextInput
+						classNames={{ input: classes.inputField }}
 						placeholder="Max Historical Difference"
 						value={value}
 						onChange={(e) => onChange(e)}
diff --git a/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx b/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx
index fe5fcff2..6a7b93e1 100644
--- a/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx
+++ b/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx
@@ -99,8 +99,16 @@ const RuleView = (props: RuleViewType) => {
 	const isError = !isDisabled ? value === '' : false;
 	return (
 		<Stack className={classes.ruleContainer}>
-			<Select data={fieldNames} searchable value={rule.field} onChange={onFieldChange} w="33%" />
 			<Select
+				classNames={{ input: classes.selectInput, description: classes.selectDescription }}
+				data={fieldNames}
+				searchable
+				value={rule.field}
+				onChange={onFieldChange}
+				w="33%"
+			/>
+			<Select
+				classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 				data={type === 'number' ? numberFieldOperators : textFieldOperators}
 				searchable
 				value={rule.operator}
diff --git a/src/pages/Stream/components/Querier/QueryCodeEditor.tsx b/src/pages/Stream/components/Querier/QueryCodeEditor.tsx
index fc22bea1..ee6a4f96 100644
--- a/src/pages/Stream/components/Querier/QueryCodeEditor.tsx
+++ b/src/pages/Stream/components/Querier/QueryCodeEditor.tsx
@@ -160,6 +160,7 @@ const QueryCodeEditor: FC<{
 							name="ai_query"
 							id="ai_query"
 							value={aiQuery}
+							classNames={{ input: queryCodeStyles.inputField }}
 							onChange={(e) => setAiQuery(e.target.value)}
 							placeholder="Enter plain text to generate SQL query using OpenAI"
 							w="85%"
diff --git a/src/pages/Stream/components/Querier/SaveFilterModal.tsx b/src/pages/Stream/components/Querier/SaveFilterModal.tsx
index 4c0fd8a1..842025ac 100644
--- a/src/pages/Stream/components/Querier/SaveFilterModal.tsx
+++ b/src/pages/Stream/components/Querier/SaveFilterModal.tsx
@@ -4,6 +4,7 @@ import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { useLogsStore } from '../../providers/LogsProvider';
 import { CodeHighlight } from '@mantine/code-highlight';
 import _ from 'lodash';
+import classes from './styles/SavedFiltersModalStyles.module.css';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { CreateSavedFilterType, SavedFilterType } from '@/@types/parseable/api/savedFilters';
 import useSavedFiltersQuery from '@/hooks/useSavedFilters';
@@ -158,6 +159,7 @@ const SaveFilterModal = () => {
 						onChange={onNameChange}
 						withAsterisk
 						label="Name"
+						classNames={{ input: classes.inputField }}
 						error={isDirty && formObject?.isError && 'Name cannot be empty'}
 						value={formObject?.filter_name}
 					/>
@@ -166,6 +168,7 @@ const SaveFilterModal = () => {
 					<Stack gap={4} style={{ width: '100%' }}>
 						<Text style={{ fontSize: '0.7rem', fontWeight: 500 }}>Time Range</Text>
 						<Select
+							classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 							data={formObject?.timeRangeOptions}
 							value={formObject?.selectedTimeRangeOption.value}
 							onChange={onToggleIncludeTimeRange}
diff --git a/src/pages/Stream/components/Querier/styles/SavedFiltersModalStyles.module.css b/src/pages/Stream/components/Querier/styles/SavedFiltersModalStyles.module.css
index e5bc1d54..74748275 100644
--- a/src/pages/Stream/components/Querier/styles/SavedFiltersModalStyles.module.css
+++ b/src/pages/Stream/components/Querier/styles/SavedFiltersModalStyles.module.css
@@ -5,3 +5,19 @@
 		border-bottom: none;
 	}
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
+
+.selectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.selectInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Stream/styles/Column.module.css b/src/pages/Stream/styles/Column.module.css
index 8015c8bb..f98d3179 100644
--- a/src/pages/Stream/styles/Column.module.css
+++ b/src/pages/Stream/styles/Column.module.css
@@ -1,106 +1,109 @@
 .labelBtn {
-    display: flex;
-    align-items: center;
-    text-align: left;
-    padding: 0.4rem 1rem;
-    font-weight: 500;
-    height: 100%;
-    width: 100%;
-    font-size: 0.65rem;
+	display: flex;
+	align-items: center;
+	text-align: left;
+	padding: 0.4rem 1rem;
+	font-weight: 500;
+	height: 100%;
+	width: 100%;
+	font-size: 0.65rem;
 }
 
 .labelBtn:hover {
-    background-color: var(--mantine-color-gray-1)
+	background-color: var(--mantine-color-gray-1);
 }
 
 .labelIcon {
-    color: #adb5bd;
-    margin-left: 0.625rem;
+	color: #adb5bd;
+	margin-left: 0.625rem;
 }
 
 .labelIconActive {
-    color: #545beb;
+	color: #545beb;
 }
 
 .filterText {
-    display: flex;
-    align-items: center;
-    color: #211F1F;
-    padding: 0;
-    cursor: default;
-    background-color: white;
-    font-size: 0.875rem;
-    font-weight: 400;
+	display: flex;
+	align-items: center;
+	color: #211f1f;
+	padding: 0;
+	cursor: default;
+	background-color: white;
+	font-size: 0.875rem;
+	font-weight: 400;
 }
 
 .checkBoxStyle {
-    padding: 0.75rem 0.5rem 0.75rem 0.5rem;
-    border-radius: 4px;
-    font-weight: 400;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    cursor: pointer;
+	padding: 0.75rem 0.5rem 0.75rem 0.5rem;
+	border-radius: 4px;
+	font-weight: 400;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	cursor: pointer;
 }
 
-.checkBoxLabel { 
-   cursor: pointer; 
+.checkBoxLabel {
+	cursor: pointer;
 }
 
 .checkBoxStyle .mantine-Checkbox-label {
-    font-size: 0.875rem;
+	font-size: 0.875rem;
 }
 
 .checkBoxStyle:hover {
-    background-color: #f8f9fa;
-    color: #fc466b;
+	background-color: #f8f9fa;
+	color: #fc466b;
 }
 
 .applyBtn {
-    margin-top: 0.625rem;
-    width: 100%;
-    background-color: #545beb;
+	margin-top: 0.625rem;
+	width: 100%;
+	background-color: #545beb;
 }
 
 .applyBtn:disabled {
-    background-color: var(--mantine-color-gray-3);
+	background-color: var(--mantine-color-gray-3);
 }
 
-
 .applyBtn:disabled:hover {
-    background-color: var(--mantine-color-gray-3);
+	background-color: var(--mantine-color-gray-3);
 }
 
 .applyBtn:hover {
-    background-color: #1f288e;
+	background-color: #1f288e;
 }
 
 .sortBtn {
-    display: flex;
-    align-items: center;
-    color: #211F1F;
-    padding: 0;
-    font-size: 0.7rem;
-    font-weight: 400;
-    background-color: white;
+	display: flex;
+	align-items: center;
+	color: #211f1f;
+	padding: 0;
+	font-size: 0.7rem;
+	font-weight: 400;
+	background-color: white;
 }
 
 .sortBtn:hover {
-   background-color: var(--mantine-color-gray-1);
-   color: var(--mantine-color-gray-8);
+	background-color: var(--mantine-color-gray-1);
+	color: var(--mantine-color-gray-8);
 }
 
 .sortBtnActive {
-    display: flex;
-    align-items: center;
-    color: #fc466b;
-    padding: 0;
-    font-size: 0.7rem;
-    font-weight: 500;
-    background-color: white;
+	display: flex;
+	align-items: center;
+	color: #fc466b;
+	padding: 0;
+	font-size: 0.7rem;
+	font-weight: 500;
+	background-color: white;
 }
 
 .sortBtnActive:hover {
-    color: #fc466b;
-    background-color: var(--mantine-color-gray-1);
+	color: #fc466b;
+	background-color: var(--mantine-color-gray-1);
+}
+
+.inputField {
+	border-radius: rem(8px);
 }
diff --git a/src/pages/Stream/styles/JSONView.module.css b/src/pages/Stream/styles/JSONView.module.css
index a1dad728..a8cd9fed 100644
--- a/src/pages/Stream/styles/JSONView.module.css
+++ b/src/pages/Stream/styles/JSONView.module.css
@@ -51,3 +51,7 @@
 .itemContainer {
 	margin-right: 0.2rem;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Stream/styles/LogsViewConfig.module.css b/src/pages/Stream/styles/LogsViewConfig.module.css
index 8e12029d..fc8b7bad 100644
--- a/src/pages/Stream/styles/LogsViewConfig.module.css
+++ b/src/pages/Stream/styles/LogsViewConfig.module.css
@@ -127,3 +127,19 @@
 		color: black;
 	}
 }
+
+.streamSelectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.streamInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}
+
+.searchBar {
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Stream/styles/Management.module.css b/src/pages/Stream/styles/Management.module.css
index 186778f5..3768c8f4 100644
--- a/src/pages/Stream/styles/Management.module.css
+++ b/src/pages/Stream/styles/Management.module.css
@@ -168,3 +168,7 @@
 	color: var(--mantine-color-gray-6);
 	cursor: pointer;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Stream/styles/Querier.module.css b/src/pages/Stream/styles/Querier.module.css
index 77f7ae57..2b106c85 100644
--- a/src/pages/Stream/styles/Querier.module.css
+++ b/src/pages/Stream/styles/Querier.module.css
@@ -192,3 +192,15 @@
 .tab:hover {
 	background: var(--mantine-color-gray-1);
 }
+
+.selectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.selectInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}
diff --git a/src/pages/Stream/styles/QueryCode.module.css b/src/pages/Stream/styles/QueryCode.module.css
index b7f19acc..333c6190 100644
--- a/src/pages/Stream/styles/QueryCode.module.css
+++ b/src/pages/Stream/styles/QueryCode.module.css
@@ -67,3 +67,7 @@
 .schemaListShadow {
 	box-shadow: #e3ebfb 0px -50px 20px -30px inset;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}