diff --git a/components/dashboard/src/components/Alert.tsx b/components/dashboard/src/components/Alert.tsx
index fa06fdc7686d9c..20d46aed4cd986 100644
--- a/components/dashboard/src/components/Alert.tsx
+++ b/components/dashboard/src/components/Alert.tsx
@@ -10,6 +10,7 @@ import { ReactComponent as Exclamation2 } from "../images/exclamation2.svg";
 import { ReactComponent as InfoSvg } from "../images/info.svg";
 import { ReactComponent as XSvg } from "../images/x.svg";
 import { ReactComponent as Check } from "../images/check-circle.svg";
+import classNames from "classnames";
 
 export type AlertType =
     // Green
@@ -20,6 +21,8 @@ export type AlertType =
     | "info"
     // Red
     | "error"
+    // Dark Red
+    | "danger"
     // Blue
     | "message";
 
@@ -32,6 +35,7 @@ export interface AlertProps {
     onClose?: () => void;
     showIcon?: boolean;
     icon?: React.ReactNode;
+    rounded?: boolean;
     children?: React.ReactNode;
 }
 
@@ -73,6 +77,12 @@ const infoMap: Record<AlertType, AlertInfo> = {
         icon: <Exclamation className="w-4 h-4"></Exclamation>,
         iconColor: "text-red-400",
     },
