diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx
index c2fc163834a..7114f4191e7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { PlusOutlined } from '@ant-design/icons';
 import {
   Button,
   Card,
@@ -21,6 +22,8 @@ import {
   Typography,
 } from 'antd';
 import { AxiosError } from 'axios';
+import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
+import { ERROR_PLACEHOLDER_TYPE, SIZE } from 'enums/common.enum';
 import { isEmpty, isUndefined } from 'lodash';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -276,27 +279,27 @@ const KPIChart: FC<Props> = ({ chartFilter, kpiList }) => {
         <Space
           className="w-full justify-center items-center"
           direction="vertical">
-          <Typography.Text>
-            {t('message.no-kpi-available-add-new-one')}
-          </Typography.Text>
-          <AntdTooltip
-            title={
-              isAdminUser
-                ? t('label.add-entity', {
+          <ErrorPlaceHolder
+            button={
+              <AntdTooltip
+                title={!isAdminUser && t('message.no-permission-for-action')}>
+                <Button
+                  ghost
+                  icon={<PlusOutlined />}
+                  type="primary"
+                  onClick={handleAddKpi}>
+                  {t('label.add-entity', {
                     entity: t('label.kpi-uppercase'),
-                  })
-                : t('message.no-permission-for-action')
-            }>
-            <Button
-              className="tw-border-primary tw-text-primary"
-              disabled={!isAdminUser}
-              type="default"
-              onClick={handleAddKpi}>
-              {t('label.add-entity', {
-                entity: t('label.kpi-uppercase'),
-              })}
-            </Button>
-          </AntdTooltip>
+                  })}
+                </Button>
+              </AntdTooltip>
+            }
+            className="p-y-lg"
+            permission={isAdminUser}
+            size={SIZE.MEDIUM}
+            type={ERROR_PLACEHOLDER_TYPE.ASSIGN}>
+            {t('message.no-kpi-available-add-new-one')}
+          </ErrorPlaceHolder>
         </Space>
       )}
     </Card>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TestSuitePipelineTab/TestSuitePipelineTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TestSuitePipelineTab/TestSuitePipelineTab.component.tsx
index b06783f5d06..703214104c7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TestSuitePipelineTab/TestSuitePipelineTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TestSuitePipelineTab/TestSuitePipelineTab.component.tsx
@@ -11,11 +11,14 @@
  *  limitations under the License.
  */
 
-import { CheckOutlined } from '@ant-design/icons';
+import { CheckOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Col, Popover, Row, Table, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
+import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
 import cronstrue from 'cronstrue';
+import { ERROR_PLACEHOLDER_TYPE } from 'enums/common.enum';
+import { isEmpty } from 'lodash';
 import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
@@ -550,13 +553,44 @@ const TestSuitePipelineTab = () => {
     currTriggerId,
   ]);
 
+  const errorPlaceholder = useMemo(
+    () => (
+      <ErrorPlaceHolder
+        button={
+          <Button
+            ghost
+            className="p-x-lg"
+            data-testid="add-placeholder-button"
+            icon={<PlusOutlined />}
+            type="primary"
+            onClick={() => {
+              history.push(getTestSuiteIngestionPath(testSuiteFQN));
+            }}>
+            {t('label.add')}
+          </Button>
+        }
+        className="mt-24"
+        heading={t('label.pipeline')}
+        permission={createPermission}
+        type={ERROR_PLACEHOLDER_TYPE.ASSIGN}
+      />
+    ),
+    [testSuiteFQN]
+  );
+
   if (isLoading || isFetchingStatus) {
     return <Loader />;
   }
 
