diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
index 8fd1506175b..52ebe28d1fa 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
@@ -121,9 +121,13 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
 
   return (
     <div
-      className={classNames(className, 'hover:tw-bg-gray-100', {
-        'tw-bg-gray-100': visible,
-      })}>
+      className={classNames(
+        className,
+        'hover:tw-bg-gray-100 tw--mx-2.5 tw-px-2.5 tw--mt-1 tw-py-1 tw-mb-1 tw-rounded',
+        {
+          'tw-bg-gray-100': visible,
+        }
+      )}>
       <Popover
         destroyTooltipOnHide
         align={{ targetOffset: [0, -35] }}
@@ -147,7 +151,7 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
         visible={visible}
         zIndex={9999}
         onVisibleChange={handleVisibleChange}>
-        <div className="tw-flex tw-p-2 tw-mb-1">
+        <div className="tw-flex tw-mb-1">
           <UserPopOverCard userName={feedDetail.from}>
             <span className="tw-cursor-pointer" data-testid="authorAvatar">
               <ProfilePicture id="" name={feedDetail.from} width="32" />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BotsDetail/BotsDetail.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BotsDetail/BotsDetail.component.tsx
index bbc2e0c4fc5..8b4fd374ca3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BotsDetail/BotsDetail.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BotsDetail/BotsDetail.component.tsx
@@ -37,7 +37,6 @@ import CopyToClipboardButton from '../buttons/CopyToClipboardButton/CopyToClipbo
 import Description from '../common/description/Description';
 import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
 import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component';
-import PageContainerV1 from '../containers/PageContainerV1';
 import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
 import ConfirmationModal from '../Modals/ConfirmationModal/ConfirmationModal';
 import { UserDetails } from '../Users/Users.interface';
@@ -161,11 +160,11 @@ const BotsDetail: FC<BotsDetailProp> = ({
 
   const getDisplayNameComponent = () => {
     return (
-      <div className="tw-mt-4 tw-w-full tw-flex tw-items-center tw-justify-between">
+      <div className="tw-mt-4 tw-w-full">
         {isDisplayNameEdit ? (
-          <div className="tw-flex tw-items-center tw-gap-1">
+          <div className="tw-flex tw-items-center tw-gap-2">
             <input
-              className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64"
+              className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-full"
               data-testid="displayName"
               id="displayName"
               name="displayName"
@@ -241,7 +240,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
         className="ant-card-feed"
         style={{
           ...leftPanelAntCardStyle,
-          marginTop: '20px',
+          marginTop: '16px',
         }}>
         <div data-testid="left-panel">
           <div className="tw-flex tw-flex-col">
@@ -267,7 +266,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
         className="ant-card-feed"
         style={{
           ...leftPanelAntCardStyle,
-          marginTop: '20px',
+          marginTop: '16px',
         }}>
         <div data-testid="right-panel">
           <div className="tw-flex tw-flex-col">
@@ -377,7 +376,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
   const getCenterLayout = () => {
     return (
       <div
-        className="tw-w-full tw-bg-white tw-shadow tw-rounded tw-p-4"
+        className="tw-w-full tw-bg-white tw-shadow tw-rounded tw-p-4 tw-mt-4"
         data-testid="center-panel">
         <div className="tw-flex tw-justify-between tw-items-center">
           <h6 className="tw-mb-2 tw-self-center">
@@ -423,23 +422,23 @@ const BotsDetail: FC<BotsDetailProp> = ({
   }, [botsData]);
 
   return (
-    <PageContainerV1 className="tw-py-4">
-      <TitleBreadcrumb
-        className="tw-px-6"
-        titleLinks={[
-          {
-            name: 'Bots',
-            url: ROUTES.BOTS,
-          },
-          { name: botsData.name || '', url: '', activeTitle: true },
-        ]}
-      />
-      <PageLayout
-        classes="tw-h-full tw-px-4"
-        leftPanel={fetchLeftPanel()}
-        rightPanel={fetchRightPanel()}>
-        {getCenterLayout()}
-      </PageLayout>
+    <PageLayout
+      classes="tw-h-full tw-px-4"
+      header={
+        <TitleBreadcrumb
+          className="tw-px-6"
+          titleLinks={[
+            {
+              name: 'Bots',
+              url: ROUTES.BOTS,
+            },
+            { name: botsData.name || '', url: '', activeTitle: true },
+          ]}
+        />
+      }
+      leftPanel={fetchLeftPanel()}
+      rightPanel={fetchRightPanel()}>
+      {getCenterLayout()}
       {isRevokingToken ? (
         <ConfirmationModal
           bodyText="Are you sure you want to revoke access for JWT token?"
@@ -466,7 +465,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
           }}
         />
       ) : null}
-    </PageContainerV1>
+    </PageLayout>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx
index 0ff02dea982..d5b47016911 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx
@@ -92,7 +92,9 @@ const Emoji = ({ reaction, reactionList, onReactionSelect }) => {
           fallback-src={image}>
           {reactionObject.emoji}
         </g-emoji>
-        <span data-testid="emoji-count">{reactionList.length}</span>
+        <span className="tw-text-sm tw-ml-1" data-testid="emoji-count">
+          {reactionList.length}
+        </span>
       </Button>
     </Popover>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
index 31dc72f0371..88f05cf090a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
@@ -365,7 +365,7 @@ const TeamDetails = ({
             ) : (
               <Fragment>
                 <div
-                  className="tw-grid xxl:tw-grid-cols-4 lg:tw-grid-cols-3 md:tw-grid-cols-2 tw-gap-4"
+                  className="tw-grid lg:tw-grid-cols-4 md:tw-grid-cols-2 tw-gap-4"
                   data-testid="user-data-container">
                   {sortedUser.map((user, index) => {
                     const User = {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index c6a21416499..9d27fafa6a2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -225,11 +225,11 @@ const Users = ({
   const getDisplayNameComponent = () => {
     if (isAdminUser || isLoggedinUser || isAuthDisabled) {
       return (
-        <div className="tw-mt-4 tw-w-full tw-flex tw-items-center tw-justify-between tw-px-3">
+        <div className="tw-mt-4 tw-w-full tw-px-3">
           {isDisplayNameEdit ? (
-            <div className="tw-flex tw-items-center tw-gap-1 ">
+            <div className="tw-flex tw-justify-between tw-items-center tw-gap-2">
               <input
-                className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64"
+                className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-full"
                 data-testid="displayName"
                 id="displayName"
                 name="displayName"
@@ -281,7 +281,7 @@ const Users = ({
       );
     } else {
       return (
-        <p className="tw-mt-2">
+        <p className="tw-mt-2 tw-px-3">
           {getEntityName(userData as unknown as EntityReference)}
         </p>
       );
@@ -305,7 +305,7 @@ const Users = ({
       );
     } else {
       return (
-        <div className="tw--ml-2">
+        <div className="tw--ml-2 tw-px-3">
           <p className="tw-mt-2">
             {userData.description || (
               <span className="tw-no-description tw-p-2">No description </span>
@@ -335,7 +335,7 @@ const Users = ({
       return (
         <Card
           className="ant-card-feed tw-relative"
-          key="inherited-roles-card"
+          key="teams-card"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '20px',
@@ -345,14 +345,14 @@ const Users = ({
               <h6 className="tw-heading tw-mb-0">Teams</h6>
             </div>
           }>
-          <div>{teamsElement}</div>
+          <div className="tw-mb-4">{teamsElement}</div>
         </Card>
       );
     } else {
       return (
         <Card
           className="ant-card-feed tw-relative"
-          key="inherited-roles-card"
+          key="teams-card"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '20px',
@@ -375,59 +375,55 @@ const Users = ({
               )}
             </div>
           }>
-          <Fragment>
-            <div>
-              {isTeamsEdit ? (
-                <Fragment>
-                  <Select
-                    isClearable
-                    isMulti
-                    aria-label="Select teams"
-                    className="tw-ml-1"
-                    isSearchable={false}
-                    options={teams?.map((team) => ({
-                      label: getEntityName(team as unknown as EntityReference),
-                      value: team.id,
-                    }))}
-                    placeholder="Teams..."
-                    styles={reactSingleSelectCustomStyle}
-                    value={selectedTeams}
-                    onChange={handleOnTeamsChange}
-                  />
-                  <div
-                    className="tw-flex tw-justify-end tw-mt-2"
-                    data-testid="buttons">
-                    <Button
-                      className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
-                      data-testid="cancel-teams"
-                      size="custom"
-                      theme="primary"
-                      variant="contained"
-                      onMouseDown={() => setIsTeamsEdit(false)}>
-                      <FontAwesomeIcon
-                        className="tw-w-3.5 tw-h-3.5"
-                        icon="times"
-                      />
-                    </Button>
-                    <Button
-                      className="tw-px-1 tw-py-1 tw-rounded tw-text-sm"
-                      data-testid="save-teams"
-                      size="custom"
-                      theme="primary"
-                      variant="contained"
-                      onClick={handleTeamsChange}>
-                      <FontAwesomeIcon
-                        className="tw-w-3.5 tw-h-3.5"
-                        icon="check"
-                      />
-                    </Button>
-                  </div>
-                </Fragment>
-              ) : (
-                teamsElement
-              )}
-            </div>
-          </Fragment>
+          <div className="tw-mb-4">
+            {isTeamsEdit ? (
+              <div className="tw-flex tw-justify-between tw-items-center tw-gap-2">
+                <Select
+                  isClearable
+                  isMulti
+                  aria-label="Select teams"
+                  className="tw-w-full"
+                  isSearchable={false}
+                  options={teams?.map((team) => ({
+                    label: getEntityName(team as unknown as EntityReference),
+                    value: team.id,
+                  }))}
+                  placeholder="Teams..."
+                  styles={reactSingleSelectCustomStyle}
+                  value={selectedTeams}
+                  onChange={handleOnTeamsChange}
+                />
+                <div className="tw-flex tw-justify-end" data-testid="buttons">
+                  <Button
+                    className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
+                    data-testid="cancel-teams"
+                    size="custom"
+                    theme="primary"
+                    variant="contained"
+                    onMouseDown={() => setIsTeamsEdit(false)}>
+                    <FontAwesomeIcon
+                      className="tw-w-3.5 tw-h-3.5"
+                      icon="times"
+                    />
+                  </Button>
+                  <Button
+                    className="tw-px-1 tw-py-1 tw-rounded tw-text-sm"
+                    data-testid="save-teams"
+                    size="custom"
+                    theme="primary"
+                    variant="contained"
+                    onClick={handleTeamsChange}>
+                    <FontAwesomeIcon
+                      className="tw-w-3.5 tw-h-3.5"
+                      icon="check"
+                    />
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              teamsElement
+            )}
+          </div>
         </Card>
       );
     }
@@ -466,7 +462,7 @@ const Users = ({
       return (
         <Card
           className="ant-card-feed tw-relative"
-          key="inherited-roles-card"
+          key="roles-card"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '20px',
@@ -476,7 +472,7 @@ const Users = ({
               <h6 className="tw-heading tw-mb-0">Roles</h6>
             </div>
           }>
-          <div className="tw-flex tw-items-center tw-justify-between">
+          <div className="tw-flex tw-items-center tw-justify-between tw-mb-4">
             {rolesElement}
           </div>
         </Card>
@@ -485,7 +481,7 @@ const Users = ({
       return (
         <Card
           className="ant-card-feed tw-relative"
-          key="inherited-roles-card"
+          key="roles-card"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '20px',
@@ -508,57 +504,53 @@ const Users = ({
               )}
             </div>
           }>
-          <Fragment>
-            <div className="tw-flex tw-items-center tw-justify-between">
-              {isRolesEdit ? (
-                <Fragment>
-                  <Select
-                    isClearable
-                    isMulti
-                    aria-label="Select roles"
-                    className="tw-ml-1"
-                    id="select-role"
-                    isSearchable={false}
-                    options={userRolesOption}
-                    placeholder="Roles..."
-                    styles={reactSingleSelectCustomStyle}
-                    value={selectedRoles}
-                    onChange={handleOnRolesChange}
-                  />
-                  <div
-                    className="tw-flex tw-justify-end tw-mt-2"
-                    data-testid="buttons">
-                    <Button
-                      className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
-                      data-testid="cancel-roles"
-                      size="custom"
-                      theme="primary"
-                      variant="contained"
-                      onMouseDown={() => setIsRolesEdit(false)}>
-                      <FontAwesomeIcon
-                        className="tw-w-3.5 tw-h-3.5"
-                        icon="times"
-                      />
-                    </Button>
-                    <Button
-                      className="tw-px-1 tw-py-1 tw-rounded tw-text-sm"
-                      data-testid="save-roles"
-                      size="custom"
-                      theme="primary"
-                      variant="contained"
-                      onClick={handleRolesChange}>
-                      <FontAwesomeIcon
-                        className="tw-w-3.5 tw-h-3.5"
-                        icon="check"
-                      />
-                    </Button>
-                  </div>
-                </Fragment>
-              ) : (
-                rolesElement
-              )}
-            </div>
-          </Fragment>
+          <div className="tw-mb-4">
+            {isRolesEdit ? (
+              <div className="tw-flex tw-items-center tw-justify-between tw-gap-2">
+                <Select
+                  isClearable
+                  isMulti
+                  aria-label="Select roles"
+                  className="tw-w-full"
+                  id="select-role"
+                  isSearchable={false}
+                  options={userRolesOption}
+                  placeholder="Roles..."
+                  styles={reactSingleSelectCustomStyle}
+                  value={selectedRoles}
+                  onChange={handleOnRolesChange}
+                />
+                <div className="tw-flex tw-justify-end" data-testid="buttons">
+                  <Button
+                    className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
+                    data-testid="cancel-roles"
+                    size="custom"
+                    theme="primary"
+                    variant="contained"
+                    onMouseDown={() => setIsRolesEdit(false)}>
+                    <FontAwesomeIcon
+                      className="tw-w-3.5 tw-h-3.5"
+                      icon="times"
+                    />
+                  </Button>
+                  <Button
+                    className="tw-px-1 tw-py-1 tw-rounded tw-text-sm"
+                    data-testid="save-roles"
+                    size="custom"
+                    theme="primary"
+                    variant="contained"
+                    onClick={handleRolesChange}>
+                    <FontAwesomeIcon
+                      className="tw-w-3.5 tw-h-3.5"
+                      icon="check"
+                    />
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              rolesElement
+            )}
+          </div>
         </Card>
       );
     }
@@ -605,7 +597,7 @@ const Users = ({
       <div className="user-profile-antd-card" data-testid="left-panel">
         <Card
           className="ant-card-feed tw-relative"
-          key="inherited-roles-card"
+          key="left-panel"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '12px',
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/BotsPage/BotsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/BotsPage/BotsPage.component.tsx
index 891f9d38cd4..4207211e9d8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/BotsPage/BotsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/BotsPage/BotsPage.component.tsx
@@ -13,7 +13,7 @@
 
 import { AxiosError, AxiosResponse } from 'axios';
 import { compare } from 'fast-json-patch';
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   getUserByName,
@@ -21,6 +21,7 @@ import {
   updateUserDetail,
 } from '../../axiosAPIs/userAPI';
 import BotsDetail from '../../components/BotsDetail/BotsDetail.component';
+import PageContainerV1 from '../../components/containers/PageContainerV1';
 import Loader from '../../components/Loader/Loader';
 import { UserDetails } from '../../components/Users/Users.interface';
 import { User } from '../../generated/entity/teams/user';
@@ -114,13 +115,9 @@ const BotsPage = () => {
   }, [botsName]);
 
   return (
-    <Fragment>
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <div className="tw-self-center">{getBotsDetailComponent()}</div>
-      )}
-    </Fragment>
+    <PageContainerV1 className="tw-py-4">
+      {isLoading ? <Loader /> : getBotsDetailComponent()}
+    </PageContainerV1>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/CheckboxUserCard.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/CheckboxUserCard.tsx
index 8dee9277a97..76d278e82fe 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/CheckboxUserCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/CheckboxUserCard.tsx
@@ -78,34 +78,32 @@ const CheckboxUserCard = ({
           )}
         </>
       </div>
-      {isActionVisible && (
-        <div className="tw-flex-none">
-          {isCheckBoxes ? (
-            <input
-              checked={isChecked}
-              className="tw-p-1 custom-checkbox"
-              data-testid="checkboxAddUser"
-              type="checkbox"
-              onChange={(e) => {
-                setIsChecked(e.target.checked);
-                onSelect?.(item.id as string, e.target.checked);
-              }}
+      {isActionVisible &&
+        (isCheckBoxes ? (
+          <input
+            checked={isChecked}
+            className="tw-p-1 custom-checkbox tw-self-center"
+            data-testid="checkboxAddUser"
+            type="checkbox"
+            onChange={(e) => {
+              setIsChecked(e.target.checked);
+              onSelect?.(item.id as string, e.target.checked);
+            }}
+          />
+        ) : (
+          <span
+            className="tw-flex-none"
+            data-testid="remove"
+            onClick={() => onRemove?.(item.id as string)}>
+            <SVGIcons
+              alt="delete"
+              className="tw-text-gray-500 tw-cursor-pointer tw-opacity-0 hover:tw-text-gray-700 group-hover:tw-opacity-100"
+              icon="icon-delete"
+              title="Remove"
+              width="16px"
             />
-          ) : (
-            <span
-              data-testid="remove"
-              onClick={() => onRemove?.(item.id as string)}>
-              <SVGIcons
-                alt="delete"
-                className="tw-text-gray-500 tw-cursor-pointer tw-opacity-0 hover:tw-text-gray-700 group-hover:tw-opacity-100"
-                icon="icon-delete"
-                title="Remove"
-                width="16px"
-              />
-            </span>
-          )}
-        </div>
-      )}
+          </span>
+        ))}
     </div>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
index 02135a3c85b..30a0868e8a9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
@@ -186,7 +186,7 @@ const UserCard = ({
             <Fragment>
               <span
                 className={classNames(
-                  'tw-font-normal tw-my-1',
+                  'tw-font-normal',
                   isActionVisible ? 'tw-truncate tw-w-32' : null,
                   {
                     'tw-cursor-pointer hover:tw-underline':
@@ -202,7 +202,7 @@ const UserCard = ({
               {item.name && item.name !== item.displayName && (
                 <span
                   className={classNames(
-                    isActionVisible ? 'tw-truncate tw-w-32 tw-my-1' : null
+                    isActionVisible ? 'tw-truncate tw-w-32' : null
                   )}
                   title={isIconVisible ? item.name : capitalize(item.name)}>
                   {isIconVisible ? item.name : capitalize(item.name)}
@@ -212,18 +212,18 @@ const UserCard = ({
           )}
         </div>
       </div>
-      {isActionVisible && (
-        <div className="tw-flex-none">
-          {isCheckBoxes ? (
-            <input
-              className="tw-p-1 custom-checkbox"
-              data-testid="checkboxAddUser"
-              type="checkbox"
-              onChange={() => {
-                onSelect?.(item.id as string);
-              }}
-            />
-          ) : (
+      {isActionVisible &&
+        (isCheckBoxes ? (
+          <input
+            className="tw-p-1 custom-checkbox tw-self-center"
+            data-testid="checkboxAddUser"
+            type="checkbox"
+            onChange={() => {
+              onSelect?.(item.id as string);
+            }}
+          />
+        ) : (
+          <div className="tw-flex-none">
             <NonAdminAction
               html={<>You do not have permission to update the team.</>}
               isOwner={isOwner}
@@ -245,9 +245,8 @@ const UserCard = ({
                 />
               </span>
             </NonAdminAction>
-          )}
-        </div>
-      )}
+          </div>
+        ))}
     </div>
   );
 };