diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx
index e19e4aff0c9..81c6a0b9213 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx
@@ -185,7 +185,7 @@ const AddServicePage = () => {
 
   return (
     <PageContainerV1>
-      <div className="tw-self-center">
+      <div className="self-center">
         <AddService
           addIngestion={addIngestion}
           handleAddIngestion={handleAddIngestion}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx
index 557471494b1..3cb196ca98c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx
@@ -109,7 +109,7 @@ const AlertsPage = () => {
                 <Link to={`edit-alert/${id}`}>
                   <Button
                     data-testid={`alert-edit-${record.name}`}
-                    icon={<SVGIcons className="tw-w-4" icon={Icons.EDIT} />}
+                    icon={<SVGIcons className="w-4" icon={Icons.EDIT} />}
                     type="text"
                   />
                 </Link>
@@ -118,7 +118,7 @@ const AlertsPage = () => {
                 <Button
                   data-testid={`alert-delete-${record.name}`}
                   disabled={record.provider === ProviderType.System}
-                  icon={<SVGIcons className="tw-w-4" icon={Icons.DELETE} />}
+                  icon={<SVGIcons className="w-4" icon={Icons.DELETE} />}
                   type="text"
                   onClick={() => setSelectedAlert(record)}
                 />
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/AddRulePage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/AddRulePage.tsx
index d1f712a18f2..dfe901051df 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/AddRulePage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/AddRulePage.tsx
@@ -112,12 +112,12 @@ const AddRulePage = () => {
   }
 
   return (
-    <Row className="tw-bg-body-main tw-h-auto p-y-lg" gutter={[16, 16]}>
+    <Row className="bg-body-main h-auto p-y-lg" gutter={[16, 16]}>
       <Col offset={5} span={14}>
         <TitleBreadcrumb className="m-b-md" titleLinks={breadcrumb} />
         <Card>
           <Typography.Paragraph
-            className="tw-text-base"
+            className="text-base"
             data-testid="add-rule-title">
             Add New Rule
           </Typography.Paragraph>
@@ -130,7 +130,7 @@ const AddRulePage = () => {
             layout="vertical"
             onFinish={handleSubmit}>
             <RuleForm ruleData={ruleData} setRuleData={setRuleData} />
-            <Space align="center" className="tw-w-full tw-justify-end">
+            <Space align="center" className="w-full justify-end">
               <Button data-testid="cancel-btn" type="link" onClick={handleBack}>
                 Cancel
               </Button>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/EditRulePage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/EditRulePage.tsx
index f8c5192f8d2..78b7a7e3644 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/EditRulePage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/EditRulePage.tsx
@@ -133,12 +133,12 @@ const EditRulePage = () => {
   }
 
   return (
-    <Row className="tw-bg-body-main tw-h-auto p-y-lg" gutter={[16, 16]}>
+    <Row className="bg-body-main h-auto p-y-lg" gutter={[16, 16]}>
       <Col offset={5} span={14}>
         <TitleBreadcrumb className="m-b-md" titleLinks={breadcrumb} />
         <Card>
           <Typography.Paragraph
-            className="tw-text-base"
+            className="text-base"
             data-testid="edit-rule-title">
             Edit Rule {`"${ruleName}"`}
           </Typography.Paragraph>
@@ -155,7 +155,7 @@ const EditRulePage = () => {
             layout="vertical"
             onFinish={handleSubmit}>
             <RuleForm ruleData={ruleData} setRuleData={setRuleData} />
-            <Space align="center" className="tw-w-full tw-justify-end">
+            <Space align="center" className="w-full justify-end">
               <Button data-testid="cancel-btn" type="link" onClick={handleBack}>
                 Cancel
               </Button>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx
index 7439816bb96..c1f0ec88985 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx
@@ -261,7 +261,7 @@ const PoliciesDetailPage = () => {
                 {
                   label: (
                     <Button
-                      className="tw-p-0"
+                      className="p-0"
                       data-testid="edit-rule"
                       type="text"
                       onClick={(e) => {
@@ -285,7 +285,7 @@ const PoliciesDetailPage = () => {
                 {
                   label: (
                     <Button
-                      className="tw-p-0"
+                      className="p-0"
                       data-testid="delete-rule"
                       type="text"
                       onClick={(e) => {
@@ -324,7 +324,7 @@ const PoliciesDetailPage = () => {
                 e.stopPropagation();
               }}>
               <FontAwesomeIcon
-                className="tw-text-grey-body"
+                className="text-grey-body"
                 icon="ellipsis-vertical"
               />
             </Button>
@@ -390,7 +390,7 @@ const PoliciesDetailPage = () => {
                     </ErrorPlaceHolder>
                   ) : (
                     <Space
-                      className="tw-w-full tabpane-space"
+                      className="w-full tabpane-space"
                       direction="vertical">
                       <Tooltip
                         title={
@@ -409,20 +409,17 @@ const PoliciesDetailPage = () => {
                         </Button>
                       </Tooltip>
 
-                      <Space
-                        className="tw-w-full"
-                        direction="vertical"
-                        size={20}>
+                      <Space className="w-full" direction="vertical" size={20}>
                         {policy.rules.map((rule) => (
                           <Card
                             data-testid="rule-card"
                             key={rule.name || 'rule'}>
                             <Space
                               align="baseline"
-                              className="tw-w-full tw-justify-between tw-pb-5"
+                              className="w-full justify-between p-b-lg"
                               direction="horizontal">
                               <Typography.Text
-                                className="tw-font-medium tw-text-base tw-text-grey-body"
+                                className="font-medium text-base text-grey-body"
                                 data-testid="rule-name">
                                 {rule.name}
                               </Typography.Text>
@@ -430,13 +427,13 @@ const PoliciesDetailPage = () => {
                             </Space>
 
                             <Space
-                              className="tw-w-full"
+                              className="w-full"
                               direction="vertical"
                               size={12}>
                               {rule.description && (
                                 <Row data-testid="description">
                                   <Col span={2}>
-                                    <Typography.Text className="tw-text-grey-muted">
+                                    <Typography.Text className="text-grey-muted">
                                       {t('label.description')} :
                                     </Typography.Text>
                                   </Col>
@@ -450,12 +447,12 @@ const PoliciesDetailPage = () => {
 
                               <Row data-testid="resources">
                                 <Col span={2}>
-                                  <Typography.Text className="tw-text-grey-muted tw-mb-0">
-                                    {t('label.resource-plural')} :
+                                  <Typography.Text className="text-grey-muted m-b-0">
+                                    {t('label.resources')} :
                                   </Typography.Text>
                                 </Col>
                                 <Col span={22}>
-                                  <Typography.Text className="tw-text-grey-body">
+                                  <Typography.Text className="text-grey-body">
                                     {rule.resources
                                       ?.map((resource) => startCase(resource))
                                       ?.join(', ')}
@@ -465,24 +462,24 @@ const PoliciesDetailPage = () => {
 
                               <Row data-testid="operations">
                                 <Col span={2}>
-                                  <Typography.Text className="tw-text-grey-muted">
-                                    {t('label.operation-plural')} :
+                                  <Typography.Text className="text-grey-muted">
+                                    {t('label.operations')} :
                                   </Typography.Text>
                                 </Col>
                                 <Col span={22}>
-                                  <Typography.Text className="tw-text-grey-body">
+                                  <Typography.Text className="text-grey-body">
                                     {rule.operations?.join(', ')}
                                   </Typography.Text>
                                 </Col>
                               </Row>
                               <Row data-testid="effect">
                                 <Col span={2}>
-                                  <Typography.Text className="tw-text-grey-muted">
+                                  <Typography.Text className="text-grey-muted">
                                     {t('label.effect')} :
                                   </Typography.Text>
                                 </Col>
                                 <Col span={22}>
-                                  <Typography.Text className="tw-text-grey-body">
+                                  <Typography.Text className="text-grey-body">
                                     {startCase(rule.effect)}
                                   </Typography.Text>
                                 </Col>
@@ -490,7 +487,7 @@ const PoliciesDetailPage = () => {
                               {rule.condition && (
                                 <Row data-testid="condition">
                                   <Col span={2}>
-                                    <Typography.Text className="tw-text-grey-muted">
+                                    <Typography.Text className="text-grey-muted">
                                       {t('label.condition')} :
                                     </Typography.Text>
                                   </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailsList.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailsList.component.tsx
index 332024bfa91..7434756cd76 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailsList.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailsList.component.tsx
@@ -61,7 +61,7 @@ const PoliciesDetailsList = ({
           }
 
           return (
-            <Link className="hover:tw-underline tw-cursor-pointer" to={link}>
+            <Link className="link-hover" to={link}>
               {getEntityName(record)}
             </Link>
           );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesList.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesList.tsx
index 7d5f7240f76..84489810500 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesList.tsx
@@ -72,7 +72,7 @@ const PoliciesList: FC<PolicyListProps> = ({ policies, fetchPolicies }) => {
         key: 'name',
         render: (_, record) => (
           <Link
-            className="hover:tw-underline tw-cursor-pointer"
+            className="link-hover"
             data-testid="policy-name"
             to={getPolicyWithFqnPath(record.fullyQualifiedName || '')}>
             {getEntityName(record)}
@@ -113,7 +113,7 @@ const PoliciesList: FC<PolicyListProps> = ({ policies, fetchPolicies }) => {
               )}
               {hasMore && (
                 <Popover
-                  className="tw-cursor-pointer"
+                  className="cursor-pointer"
                   content={
                     <Space wrap size={4}>
                       {record.roles.slice(LIST_CAP).map((role) =>
@@ -135,9 +135,9 @@ const PoliciesList: FC<PolicyListProps> = ({ policies, fetchPolicies }) => {
                       )}
                     </Space>
                   }
-                  overlayClassName="tw-w-40 tw-text-center"
+                  overlayClassName="w-40 text-center"
                   trigger="click">
-                  <Tag className="tw-ml-1" data-testid="plus-more-count">{`+${
+                  <Tag className="m-l-xss" data-testid="plus-more-count">{`+${
                     listLength - LIST_CAP
                   } more`}</Tag>
                 </Popover>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx
index 4bc3de43c88..2f2ce0332aa 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx
@@ -250,7 +250,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
         ]}>
         <TreeSelect
           treeCheckable
-          className="tw-w-full"
+          className="w-full"
           data-testid="resources"
           placeholder={t('label.select-resource-plural')}
           showCheckedStrategy={TreeSelect.SHOW_PARENT}
@@ -276,7 +276,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
         ]}>
         <TreeSelect
           treeCheckable
-          className="tw-w-full"
+          className="w-full"
           data-testid="operations"
           placeholder="Select Operations"
           showCheckedStrategy={TreeSelect.SHOW_PARENT}
@@ -324,18 +324,18 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
             onSearch={handleConditionSearch}
           />
           {validationError && (
-            <div className="tw-mt-1" data-testid="condition-error" role="alert">
+            <div className="m-t-xss" data-testid="condition-error" role="alert">
               {`❌ Invalid condition : ${validationError}`}
             </div>
           )}
           {isValidatingCondition && (
-            <div className="tw-mt-1" role="alert">
+            <div className="m-t-xss" role="alert">
               Validating the condition...
             </div>
           )}
           {isValidCondition && !isValidatingCondition && !validationError && (
             <div
-              className="tw-mt-1"
+              className="m-t-xss"
               data-testid="condition-success"
               role="alert">
               ✅ Valid condition
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ProfilerDashboardPage/ProfilerDashboardPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ProfilerDashboardPage/ProfilerDashboardPage.tsx
index f82ab3f66f9..d594903ed85 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ProfilerDashboardPage/ProfilerDashboardPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ProfilerDashboardPage/ProfilerDashboardPage.tsx
@@ -213,7 +213,7 @@ const ProfilerDashboardPage = () => {
   if (error) {
     return (
       <ErrorPlaceHolder>
-        <p className="tw-text-center">
+        <p className="text-center">
           No data found{' '}
           {decodedEntityFQN
             ? `for column ${getNameFromFQN(decodedEntityFQN)}`
@@ -224,7 +224,7 @@ const ProfilerDashboardPage = () => {
   }
 
   return (
-    <PageContainerV1 className="tw-py-4">
+    <PageContainerV1 className="p-y-md">
       <ProfilerDashboard
         fetchProfilerData={fetchProfilerData}
         fetchTestCases={fetchTestCases}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddAttributeModal/AddAttributeModal.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddAttributeModal/AddAttributeModal.tsx
index 980bf6fb8a3..f611167631b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddAttributeModal/AddAttributeModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddAttributeModal/AddAttributeModal.tsx
@@ -132,7 +132,7 @@ const AddAttributeModal: FC<Props> = ({
       title={
         <span data-testid="modal-title">
           {title}{' '}
-          <span className="tw-text-grey-muted tw-text-sm">
+          <span className="text-grey-muted text-sm">
             ({selectedValues.length}/{data.length} selected)
           </span>
         </span>
@@ -175,7 +175,7 @@ const AddAttributeModal: FC<Props> = ({
               </Col>
               <Col span={2}>
                 {selectedValues.includes(option.id) && (
-                  <FontAwesomeIcon className="tw-text-primary" icon="check" />
+                  <FontAwesomeIcon className="text-primary" icon="check" />
                 )}
               </Col>
             </Row>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx
index 499ae2366b7..90f338aaac9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx
@@ -72,7 +72,7 @@ const ResetPassword = () => {
   const handleReVerify = () => history.push(ROUTES.FORGOT_PASSWORD);
 
   return (
-    <div className="h-full tw-py-36">
+    <div className="h-full p-y-36">
       {tokenValid ? (
         <Card
           bodyStyle={{ padding: '48px' }}
@@ -104,7 +104,7 @@ const ResetPassword = () => {
             </Col>
 
             <Col className="mt-12 text-center" span={24}>
-              <Typography.Text className="tw-text-xl font-medium tw-text-grey-muted">
+              <Typography.Text className="text-xl font-medium text-grey-muted">
                 Reset your Password
               </Typography.Text>
             </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index 8411fae8f5a..58a3638d032 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -174,6 +174,12 @@
   opacity: 0.6;
 }
 
+.link-hover {
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
 .cursor-pointer {
   cursor: pointer;
 }