+    danger: {
+        bgCls: "bg-red-600 dark:bg-red-600",
+        txtCls: "text-white",
+        icon: <Exclamation className="w-4 h-4"></Exclamation>,
+        iconColor: "filter-brightness-10",
+    },
 };
 
 export default function Alert(props: AlertProps) {
@@ -84,11 +94,16 @@ export default function Alert(props: AlertProps) {
     const info = infoMap[type];
     const showIcon = props.showIcon ?? true;
     const light = props.light ?? false;
+    const rounded = props.rounded ?? true;
     return (
         <div
-            className={`flex relative whitespace-pre-wrap rounded p-4 ${info.txtCls} ${props.className || ""} ${
-                light ? "" : info.bgCls
-            }`}
+            className={classNames(
+                "flex relative whitespace-pre-wrap p-4",
+                info.txtCls,
+                props.className,
+                light ? "" : info.bgCls,
+                rounded ? "rounded" : "",
+            )}
         >
             {showIcon && <span className={`mt-1 mr-4 h-4 w-4 ${info.iconColor}`}>{props.icon ?? info.icon}</span>}
             <span className="flex-1 text-left">{props.children}</span>
diff --git a/components/dashboard/src/components/EmptyMessage.tsx b/components/dashboard/src/components/EmptyMessage.tsx
new file mode 100644
index 00000000000000..f482e0d53a9e7e
--- /dev/null
+++ b/components/dashboard/src/components/EmptyMessage.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import classNames from "classnames";
+import { FC, useCallback } from "react";
+import { Button } from "./Button";
+import { Heading2, Subheading } from "./typography/headings";
+
+type Props = {
+    title: string;
+    subtitle?: string;
+    buttonText?: string;
+    onClick?: () => void;
+    className?: string;
+};
+export const EmptyMessage: FC<Props> = ({ title, subtitle, buttonText, onClick, className }) => {
+    const handleClick = useCallback(() => {
+        onClick && onClick();
+    }, [onClick]);
+    return (
+        <div
+            className={classNames(
+                "w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-900 px-4 py-14",
+                className,
+            )}
+        >
+            <div className="flex flex-col justify-center items-center text-center space-y-4">
+                <Heading2 color="light">{title}</Heading2>
+                <Subheading className="max-w-md">{subtitle}</Subheading>
+                {buttonText && <Button onClick={handleClick}>{buttonText}</Button>}
+            </div>
+        </div>
+    );
+};
diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
index 6e8b7ae8e1975f..8b9caa668c9e4b 100644
--- a/components/dashboard/src/components/Modal.tsx
+++ b/components/dashboard/src/components/Modal.tsx
@@ -4,10 +4,11 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { ReactNode, useEffect } from "react";
+import { FC, ReactNode, useEffect, useMemo } from "react";
 import cn from "classnames";
 import { getGitpodService } from "../service/service";
 import { Heading2 } from "./typography/headings";
+import Alert from "./Alert";
 
 type CloseModalManner = "esc" | "enter" | "x";
 
@@ -125,7 +126,7 @@ type ModalBodyProps = {
 export const ModalBody = ({ children, hideDivider = false, noScroll = false }: ModalBodyProps) => {
     return (
         <div
-            className={cn("border-gray-200 dark:border-gray-800 -mx-6 px-6 ", {
+            className={cn("relative border-gray-200 dark:border-gray-800 -mx-6 px-6 pb-14", {
                 "border-t border-b mt-2 py-4": !hideDivider,
                 "overflow-y-auto": !noScroll,
             })}
@@ -136,8 +137,47 @@ export const ModalBody = ({ children, hideDivider = false, noScroll = false }: M
 };
 
 type ModalFooterProps = {
+    error?: string;
+    warning?: string;
     children: ReactNode;
 };
-export const ModalFooter = ({ children }: ModalFooterProps) => {
-    return <div className="flex justify-end mt-6 space-x-2">{children}</div>;
+export const ModalFooter: FC<ModalFooterProps> = ({ error, warning, children }) => {
+    // Inlining these to ensure error band covers modal left/right borders
+    const alertStyles = useMemo(() => ({ marginLeft: "-25px", marginRight: "-25px" }), []);
+
+    const hasAlert = error || warning;
+
+    return (
+        <div className="relative">
+            {hasAlert && (
+                <div className="absolute -top-12 left-0 right-0" style={alertStyles}>
+                    <ModalFooterAlert error={error} warning={warning} />
+                </div>
+            )}
+            <div className="flex justify-end mt-6 space-x-2">{children}</div>
+        </div>
+    );
+};
+
+type ModalFooterAlertProps = {
+    error?: string;
+    warning?: string;
+};
+const ModalFooterAlert: FC<ModalFooterAlertProps> = ({ error, warning }) => {
+    if (error) {
+        return (
+            <Alert type="danger" rounded={false}>
+                {error}
+            </Alert>
+        );
+    }
+    if (warning) {
+        return (
+            <Alert type="warning" rounded={false}>
+                {warning}
+            </Alert>
+        );
+    }
+
+    return null;
 };
diff --git a/components/dashboard/src/components/UsageBasedBillingConfig.tsx b/components/dashboard/src/components/UsageBasedBillingConfig.tsx
index 864eb3705521a7..f368749a5b0427 100644
--- a/components/dashboard/src/components/UsageBasedBillingConfig.tsx
+++ b/components/dashboard/src/components/UsageBasedBillingConfig.tsx
@@ -29,9 +29,10 @@ type PendingStripeSubscription = { pendingSince: number };
 
 interface Props {
     attributionId?: string;
+    hideSubheading?: boolean;
 }
 
-export default function UsageBasedBillingConfig({ attributionId }: Props) {
+export default function UsageBasedBillingConfig({ attributionId, hideSubheading = false }: Props) {
     const location = useLocation();
     const currentOrg = useCurrentOrg().data;
     const attrId = attributionId ? AttributionId.parse(attributionId) : undefined;
@@ -170,11 +171,13 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
 
     return (
         <div className="mb-16">
-            <Subheading>
-                {attributionId && AttributionId.parse(attributionId)?.kind === "user"
-                    ? "Manage billing for your personal account."
-                    : "Manage billing for your organization."}
-            </Subheading>
+            {!hideSubheading && (
+                <Subheading>
+                    {attributionId && AttributionId.parse(attributionId)?.kind === "user"
+                        ? "Manage billing for your personal account."
+                        : "Manage billing for your organization."}
+                </Subheading>
+            )}
             <div className="max-w-xl flex flex-col">
                 {errorMessage && (
                     <Alert className="max-w-xl mt-2" closable={false} showIcon={true} type="error">
diff --git a/components/dashboard/src/teams/GitIntegrationsPage.tsx b/components/dashboard/src/teams/GitIntegrationsPage.tsx
index b14cabc570e39e..9d24ec9e35bdf0 100644
--- a/components/dashboard/src/teams/GitIntegrationsPage.tsx
+++ b/components/dashboard/src/teams/GitIntegrationsPage.tsx
@@ -24,11 +24,14 @@ export default function GitAuth() {
 export const OrgSettingsPageWrapper: FunctionComponent = ({ children }) => {
     const currentOrg = useCurrentOrg();
 
+    const title = "Git Auth";
+    const subtitle = "Configure Git Auth for GitLab, or Github.";
+
     // Render as much of the page as we can in a loading state to avoid content shift
     if (currentOrg.isLoading) {
         return (
             <div className="w-full">
-                <Header title="Organization Settings" subtitle="Manage your organization's settings." />
+                <Header title={title} subtitle={subtitle} />
                 <div className="w-full">
                     <SpinnerLoader />
                 </div>
@@ -40,5 +43,9 @@ export const OrgSettingsPageWrapper: FunctionComponent = ({ children }) => {
         return <Redirect to={"/"} />;
     }
 
-    return <OrgSettingsPage>{children}</OrgSettingsPage>;
+    return (
+        <OrgSettingsPage title={title} subtitle={subtitle}>
+            {children}
+        </OrgSettingsPage>
+    );
 };
diff --git a/components/dashboard/src/teams/OrgSettingsPage.tsx b/components/dashboard/src/teams/OrgSettingsPage.tsx
index 52239da28158c1..4ce86742ff0416 100644
--- a/components/dashboard/src/teams/OrgSettingsPage.tsx
+++ b/components/dashboard/src/teams/OrgSettingsPage.tsx
@@ -14,10 +14,12 @@ import { useCurrentOrg } from "../data/organizations/orgs-query";
 import { getTeamSettingsMenu } from "./TeamSettings";
 
 export interface OrgSettingsPageProps {
+    title: string;
+    subtitle: string;
     children: React.ReactNode;
 }
 
-export function OrgSettingsPage({ children }: OrgSettingsPageProps) {
+export function OrgSettingsPage({ title, subtitle, children }: OrgSettingsPageProps) {
     const org = useCurrentOrg();
     const { oidcServiceEnabled, orgGitAuthProviders } = useFeatureFlags();
 
@@ -32,9 +34,6 @@ export function OrgSettingsPage({ children }: OrgSettingsPageProps) {
         [oidcServiceEnabled, orgGitAuthProviders, org.data],
     );
 
-    const title = "Organization Settings";
-    const subtitle = "Manage your organization's settings.";
-
     // Render as much of the page as we can in a loading state to avoid content shift
     if (org.isLoading) {
         return (
diff --git a/components/dashboard/src/teams/SSO.tsx b/components/dashboard/src/teams/SSO.tsx
index 231cdcdcc6a926..5e4e0602248ccc 100644
--- a/components/dashboard/src/teams/SSO.tsx
+++ b/components/dashboard/src/teams/SSO.tsx
@@ -17,11 +17,16 @@ import copy from "../images/copy.svg";
 import exclamation from "../images/exclamation.svg";
 import { OrgSettingsPage } from "./OrgSettingsPage";
 import { Heading2, Subheading } from "../components/typography/headings";
+import { EmptyMessage } from "../components/EmptyMessage";
 
 export default function SSO() {
     const currentOrg = useCurrentOrg();
 
-    return <OrgSettingsPage>{currentOrg.data && <OIDCClients organizationId={currentOrg.data?.id} />}</OrgSettingsPage>;
+    return (
+        <OrgSettingsPage title="SSO" subtitle="Configure OpenID Connect (OIDC) single sign-on.">
+            {currentOrg.data && <OIDCClients organizationId={currentOrg.data?.id} />}
+        </OrgSettingsPage>
+    );
 }
 
 function OIDCClients(props: { organizationId: string }) {
@@ -85,11 +90,10 @@ function OIDCClients(props: { organizationId: string }) {
             {modal?.mode === "edit" && <></>}
             {modal?.mode === "delete" && <></>}
 
+            <Heading2>OpenID Connect clients</Heading2>
+            <Subheading>Configure single sign-on for your organization.</Subheading>
+
             <div className="flex items-start sm:justify-between mb-2">
-                <div>
-                    <Heading2>Single sign sign-on with OIDC</Heading2>
-                    <Subheading>Setup SSO for your organization.</Subheading>
-                </div>
                 {clientConfigs.length !== 0 ? (
                     <div className="mt-3 flex mt-0">
                         <button onClick={() => setModal({ mode: "new" })} className="ml-2">
@@ -100,18 +104,12 @@ function OIDCClients(props: { organizationId: string }) {
             </div>
 
             {clientConfigs.length === 0 && (
-                <div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100 dark:bg-gray-900">
-                    <div className="m-auto text-center">
-                        <h3 className="self-center text-gray-500 dark:text-gray-400 mb-4">No OIDC Clients</h3>
-                        <div className="text-gray-500 mb-6">
-                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
-                            invidunt ut labore et dolore magna aliquyam
-                        </div>
-                        <button className="self-center" onClick={() => setModal({ mode: "new" })}>
-                            New OIDC Client
-                        </button>
-                    </div>
-                </div>
+                <EmptyMessage
+                    title="No OIDC providers"
+                    subtitle="Enable single sign-on for your organization using an external identity provider (IdP) service that supports the OpenID Connect (OIDC) standard, such as Google."
+                    buttonText="New OIDC Client"
+                    onClick={() => setModal({ mode: "new" })}
+                />
             )}
 
             <ItemsList className="pt-6">
diff --git a/components/dashboard/src/teams/TeamBilling.tsx b/components/dashboard/src/teams/TeamBilling.tsx
index e47f1635d50392..3160514ac166b5 100644
--- a/components/dashboard/src/teams/TeamBilling.tsx
+++ b/components/dashboard/src/teams/TeamBilling.tsx
@@ -27,7 +27,7 @@ type PendingPlan = Plan & { pendingSince: number };
 
 export default function TeamBillingPage() {
     return (
-        <OrgSettingsPage>
+        <OrgSettingsPage title={"Organization Billing"} subtitle="Manage billing for your organization.">
             <TeamBilling />
         </OrgSettingsPage>
     );
diff --git a/components/dashboard/src/teams/TeamSettings.tsx b/components/dashboard/src/teams/TeamSettings.tsx
index ac51b45412d447..71450fd45835fb 100644
--- a/components/dashboard/src/teams/TeamSettings.tsx
+++ b/components/dashboard/src/teams/TeamSettings.tsx
@@ -37,7 +37,7 @@ export function getTeamSettingsMenu(params: {
     }
     if (orgGitAuthProviders) {
         result.push({
-            title: "Git Integrations",
+            title: "Git Auth",
             link: [`/settings/git`],
         });
     }
@@ -109,7 +109,7 @@ export default function TeamSettings() {
 
     return (
         <>
-            <OrgSettingsPage>
+            <OrgSettingsPage title="Organization Settings" subtitle="Manage your organization's settings.">
                 <Heading2>Organization Name</Heading2>
                 <Subheading className="max-w-2xl">
                     This is your organization's visible name within Gitpod. For example, the name of your company.
diff --git a/components/dashboard/src/teams/TeamUsageBasedBilling.tsx b/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
index 89c94710ccdb9c..a3f66b195dfef1 100644
--- a/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
+++ b/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
@@ -5,7 +5,6 @@
  */
 
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
-import { Heading2 } from "../components/typography/headings";
 import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import UsageBasedBillingConfig from "../components/UsageBasedBillingConfig";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
@@ -19,8 +18,10 @@ export default function TeamUsageBasedBilling() {
 
     return (
         <>
-            <Heading2>Organization Billing</Heading2>
-            <UsageBasedBillingConfig attributionId={org && AttributionId.render({ kind: "team", teamId: org.id })} />
+            <UsageBasedBillingConfig
+                hideSubheading
+                attributionId={org && AttributionId.render({ kind: "team", teamId: org.id })}
+            />
         </>
     );
 }
diff --git a/components/dashboard/src/teams/git-integrations/GitIntegrationListItem.tsx b/components/dashboard/src/teams/git-integrations/GitIntegrationListItem.tsx
index b2f364a436c782..cda38a56f6136a 100644
--- a/components/dashboard/src/teams/git-integrations/GitIntegrationListItem.tsx
+++ b/components/dashboard/src/teams/git-integrations/GitIntegrationListItem.tsx
@@ -47,7 +47,7 @@ export const GitIntegrationListItem: FunctionComponent<Props> = ({ provider }) =
     return (
         <>
             <Item className="h-16">
-                <ItemFieldIcon>
+                <ItemFieldIcon className="w-1/12">
                     <div
                         className={
                             "rounded-full w-3 h-3 text-sm align-middle m-auto " +
@@ -57,13 +57,13 @@ export const GitIntegrationListItem: FunctionComponent<Props> = ({ provider }) =
                         &nbsp;
                     </div>
                 </ItemFieldIcon>
-                <ItemField className="w-3/12 flex flex-col my-auto">
+                <ItemField className="w-5/12 flex items-center">
                     <span className="font-medium truncate overflow-ellipsis">{provider.type}</span>
                 </ItemField>
-                <ItemField className="w-7/12 flex flex-col my-auto">
+                <ItemField className="w-5/12 flex items-center">
                     <span className="my-auto truncate text-gray-500 overflow-ellipsis">{provider.host}</span>
                 </ItemField>
-                <ItemFieldContextMenu menuEntries={menuEntries} />
+                <ItemFieldContextMenu className="w-1/12" menuEntries={menuEntries} />
             </Item>
             {showDeleteConfirmation && (
                 <ConfirmationModal
diff --git a/components/dashboard/src/teams/git-integrations/GitIntegrationModal.tsx b/components/dashboard/src/teams/git-integrations/GitIntegrationModal.tsx
index f4ff6596bbe706..485f4fa1d7fa75 100644
--- a/components/dashboard/src/teams/git-integrations/GitIntegrationModal.tsx
+++ b/components/dashboard/src/teams/git-integrations/GitIntegrationModal.tsx
@@ -6,7 +6,7 @@
 
 import { AuthProviderEntry } from "@gitpod/gitpod-protocol";
 import { FunctionComponent, useCallback, useMemo, useState } from "react";
-import Alert from "../../components/Alert";
+import { Button } from "../../components/Button";
 import { InputField } from "../../components/forms/InputField";
 import { SelectInputField } from "../../components/forms/SelectInputField";
 import { TextInputField } from "../../components/forms/TextInputField";
@@ -16,7 +16,6 @@ import { useInvalidateOrgAuthProvidersQuery } from "../../data/auth-providers/or
 import { useUpsertOrgAuthProviderMutation } from "../../data/auth-providers/upsert-org-auth-provider-mutation";
 import { useCurrentOrg } from "../../data/organizations/orgs-query";
 import { useOnBlurError } from "../../hooks/use-onblur-error";
-import exclamation from "../../images/exclamation.svg";
 import { openAuthorizeWindow } from "../../provider-utils";
 import { getGitpodService, gitpodHostUrl } from "../../service/service";
 
@@ -104,6 +103,7 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
             console.error("no current team selected");
             return;
         }
+
         // Set a saving state and clear any error message
         setSavingProvider(true);
         setErrorMessage(undefined);
@@ -193,9 +193,6 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
         >
             <ModalHeader>{isNew ? "New Git Integration" : "Git Integration"}</ModalHeader>
             <ModalBody>
-                {!isNew && savedProvider?.status !== "verified" && (
-                    <Alert type="warning">You need to activate this integration.</Alert>
-                )}
                 <div className="flex flex-col text-gray-500">
                     Configure an integration with a self-managed instance of GitLab, GitHub, or Bitbucket.
                 </div>
@@ -239,22 +236,14 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
                         onBlur={clientSecretOnBlur}
                     />
                 </div>
-
-                {errorMessage && (
-                    <div className="flex rounded-md bg-red-600 p-3">
-                        <img
-                            className="w-4 h-4 mx-2 my-auto filter-brightness-10"
-                            src={exclamation}
-                            alt="exclamation mark"
-                        />
-                        <span className="text-white">{errorMessage}</span>
-                    </div>
-                )}
             </ModalBody>
-            <ModalFooter>
-                <button onClick={activate} disabled={!isValid || savingProvider}>
+            <ModalFooter
+                error={errorMessage}
+                warning={!isNew && savedProvider?.status !== "verified" ? "You need to activate this integration." : ""}
+            >
+                <Button onClick={activate} disabled={!isValid || savingProvider} loading={savingProvider}>
                     Activate Integration
-                </button>
+                </Button>
             </ModalFooter>
         </Modal>
     );
diff --git a/components/dashboard/src/teams/git-integrations/GitIntegrations.tsx b/components/dashboard/src/teams/git-integrations/GitIntegrations.tsx
index 3557b8a09e838e..7c777d8a5f69c1 100644
--- a/components/dashboard/src/teams/git-integrations/GitIntegrations.tsx
+++ b/components/dashboard/src/teams/git-integrations/GitIntegrations.tsx
@@ -6,25 +6,11 @@
 
 import { FunctionComponent } from "react";
 import { SpinnerLoader } from "../../components/Loader";
-import { Heading2, Subheading } from "../../components/typography/headings";
 import { useOrgAuthProvidersQuery } from "../../data/auth-providers/org-auth-providers-query";
 import { GitIntegrationsList } from "./GitIntegrationsList";
 
 export const GitIntegrations: FunctionComponent = () => {
     const { data, isLoading } = useOrgAuthProvidersQuery();
 
-    return (
-        <div>
-            <div className="flex items-start sm:justify-between mb-2">
-                <div>
-                    <Heading2>Git Integrations</Heading2>
-                    <Subheading>
-                        Manage Git integrations for self-managed instances of GitLab, GitHub, or Bitbucket.
-                    </Subheading>
-                </div>
-            </div>
-
-            {isLoading ? <SpinnerLoader /> : <GitIntegrationsList providers={data || []} />}
-        </div>
-    );
+    return <div>{isLoading ? <SpinnerLoader /> : <GitIntegrationsList providers={data || []} />}</div>;
 };
diff --git a/components/dashboard/src/teams/git-integrations/GitIntegrationsList.tsx b/components/dashboard/src/teams/git-integrations/GitIntegrationsList.tsx
index e6f51a3943f769..7aa20efb9cfb98 100644
--- a/components/dashboard/src/teams/git-integrations/GitIntegrationsList.tsx
+++ b/components/dashboard/src/teams/git-integrations/GitIntegrationsList.tsx
@@ -6,8 +6,9 @@
 
 import { AuthProviderEntry } from "@gitpod/gitpod-protocol";
 import { FunctionComponent, useCallback, useState } from "react";
-import { ItemsList } from "../../components/ItemsList";
-import { Heading2 } from "../../components/typography/headings";
+import { Button } from "../../components/Button";
+import { EmptyMessage } from "../../components/EmptyMessage";
+import { Item, ItemField, ItemsList } from "../../components/ItemsList";
 import { GitIntegrationListItem } from "./GitIntegrationListItem";
 import { GitIntegrationModal } from "./GitIntegrationModal";
 
@@ -23,27 +24,24 @@ export const GitIntegrationsList: FunctionComponent<Props> = ({ providers }) =>
     return (
         <>
             {providers.length === 0 ? (
-                <div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100 dark:bg-gray-900">
-                    <div className="m-auto text-center px-8">
-                        <Heading2 color="light" className="self-center mb-4">
-                            No Git Integrations
-                        </Heading2>
-                        <div className="text-gray-500 mb-6 max-w-md">
-                            In addition to the default Git Providers you can authorize with a self-hosted instance of a
-                            provider.
-                        </div>
-                        <button className="self-center" onClick={onCreate}>
-                            New Integration
-                        </button>
-                    </div>
-                </div>
+                <EmptyMessage
+                    title="No Git Auth configurations"
+                    subtitle="Configure Git Auth with GitHub or GitLab."
+                    buttonText="New Integration"
+                    onClick={onCreate}
+                />
             ) : (
                 <>
                     <div className="mt-3">
-                        <button onClick={onCreate}>New Integration</button>
+                        <Button onClick={onCreate}>New Integration</Button>
                     </div>
 
                     <ItemsList className="pt-6">
+                        <Item header={true}>
+                            <ItemField className="w-1/12"> </ItemField>
+                            <ItemField className="w-5/12">Provider Type</ItemField>
+                            <ItemField className="w-6/12">Host Name</ItemField>
+                        </Item>
                         {providers.map((p) => (
                             <GitIntegrationListItem key={p.id} provider={p} />
                         ))}