diff --git a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js
index 18f8f032394..674b2427c1a 100644
--- a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js
@@ -96,13 +96,10 @@ describe('Glossary page should work properly', () => {
   beforeEach(() => {
     cy.goToHomePage();
     // redirecting to glossary page
-    cy.get(
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
+    cy.get('[data-testid="appbar-item-glossary"]')
       .scrollIntoView()
       .should('be.visible')
       .click();
-    cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
     // Todo: need to remove below uncaught exception once tree-view error resolves
     cy.on('uncaught:exception', () => {
       // return false to prevent the error from
@@ -321,13 +318,10 @@ describe('Glossary page should work properly', () => {
 
     addNewTagToEntity(entity, term);
 
-    cy.get(
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
+    cy.get('[data-testid="appbar-item-glossary"]')
       .scrollIntoView()
       .should('be.visible')
       .click();
-    cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
     goToAssetsTab(term);
     cy.get('[data-testid="column"] > :nth-child(1)')
       .contains(entity)
@@ -377,13 +371,11 @@ describe('Glossary page should work properly', () => {
       .should('be.visible')
       .click();
     cy.get('[data-testid="saveAssociatedTag"]').scrollIntoView().click();
-    cy.get(
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
+
+    cy.get('[data-testid="appbar-item-glossary"]')
       .scrollIntoView()
       .should('be.visible')
       .click();
-    cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
     cy.wait(500);
     goToAssetsTab(term);
     cy.get('.tableBody-cell')
diff --git a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Tags.spec.js b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Tags.spec.js
index 00370dc43a4..1c324ed5532 100644
--- a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Tags.spec.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Tags.spec.js
@@ -17,12 +17,7 @@ import { NEW_TAG, NEW_TAG_CATEGORY, SEARCH_ENTITY_TABLE } from '../../constants/
 describe('Tags page should work', () => {
   beforeEach(() => {
     cy.goToHomePage();
-    cy.get(
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
-      .should('be.visible')
-      .click();
-    cy.get('[data-testid="menu-item-Tags"]').should('be.visible').click();
+    cy.get('[data-testid="appbar-item-tags"]').should('be.visible').click();
   });
 
   it('Required Details should be available', () => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
index 1dd10979f03..682b5685f22 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
@@ -12,6 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Card } from 'antd';
 import { capitalize } from 'lodash';
 import React from 'react';
 import { TITLE_FOR_NON_ADMIN_ACTION } from '../../constants/constants';
@@ -22,7 +23,7 @@ import { getActiveCatClass, getCountBadge } from '../../utils/CommonUtils';
 import { getActiveUsers } from '../../utils/TeamUtils';
 import { Button } from '../buttons/Button/Button';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
-import PageLayout from '../containers/PageLayout';
+import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
 import Loader from '../Loader/Loader';
 import TeamDetails from '../TeamDetails/TeamDetails';
 import UserDetails from '../UserDetails/UserDetails';
@@ -88,104 +89,106 @@ const TeamsAndUsers = ({
    */
   const fetchLeftPanel = () => {
     return (
-      <>
-        <div className="tw-mb-8">
-          <div
-            className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b"
-            data-testid="add-team-container">
-            <p className="tw-heading">Teams</p>
-            {hasAccess && (
-              <NonAdminAction
-                position="bottom"
-                title={TITLE_FOR_NON_ADMIN_ACTION}>
-                <Button
-                  className="tw-h-7 tw-px-2 tw-mb-4"
-                  data-testid="add-team-button"
-                  size="small"
-                  theme="primary"
-                  variant="contained"
-                  onClick={() => {
-                    handleAddTeam(true);
-                  }}>
-                  <FontAwesomeIcon icon="plus" />
-                </Button>
-              </NonAdminAction>
-            )}
-          </div>
-          {teams.map((team) => (
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
+        <>
+          <div className="tw-mb-8">
             <div
-              className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-cursor-pointer"
-              data-testid={`team-${team.name}`}
-              key={team.name}
-              onClick={() => {
-                changeCurrentTeam(team.name, false);
-              }}>
-              <div
-                className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-flex tw-justify-between ${getActiveCatClass(
-                  team.name,
-                  currentTeam?.name
-                )}`}>
-                <p
-                  className="tag-category label-category tw-self-center tw-truncate tw-w-52"
-                  data-testid="team-name"
-                  title={team.displayName ?? team.name}>
-                  {team.displayName ?? team.name}
-                </p>
-              </div>
-              {getCountBadge(
-                getActiveUsers(team.users).length,
-                '',
-                currentTeam?.name === team.name
-              )}
-            </div>
-          ))}
-        </div>
-        {hasAccess && (
-          <div>
-            <div className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b">
-              <p className="tw-heading">All Users</p>
+              className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b"
+              data-testid="add-team-container">
+              <p className="tw-heading">Teams</p>
               {hasAccess && (
                 <NonAdminAction
                   position="bottom"
                   title={TITLE_FOR_NON_ADMIN_ACTION}>
                   <Button
                     className="tw-h-7 tw-px-2 tw-mb-4"
-                    data-testid="add-user-button"
+                    data-testid="add-team-button"
                     size="small"
                     theme="primary"
                     variant="contained"
-                    onClick={handleAddNewUser}>
+                    onClick={() => {
+                      handleAddTeam(true);
+                    }}>
                     <FontAwesomeIcon icon="plus" />
                   </Button>
                 </NonAdminAction>
               )}
             </div>
-            {usersData.map((user) => (
+            {teams.map((team) => (
               <div
                 className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-cursor-pointer"
-                data-testid={user.name}
-                key={user.name}
+                data-testid={`team-${team.name}`}
+                key={team.name}
                 onClick={() => {
-                  changeCurrentTeam(user.name, true);
+                  changeCurrentTeam(team.name, false);
                 }}>
                 <div
                   className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-flex tw-justify-between ${getActiveCatClass(
-                    user.name,
-                    activeUserTab
+                    team.name,
+                    currentTeam?.name
                   )}`}>
                   <p
                     className="tag-category label-category tw-self-center tw-truncate tw-w-52"
-                    data-testid="user-type"
-                    title={capitalize(user.name)}>
-                    {capitalize(user.name)}
+                    data-testid="team-name"
+                    title={team.displayName ?? team.name}>
+                    {team.displayName ?? team.name}
                   </p>
                 </div>
-                {getCountBadge(user.count, '', activeUserTab === user.name)}
+                {getCountBadge(
+                  getActiveUsers(team.users).length,
+                  '',
+                  currentTeam?.name === team.name
+                )}
               </div>
             ))}
           </div>
-        )}
-      </>
+          {hasAccess && (
+            <div>
+              <div className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b">
+                <p className="tw-heading">All Users</p>
+                {hasAccess && (
+                  <NonAdminAction
+                    position="bottom"
+                    title={TITLE_FOR_NON_ADMIN_ACTION}>
+                    <Button
+                      className="tw-h-7 tw-px-2 tw-mb-4"
+                      data-testid="add-user-button"
+                      size="small"
+                      theme="primary"
+                      variant="contained"
+                      onClick={handleAddNewUser}>
+                      <FontAwesomeIcon icon="plus" />
+                    </Button>
+                  </NonAdminAction>
+                )}
+              </div>
+              {usersData.map((user) => (
+                <div
+                  className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-cursor-pointer"
+                  data-testid={user.name}
+                  key={user.name}
+                  onClick={() => {
+                    changeCurrentTeam(user.name, true);
+                  }}>
+                  <div
+                    className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-flex tw-justify-between ${getActiveCatClass(
+                      user.name,
+                      activeUserTab
+                    )}`}>
+                    <p
+                      className="tag-category label-category tw-self-center tw-truncate tw-w-52"
+                      data-testid="user-type"
+                      title={capitalize(user.name)}>
+                      {capitalize(user.name)}
+                    </p>
+                  </div>
+                  {getCountBadge(user.count, '', activeUserTab === user.name)}
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      </Card>
     );
   };
 
@@ -195,8 +198,9 @@ const TeamsAndUsers = ({
         <Loader />
       ) : (
         <div
-          className="tw-pb-3 tw-w-full tw-h-full tw-flex tw-flex-col"
-          data-testid="team-and-user-container">
+          className="tw-pb-3 tw-w-full tw-h-full tw-flex tw-flex-col tw-bg-white"
+          data-testid="team-and-user-container"
+          style={{ padding: '14px' }}>
           {!isTeamVisible ? (
             <UserDetails
               currentUserPage={currentUserPage}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/Webhooks.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/Webhooks.tsx
index a8d97f6cc2c..4c4c4256e3b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/Webhooks.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/Webhooks.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Card } from 'antd';
 import classNames from 'classnames';
 import { cloneDeep, isNil, startCase } from 'lodash';
 import React, { FunctionComponent, useEffect, useState } from 'react';
@@ -25,7 +26,7 @@ import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder'
 import NextPrevious from '../common/next-previous/NextPrevious';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
 import WebhookDataCard from '../common/webhook-data-card/WebhookDataCard';
-import PageLayout from '../containers/PageLayout';
+import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
 import { WebhooksProps } from './Webhooks.interface';
 
 const statuses = [
@@ -86,55 +87,57 @@ const Webhooks: FunctionComponent<WebhooksProps> = ({
 
   const fetchLeftPanel = () => {
     return (
-      <>
-        <h6 className="tw-heading tw-text-base">Webhooks</h6>
-        <div className="tw-flex tw-justify-between tw-flex-col">
-          <h6 className="tw-heading tw-mb-0" data-testid="filter-heading">
-            Status
-          </h6>
-          <div className="tw-flex tw-mt-2" />
-        </div>
-        <div
-          className="sidebar-my-data-holder"
-          data-testid="filter-containers-1">
-          {statuses.map((statusType, index) => (
-            <div
-              className="filter-group tw-justify-between tw-mb-3"
-              data-testid={`status-type-${statusType.value}`}
-              key={index}>
-              <div className="tw-flex">
-                <input
-                  checked={selectedStatus.includes(statusType.value)}
-                  className="tw-mr-1 custom-checkbox"
-                  data-testid="checkbox"
-                  type="checkbox"
-                  onChange={() => {
-                    handleStatusSelection(statusType.value);
-                  }}
-                />
-                <div
-                  className="tw-flex tw-items-center filters-title tw-truncate custom-checkbox-label"
-                  data-testid="checkbox-label">
-                  <div className="tw-ml-1">{statusType.name}</div>
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
+        <>
+          <h6 className="tw-heading tw-text-base">Webhooks</h6>
+          <div className="tw-flex tw-justify-between tw-flex-col">
+            <h6 className="tw-heading tw-mb-0" data-testid="filter-heading">
+              Status
+            </h6>
+            <div className="tw-flex tw-mt-2" />
+          </div>
+          <div
+            className="sidebar-my-data-holder"
+            data-testid="filter-containers-1">
+            {statuses.map((statusType, index) => (
+              <div
+                className="filter-group tw-justify-between tw-mb-3"
+                data-testid={`status-type-${statusType.value}`}
+                key={index}>
+                <div className="tw-flex">
+                  <input
+                    checked={selectedStatus.includes(statusType.value)}
+                    className="tw-mr-1 custom-checkbox"
+                    data-testid="checkbox"
+                    type="checkbox"
+                    onChange={() => {
+                      handleStatusSelection(statusType.value);
+                    }}
+                  />
+                  <div
+                    className="tw-flex tw-items-center filters-title tw-truncate custom-checkbox-label"
+                    data-testid="checkbox-label">
+                    <div className="tw-ml-1">{statusType.name}</div>
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
-        </div>
-      </>
+            ))}
+          </div>
+        </>
+      </Card>
     );
   };
 
   const fetchRightPanel = () => {
     return (
-      <>
-        <div className="tw-mb-5 tw-mt-11">
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
+        <div className="tw-my-2">
           The webhook allows external services to be notified of the metadata
           change events happening in your organization through APIs. Register
           callback URLs with webhook integration to receive metadata event
           notifications. You can add, list, update, and delete webhooks.
         </div>
-      </>
+      </Card>
     );
   };
 
@@ -167,7 +170,7 @@ const Webhooks: FunctionComponent<WebhooksProps> = ({
 
   return data.length ? (
     <PageLayout leftPanel={fetchLeftPanel()} rightPanel={fetchRightPanel()}>
-      <div>
+      <div className="tw-bg-white" style={{ padding: '14px' }}>
         {filteredData.length ? (
           <>
             <div className="tw-flex tw-justify-end tw-items-center">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
index 517c409ed68..f4e193d3985 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
@@ -24,6 +24,14 @@ interface PageLayoutProp {
   classes?: string;
 }
 
+export const leftPanelAntCardStyle = {
+  border: '1px rgb(221, 227, 234) solid',
+  borderRadius: '8px',
+  boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+  marginRight: '4px',
+  marginLeft: '4px',
+};
+
 const PageLayout: FC<PageLayoutProp> = ({
   leftPanel,
   header,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx
index 6dceb0c264e..59a2067273d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx
@@ -134,7 +134,7 @@ const DropDown: React.FC<DropDownProp> = ({
 
                 {isDropDownIconVisible ? (
                   <DropdownIcon
-                    style={{ marginTop: '7px', color: normalLink }}
+                    style={{ marginTop: '5px', color: normalLink }}
                   />
                 ) : null}
               </>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
index 9692d39a240..6c47ae6530f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
@@ -89,6 +89,26 @@ const NavBar = ({
                 label="Settings"
                 type="link"
               />
+              <NavLink
+                className="tw-nav focus:tw-no-underline"
+                data-testid="appbar-item-glossary"
+                id="glossary"
+                style={navStyle(pathname.startsWith('/glossary'))}
+                to={{
+                  pathname: '/glossary',
+                }}>
+                Glossaries
+              </NavLink>
+              <NavLink
+                className="tw-nav focus:tw-no-underline"
+                data-testid="appbar-item-tags"
+                id="tags"
+                style={navStyle(pathname.startsWith('/tags'))}
+                to={{
+                  pathname: '/tags',
+                }}>
+                Tags
+              </NavLink>
             </div>
           </div>
           <div
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
index 0cda0a14413..68e7a6b1b9c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
@@ -417,10 +417,8 @@ export const navLinkSettings = [
     disabled: false,
     isAdminOnly: true,
   },
-  { name: 'Glossaries', to: '/glossary', disabled: false },
   { name: 'Roles', to: '/roles', disabled: false, isAdminOnly: true },
   { name: 'Services', to: '/services', disabled: false },
-  { name: 'Tags', to: '/tags', disabled: false },
   {
     name: 'Teams & Users',
     to: ROUTES.TEAMS_AND_USERS,
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
index c51ed76ff75..274130352e4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Card } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
@@ -37,7 +38,9 @@ import Description from '../../components/common/description/Description';
 import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayout, {
+  leftPanelAntCardStyle,
+} from '../../components/containers/PageLayout';
 import Loader from '../../components/Loader/Loader';
 import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
 import AddRoleModal from '../../components/Modals/RoleModal/AddRoleModal';
@@ -579,33 +582,39 @@ const RolesPage = () => {
 
   const fetchLeftPanel = (roles: Array<Role>) => {
     return (
-      <Fragment>
-        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
-          <h6
-            className="tw-heading tw-text-base"
-            data-testid="left-panel-title">
-            Roles
-          </h6>
-        </div>
-        {roles &&
-          roles.map((role) => (
-            <div
-              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
-                role.name,
-                currentRole?.name
-              )}`}
-              data-testid="role-name-container"
-              key={role.name}
-              onClick={() => setCurrentRole(role)}>
-              <p
-                className="tag-category label-category tw-self-center tw-truncate tw-w-52"
-                title={role.displayName}>
-                <span>{role.displayName}</span>{' '}
-              </p>
-              {role.defaultRole ? getDefaultBadge() : null}
-            </div>
-          ))}
-      </Fragment>
+      <Card
+        data-testid="data-summary-container"
+        style={leftPanelAntCardStyle}
+        title={
+          <div className="tw-flex tw-justify-between tw-items-center">
+            <h6
+              className="tw-heading tw-text-base"
+              data-testid="left-panel-title">
+              Roles
+            </h6>
+          </div>
+        }>
+        <Fragment>
+          {roles &&
+            roles.map((role) => (
+              <div
+                className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
+                  role.name,
+                  currentRole?.name
+                )}`}
+                data-testid="role-name-container"
+                key={role.name}
+                onClick={() => setCurrentRole(role)}>
+                <span
+                  className="tag-category label-category tw-self-center tw-truncate tw-w-52"
+                  title={role.displayName}>
+                  <span>{role.displayName}</span>{' '}
+                </span>
+                {role.defaultRole ? getDefaultBadge() : null}
+              </div>
+            ))}
+        </Fragment>
+      </Card>
     );
   };
 
@@ -1113,7 +1122,10 @@ const RolesPage = () => {
             {isLoading ? (
               <Loader />
             ) : (
-              <div className="tw-pb-3" data-testid="role-container">
+              <div
+                className="tw-pb-3 tw-bg-white"
+                data-testid="role-container"
+                style={{ padding: '14px' }}>
                 {getRolesContainer()}
 
                 {getAddRoleForm()}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
index 3500490f6ae..6e38f2a0e31 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Card } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { isNil } from 'lodash';
@@ -25,7 +26,9 @@ import NextPrevious from '../../components/common/next-previous/NextPrevious';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayout, {
+  leftPanelAntCardStyle,
+} from '../../components/containers/PageLayout';
 import Loader from '../../components/Loader/Loader';
 import {
   getServiceDetailsPath,
@@ -231,36 +234,41 @@ const ServicesPage = () => {
 
   const fetchLeftPanel = () => {
     return (
-      <>
-        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
-          <h6 className="tw-heading tw-text-base">Services</h6>
-        </div>
+      <Card
+        data-testid="data-summary-container"
+        style={leftPanelAntCardStyle}
+        title={
+          <div className="tw-flex tw-justify-between tw-items-center">
+            <h6 className="tw-heading tw-text-base">Services</h6>
+          </div>
+        }>
+        <>
+          {getServiceTabs()?.map((tab, index) => {
+            return (
+              <div
+                className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
+                  tab.name,
+                  serviceName
+                )}`}
+                data-testid="tab"
+                key={index}
+                onClick={() => {
+                  handleTabChange(tab.name);
+                }}>
+                <p className="tw-text-center tw-self-center label-category">
+                  {tab.displayName}
+                </p>
 
-        {getServiceTabs()?.map((tab, index) => {
-          return (
-            <div
-              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
-                tab.name,
-                serviceName
-              )}`}
-              data-testid="tab"
-              key={index}
-              onClick={() => {
-                handleTabChange(tab.name);
-              }}>
-              <p className="tw-text-center tw-self-center label-category">
-                {tab.displayName}
-              </p>
-
-              {getCountBadge(
-                servicesCount[tab.name],
-                'tw-self-center',
-                tab.name === serviceName
-              )}
-            </div>
-          );
-        })}
-      </>
+                {getCountBadge(
+                  servicesCount[tab.name],
+                  'tw-self-center',
+                  tab.name === serviceName
+                )}
+              </div>
+            );
+          })}
+        </>
+      </Card>
     );
   };
 
@@ -406,53 +414,56 @@ const ServicesPage = () => {
           className="tw-grid xl:tw-grid-cols-4 tw-grid-cols-2 tw-gap-4 tw-mb-4"
           data-testid="data-container">
           {serviceList.map((service, index) => (
-            <div
-              className="tw-card tw-flex tw-py-2 tw-px-3 tw-justify-between tw-text-grey-muted"
-              data-testid="service-card"
-              key={index}>
-              <div className="tw-flex tw-flex-col tw-justify-between tw-truncate">
-                <div>
-                  <Link to={getServiceDetailsPath(service.name, serviceName)}>
-                    <button>
-                      <h6
-                        className="tw-text-base tw-text-grey-body tw-font-medium tw-text-left tw-truncate tw-w-48"
-                        data-testid={`service-name-${getEntityName(
-                          service as EntityReference
-                        )}`}
-                        title={getEntityName(service as EntityReference)}>
-                        {getEntityName(service as EntityReference)}
-                      </h6>
-                    </button>
-                  </Link>
-                  <div
-                    className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
-                    data-testid="service-description">
-                    {service.description ? (
-                      <RichTextEditorPreviewer
-                        enableSeeMoreVariant={false}
-                        markdown={service.description}
-                      />
-                    ) : (
-                      <span className="tw-no-description">No description</span>
-                    )}
+            <Card key={index} style={leftPanelAntCardStyle}>
+              <div
+                className="tw-flex tw-py-2 tw-px-3 tw-justify-between tw-text-grey-muted"
+                data-testid="service-card">
+                <div className="tw-flex tw-flex-col tw-justify-between tw-truncate">
+                  <div>
+                    <Link to={getServiceDetailsPath(service.name, serviceName)}>
+                      <button>
+                        <h6
+                          className="tw-text-base tw-text-grey-body tw-font-medium tw-text-left tw-truncate tw-w-48"
+                          data-testid={`service-name-${getEntityName(
+                            service as EntityReference
+                          )}`}
+                          title={getEntityName(service as EntityReference)}>
+                          {getEntityName(service as EntityReference)}
+                        </h6>
+                      </button>
+                    </Link>
+                    <div
+                      className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
+                      data-testid="service-description">
+                      {service.description ? (
+                        <RichTextEditorPreviewer
+                          enableSeeMoreVariant={false}
+                          markdown={service.description}
+                        />
+                      ) : (
+                        <span className="tw-no-description">
+                          No description
+                        </span>
+                      )}
+                    </div>
+                    {getOptionalFields(service)}
+                  </div>
+                  <div className="" data-testid="service-type">
+                    <label className="tw-mb-0">Type:</label>
+                    <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
+                      {service.serviceType}
+                    </span>
                   </div>
-                  {getOptionalFields(service)}
                 </div>
-                <div className="" data-testid="service-type">
-                  <label className="tw-mb-0">Type:</label>
-                  <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
-                    {service.serviceType}
-                  </span>
+                <div className="tw-flex tw-flex-col tw-justify-between tw-flex-none">
+                  <div
+                    className="tw-flex tw-justify-end"
+                    data-testid="service-icon">
+                    {getServiceLogo(service.serviceType || '', 'tw-h-8')}
+                  </div>
                 </div>
               </div>
-              <div className="tw-flex tw-flex-col tw-justify-between tw-flex-none">
-                <div
-                  className="tw-flex tw-justify-end"
-                  data-testid="service-icon">
-                  {getServiceLogo(service.serviceType || '', 'tw-h-8')}
-                </div>
-              </div>
-            </div>
+            </Card>
           ))}
         </div>
       </Fragment>
@@ -490,7 +501,7 @@ const ServicesPage = () => {
       <ErrorPlaceHolder>{errorMessage}</ErrorPlaceHolder>
     ) : (
       <PageLayout leftPanel={fetchLeftPanel()}>
-        <div data-testid="services-container">
+        <div data-testid="services-container" style={{ padding: '14px' }}>
           {getServiceList()}
 
           {getPagination()}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
index 756db894ac7..8855dd41ba2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
@@ -12,6 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Card } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { isUndefined, toLower } from 'lodash';
@@ -34,7 +35,9 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayout, {
+  leftPanelAntCardStyle,
+} from '../../components/containers/PageLayout';
 import Loader from '../../components/Loader/Loader';
 import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
 import FormModal from '../../components/Modals/FormModal';
@@ -397,52 +400,56 @@ const TagsPage = () => {
 
   const fetchLeftPanel = () => {
     return (
-      <>
-        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
-          <h6 className="tw-heading tw-text-base">Tag Categories</h6>
-          <NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
-            <Button
-              className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
-                'tw-opacity-40': !isAdminUser && !isAuthDisabled,
-              })}
-              data-testid="add-category"
-              size="small"
-              theme="primary"
-              variant="contained"
-              onClick={() => {
-                setIsAddingCategory((prevState) => !prevState);
-                setErrorDataCategory(undefined);
-              }}>
-              <FontAwesomeIcon icon="plus" />
-            </Button>
-          </NonAdminAction>
-        </div>
-        {categories &&
-          categories.map((category: TagCategory) => (
-            <div
-              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
-                category.name,
-                currentCategory?.name
-              )}`}
-              data-testid="side-panel-category"
-              key={category.name}
-              onClick={() => {
-                fetchCurrentCategory(category.name);
-              }}>
-              <p className="tw-text-center tw-self-center tag-category label-category">
-                {category.displayName ?? category.name}
-              </p>
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
+        <>
+          <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
+            <h6 className="tw-heading tw-text-base">Tag Categories</h6>
+            <NonAdminAction
+              position="bottom"
+              title={TITLE_FOR_NON_ADMIN_ACTION}>
+              <Button
+                className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
+                  'tw-opacity-40': !isAdminUser && !isAuthDisabled,
+                })}
+                data-testid="add-category"
+                size="small"
+                theme="primary"
+                variant="contained"
+                onClick={() => {
+                  setIsAddingCategory((prevState) => !prevState);
+                  setErrorDataCategory(undefined);
+                }}>
+                <FontAwesomeIcon icon="plus" />
+              </Button>
+            </NonAdminAction>
+          </div>
+          {categories &&
+            categories.map((category: TagCategory) => (
+              <div
+                className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
+                  category.name,
+                  currentCategory?.name
+                )}`}
+                data-testid="side-panel-category"
+                key={category.name}
+                onClick={() => {
+                  fetchCurrentCategory(category.name);
+                }}>
+                <p className="tw-text-center tw-self-center tag-category label-category">
+                  {category.displayName ?? category.name}
+                </p>
 
-              {getCountBadge(
-                currentCategory?.name === category.name
-                  ? currentCategory.children?.length
-                  : category.children?.length || 0,
-                'tw-self-center',
-                currentCategory?.name === category.name
-              )}
-            </div>
-          ))}
-      </>
+                {getCountBadge(
+                  currentCategory?.name === category.name
+                    ? currentCategory.children?.length
+                    : category.children?.length || 0,
+                  'tw-self-center',
+                  currentCategory?.name === category.name
+                )}
+              </div>
+            ))}
+        </>
+      </Card>
     );
   };
 
@@ -458,7 +465,10 @@ const TagsPage = () => {
             {isLoading ? (
               <Loader />
             ) : (
-              <div className="full-height" data-testid="tags-container">
+              <div
+                className="full-height tw-bg-white"
+                data-testid="tags-container"
+                style={{ padding: '14px' }}>
                 {currentCategory && (
                   <div
                     className="tw-flex tw-justify-between tw-items-center"