-  return !isAirflowAvailable ? (
-    <ErrorPlaceHolderIngestion />
-  ) : (
+  if (!isAirflowAvailable) {
+    return <ErrorPlaceHolderIngestion />;
+  }
+
+  if (isEmpty(testSuitePipelines)) {
+    return errorPlaceholder;
+  }
+
+  return (
     <TestCaseCommonTabContainer
       buttonName={t('label.add-entity', {
         entity: t('label.ingestion'),
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 734d1140f34..0982bb08160 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
@@ -159,7 +159,7 @@ const AlertsPage = () => {
     []
   );
 
-  if (isEmpty(alerts)) {
+  if (isEmpty(alerts) && !loading) {
     return (
       <ErrorPlaceHolder
         permission
@@ -200,7 +200,7 @@ const AlertsPage = () => {
             bordered
             columns={columns}
             dataSource={alerts}
-            loading={{ spinning: loading, indicator: <Loader /> }}
+            loading={{ spinning: loading, indicator: <Loader size="small" /> }}
             pagination={false}
             rowKey="id"
             size="middle"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
index 4356cea5ac1..6a511678b65 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
@@ -188,7 +188,7 @@ const KPIList = () => {
 
   if (isEmpty(kpiList)) {
     return (
-      <div className="mt-24 w-full">
+      <div className="m-t-lg w-full">
         <EmptyGraphPlaceholder />
       </div>
     );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
index d2775b15147..c9ebcdbdc36 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
@@ -331,6 +331,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
             entity: t('label.database-schema'),
           })
         );
+
         setError(errMsg);
         showErrorToast(errMsg);
       })
@@ -638,7 +639,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
   const getSchemaTableList = () => {
     return (
       <Col span={24}>
-        {isEmpty(tableData) && !showDeletedTables ? (
+        {isEmpty(tableData) && !showDeletedTables && !tableDataLoading ? (
           <ErrorPlaceHolder
             className="mt-0-important"
             type={ERROR_PLACEHOLDER_TYPE.NO_DATA}
@@ -650,10 +651,6 @@ const DatabaseSchemaPage: FunctionComponent = () => {
             columns={tableColumn}
             data-testid="databaseSchema-tables"
             dataSource={tableData}
-            loading={{
-              spinning: tableDataLoading,
-              indicator: <Loader size="small" />,
-            }}
             locale={{
               emptyText: <FilterTablePlaceHolder />,
             }}
@@ -786,162 +783,168 @@ const DatabaseSchemaPage: FunctionComponent = () => {
     appState.inPageSearchText = '';
   }, []);
 
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (error) {
+    return (
+      <ErrorPlaceHolder>
+        <p data-testid="error-message">{error}</p>
+      </ErrorPlaceHolder>
+    );
+  }
+
   return (
     <Fragment>
-      {isLoading ? (
-        <Loader />
-      ) : error ? (
-        <ErrorPlaceHolder>
-          <p data-testid="error-message">{error}</p>
-        </ErrorPlaceHolder>
-      ) : (
-        <>
-          {databaseSchemaPermission.ViewAll ||
-          databaseSchemaPermission.ViewBasic ? (
-            <PageContainerV1>
-              <PageLayoutV1
-                pageTitle={t('label.entity-detail-plural', {
-                  entity: getEntityName(databaseSchema),
-                })}>
-                {IsSchemaDetailsLoading ? (
-                  <Skeleton
-                    active
-                    paragraph={{
-                      rows: 3,
-                      width: ['20%', '80%', '60%'],
-                    }}
+      {databaseSchemaPermission.ViewAll ||
+      databaseSchemaPermission.ViewBasic ? (
+        <PageContainerV1>
+          <PageLayoutV1
+            pageTitle={t('label.entity-detail-plural', {
+              entity: getEntityName(databaseSchema),
+            })}>
+            {IsSchemaDetailsLoading ? (
+              <Skeleton
+                active
+                paragraph={{
+                  rows: 3,
+                  width: ['20%', '80%', '60%'],
+                }}
+              />
+            ) : (
+              <>
+                <Col span={24}>
+                  <EntityPageInfo
+                    isRecursiveDelete
+                    canDelete={databaseSchemaPermission.Delete}
+                    currentOwner={databaseSchema?.owner}
+                    deleted={databaseSchema?.deleted}
+                    entityFieldThreads={getEntityFieldThreadCounts(
+                      EntityField.TAGS,
+                      entityFieldThreadCount
+                    )}
+                    entityFqn={databaseSchemaFQN}
+                    entityId={databaseSchemaId}
+                    entityName={databaseSchemaName}
+                    entityType={EntityType.DATABASE_SCHEMA}
+                    extraDropdownContent={extraDropdownContent}
+                    extraInfo={extraInfo}
+                    followersList={[]}
+                    isTagEditable={
+                      databaseSchemaPermission.EditAll ||
+                      databaseSchemaPermission.EditTags
+                    }
+                    serviceType={databaseSchema?.serviceType ?? ''}
+                    tags={tags}
+                    tagsHandler={onTagUpdate}
+                    tier={tier}
+                    titleLinks={slashedTableName}
+                    updateOwner={
+                      databaseSchemaPermission.EditOwner ||
+                      databaseSchemaPermission.EditAll
+                        ? handleUpdateOwner
+                        : undefined
+                    }
+                    onRestoreEntity={handleRestoreDatabaseSchema}
+                    onThreadLinkSelect={onThreadLinkSelect}
                   />
-                ) : (
-                  <>
-                    <Col span={24}>
-                      <EntityPageInfo
-                        isRecursiveDelete
-                        canDelete={databaseSchemaPermission.Delete}
-                        currentOwner={databaseSchema?.owner}
-                        deleted={databaseSchema?.deleted}
-                        entityFieldThreads={getEntityFieldThreadCounts(
-                          EntityField.TAGS,
-                          entityFieldThreadCount
-                        )}
-                        entityFqn={databaseSchemaFQN}
-                        entityId={databaseSchemaId}
-                        entityName={databaseSchemaName}
-                        entityType={EntityType.DATABASE_SCHEMA}
-                        extraDropdownContent={extraDropdownContent}
-                        extraInfo={extraInfo}
-                        followersList={[]}
-                        isTagEditable={
-                          databaseSchemaPermission.EditAll ||
-                          databaseSchemaPermission.EditTags
-                        }
-                        serviceType={databaseSchema?.serviceType ?? ''}
-                        tags={tags}
-                        tagsHandler={onTagUpdate}
-                        tier={tier}
-                        titleLinks={slashedTableName}
-                        updateOwner={
-                          databaseSchemaPermission.EditOwner ||
-                          databaseSchemaPermission.EditAll
-                            ? handleUpdateOwner
-                            : undefined
-                        }
-                        onRestoreEntity={handleRestoreDatabaseSchema}
-                        onThreadLinkSelect={onThreadLinkSelect}
-                      />
-                    </Col>
-                  </>
-                )}
-                <Col span={24}>
-                  <Row className="m-t-xss">
-                    <Col span={24}>
-                      <TabsPane
-                        activeTab={activeTab}
-                        className="flex-initial"
-                        setActiveTab={activeTabHandler}
-                        tabs={tabs}
-                      />
-                    </Col>
-                    <Col className="p-y-md" span={24}>
-                      {activeTab === 1 && (
-                        <Card className="h-full">
-                          <Row gutter={[16, 16]}>
-                            <Col data-testid="description-container" span={24}>
-                              <Description
-                                description={description}
-                                entityFieldThreads={getEntityFieldThreadCounts(
-                                  EntityField.DESCRIPTION,
-                                  entityFieldThreadCount
-                                )}
-                                entityFqn={databaseSchemaFQN}
-                                entityName={databaseSchemaName}
-                                entityType={EntityType.DATABASE_SCHEMA}
-                                hasEditAccess={
-                                  databaseSchemaPermission.EditDescription ||
-                                  databaseSchemaPermission.EditAll
-                                }
-                                isEdit={isEdit}
-                                onCancel={onCancel}
-                                onDescriptionEdit={onDescriptionEdit}
-                                onDescriptionUpdate={onDescriptionUpdate}
-                                onThreadLinkSelect={onThreadLinkSelect}
-                              />
-                            </Col>
-                            {getSchemaTableList()}
-                          </Row>
-                        </Card>
-                      )}
-                      {activeTab === 2 && (
-                        <Card className="p-t-xss p-b-md">
-                          <Row className="entity-feed-list" id="activityfeed">
-                            <Col offset={4} span={16}>
-                              <ActivityFeedList
-                                hideFeedFilter
-                                hideThreadFilter
-                                isEntityFeed
-                                withSidePanel
-                                className=""
-                                deletePostHandler={deletePostHandler}
-                                entityName={databaseSchemaName}
-                                feedList={entityThread}
-                                postFeedHandler={postFeedHandler}
-                                updateThreadHandler={updateThreadHandler}
-                              />
-                            </Col>
-                          </Row>
-                        </Card>
-                      )}
-                      <Col
-                        data-testid="observer-element"
-                        id="observer-element"
-                        ref={elementRef as RefObject<HTMLDivElement>}
-                        span={24}>
-                        {getLoader()}
-                      </Col>
-                    </Col>
-                  </Row>
                 </Col>
+              </>
+            )}
+            <Col span={24}>
+              <Row className="m-t-xss">
                 <Col span={24}>
-                  {threadLink ? (
-                    <ActivityThreadPanel
-                      createThread={createThread}
-                      deletePostHandler={deletePostHandler}
-                      open={Boolean(threadLink)}
-                      postFeedHandler={postFeedHandler}
-                      threadLink={threadLink}
-                      updateThreadHandler={updateThreadHandler}
-                      onCancel={onThreadPanelClose}
-                    />
-                  ) : null}
+                  <TabsPane
+                    activeTab={activeTab}
+                    className="flex-initial"
+                    setActiveTab={activeTabHandler}
+                    tabs={tabs}
+                  />
                 </Col>
-              </PageLayoutV1>
-            </PageContainerV1>
-          ) : (
-            <ErrorPlaceHolder
-              className="mt-24"
-              type={ERROR_PLACEHOLDER_TYPE.PERMISSION}
-            />
-          )}
-        </>
+                <Col className="p-y-md" span={24}>
+                  {activeTab === 1 && (
+                    <Card className="h-full">
+                      {tableDataLoading ? (
+                        <Loader />
+                      ) : (
+                        <Row gutter={[16, 16]}>
+                          <Col data-testid="description-container" span={24}>
+                            <Description
+                              description={description}
+                              entityFieldThreads={getEntityFieldThreadCounts(
+                                EntityField.DESCRIPTION,
+                                entityFieldThreadCount
+                              )}
+                              entityFqn={databaseSchemaFQN}
+                              entityName={databaseSchemaName}
+                              entityType={EntityType.DATABASE_SCHEMA}
+                              hasEditAccess={
+                                databaseSchemaPermission.EditDescription ||
+                                databaseSchemaPermission.EditAll
+                              }
+                              isEdit={isEdit}
+                              onCancel={onCancel}
+                              onDescriptionEdit={onDescriptionEdit}
+                              onDescriptionUpdate={onDescriptionUpdate}
+                              onThreadLinkSelect={onThreadLinkSelect}
+                            />
+                          </Col>
+                          {getSchemaTableList()}
+                        </Row>
+                      )}
+                    </Card>
+                  )}
+                  {activeTab === 2 && (
+                    <Card className="p-t-xss p-b-md">
+                      <Row className="entity-feed-list" id="activityfeed">
+                        <Col offset={4} span={16}>
+                          <ActivityFeedList
+                            hideFeedFilter
+                            hideThreadFilter
+                            isEntityFeed
+                            withSidePanel
+                            className=""
+                            deletePostHandler={deletePostHandler}
+                            entityName={databaseSchemaName}
+                            feedList={entityThread}
+                            postFeedHandler={postFeedHandler}
+                            updateThreadHandler={updateThreadHandler}
+                          />
+                        </Col>
+                      </Row>
+                    </Card>
+                  )}
+                  <Col
+                    data-testid="observer-element"
+                    id="observer-element"
+                    ref={elementRef as RefObject<HTMLDivElement>}
+                    span={24}>
+                    {getLoader()}
+                  </Col>
+                </Col>
+              </Row>
+            </Col>
+            <Col span={24}>
+              {threadLink ? (
+                <ActivityThreadPanel
+                  createThread={createThread}
+                  deletePostHandler={deletePostHandler}
+                  open={Boolean(threadLink)}
+                  postFeedHandler={postFeedHandler}
+                  threadLink={threadLink}
+                  updateThreadHandler={updateThreadHandler}
+                  onCancel={onThreadPanelClose}
+                />
+              ) : null}
+            </Col>
+          </PageLayoutV1>
+        </PageContainerV1>
+      ) : (
+        <ErrorPlaceHolder
+          className="mt-24"
+          type={ERROR_PLACEHOLDER_TYPE.PERMISSION}
+        />
       )}
     </Fragment>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx
index 7183fcfdad7..9b06a8b0ff8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx
@@ -68,7 +68,7 @@ const TestSuitePage = () => {
   const { isAdminUser } = useAuth();
   const { isAuthDisabled } = useAuthContext();
   const [testSuites, setTestSuites] = useState<Array<TestSuite>>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [testSuitePage, setTestSuitePage] = useState(INITIAL_PAGING_VALUE);
   const [testSuitePaging, setTestSuitePaging] = useState<Paging>(pagingObject);
   const [selectedTestSuite, setSelectedTestSuite] = useState<TestSuite>();
@@ -85,6 +85,7 @@ const TestSuitePage = () => {
   }, [permissions]);
 
   const handleShowDeleted = (checked: boolean) => {
+    setIsLoading(true);
     setShowDeleted(checked);
   };
 
@@ -232,11 +233,7 @@ const TestSuitePage = () => {
     [createPermission]
   );
 
-  if (isLoading) {
-    return <Loader />;
-  }
-
-  if (isEmpty(testSuites) && !showDeleted) {
+  if (isEmpty(testSuites) && !showDeleted && !isLoading) {
     return <PageContainerV1>{errorPlaceHolder}</PageContainerV1>;
   }
 
@@ -284,7 +281,10 @@ const TestSuitePage = () => {
               columns={columns}
               data-testid="test-suite-table"
               dataSource={testSuites}
-              loading={{ spinning: isLoading, indicator: <Loader /> }}
+              loading={{
+                spinning: isLoading,
+                indicator: <Loader size="small" />,
+              }}
               locale={{
                 emptyText: <FilterTablePlaceHolder />,
               }}
@@ -306,6 +306,7 @@ const TestSuitePage = () => {
           )}
         </Row>
         <DeleteWidgetModal
+          isRecursiveDelete
           afterDeleteAction={fetchTestSuites}
           allowSoftDelete={!showDeleted}
           entityId={selectedTestSuite?.id || ''}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
index ac25ee4da51..70a7d0d34a1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
@@ -770,255 +770,273 @@ const DatabaseDetails: FunctionComponent = () => {
     setIsEditable(false);
   };
 
+  const databaseTable = useMemo(() => {
+    if (schemaDataLoading) {
+      return <Loader />;
+    } else if (!isEmpty(schemaData)) {
+      return (
+        <Col span={24}>
+          <Table
+            bordered
+            className="table-shadow"
+            columns={tableColumn}
+            data-testid="database-databaseSchemas"
+            dataSource={schemaData}
+            loading={{
+              spinning: schemaDataLoading,
+              indicator: <Loader size="small" />,
+            }}
+            pagination={false}
+            rowKey="id"
+            size="small"
+          />
+          {Boolean(
+            !isNil(databaseSchemaPaging.after) ||
+              !isNil(databaseSchemaPaging.before)
+          ) && (
+            <NextPrevious
+              currentPage={currentPage}
+              pageSize={PAGE_SIZE}
+              paging={databaseSchemaPaging}
+              pagingHandler={databaseSchemaPagingHandler}
+              totalCount={databaseSchemaPaging.total}
+            />
+          )}
+        </Col>
+      );
+    } else {
+      return <ErrorPlaceHolder />;
+    }
+  }, [
+    schemaDataLoading,
+    schemaData,
+    tableColumn,
+    databaseSchemaPaging,
+    currentPage,
+    databaseSchemaPagingHandler,
+  ]);
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (error) {
+    return (
+      <ErrorPlaceHolder>
+        <p data-testid="error-message">{error}</p>
+      </ErrorPlaceHolder>
+    );
+  }
+
   return (
     <>
-      {isLoading ? (
-        <Loader />
-      ) : error ? (
-        <ErrorPlaceHolder>
-          <p data-testid="error-message">{error}</p>
-        </ErrorPlaceHolder>
-      ) : (
-        <>
-          {databasePermission.ViewAll || databasePermission.ViewBasic ? (
-            <PageContainerV1>
-              <PageLayoutV1
-                pageTitle={t('label.entity-detail-plural', {
-                  entity: getEntityName(database),
-                })}>
-                {isDatabaseDetailsLoading ? (
-                  <Skeleton
-                    active
-                    paragraph={{
-                      rows: 3,
-                      width: ['20%', '80%', '60%'],
-                    }}
-                  />
-                ) : (
-                  <>
-                    <Col span={24}>
-                      {database && (
-                        <EntityHeader
-                          breadcrumb={slashedDatabaseName}
-                          entityData={database}
+      {databasePermission.ViewAll || databasePermission.ViewBasic ? (
+        <PageContainerV1>
+          <PageLayoutV1
+            pageTitle={t('label.entity-detail-plural', {
+              entity: getEntityName(database),
+            })}>
+            {isDatabaseDetailsLoading ? (
+              <Skeleton
+                active
+                paragraph={{
+                  rows: 3,
+                  width: ['20%', '80%', '60%'],
+                }}
+              />
+            ) : (
+              <>
+                <Col span={24}>
+                  {database && (
+                    <EntityHeader
+                      breadcrumb={slashedDatabaseName}
+                      entityData={database}
+                      entityType={EntityType.DATABASE}
+                      extra={
+                        <ManageButton
+                          isRecursiveDelete
+                          allowSoftDelete={false}
+                          canDelete={databasePermission.Delete}
+                          entityFQN={databaseFQN}
+                          entityId={databaseId}
+                          entityName={databaseName}
                           entityType={EntityType.DATABASE}
-                          extra={
-                            <ManageButton
-                              isRecursiveDelete
-                              allowSoftDelete={false}
-                              canDelete={databasePermission.Delete}
-                              entityFQN={databaseFQN}
-                              entityId={databaseId}
-                              entityName={databaseName}
-                              entityType={EntityType.DATABASE}
-                            />
-                          }
-                          icon={
-                            <img
-                              className="h-8"
-                              src={serviceTypeLogo(serviceType ?? '')}
-                            />
-                          }
-                          serviceName={database.service.name ?? ''}
                         />
-                      )}
-                    </Col>
-
-                    <Col className="m-t-xs" span={24}>
-                      <Space
-                        wrap
-                        align="center"
-                        data-testid="extrainfo"
-                        size={4}>
-                        {extraInfo.map((info, index) => (
-                          <span
-                            className="tw-flex tw-items-center"
-                            data-testid={info.key || `info${index}`}
-                            key={index}>
-                            <EntitySummaryDetails
-                              currentOwner={database?.owner}
-                              data={info}
-                              removeTier={handleRemoveTier}
-                              tier={getTierTags(database?.tags ?? [])}
-                              updateOwner={
-                                databasePermission.EditOwner ||
-                                databasePermission.EditAll
-                                  ? handleUpdateOwner
-                                  : undefined
-                              }
-                              updateTier={
-                                databasePermission.EditTags ||
-                                databasePermission.EditAll
-                                  ? handleUpdateTier
-                                  : undefined
-                              }
-                            />
-                            {extraInfo.length !== 1 &&
-                            index < extraInfo.length - 1 ? (
-                              <span className="tw-mx-1.5 tw-inline-block tw-text-gray-400">
-                                {t('label.pipe-symbol')}
-                              </span>
-                            ) : null}
-                          </span>
-                        ))}
-                      </Space>
-                    </Col>
-                    <Col className="m-t-xs" span={24}>
-                      <Space
-                        wrap
-                        align="center"
-                        data-testid="entity-tags"
-                        size={6}
-                        onClick={() => {
-                          if (isTagEditable) {
-                            // Fetch tags and terms only once
-                            if (tagList.length === 0) {
-                              fetchTags();
-                            }
-                            setIsEditable(true);
-                          }
-                        }}>
-                        {!deleted && (
-                          <TagsContainer
-                            className="w-min-20"
-                            dropDownHorzPosRight={false}
-                            editable={isEditable}
-                            isLoading={isTagLoading}
-                            selectedTags={selectedTags}
-                            showAddTagButton={
-                              isTagEditable && isEmpty(selectedTags)
-                            }
-                            showEditTagButton={isTagEditable}
-                            size="small"
-                            tagList={tagList}
-                            onCancel={() => {
-                              handleTagSelection();
-                            }}
-                            onSelectionChange={(tags) => {
-                              handleTagSelection(tags);
-                            }}
-                          />
-                        )}
-                      </Space>
-                    </Col>
-                  </>
-                )}
-
-                <Col span={24}>
-                  <Row className="m-t-md">
-                    <Col span={24}>
-                      <TabsPane
-                        activeTab={activeTab}
-                        className="flex-initial"
-                        setActiveTab={activeTabHandler}
-                        tabs={tabs}
-                      />
-                    </Col>
-                    <Col className="p-y-md" span={24}>
-                      {activeTab === 1 && (
-                        <Card className="h-full">
-                          <Row gutter={[16, 16]}>
-                            <Col data-testid="description-container" span={24}>
-                              <Description
-                                description={description}
-                                entityFieldThreads={getEntityFieldThreadCounts(
-                                  EntityField.DESCRIPTION,
-                                  entityFieldThreadCount
-                                )}
-                                entityFqn={databaseFQN}
-                                entityName={databaseName}
-                                entityType={EntityType.DATABASE}
-                                hasEditAccess={
-                                  databasePermission.EditDescription ||
-                                  databasePermission.EditAll
-                                }
-                                isEdit={isEdit}
-                                onCancel={onCancel}
-                                onDescriptionEdit={onDescriptionEdit}
-                                onDescriptionUpdate={onDescriptionUpdate}
-                                onThreadLinkSelect={onThreadLinkSelect}
-                              />
-                            </Col>
-                            <Col span={24}>
-                              <Table
-                                bordered
-                                className="table-shadow"
-                                columns={tableColumn}
-                                data-testid="database-databaseSchemas"
-                                dataSource={schemaData}
-                                loading={{
-                                  spinning: schemaDataLoading,
-                                  indicator: <Loader size="small" />,
-                                }}
-                                pagination={false}
-                                rowKey="id"
-                                size="small"
-                              />
-                              {Boolean(
-                                !isNil(databaseSchemaPaging.after) ||
-                                  !isNil(databaseSchemaPaging.before)
-                              ) && (
-                                <NextPrevious
-                                  currentPage={currentPage}
-                                  pageSize={PAGE_SIZE}
-                                  paging={databaseSchemaPaging}
-                                  pagingHandler={databaseSchemaPagingHandler}
-                                  totalCount={databaseSchemaPaging.total}
-                                />
-                              )}
-                            </Col>
-                          </Row>
-                        </Card>
-                      )}
-                      {activeTab === 2 && (
-                        <Card className="p-t-xss p-b-md">
-                          <Row className="entity-feed-list" id="activityfeed">
-                            <Col offset={4} span={16}>
-                              <ActivityFeedList
-                                hideFeedFilter
-                                hideThreadFilter
-                                isEntityFeed
-                                withSidePanel
-                                className=""
-                                deletePostHandler={deletePostHandler}
-                                entityName={databaseName}
-                                feedList={entityThread}
-                                postFeedHandler={postFeedHandler}
-                                updateThreadHandler={updateThreadHandler}
-                              />
-                            </Col>
-                          </Row>
-                        </Card>
-                      )}
-                      <Col
-                        data-testid="observer-element"
-                        id="observer-element"
-                        ref={elementRef as RefObject<HTMLDivElement>}
-                        span={24}>
-                        {getLoader()}
-                      </Col>
-                    </Col>
-                  </Row>
-                </Col>
-                <Col span={24}>
-                  {threadLink ? (
-                    <ActivityThreadPanel
-                      createThread={createThread}
-                      deletePostHandler={deletePostHandler}
-                      open={Boolean(threadLink)}
-                      postFeedHandler={postFeedHandler}
-                      threadLink={threadLink}
-                      updateThreadHandler={updateThreadHandler}
-                      onCancel={onThreadPanelClose}
+                      }
+                      icon={
+                        <img
+                          className="h-8"
+                          src={serviceTypeLogo(serviceType ?? '')}
+                        />
+                      }
+                      serviceName={database.service.name ?? ''}
                     />
-                  ) : null}
+                  )}
                 </Col>
-              </PageLayoutV1>
-            </PageContainerV1>
-          ) : (
-            <ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.PERMISSION} />
-          )}
-        </>
+
+                <Col className="m-t-xs" span={24}>
+                  <Space wrap align="center" data-testid="extrainfo" size={4}>
+                    {extraInfo.map((info, index) => (
+                      <span
+                        className="tw-flex tw-items-center"
+                        data-testid={info.key || `info${index}`}
+                        key={index}>
+                        <EntitySummaryDetails
+                          currentOwner={database?.owner}
+                          data={info}
+                          removeTier={handleRemoveTier}
+                          tier={getTierTags(database?.tags ?? [])}
+                          updateOwner={
+                            databasePermission.EditOwner ||
+                            databasePermission.EditAll
+                              ? handleUpdateOwner
+                              : undefined
+                          }
+                          updateTier={
+                            databasePermission.EditTags ||
+                            databasePermission.EditAll
+                              ? handleUpdateTier
+                              : undefined
+                          }
+                        />
+                        {extraInfo.length !== 1 &&
+                        index < extraInfo.length - 1 ? (
+                          <span className="tw-mx-1.5 tw-inline-block tw-text-gray-400">
+                            {t('label.pipe-symbol')}
+                          </span>
+                        ) : null}
+                      </span>
+                    ))}
+                  </Space>
+                </Col>
+                <Col className="m-t-xs" span={24}>
+                  <Space
+                    wrap
+                    align="center"
+                    data-testid="entity-tags"
+                    size={6}
+                    onClick={() => {
+                      if (isTagEditable) {
+                        // Fetch tags and terms only once
+                        if (tagList.length === 0) {
+                          fetchTags();
+                        }
+                        setIsEditable(true);
+                      }
+                    }}>
+                    {!deleted && (
+                      <TagsContainer
+                        className="w-min-20"
+                        dropDownHorzPosRight={false}
+                        editable={isEditable}
+                        isLoading={isTagLoading}
+                        selectedTags={selectedTags}
+                        showAddTagButton={
+                          isTagEditable && isEmpty(selectedTags)
+                        }
+                        showEditTagButton={isTagEditable}
+                        size="small"
+                        tagList={tagList}
+                        onCancel={() => {
+                          handleTagSelection();
+                        }}
+                        onSelectionChange={(tags) => {
+                          handleTagSelection(tags);
+                        }}
+                      />
+                    )}
+                  </Space>
+                </Col>
+              </>
+            )}
+
+            <Col span={24}>
+              <Row className="m-t-md">
+                <Col span={24}>
+                  <TabsPane
+                    activeTab={activeTab}
+                    className="flex-initial"
+                    setActiveTab={activeTabHandler}
+                    tabs={tabs}
+                  />
+                </Col>
+                <Col className="p-y-md" span={24}>
+                  {activeTab === 1 && (
+                    <Card className="h-full">
+                      <Row gutter={[16, 16]}>
+                        <Col data-testid="description-container" span={24}>
+                          <Description
+                            description={description}
+                            entityFieldThreads={getEntityFieldThreadCounts(
+                              EntityField.DESCRIPTION,
+                              entityFieldThreadCount
+                            )}
+                            entityFqn={databaseFQN}
+                            entityName={databaseName}
+                            entityType={EntityType.DATABASE}
+                            hasEditAccess={
+                              databasePermission.EditDescription ||
+                              databasePermission.EditAll
+                            }
+                            isEdit={isEdit}
+                            onCancel={onCancel}
+                            onDescriptionEdit={onDescriptionEdit}
+                            onDescriptionUpdate={onDescriptionUpdate}
+                            onThreadLinkSelect={onThreadLinkSelect}
+                          />
+                        </Col>
+
+                        {databaseTable}
+                      </Row>
+                    </Card>
+                  )}
+                  {activeTab === 2 && (
+                    <Card className="p-t-xss p-b-md">
+                      <Row className="entity-feed-list" id="activityfeed">
+                        <Col offset={4} span={16}>
+                          <ActivityFeedList
+                            hideFeedFilter
+                            hideThreadFilter
+                            isEntityFeed
+                            withSidePanel
+                            className=""
+                            deletePostHandler={deletePostHandler}
+                            entityName={databaseName}
+                            feedList={entityThread}
+                            postFeedHandler={postFeedHandler}
+                            updateThreadHandler={updateThreadHandler}
+                          />
+                        </Col>
+                      </Row>
+                    </Card>
+                  )}
+                  <Col
+                    data-testid="observer-element"
+                    id="observer-element"
+                    ref={elementRef as RefObject<HTMLDivElement>}
+                    span={24}>
+                    {getLoader()}
+                  </Col>
+                </Col>
+              </Row>
+            </Col>
+            <Col span={24}>
+              {threadLink ? (
+                <ActivityThreadPanel
+                  createThread={createThread}
+                  deletePostHandler={deletePostHandler}
+                  open={Boolean(threadLink)}
+                  postFeedHandler={postFeedHandler}
+                  threadLink={threadLink}
+                  updateThreadHandler={updateThreadHandler}
+                  onCancel={onThreadPanelClose}
+                />
+              ) : null}
+            </Col>
+          </PageLayoutV1>
+        </PageContainerV1>
+      ) : (
+        <ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.PERMISSION} />
       )}
     </>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
index ac509f97b48..07cae596ee3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
@@ -159,6 +159,7 @@ const ServicePage: FunctionComponent = () => {
   const [serviceDetails, setServiceDetails] = useState<ServicesType>();
   const [data, setData] = useState<Array<ServicePageData>>([]);
   const [isLoading, setIsLoading] = useState(!isOpenMetadataService);
+  const [isServiceLoading, setIsServiceLoading] = useState(true);
   const [dataModel, setDataModel] = useState<Array<ServicePageData>>([]);
   const [dataModelPaging, setDataModelPaging] = useState<Paging>(pagingObject);
   const [paging, setPaging] = useState<Paging>(pagingObject);
@@ -230,6 +231,23 @@ const ServicePage: FunctionComponent = () => {
     },
   ];
 
+  const isTestingDisabled = useMemo(
+    () =>
+      !servicePermission.EditAll ||
+      (serviceCategory === ServiceCategory.METADATA_SERVICES &&
+        serviceFQN === OPEN_METADATA) ||
+      isUndefined(connectionDetails),
+    [servicePermission, serviceCategory, serviceFQN, connectionDetails]
+  );
+
+  const goToEditConnection = () => {
+    history.push(getEditConnectionPath(serviceName || '', serviceFQN || ''));
+  };
+
+  const handleDelete = () => {
+    setDeleteWidgetVisible(true);
+  };
+
   const activeTabHandler = (tabValue: number) => {
     setActiveTab(tabValue);
     const currentTabIndex = tabValue - 1;
@@ -416,7 +434,7 @@ const ServicePage: FunctionComponent = () => {
   };
 
   const fetchDatabases = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getDatabases(
         serviceFQN,
@@ -431,12 +449,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchTopics = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getTopics(
         serviceFQN,
@@ -448,12 +466,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchDashboards = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getDashboards(
         serviceFQN,
@@ -465,12 +483,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchDashboardsDataModel = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getDataModels(
         serviceFQN,
@@ -482,12 +500,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchPipeLines = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getPipelines(
         serviceFQN,
@@ -499,12 +517,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchMlModal = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getMlModels(
         serviceFQN,
@@ -516,12 +534,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchContainers = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const response = await getContainers({
         service: serviceFQN,
@@ -536,7 +554,7 @@ const ServicePage: FunctionComponent = () => {
       setData([]);
       setPaging(pagingObject);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
@@ -836,7 +854,7 @@ const ServicePage: FunctionComponent = () => {
     setCurrentPage(activePage ?? 1);
   };
 
-  const getIngestionTab = () => {
+  const ingestionTab = useMemo(() => {
     if (!isAirflowAvailable) {
       return <ErrorPlaceHolderIngestion />;
     } else if (isUndefined(airflowEndpoint) || isUndefined(serviceDetails)) {
@@ -863,11 +881,90 @@ const ServicePage: FunctionComponent = () => {
         </div>
       );
     }
-  };
+  }, [
+    isAirflowAvailable,
+    airflowEndpoint,
+    serviceDetails,
+    deleteIngestionById,
+    deployIngestion,
+    handleEnableDisableIngestion,
+    ingestions,
+    ingestionPaging,
+    servicePermission,
+    serviceName,
+    serviceList,
+    serviceFQN,
+    triggerIngestionById,
+    getAllIngestionWorkflows,
+  ]);
 
-  const getDataModalTab = () => (
-    <DataModelTable data={dataModel} isLoading={isLoading} />
+  const dataModalTab = useMemo(
+    () => <DataModelTable data={dataModel} isLoading={isLoading} />,
+    [dataModel, isLoading]
   );
+
+  const testConnectionTab = useMemo(() => {
+    return (
+      <>
+        <Space className="w-full my-4 justify-end">
+          <Tooltip
+            title={
+              servicePermission.EditAll
+                ? t('label.edit-entity', {
+                    entity: t('label.connection'),
+                  })
+                : t('message.no-permission-for-action')
+            }>
+            <Button
+              ghost
+              data-testid="edit-connection-button"
+              disabled={!servicePermission.EditAll}
+              type="primary"
+              onClick={goToEditConnection}>
+              {t('label.edit-entity', {
+                entity: t('label.connection'),
+              })}
+            </Button>
+          </Tooltip>
+          {allowTestConn && isAirflowAvailable && (
+            <Tooltip
+              title={
+                servicePermission.EditAll
+                  ? t('label.test-entity', {
+                      entity: t('label.connection'),
+                    })
+                  : t('message.no-permission-for-action')
+              }>
+              <TestConnection
+                connectionType={serviceDetails?.serviceType ?? ''}
+                formData={connectionDetails as ConfigData}
+                isTestingDisabled={isTestingDisabled}
+                serviceCategory={serviceCategory as ServiceCategory}
+                serviceName={serviceDetails?.name}
+                // validation is not required as we have all the data available and not in edit mode
+                shouldValidateForm={false}
+                showDetails={false}
+              />
+            </Tooltip>
+          )}
+        </Space>
+        <ServiceConnectionDetails
+          connectionDetails={connectionDetails || {}}
+          serviceCategory={serviceCategory}
+          serviceFQN={serviceDetails?.serviceType || ''}
+        />
+      </>
+    );
+  }, [
+    servicePermission.EditAll,
+    allowTestConn,
+    isAirflowAvailable,
+    serviceDetails,
+    connectionDetails,
+    isTestingDisabled,
+    serviceCategory,
+  ]);
+
   useEffect(() => {
     if (
       servicePageTabs(getCountLabel(serviceName))[activeTab - 1].path !== tab
@@ -876,18 +973,6 @@ const ServicePage: FunctionComponent = () => {
     }
   }, [tab]);
 
-  const goToEditConnection = () => {
-    history.push(getEditConnectionPath(serviceName || '', serviceFQN || ''));
-  };
-
-  const handleEditConnection = () => {
-    goToEditConnection();
-  };
-
-  const handleDelete = () => {
-    setDeleteWidgetVisible(true);
-  };
-
   useEffect(() => {
     if (!isOpenMetadataService) {
       fetchServicePermission();
@@ -960,18 +1045,53 @@ const ServicePage: FunctionComponent = () => {
     ];
   }, [serviceName]);
 
+  const entityServiceTab = useMemo(() => {
+    if (isServiceLoading) {
+      return <Loader />;
+    } else if (!isEmpty(data) && !isServiceLoading) {
+      return (
+        <div data-testid="table-container">
+          <Table
+            bordered
+            className="mt-4 table-shadow"
+            columns={tableColumn}
+            components={tableComponent}
+            data-testid="service-children-table"
+            dataSource={data}
+            pagination={false}
+            rowKey="id"
+            size="small"
+          />
+          {Boolean(!isNil(paging.after) || !isNil(paging.before)) && (
+            <NextPrevious
+              currentPage={currentPage}
+              pageSize={PAGE_SIZE}
+              paging={paging}
+              pagingHandler={pagingHandler}
+              totalCount={paging.total}
+            />
+          )}
+        </div>
+      );
+    } else {
+      return <ErrorPlaceHolder />;
+    }
+  }, [
+    isServiceLoading,
+    data,
+    paging,
+    tableColumn,
+    tableComponent,
+    currentPage,
+    pagingHandler,
+  ]);
+
   useEffect(() => {
     if (isAirflowAvailable && !isOpenMetadataService) {
       getAllIngestionWorkflows();
     }
   }, [isAirflowAvailable]);
 
-  const isTestingDisabled =
-    !servicePermission.EditAll ||
-    (serviceCategory === ServiceCategory.METADATA_SERVICES &&
-      serviceFQN === OPEN_METADATA) ||
-    isUndefined(connectionDetails);
-
   if (isLoading) {
     return (
       <PageContainerV1>
@@ -1077,96 +1197,10 @@ const ServicePage: FunctionComponent = () => {
                   tabs={tabs}
                 />
                 <Col span={24}>
-                  {activeTab === 1 &&
-                    (isEmpty(data) ? (
-                      <ErrorPlaceHolder />
-                    ) : (
-                      <div data-testid="table-container">
-                        <Table
-                          bordered
-                          className="mt-4 table-shadow"
-                          columns={tableColumn}
-                          components={tableComponent}
-                          data-testid="service-children-table"
-                          dataSource={data}
-                          loading={{
-                            spinning: isLoading,
-                            indicator: <Loader size="small" />,
-                          }}
-                          pagination={false}
-                          rowKey="id"
-                          size="small"
-                        />
-                        {Boolean(
-                          !isNil(paging.after) || !isNil(paging.before)
-                        ) && (
-                          <NextPrevious
-                            currentPage={currentPage}
-                            pageSize={PAGE_SIZE}
-                            paging={paging}
-                            pagingHandler={pagingHandler}
-                            totalCount={paging.total}
-                          />
-                        )}
-                      </div>
-                    ))}
-
-                  {activeTab === 4 && getDataModalTab()}
-                  {activeTab === 2 && getIngestionTab()}
-
-                  {activeTab === 3 && (
-                    <>
-                      <Space className="w-full my-4 justify-end">
-                        <Tooltip
-                          title={
-                            servicePermission.EditAll
-                              ? t('label.edit-entity', {
-                                  entity: t('label.connection'),
-                                })
-                              : t('message.no-permission-for-action')
-                          }>
-                          <Button
-                            ghost
-                            data-testid="edit-connection-button"
-                            disabled={!servicePermission.EditAll}
-                            type="primary"
-                            onClick={handleEditConnection}>
-                            {t('label.edit-entity', {
-                              entity: t('label.connection'),
-                            })}
-                          </Button>
-                        </Tooltip>
-                        {allowTestConn && isAirflowAvailable && (
-                          <Tooltip
-                            title={
-                              servicePermission.EditAll
-                                ? t('label.test-entity', {
-                                    entity: t('label.connection'),
-                                  })
-                                : t('message.no-permission-for-action')
-                            }>
-                            <TestConnection
-                              connectionType={serviceDetails?.serviceType ?? ''}
-                              formData={connectionDetails as ConfigData}
-                              isTestingDisabled={isTestingDisabled}
-                              serviceCategory={
-                                serviceCategory as ServiceCategory
-                              }
-                              serviceName={serviceDetails?.name}
-                              // validation is not required as we have all the data available and not in edit mode
-                              shouldValidateForm={false}
-                              showDetails={false}
-                            />
-                          </Tooltip>
-                        )}
-                      </Space>
-                      <ServiceConnectionDetails
-                        connectionDetails={connectionDetails || {}}
-                        serviceCategory={serviceCategory}
-                        serviceFQN={serviceDetails?.serviceType || ''}
-                      />
-                    </>
-                  )}
+                  {activeTab === 1 && entityServiceTab}
+                  {activeTab === 4 && dataModalTab}
+                  {activeTab === 2 && ingestionTab}
+                  {activeTab === 3 && testConnectionTab}
                 </Col>
               </Col>
             </Row>