From 61b56752f12757e0eb842925bc66c3b178d51711 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 20 Jan 2026 15:26:28 +0800
Subject: [PATCH 01/22] feat: update header and tabs

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/config/links.ts                  |  6 ++
 .../pages/integration-list.page.vue           | 60 ++++++++++------
 frontend/src/ui-kit/index.scss                |  1 +
 frontend/src/ui-kit/lfx/tabs/tab.vue          | 30 ++++++++
 frontend/src/ui-kit/lfx/tabs/tabs.scss        | 32 +++++++++
 frontend/src/ui-kit/lfx/tabs/tabs.vue         | 70 +++++++++++++++++++
 .../src/ui-kit/lfx/tabs/types/TabsSize.ts     |  6 ++
 7 files changed, 185 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/config/links.ts
 create mode 100644 frontend/src/ui-kit/lfx/tabs/tab.vue
 create mode 100644 frontend/src/ui-kit/lfx/tabs/tabs.scss
 create mode 100644 frontend/src/ui-kit/lfx/tabs/tabs.vue
 create mode 100644 frontend/src/ui-kit/lfx/tabs/types/TabsSize.ts

diff --git a/frontend/src/config/links.ts b/frontend/src/config/links.ts
new file mode 100644
index 0000000000..f2e51cffc8
--- /dev/null
+++ b/frontend/src/config/links.ts
@@ -0,0 +1,6 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+export const links = {
+  integrations: `https://docs.crowd.dev/docs/getting-started/integrations`,
+}
diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
index e36958853e..fcf1b486f1 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
@@ -2,7 +2,7 @@
   <div class="mx-auto max-w-254">
     <div class="sticky -top-5 -mt-5 z-10 bg-white border-b border-b-white">
       <!-- Back button -->
-      <div class="border-b border-gray-100 py-3.5">
+      <div class="pt-6 flex items-center gap-1 text-xs">
         <router-link
           :to="{
             name: 'adminProjects',
@@ -11,52 +11,71 @@
             },
           }"
         >
-          <lf-button type="secondary-ghost">
-            <lf-icon name="angle-left" type="regular" />
-            {{ getSegmentName(grandparentId) || subproject?.grandparentName }}
-          </lf-button>
+          {{ getSegmentName(grandparentId) || subproject?.grandparentName }}
         </router-link>
+        <p v-if="subproject" class="text-gray-600">
+          >
+          {{ subproject?.name }}
+        </p>
+        <p v-if="subproject" class="text-gray-600">
+          (Integrations)
+        </p>
       </div>
 
       <!-- Header -->
-      <div class="py-6">
-        <p v-if="subproject" class="text-small text-gray-500 pb-2">
-          {{ subproject?.name }}
-        </p>
-        <h4 class="pb-2">
+      <div class="py-5">
+        
+        <h4 class="pb-1">
           Integrations
         </h4>
         <p class="text-small text-gray-500">
           Connect with the data sources where interactions happen within your
           community.
+          <a
+            aria-label="Question"
+            class="btn btn-link btn-link--primary hover:no-underline gap-1 "
+            :href="links.integrations"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <lf-icon name="book-open" :size="16" />
+            Learn more
+          </a>
         </p>
       </div>
 
       <!-- Tabs -->
       <section>
-        <div class="w-full bg-white">
-          <lf-tabs v-model="tab">
-            <lf-tab v-model="tab" name="all">
+        <div class="w-full bg-white mb-8">
+          <lfx-tabs v-model="tab">
+            <lfx-tab v-model="tab" name="all">
               All integrations
-            </lf-tab>
-            <lf-tab
+            </lfx-tab>
+            <lfx-tab
               v-for="(status, key) in lfIntegrationStatusesTabs"
               :key="key"
               v-model="tab"
               :name="key"
             >
               <div class="flex items-center gap-1.5">
+                <lf-icon
+                  v-if="status.chipStatus?.icon || status.status.icon"
+                  :name="status.chipStatus?.icon || status.status.icon"
+                  :type="tab === key ? 'solid' : 'light'"
+                  :class="tab === key ? status.chipStatus?.color || status.status.color : 'text-gray-500'"
+                  :size="20"
+                />
                 <span>{{ status.tabs.text }}</span>
                 <div
                   v-if="getIntegrationCountPerStatus[key] > 0"
-                  class="rounded py-0.5 px-1 text-tiny text-black"
+                  class="rounded-full py-0.5 px-1 text-tiny text-black"
                   :class="status.tabs.badge"
                 >
                   {{ getIntegrationCountPerStatus[key] }}
                 </div>
               </div>
-            </lf-tab>
-          </lf-tabs>
+            </lfx-tab>
+          </lfx-tabs>
         </div>
         <div
           class="w-full h-8 bg-gradient-to-b from-white to-transparent pl-10"
@@ -125,15 +144,16 @@ import { computed, onMounted, ref } from 'vue';
 import { getSegmentName } from '@/utils/segments';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
 import { lfIntegrations } from '@/config/integrations';
-import LfTabs from '@/ui-kit/tabs/Tabs.vue';
+import LfxTabs from '@/ui-kit/lfx/tabs/Tabs.vue';
 import LfIntegrationListItem from '@/modules/admin/modules/integration/components/integration-list-item.vue';
-import LfTab from '@/ui-kit/tabs/Tab.vue';
+import LfxTab from '@/ui-kit/lfx/tabs/Tab.vue';
 import AppIntegrationProgressWrapper from '@/modules/integration/components/integration-progress-wrapper.vue';
 import { mapActions, mapGetters } from '@/shared/vuex/vuex.helpers';
 import LfSwitch from '@/ui-kit/switch/Switch.vue';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import config from '@/config';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
+import { links } from '@/config/links';
 
 const route = useRoute();
 
diff --git a/frontend/src/ui-kit/index.scss b/frontend/src/ui-kit/index.scss
index db438da436..4713b57f71 100644
--- a/frontend/src/ui-kit/index.scss
+++ b/frontend/src/ui-kit/index.scss
@@ -25,3 +25,4 @@
 @import 'lfx/dropdown/dropdown';
 @import 'lfx/popover/popover';
 @import 'lfx/chip/chip';
+@import 'lfx/tabs/tabs';
\ No newline at end of file
diff --git a/frontend/src/ui-kit/lfx/tabs/tab.vue b/frontend/src/ui-kit/lfx/tabs/tab.vue
new file mode 100644
index 0000000000..70c2b6e9dc
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/tabs/tab.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="lfx-c-tab" :class="{ 'is-active': isActive }" @click="selectTab">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance } from 'vue';
+
+const props = defineProps<{
+  name: string,
+}>();
+
+const parent = computed(() => {
+  const instance = getCurrentInstance();
+  return instance?.parent;
+});
+
+const isActive = computed<boolean>(() => parent.value.props.modelValue === props.name);
+
+const selectTab = () => {
+  parent.value?.emit('update:modelValue', props.name);
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxTab',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/tabs/tabs.scss b/frontend/src/ui-kit/lfx/tabs/tabs.scss
new file mode 100644
index 0000000000..dee1b7ed67
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/tabs/tabs.scss
@@ -0,0 +1,32 @@
+.lfx-c-tabs {
+  @apply flex relative whitespace-nowrap w-fit transition bg-gray-100 rounded-full gap-1 p-1;
+
+  &--small {
+    .lfx-c-tab {
+      --lf-tab-font-size: var(--lf-tabs-small-font-size);
+      --lf-tab-line-height: var(--lf-tabs-small-line-height);
+      --lf-tab-padding: var(--lf-tabs-small-padding);
+    }
+  }
+
+  &--medium {
+    .lfx-c-tab {
+      --lf-tab-font-size: var(--lf-tabs-medium-font-size);
+      --lf-tab-line-height: var(--lf-tabs-medium-line-height);
+      --lf-tab-padding: var(--lf-tabs-medium-padding);
+    }
+  }
+}
+
+.lfx-c-tab {
+  @apply flex items-center justify-center text-center cursor-pointer transition-all select-none;
+  @apply rounded-full px-3 py-1 text-gray-600 font-normal leading-5 text-sm;
+
+  &:hover {
+    background: var(--lf-tab-hover-background);
+  }
+
+  &.is-active {
+    @apply bg-white text-gray-900 font-medium;
+  }
+}
diff --git a/frontend/src/ui-kit/lfx/tabs/tabs.vue b/frontend/src/ui-kit/lfx/tabs/tabs.vue
new file mode 100644
index 0000000000..9f61cca9ca
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/tabs/tabs.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="lfx-c-tabs" :class="`lfx-c-tabs--${props.size}`">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed, onMounted, watch,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { TabsSize } from '@/ui-kit/tabs/types/TabsSize';
+
+const props = withDefaults(defineProps<{
+  modelValue?: string,
+  size?: TabsSize,
+  fragment?: boolean,
+}>(), {
+  modelValue: '',
+  size: 'medium',
+  fragment: true,
+});
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string): void}>();
+
+const route = useRoute();
+const router = useRouter();
+
+const model = computed({
+  get() {
+    return props.modelValue || '';
+  },
+  set(value: string) {
+    emit('update:modelValue', value);
+  },
+});
+
+watch(() => props.modelValue, () => {
+  if (props.fragment) {
+    router.replace({
+      ...route,
+      hash: `#${props.modelValue}`,
+    });
+  }
+});
+
+const readHash = () => {
+  if (!props.fragment) {
+    return;
+  }
+  const hash = route?.hash.replace('#', '');
+  if (hash && hash !== model.value) {
+    emit('update:modelValue', hash);
+  }
+};
+
+onMounted(() => {
+  readHash();
+});
+
+watch(() => route?.hash, () => {
+  readHash();
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxTabs',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/tabs/types/TabsSize.ts b/frontend/src/ui-kit/lfx/tabs/types/TabsSize.ts
new file mode 100644
index 0000000000..fd90a69e52
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/tabs/types/TabsSize.ts
@@ -0,0 +1,6 @@
+export const tabsSize = [
+  'small',
+  'medium',
+] as const;
+
+export type TabsSize = typeof tabsSize[number];

From 4baaea1d34577a8af26ec16772c3aa3d4e5235ee Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Wed, 21 Jan 2026 15:11:56 +0800
Subject: [PATCH 02/22] feat: update card borders and github integration status

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/config/styles/components/button.scss |  19 +++
 .../components/confluence-connect.vue         |   2 +-
 .../devto/components/devto-connect.vue        |   2 +-
 .../discord/components/discord-connect.vue    |   2 +-
 .../components/discourse-connect.vue          |   2 +-
 .../gerrit/components/gerrit-connect.vue      |   2 +-
 .../git/components/git-connect.vue            |   2 +-
 .../git/components/git-params.vue             | 117 ++++++++++++------
 .../components/connect/github-connect.vue     |  76 ------------
 .../components/github-connect.vue             |  44 -------
 .../settings/github-settings-drawer.vue       |  28 +++--
 .../settings/github-settings-empty.vue        |  28 +++--
 .../integrations/github-nango/config.ts       |  19 +--
 .../components/connect/github-connect.vue     |  72 -----------
 .../github/components/github-connect.vue      | 113 ++++++++++++++---
 .../github/components/github-version-tag.vue  |  27 ++++
 .../src/config/integrations/github/config.ts  |  18 +--
 .../gitlab/components/gitlab-connect.vue      |   2 +-
 .../groupsio/components/groupsio-connect.vue  |   2 +-
 .../components/hackernews-connect.vue         |   2 +-
 .../jira/components/jira-connect.vue          |   2 +-
 .../linkedin/components/linkedin-connect.vue  |   2 +-
 .../reddit/components/reddit-connect.vue      |   2 +-
 .../slack/components/slack-connect.vue        |   2 +-
 .../components/stackoverflow-connect.vue      |   2 +-
 .../twitter/components/twitter-connect.vue    |   2 +-
 frontend/src/config/links.ts                  |   1 +
 .../components/integration-list-item.vue      |  26 ++--
 .../pages/integration-list.page.vue           |  35 +-----
 .../github-integration-progress.vue           |  93 ++++++++++++++
 frontend/src/ui-kit/button/button.scss        |  28 +++++
 .../src/ui-kit/button/types/ButtonType.ts     |   5 +-
 frontend/tailwind.config.js                   |   2 +-
 33 files changed, 443 insertions(+), 338 deletions(-)
 delete mode 100644 frontend/src/config/integrations/github-nango/components/connect/github-connect.vue
 delete mode 100644 frontend/src/config/integrations/github-nango/components/github-connect.vue
 delete mode 100644 frontend/src/config/integrations/github/components/connect/github-connect.vue
 create mode 100644 frontend/src/config/integrations/github/components/github-version-tag.vue
 create mode 100644 frontend/src/modules/integration/components/github-integration-progress.vue

diff --git a/frontend/config/styles/components/button.scss b/frontend/config/styles/components/button.scss
index 2a1bda5ab5..458129bd5c 100644
--- a/frontend/config/styles/components/button.scss
+++ b/frontend/config/styles/components/button.scss
@@ -272,4 +272,23 @@
   --lf-btn-secondary-link-loading-text: var(--lf-color-gray-400);
   --lf-btn-secondary-link-loading-background: var(--lf-color-transparent);
   --lf-btn-secondary-link-loading-border: var(--lf-color-transparent);
+
+  /* Outline */
+  --lf-btn-outline-text: var(--lf-color-gray-900);
+  --lf-btn-outline-background: var(--lf-color-white);
+  --lf-btn-outline-border: var(--lf-color-gray-200);
+  --lf-btn-outline-shadow: var(--shadow-none);
+  // Active
+  --lf-btn-outline-active-text: var(--lf-color-gray-900);
+  --lf-btn-outline-active-background: var(--lf-color-white);
+  --lf-btn-outline-active-border: var(--lf-color-gray-200);
+  // Disabled
+  --lf-btn-secondary-link-disabled-text: var(--lf-color-gray-400);
+  --lf-btn-secondary-link-disabled-background: var(--lf-color-white);
+  --lf-btn-secondary-link-disabled-border: var(--lf-color-gray-200);
+  // Loading
+  --lf-btn-secondary-link-loading-text: var(--lf-color-gray-400);
+  --lf-btn-secondary-link-loading-background: var(--lf-color-white);
+  --lf-btn-secondary-link-loading-border: var(--lf-color-gray-200);
+
 }
diff --git a/frontend/src/config/integrations/confluence/components/confluence-connect.vue b/frontend/src/config/integrations/confluence/components/confluence-connect.vue
index 3608911b5f..d17f76d541 100644
--- a/frontend/src/config/integrations/confluence/components/confluence-connect.vue
+++ b/frontend/src/config/integrations/confluence/components/confluence-connect.vue
@@ -1,6 +1,6 @@
 <template>
   <lf-button
-    type="secondary"
+    type="outline"
     @click="isConfluenceSettingsDrawerVisible = true"
   >
     <lf-icon name="link-simple" />
diff --git a/frontend/src/config/integrations/devto/components/devto-connect.vue b/frontend/src/config/integrations/devto/components/devto-connect.vue
index 3e49ed40b5..e906f63908 100644
--- a/frontend/src/config/integrations/devto/components/devto-connect.vue
+++ b/frontend/src/config/integrations/devto/components/devto-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isDevtoConnectDrawerVisible = true">
+    <lf-button type="outline" @click="isDevtoConnectDrawerVisible = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/discord/components/discord-connect.vue b/frontend/src/config/integrations/discord/components/discord-connect.vue
index 3424c20c83..17f321d683 100644
--- a/frontend/src/config/integrations/discord/components/discord-connect.vue
+++ b/frontend/src/config/integrations/discord/components/discord-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/discourse/components/discourse-connect.vue b/frontend/src/config/integrations/discourse/components/discourse-connect.vue
index 690b04a97d..50bc32751c 100644
--- a/frontend/src/config/integrations/discourse/components/discourse-connect.vue
+++ b/frontend/src/config/integrations/discourse/components/discourse-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isDiscourseConnectDrawerOpen = true">
+    <lf-button type="outline" @click="isDiscourseConnectDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-connect.vue b/frontend/src/config/integrations/gerrit/components/gerrit-connect.vue
index 2180f82d4e..5dbc7c3c51 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-connect.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isGerritConnectDrawerOpen = true">
+    <lf-button type="outline" @click="isGerritConnectDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/git/components/git-connect.vue b/frontend/src/config/integrations/git/components/git-connect.vue
index b825ee9b59..fa1993afd1 100644
--- a/frontend/src/config/integrations/git/components/git-connect.vue
+++ b/frontend/src/config/integrations/git/components/git-connect.vue
@@ -5,7 +5,7 @@
       <!--        <lf-icon name="circle-info" type="regular" />-->
       <!--        Details-->
       <!--      </lf-button>-->
-      <lf-button type="secondary" @click="isGitConnectDrawerVisible = true">
+      <lf-button type="outline" @click="isGitConnectDrawerVisible = true">
         <lf-icon name="link-simple" />
         <slot>Connect</slot>
       </lf-button>
diff --git a/frontend/src/config/integrations/git/components/git-params.vue b/frontend/src/config/integrations/git/components/git-params.vue
index 0f06207ed3..30e0102990 100644
--- a/frontend/src/config/integrations/git/components/git-params.vue
+++ b/frontend/src/config/integrations/git/components/git-params.vue
@@ -1,47 +1,83 @@
 <template>
-  <div>
-    <div class="flex items-center gap-1">
-      <el-popover trigger="hover" placement="top" popper-class="!w-72">
-        <template #reference>
-          <div
-            class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
-          >
-            <lf-svg name="git-repository" class="w-4 h-4 !text-gray-600 mr-1 flex items-center" />
-            {{ repositories.length }}
-            {{ repositories.length !== 1 ? "remote URLs" : "remote URL" }}
-          </div>
-        </template>
-
-        <p class="text-gray-400 text-[13px] font-semibold mb-4">
-          Git Remote URLs
-        </p>
-        <div class="max-h-44 overflow-auto -my-1 px-1">
-          <article
-            v-for="repository of repositories"
-            :key="repository"
-            class="flex items-center flex-nowrap mb-4 last:mb-0"
+  <div class="flex items-center gap-1">
+    <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+
+    <el-popover trigger="hover" placement="top" popper-class="!w-72" v-if="reposNoMirrored.length > 0">
+      <template #reference>
+        <div
+          class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
+        >
+          {{ reposNoMirrored.length }}
+          {{ reposNoMirrored.length !== 1 ? "remote URLs" : "remote URL" }}
+        </div>
+      </template>
+
+      <p class="text-gray-400 text-[13px] font-semibold mb-4">
+        Git Remote URLs
+      </p>
+      <div class="max-h-44 overflow-auto -my-1 px-1">
+        <article
+          v-for="repository of reposNoMirrored"
+          :key="repository"
+          class="flex items-center flex-nowrap mb-4 last:mb-0"
+        >
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+
+          <a
+            :href="repository"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-gray-900 text-[13px] max-w-3xs truncate hover:underline"
           >
-            <lf-svg name="git-repository" class="w-4 h-4 mr-1 flex items-center" />
-
-            <a
-              :href="repository"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-gray-900 text-[13px] max-w-3xs truncate hover:underline"
-            >
-              {{ removeProtocolAndDomain(repository) }}
-            </a>
-          </article>
+            {{ removeProtocolAndDomain(repository) }}
+          </a>
+        </article>
+      </div>
+    </el-popover>
+    
+    <span v-if="mirroredRepoUrls.length > 0 && reposNoMirrored.length > 0">/</span>
+
+    <el-popover trigger="hover" placement="top" popper-class="!w-72" v-if="mirroredRepoUrls.length > 0">
+      <template #reference>
+        <div
+          class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
+        >
+          {{ pluralize('repository', mirroredRepoUrls.length, true) }} (via GitHub)
         </div>
-      </el-popover>
-    </div>
+      </template>
+
+      <p class="text-gray-400 text-[13px] font-semibold mb-4">
+        Repositories
+      </p>
+      <div class="max-h-44 overflow-auto -my-1 px-1">
+        <article
+          v-for="repository of mirroredRepoUrls"
+          :key="repository"
+          class="flex items-center flex-nowrap mb-4 last:mb-0"
+        >
+        <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+
+          <a
+            :href="repository"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-gray-900 text-[13px] max-w-3xs truncate hover:underline"
+          >
+            {{ removeProtocolAndDomain(repository) }}
+          </a>
+        </article>
+      </div>
+    </el-popover>
+
+    
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
-import LfSvg from '@/shared/svg/svg.vue';
+import { ref, onMounted, watch, computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
+import pluralize from 'pluralize';
 
 const props = defineProps({
   integration: {
@@ -52,16 +88,25 @@ const props = defineProps({
 
 const repositories = ref<string[]>([]);
 
+// Track mirrored repos (sourceIntegrationId != gitIntegrationId)
+const mirroredRepoUrls =  ref<string[]>([]);
+const reposNoMirrored = computed(() => repositories.value.filter((r) => !mirroredRepoUrls.value.includes(r)));
+
 const fetchRepositories = () => {
   if (!props.integration?.id) return;
 
   IntegrationService.fetchGitMappings(props.integration)
     .then((res: any[]) => {
       repositories.value = res.map((r) => r.url);
+
+      mirroredRepoUrls.value = res
+        .filter((r) => r.sourceIntegrationId !== r.gitIntegrationId)
+        .map((r) => r.url);
     })
     .catch(() => {
       // Fallback to settings.remotes if API fails
       repositories.value = props.integration.settings?.remotes || [];
+      mirroredRepoUrls.value = [];
     });
 };
 
diff --git a/frontend/src/config/integrations/github-nango/components/connect/github-connect.vue b/frontend/src/config/integrations/github-nango/components/connect/github-connect.vue
deleted file mode 100644
index fbf455d262..0000000000
--- a/frontend/src/config/integrations/github-nango/components/connect/github-connect.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div>
-    <div class="flex items-center gap-4">
-      <!--      <lf-button type="secondary-ghost" class="!text-gray-500" @click="isDetailsModalOpen = true">-->
-      <!--        <lf-icon name="circle-info" type="regular" />-->
-      <!--        Details-->
-      <!--      </lf-button>-->
-      <el-tooltip
-        content="Onboarding new data for GitHub is currently disabled due to some issues we are experiencing.
-      Please contact support if you need to onboard new data or update settings."
-        placement="top"
-      >
-        <span>
-          <lf-button type="secondary" disabled @click="isConnectModalOpen = true">
-            <lf-icon name="link-simple" />
-            Connect
-          </lf-button>
-        </span>
-      </el-tooltip>
-    </div>
-    <lf-github-connect-modal
-      v-if="isConnectModalOpen"
-      v-model="isConnectModalOpen"
-    />
-    <!--    <lf-github-details-modal-->
-    <!--      v-if="isDetailsModalOpen"-->
-    <!--      v-model="isDetailsModalOpen"-->
-    <!--      @connect="isConnectModalOpen = true; isDetailsModalOpen = false;"-->
-    <!--    />-->
-    <lf-github-connect-finishing-modal v-model="isFinishingModalOpen" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import LfButton from '@/ui-kit/button/Button.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-import { useRoute } from 'vue-router';
-import { mapActions } from '@/shared/vuex/vuex.helpers';
-
-const route = useRoute();
-const { doGithubConnect } = mapActions('integration');
-
-const isConnectModalOpen = ref(false);
-// const isDetailsModalOpen = ref(false);
-const isFinishingModalOpen = ref(false);
-
-const finallizeGithubConnect = () => {
-  const {
-    code, source, state,
-  } = route.query;
-  const setupAction = route.query.setup_action;
-  const installId = route.query.installation_id;
-
-  if (code && !source && state !== 'noconnect') {
-    isFinishingModalOpen.value = true;
-    doGithubConnect({
-      code,
-      installId,
-      setupAction,
-    }).then(() => {
-      isFinishingModalOpen.value = false;
-    });
-  }
-};
-
-onMounted(() => {
-  finallizeGithubConnect();
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubConnect',
-};
-</script>
diff --git a/frontend/src/config/integrations/github-nango/components/github-connect.vue b/frontend/src/config/integrations/github-nango/components/github-connect.vue
deleted file mode 100644
index cf0ed4d7d7..0000000000
--- a/frontend/src/config/integrations/github-nango/components/github-connect.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div>
-    <div class="flex items-center gap-4">
-      <!--      <lf-button v-if="!props.hideDetails" type="secondary-ghost" class="!text-gray-500" @click="isDetailsModalOpen = true">-->
-      <!--        <lf-icon name="circle-info" type="regular" />-->
-      <!--        Details-->
-      <!--      </lf-button>-->
-      <lf-button type="secondary" @click="isSettingsDrawerOpen = true">
-        <lf-icon name="link-simple" />
-        <slot>Connect</slot>
-      </lf-button>
-    </div>
-    <lf-github-settings-drawer
-      v-if="isSettingsDrawerOpen"
-      v-model="isSettingsDrawerOpen"
-      :integration="props.integration"
-      :segment-id="props.segmentId"
-      :grandparent-id="props.grandparentId"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import LfButton from '@/ui-kit/button/Button.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
-// import { useAuthStore } from '@/modules/auth/store/auth.store';
-// import { storeToRefs } from 'pinia';
-
-const props = defineProps<{
-  integration: any;
-  segmentId: string | null;
-  grandparentId: string | null;
-}>();
-
-const isSettingsDrawerOpen = ref(false);
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubConnect',
-};
-</script>
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index 2938e2d8ac..2d6b43e132 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <lf-drawer v-model="isDrawerVisible">
     <div class="flex flex-col justify-between h-full">
-      <section class="pt-4 px-6 pb-6 border-b border-gray-100">
+      <section class="px-6 py-5 border-b border-gray-100">
         <div class="flex justify-between pb-3">
           <div>
             <p class="text-tiny text-gray-500 mb-1.5">
@@ -10,21 +10,31 @@
             <div class="flex items-center gap-2">
               <img :src="githubImage" alt="GitHub" class="h-6 min-w-6" />
               <h5 class="text-black">
-                GitHub
+                GitHub 
               </h5>
+              <lf-github-version-tag version="v2" tooltip-content="New integration" />
             </div>
           </div>
           <lf-button
-            type="secondary-ghost"
+            type="outline"
             icon-only
             @click="isDrawerVisible = false"
           >
             <lf-icon name="xmark" />
           </lf-button>
         </div>
-        <p class="text-small text-gray-500">
-          Sync GitHub repositories to track profile information and all relevant
-          activities like commits, pull requests, discussions, and more.
+        <p class="text-xs text-gray-500">
+          Sync profile information, stars, forks, pull requests, issues, and discussions.
+          <a
+            aria-label="Question"
+            class="btn btn-link btn-link--primary hover:no-underline gap-1 "
+            :href="links.githubIntegration"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <lf-icon name="book-open" :size="16" />
+            Learn more
+          </a>
         </p>
       </section>
       <div class="flex-grow overflow-auto">
@@ -47,7 +57,7 @@
         style="box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.05)"
       >
         <lf-button
-          type="secondary-ghost-light"
+          type="outline"
           @click="isDrawerVisible = false"
         >
           Cancel
@@ -55,12 +65,14 @@
         <span>
           <lf-button
             type="primary"
+            class="!rounded-full"
             :disabled="
               $v.$invalid
                 || !repositories.length
             "
             @click="connect()"
           >
+            <lf-icon name="link-simple" :size="16" />
             {{ props.integration ? 'Update settings' : 'Connect' }}
           </lf-button>
         </span>
@@ -107,6 +119,8 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import { showIntegrationProgressNotification } from '@/modules/integration/helpers/integration-progress-notification';
 import { dateHelper } from '@/shared/date-helper/date-helper';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
+import { links } from '@/config/links';
+import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
 
 const props = defineProps<{
   modelValue: boolean;
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-empty.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-empty.vue
index 4f77802a6e..34b80e4745 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-empty.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-empty.vue
@@ -1,23 +1,33 @@
 <template>
   <div class="flex justify-center">
-    <div class="pt-16 flex flex-col items-center w-full max-w-100">
-      <lf-svg name="git-repository" class="w-16 h-16 text-gray-300 mb-6" />
-      <h6 class="text-center pb-3">
+    <div class="pt-10 flex flex-col items-center w-full max-w-100 gap-4">
+      <lf-icon name="book" type="regular" :size="50" class="text-gray-400" />
+      <h6 class="text-center">
         Sync and map GitHub repositories
       </h6>
-      <p class="text-center text-small text-gray-500 pb-6">
-        Choose which repositories you want to track, and map them with the corresponding project.
-      </p>
+      <div class="flex flex-col gap-4">
+        <div class="text-small text-gray-600 flex flex-row gap-4">
+          <div class="text-xs font-medium bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center shrink-0">
+            1
+          </div>
+          Choose which repositories you want to track, or sync entire GitHub organizations;
+        </div>
+        <div class="text-small text-gray-600 flex flex-row gap-4">
+          <div class="text-xs font-medium bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center shrink-0">
+            2
+          </div>
+          Map each repository with the corresponding project.
+        </div>
+      </div>
       <lf-button type="primary-ghost" @click="emit('add')">
-        <lf-icon name="arrows-rotate" type="regular" />
-        Add repositories
+        <lf-icon name="plus" type="regular" />
+        Sync repositories/organizations
       </lf-button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import LfSvg from '@/shared/svg/svg.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 
diff --git a/frontend/src/config/integrations/github-nango/config.ts b/frontend/src/config/integrations/github-nango/config.ts
index d1e754bf81..a4d2e47230 100644
--- a/frontend/src/config/integrations/github-nango/config.ts
+++ b/frontend/src/config/integrations/github-nango/config.ts
@@ -1,11 +1,12 @@
-import { IntegrationConfig } from '@/config/integrations';
-import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
-import GithubConnect from './components/github-connect.vue';
-import GithubParams from './components/github-params.vue';
-import GithubDropdown from './components/github-dropdown.vue';
-import GithubMappedRepos from './components/github-mapped-repos.vue';
+import { IntegrationConfig } from '@/config/integrations'
+import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue'
+// For now we will be referencing the connect component from the github (old) integration
+import GithubConnect from '@/config/integrations/github/components/github-connect.vue'
+import GithubParams from './components/github-params.vue'
+import GithubDropdown from './components/github-dropdown.vue'
+import GithubMappedRepos from './components/github-mapped-repos.vue'
 
-const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href
 
 const github: IntegrationConfig = {
   key: 'github',
@@ -30,6 +31,6 @@ const github: IntegrationConfig = {
       text: 'Select repositories to track and map them to projects.',
     },
   ],
-};
+}
 
-export default github;
+export default github
diff --git a/frontend/src/config/integrations/github/components/connect/github-connect.vue b/frontend/src/config/integrations/github/components/connect/github-connect.vue
deleted file mode 100644
index bb6a355448..0000000000
--- a/frontend/src/config/integrations/github/components/connect/github-connect.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div>
-    <div class="flex items-center gap-4">
-      <!--      <lf-button type="secondary-ghost" class="!text-gray-500" @click="isDetailsModalOpen = true">-->
-      <!--        <lf-icon name="circle-info" type="regular" />-->
-      <!--        Details-->
-      <!--      </lf-button>-->
-      <lf-button type="secondary" @click="isConnectModalOpen = true">
-        <lf-icon name="link-simple" />
-        Connect
-      </lf-button>
-    </div>
-    <lf-github-connect-modal
-      v-if="isConnectModalOpen"
-      v-model="isConnectModalOpen"
-    />
-    <!--    <lf-github-details-modal-->
-    <!--      v-if="isDetailsModalOpen"-->
-    <!--      v-model="isDetailsModalOpen"-->
-    <!--      @connect="isConnectModalOpen = true; isDetailsModalOpen = false;"-->
-    <!--    />-->
-    <lf-github-connect-finishing-modal v-model="isFinishingModalOpen" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import LfButton from '@/ui-kit/button/Button.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-import { useRoute } from 'vue-router';
-import { mapActions } from '@/shared/vuex/vuex.helpers';
-import LfGithubConnectFinishingModal
-  from '@/config/integrations/github/components/connect/github-connect-finishing-modal.vue';
-// import LfGithubDetailsModal from '@/config/integrations/github/components/github-details-modal.vue';
-import LfGithubConnectModal from './github-connect-modal.vue';
-
-const route = useRoute();
-const { doGithubConnect } = mapActions('integration');
-
-const isConnectModalOpen = ref(false);
-// const isDetailsModalOpen = ref(false);
-const isFinishingModalOpen = ref(false);
-
-const finallizeGithubConnect = () => {
-  const {
-    code, source, state,
-  } = route.query;
-  const setupAction = route.query.setup_action;
-  const installId = route.query.installation_id;
-
-  if (code && !source && state !== 'noconnect') {
-    isFinishingModalOpen.value = true;
-    doGithubConnect({
-      code,
-      installId,
-      setupAction,
-    }).then(() => {
-      isFinishingModalOpen.value = false;
-    });
-  }
-};
-
-onMounted(() => {
-  finallizeGithubConnect();
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubConnect',
-};
-</script>
diff --git a/frontend/src/config/integrations/github/components/github-connect.vue b/frontend/src/config/integrations/github/components/github-connect.vue
index 7dac4be9c2..5241c6ef80 100644
--- a/frontend/src/config/integrations/github/components/github-connect.vue
+++ b/frontend/src/config/integrations/github/components/github-connect.vue
@@ -1,38 +1,111 @@
 <template>
   <div>
-    <div class="flex items-center gap-4">
-      <!--      <lf-button v-if="!props.hideDetails" type="secondary-ghost" class="!text-gray-500" @click="isDetailsModalOpen = true">-->
-      <!--        <lf-icon name="circle-info" type="regular" />-->
-      <!--        Details-->
-      <!--      </lf-button>-->
-      <lf-button type="secondary" @click="isSettingsDrawerOpen = true">
-        <lf-icon name="link-simple" />
-        <slot>Connect</slot>
-      </lf-button>
-    </div>
-    <lf-github-settings-drawer
-      v-if="isSettingsDrawerOpen"
-      v-model="isSettingsDrawerOpen"
-      :integration="props.integration"
-      :segment-id="props.segmentId"
-      :grandparent-id="props.grandparentId"
-    />
+    <lfx-dropdown
+      placement="bottom-end"
+      width="20rem"
+    >
+      <template #trigger>
+        <lf-button type="outline">
+          <lf-icon name="link-simple" />
+          <slot>Connect</slot>
+        </lf-button>
+      </template>
+
+      <lfx-dropdown-item @click="isV2SettingsDrawerOpen = true">
+        <div class="flex items-start gap-2">
+          <lf-github-version-tag version="v2" />
+          <div>
+            <div class="text-sm text-gray-900">
+              GitHub - New integration
+            </div>
+            <p class="text-xs text-gray-500">
+              Sync repositories from multiple GitHub organizations. Doesn’t require organization admin permissions.  
+            </p>
+          </div>
+        </div>
+      </lfx-dropdown-item>
+      <lfx-dropdown-item @click="isV1SettingsDrawerOpen = true">
+        <div class="flex items-start gap-2">
+          <lf-github-version-tag version="v1" />
+          <div>
+            <div class="text-sm text-gray-900">
+              GitHub - Old integration
+            </div>
+            <p class="text-xs text-gray-500">
+              Sync repositories from a GitHub organization. Requires organization admin permissions.
+            </p>
+          </div>
+        </div>
+      </lfx-dropdown-item>
+    </lfx-dropdown>
   </div>
+
+  <!-- V2 Settings Drawer -->
+  <lf-github-nango-settings-drawer
+    v-if="isV2SettingsDrawerOpen"
+    v-model="isV2SettingsDrawerOpen"
+    :integration="props.integration"
+    :segment-id="props.segmentId"
+    :grandparent-id="props.grandparentId"
+  />
+
+  <!-- V1 Settings Drawer -->
+  <lf-github-connect-modal
+    v-if="isV1SettingsDrawerOpen"
+    v-model="isV1SettingsDrawerOpen"
+  />
+  <lf-github-connect-finishing-modal v-model="isFinishingModalOpen" />
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
-import LfGithubSettingsDrawer from '@/config/integrations/github/components/settings/github-settings-drawer.vue';
+import LfxDropdown from '@/ui-kit/lfx/dropdown/dropdown.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfGithubNangoSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
+import LfGithubConnectModal from '@/config/integrations/github/components/connect/github-connect-modal.vue';
+import LfGithubConnectFinishingModal from '@/config/integrations/github/components/connect/github-connect-finishing-modal.vue';
+import { mapActions } from '@/shared/vuex/vuex.helpers';
+import { useRoute } from 'vue-router';
+import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
 
+const route = useRoute();
 const props = defineProps<{
   integration: any,
   segmentId: string | null;
   grandparentId: string | null;
 }>();
 
-const isSettingsDrawerOpen = ref(false);
+const isV2SettingsDrawerOpen = ref(false);
+const isV1SettingsDrawerOpen = ref(false);
+
+const isFinishingModalOpen = ref(false);
+
+const { doGithubConnect } = mapActions('integration');
+
+const finallizeGithubConnect = () => {
+  const {
+    code, source, state,
+  } = route.query;
+  const setupAction = route.query.setup_action;
+  const installId = route.query.installation_id;
+
+  if (code && !source && state !== 'noconnect') {
+    isFinishingModalOpen.value = true;
+    doGithubConnect({
+      code,
+      installId,
+      setupAction,
+    }).then(() => {
+      isFinishingModalOpen.value = false;
+    });
+  }
+};
+
+onMounted(() => {
+  finallizeGithubConnect();
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/config/integrations/github/components/github-version-tag.vue b/frontend/src/config/integrations/github/components/github-version-tag.vue
new file mode 100644
index 0000000000..5daa267d9e
--- /dev/null
+++ b/frontend/src/config/integrations/github/components/github-version-tag.vue
@@ -0,0 +1,27 @@
+<template>
+  <lf-tooltip 
+    :content="props.tooltipContent" 
+    :disabled="!props.tooltipContent" 
+    placement="top"
+    class="font-primary font-semibold">
+    <lfx-chip
+      type="bordered"
+      size="default"
+      class="cursor-default"
+    >
+      <span class="text-xs text-gray-500 font-semibold font-primary">
+        {{ props.version }}
+      </span>
+    </lfx-chip>
+  </lf-tooltip>
+</template>
+
+<script setup lang="ts">
+import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
+import LfxChip from '@/ui-kit/lfx/chip/chip.vue';
+
+const props = defineProps<{
+  version: 'v1' | 'v2';
+  tooltipContent?: string;
+}>();
+</script>
\ No newline at end of file
diff --git a/frontend/src/config/integrations/github/config.ts b/frontend/src/config/integrations/github/config.ts
index 4f77eecc2a..3fc9a6b3d8 100644
--- a/frontend/src/config/integrations/github/config.ts
+++ b/frontend/src/config/integrations/github/config.ts
@@ -1,11 +1,11 @@
-import { IntegrationConfig } from '@/config/integrations';
-import GithubConnect from './components/connect/github-connect.vue';
-import GithubStatus from './components/github-status.vue';
-import GithubAction from './components/github-action.vue';
-import GithubParams from './components/github-params.vue';
-import GithubMappedRepos from './components/github-mapped-repos.vue';
+import { IntegrationConfig } from '@/config/integrations'
+import GithubConnect from './components/github-connect.vue'
+import GithubStatus from './components/github-status.vue'
+import GithubAction from './components/github-action.vue'
+import GithubParams from './components/github-params.vue'
+import GithubMappedRepos from './components/github-mapped-repos.vue'
 
-const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href
 
 const github: IntegrationConfig = {
   key: 'github',
@@ -33,6 +33,6 @@ const github: IntegrationConfig = {
       text: 'Waiting for organization admin to approve the installation.',
     },
   ],
-};
+}
 
-export default github;
+export default github
diff --git a/frontend/src/config/integrations/gitlab/components/gitlab-connect.vue b/frontend/src/config/integrations/gitlab/components/gitlab-connect.vue
index e95cebde22..cf40fbc0ce 100644
--- a/frontend/src/config/integrations/gitlab/components/gitlab-connect.vue
+++ b/frontend/src/config/integrations/gitlab/components/gitlab-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/groupsio/components/groupsio-connect.vue b/frontend/src/config/integrations/groupsio/components/groupsio-connect.vue
index 917b5818f6..7e24261838 100644
--- a/frontend/src/config/integrations/groupsio/components/groupsio-connect.vue
+++ b/frontend/src/config/integrations/groupsio/components/groupsio-connect.vue
@@ -4,7 +4,7 @@
     <!--      <lf-icon name="circle-info" type="regular" />-->
     <!--      Details-->
     <!--    </lf-button>-->
-    <lf-button type="secondary" @click="isSettingsDrawerOpen = true">
+    <lf-button type="outline" @click="isSettingsDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/hackernews/components/hackernews-connect.vue b/frontend/src/config/integrations/hackernews/components/hackernews-connect.vue
index 8008a46d0a..7f9459361c 100644
--- a/frontend/src/config/integrations/hackernews/components/hackernews-connect.vue
+++ b/frontend/src/config/integrations/hackernews/components/hackernews-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isHackernewsSettingsDrawerOpen = true">
+    <lf-button type="outline" @click="isHackernewsSettingsDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/jira/components/jira-connect.vue b/frontend/src/config/integrations/jira/components/jira-connect.vue
index fd74db2995..61ee1b9bcb 100644
--- a/frontend/src/config/integrations/jira/components/jira-connect.vue
+++ b/frontend/src/config/integrations/jira/components/jira-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isJiraSettingsDrawerVisible = true">
+    <lf-button type="outline" @click="isJiraSettingsDrawerVisible = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/linkedin/components/linkedin-connect.vue b/frontend/src/config/integrations/linkedin/components/linkedin-connect.vue
index 7aa6f98aca..88c9ce1a1a 100644
--- a/frontend/src/config/integrations/linkedin/components/linkedin-connect.vue
+++ b/frontend/src/config/integrations/linkedin/components/linkedin-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/reddit/components/reddit-connect.vue b/frontend/src/config/integrations/reddit/components/reddit-connect.vue
index 1d3f87dc3e..fd1ef05a22 100644
--- a/frontend/src/config/integrations/reddit/components/reddit-connect.vue
+++ b/frontend/src/config/integrations/reddit/components/reddit-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isRedditSettingsDrawerOpen = true">
+    <lf-button type="outline" @click="isRedditSettingsDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/slack/components/slack-connect.vue b/frontend/src/config/integrations/slack/components/slack-connect.vue
index 0911f545fe..8e621dc8e1 100644
--- a/frontend/src/config/integrations/slack/components/slack-connect.vue
+++ b/frontend/src/config/integrations/slack/components/slack-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/stackoverflow/components/stackoverflow-connect.vue b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-connect.vue
index 255c053ae0..d2a7a39307 100644
--- a/frontend/src/config/integrations/stackoverflow/components/stackoverflow-connect.vue
+++ b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isStackoverflowConnectDrawerOpen = true">
+    <lf-button type="outline" @click="isStackoverflowConnectDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/twitter/components/twitter-connect.vue b/frontend/src/config/integrations/twitter/components/twitter-connect.vue
index cbe5925115..1b0d4fd170 100644
--- a/frontend/src/config/integrations/twitter/components/twitter-connect.vue
+++ b/frontend/src/config/integrations/twitter/components/twitter-connect.vue
@@ -4,7 +4,7 @@
     <!--      <lf-icon name="circle-info" type="regular" />-->
     <!--      Details-->
     <!--    </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/links.ts b/frontend/src/config/links.ts
index f2e51cffc8..13e2f76af1 100644
--- a/frontend/src/config/links.ts
+++ b/frontend/src/config/links.ts
@@ -3,4 +3,5 @@
 
 export const links = {
   integrations: `https://docs.crowd.dev/docs/getting-started/integrations`,
+  githubIntegration: `https://docs.crowd.dev/docs/getting-started/integrations/github-integration`,
 }
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
index ba0b8f0e4c..6ea946a885 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
@@ -1,9 +1,9 @@
 <template>
   <article
     v-if="props.config"
-    class="border border-gray-200 shadow-sm rounded-lg"
+    class="border border-gray-200 shadow-xs rounded-xl overflow-hidden"
   >
-    <div class="py-4 pl-4 pr-5 flex justify-between items-center">
+    <div class="p-5 pr-5 flex justify-between items-center">
       <!-- Info -->
       <div class="flex items-center gap-4">
         <div class=" h-12 w-12 border border-gray-200 rounded-md flex items-center justify-center">
@@ -12,8 +12,12 @@
           </div>
         </div>
         <div>
-          <h6 class="mb-0.5">
-            {{ props.config.name }}
+          <h6 v-if="isV2" class="mb-0.5 flex items-center gap-2">
+            Github
+            <lf-github-version-tag v-if="isV2" version="v2" tooltip-content="New integration" />
+          </h6>
+          <h6 v-else class="mb-0.5">
+            {{ props.config.name.replace(' (v2)', '') }}
           </h6>
           <p class="text-gray-500 text-small">
             {{ props.config.description }}
@@ -27,7 +31,7 @@
       </div>
 
       <!-- Connect component -->
-      <div v-else class="flex items-center justify-end gap-4">
+      <div v-else class="flex items-center justify-end">
         <component
           :is="props.config.connectComponent"
           v-if="props.config.connectComponent && isComponentMounted"
@@ -38,12 +42,13 @@
       </div>
     </div>
 
-    <div v-if="integration && integration.status" :class="status.actionBar.background">
+    <div v-if="integration && integration.status" :class="isGithubInProgress ? 'bg-gray-50' : status.actionBar.background">
       <div class="items-center py-2.5 px-4 flex justify-between">
         <!-- Custom content -->
         <div class="text-small flex items-center" :class="status.actionBar.color">
-          <div v-if="isInProgress && !integration.isNango">
-            <app-integration-progress-bar :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
+          <div v-if="isInProgress">
+            <lf-github-integration-progress v-if="integration.key === 'github'" :integration="integration" />
+            <app-integration-progress-bar v-else :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
           </div>
           <div v-else-if="hasError">
             {{ props.config.name }} integration failed to connect due to an API error.
@@ -166,6 +171,8 @@ import { useRoute } from 'vue-router';
 import { dateHelper } from '@/shared/date-helper/date-helper';
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
+import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
+import LfGithubIntegrationProgress from '@/modules/integration/components/github-integration-progress.vue';
 
 const props = defineProps<{
   config: IntegrationConfig,
@@ -185,6 +192,7 @@ const { trackEvent } = useProductTracking();
 
 const integration = computed(() => findByPlatform.value(props.config.key));
 const status = computed(() => getIntegrationStatus(integration.value));
+const isV2 = computed(() => integration.value?.isNango && integration.value?.status);
 
 const lastDataCheckCompleted = computed(() => {
   if (['github', 'gerrit', 'jira', 'confluence'].includes(integration.value.platform)) {
@@ -202,6 +210,8 @@ const isInProgress = computed(() => integration.value.status === 'in-progress');
 const hasError = computed(() => integration.value.status === 'error');
 const isComplete = computed(() => integration.value.status === 'done');
 
+const isGithubInProgress = computed(() => integration.value?.platform === 'github' && isInProgress.value);
+
 const selectedProgress = computed(() => (props.progress || []).find((p) => p.platform === props.config.key));
 
 const isComponentMounted = ref(false);
diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
index fcf1b486f1..53dc6dc465 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
@@ -86,32 +86,10 @@
     <section v-loading="loadingFetch">
       <app-integration-progress-wrapper
         v-if="!loadingFetch"
-        :segments="[route.params.id]"
+        :segments="[route.params.id as string]"
       >
         <template #default="{ progress, progressError }">
           <div v-if="platformsByStatus.length > 0" class="flex flex-col gap-6">
-            <lf-tooltip
-              v-if="isTeamUser"
-              class="ml-auto"
-              placement="top"
-              content-class="!max-w-76 !p-3 !text-start"
-              :disabled="!isGithubConnected"
-              content="Please disconnect the existing integration to be able to select the GitHub version"
-            >
-              <lf-switch
-                v-model="useGitHubNango"
-                :size="'small'"
-                :disabled="isGithubConnected"
-              >
-                <template #inactive>
-                  <span class="text-gray-500 text-small mr-2">Use old GitHub integration</span>
-                </template>
-                <template #default>
-                  <span class="text-gray-500 text-small">Use new GitHub integration</span>
-                </template>
-              </lf-switch>
-            </lf-tooltip>
-
             <lf-integration-list-item
               v-for="key in platformsByStatus"
               :key="key"
@@ -137,22 +115,19 @@
 
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
-import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { computed, onMounted, ref } from 'vue';
 import { getSegmentName } from '@/utils/segments';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
 import { lfIntegrations } from '@/config/integrations';
-import LfxTabs from '@/ui-kit/lfx/tabs/Tabs.vue';
+import LfxTabs from '@/ui-kit/lfx/tabs/tabs.vue';
 import LfIntegrationListItem from '@/modules/admin/modules/integration/components/integration-list-item.vue';
-import LfxTab from '@/ui-kit/lfx/tabs/Tab.vue';
+import LfxTab from '@/ui-kit/lfx/tabs/tab.vue';
 import AppIntegrationProgressWrapper from '@/modules/integration/components/integration-progress-wrapper.vue';
 import { mapActions, mapGetters } from '@/shared/vuex/vuex.helpers';
-import LfSwitch from '@/ui-kit/switch/Switch.vue';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import config from '@/config';
-import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import { links } from '@/config/links';
 
 const route = useRoute();
@@ -210,8 +185,8 @@ const env = computed(() => config.env);
 const isTeamUser = computed(() => env.value !== 'production' || teamUserIds.value?.includes(userId.value));
 
 onMounted(() => {
-  localStorage.setItem('segmentId', id);
-  localStorage.setItem('segmentGrandparentId', grandparentId);
+  localStorage.setItem('segmentId', id as string);
+  localStorage.setItem('segmentGrandparentId', grandparentId as string);
 
   doFetch().then(() => {
     useGitHubNango.value = updateGithubVersion();
diff --git a/frontend/src/modules/integration/components/github-integration-progress.vue b/frontend/src/modules/integration/components/github-integration-progress.vue
new file mode 100644
index 0000000000..8994acdc88
--- /dev/null
+++ b/frontend/src/modules/integration/components/github-integration-progress.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="flex items-center gap-1">
+    <lf-icon
+      name="arrows-rotate"
+      :size="16"
+      class="text-gray-400 mx-2 flex items-center"
+    />
+    <p class="text-gray-600 text-xs">
+      Syncing GitHub data from <span class="font-semibold">{{ orgName }}</span> for 
+      <el-popover trigger="hover" placement="top" popper-class="!w-auto">
+        <template #reference>
+          <span class="underline decoration-dashed cursor-default">
+            {{ pluralize('repository', allRepositoriesNames.length, true) }}
+          </span>
+        </template>
+
+        <div class="-my-1 px-1 max-h-44 overflow-auto" v-if="allRepositoriesNames.length > 0">
+          <article
+            v-for="repo of allRepositoriesNames"
+            :key="repo.name"
+            class="py-2 flex items-center flex-nowrap"
+          >
+            <lf-svg
+              name="git-repository"
+              class="w-4 h-4 mr-2 flex items-center"
+            />
+            <a
+              :href="repo.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+            >
+              /{{ repo.name }}
+            </a>
+          </article>
+        </div>
+      </el-popover>
+      
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { IntegrationService } from '@/modules/integration/integration-service';
+import pluralize from 'pluralize';
+import LfSvg from '@/shared/svg/svg.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = defineProps<{
+  integration: any;
+}>();
+
+const mappings = ref<
+  {
+    url: string;
+    segment: {
+      id: string;
+      name: string;
+    };
+  }[]
+>([]);
+
+const repoNameFromUrl = (url: string) => url.split('/').at(-1);
+
+// TODO: verify if the status of mappedRepositories is available for github old integration
+// const mappedRepositories = computed(() => {
+//   const reposObj = props.integration.settings.nangoMapping;
+//   const mapped = reposObj
+//     ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
+//     : [];
+//   return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
+// });
+
+const allRepositoriesNames = computed(() => props.integration.settings.orgs
+  .map((org: any) => org.repos.map((repo: any) => repo))
+  .flat());
+const orgName = computed(() => props.integration.settings.orgs.length > 0 ? props.integration.settings.orgs[0].name : 'blah');
+
+onMounted(() => {
+  if (props.integration.status !== 'mapping') {
+    IntegrationService.fetchGitHubMappings(props.integration).then((res) => {
+      mappings.value = res;
+    });
+  }
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfGithubIntegrationProgress',
+};
+</script>
diff --git a/frontend/src/ui-kit/button/button.scss b/frontend/src/ui-kit/button/button.scss
index c79b6d8df8..6921b5880c 100644
--- a/frontend/src/ui-kit/button/button.scss
+++ b/frontend/src/ui-kit/button/button.scss
@@ -371,6 +371,34 @@
     --lf-btn-loading-background: var(--lf-btn-secondary-link-loading-background);
     --lf-btn-loading-border: var(--lf-btn-secondary-link-loading-border);
   }
+
+  &--outline {
+    @apply rounded-full;
+    --lf-btn-text: var(--lf-btn-outline-text);
+    --lf-btn-background: var(--lf-btn-outline-background);
+    --lf-btn-border: var(--lf-btn-outline-border);
+    --lf-btn-shadow: var(--lf-btn-outline-shadow);
+
+    // Hover
+    --lf-btn-hover-text: var(--lf-btn-outline-text);
+    --lf-btn-hover-background: var(--lf-btn-outline-background);
+    --lf-btn-hover-border: var(--lf-btn-outline-border);
+
+    // Active
+    --lf-btn-active-text: var(--lf-btn-outline-active-text);
+    --lf-btn-active-background: var(--lf-btn-outline-active-background);
+    --lf-btn-active-border: var(--lf-btn-outline-active-border);
+
+    // Disabled
+    --lf-btn-disabled-text: var(--lf-btn-outline-disabled-text);
+    --lf-btn-disabled-background: var(--lf-btn-outline-disabled-background);
+    --lf-btn-disabled-border: var(--lf-btn-outline-disabled-border);
+
+    // Loading
+    --lf-btn-loading-text: var(--lf-btn-outline-loading-text);
+    --lf-btn-loading-background: var(--lf-btn-outline-loading-background);
+    --lf-btn-loading-border: var(--lf-btn-outline-loading-border);
+  }
 }
 
 .c-btn-group{
diff --git a/frontend/src/ui-kit/button/types/ButtonType.ts b/frontend/src/ui-kit/button/types/ButtonType.ts
index 0a43c93dfe..5863be91cf 100644
--- a/frontend/src/ui-kit/button/types/ButtonType.ts
+++ b/frontend/src/ui-kit/button/types/ButtonType.ts
@@ -9,6 +9,7 @@ export const buttonTypes = [
   'secondary-ghost-light',
   'primary-link',
   'secondary-link',
-] as const;
+  'outline',
+] as const
 
-export type ButtonType = typeof buttonTypes[number];
+export type ButtonType = (typeof buttonTypes)[number]
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 4787e63d16..6c7f7a85eb 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -193,7 +193,7 @@ module.exports = {
         lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
         xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
         '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-        xs: '0 1px 2px -1px rgba(0, 0, 0, 0.10), 0 1px 3px 0 rgba(0, 0, 0, 0.10)',
+        xs: '0 1px 2px 0 rgba(0, 0, 0, 0.02)',
       },
       fontSize: {
         '4xs': ['0.5rem'],

From 125bcdb5d556f981e9e698d2d543e2a423ab1811 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Wed, 21 Jan 2026 17:00:34 +0800
Subject: [PATCH 03/22] fix: github mapping display

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../github-nango/components/github-params.vue | 104 ------------------
 .../integrations/github-nango/config.ts       |   5 +-
 .../components/github-mappings-display.vue    |  59 ++++++++++
 .../github/components/github-params.vue       |  48 +-------
 .../github/components/github-status.vue       |  96 ++++++++++++++--
 .../components/integration-list-item.vue      |   6 +-
 .../modules/integration/types/Integration.ts  |  18 ++-
 .../github-integration-progress.vue           |  93 ----------------
 8 files changed, 170 insertions(+), 259 deletions(-)
 delete mode 100644 frontend/src/config/integrations/github-nango/components/github-params.vue
 create mode 100644 frontend/src/config/integrations/github/components/github-mappings-display.vue
 delete mode 100644 frontend/src/modules/integration/components/github-integration-progress.vue

diff --git a/frontend/src/config/integrations/github-nango/components/github-params.vue b/frontend/src/config/integrations/github-nango/components/github-params.vue
deleted file mode 100644
index 278198f817..0000000000
--- a/frontend/src/config/integrations/github-nango/components/github-params.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <div class="flex items-center gap-1">
-    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-      <template #reference>
-        <div v-if="!isInProgress" class="text-gray-600 text-2xs flex items-center leading-5">
-          <lf-svg
-            name="git-repository"
-            class="w-4 h-4 !text-gray-600 mr-1 flex items-center"
-          />
-          <span class="font-semibold">
-            {{ pluralize('repository', Object.keys(mappings).length, true) }}
-          </span>
-        </div>
-        <span v-else class="text-gray-600 text-2xs flex items-center leading-5 font-semibold">
-          {{ mappedRepositories.length }} out of
-          {{ allRepositoriesNames.length }} repositories connected
-        </span>
-      </template>
-
-      <p class="text-gray-400 text-sm font-semibold mb-4">
-        {{ isInProgress ? 'Connected GitHub repositories' : 'GitHub repositories' }}
-      </p>
-      <div class="-my-1 px-1 max-h-44 overflow-auto">
-        <article
-          v-for="mapping of mappedRepositories"
-          :key="mapping.url"
-          class="py-2 flex items-center flex-nowrap"
-        >
-          <lf-svg
-            name="git-repository"
-            class="w-4 h-4 mr-2 flex items-center"
-          />
-          <a
-            :href="mapping.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
-          >
-            /{{ repoNameFromUrl(mapping.url) }}
-          </a>
-          <lf-icon
-            name="arrow-right"
-            :size="16"
-            class="text-gray-400 mx-2 flex items-center"
-          />
-          <div class="text-xs leading-5 max-w-3xs truncate">
-            {{ mapping.segment.name }}
-          </div>
-        </article>
-      </div>
-    </el-popover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import { IntegrationService } from '@/modules/integration/integration-service';
-import pluralize from 'pluralize';
-import LfSvg from '@/shared/svg/svg.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-
-const props = defineProps<{
-  integration: any;
-}>();
-
-const mappings = ref<
-  {
-    url: string;
-    segment: {
-      id: string;
-      name: string;
-    };
-  }[]
->([]);
-
-const repoNameFromUrl = (url: string) => url.split('/').at(-1);
-
-const mappedRepositories = computed(() => {
-  const reposObj = props.integration.settings.nangoMapping;
-  const mapped = reposObj
-    ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
-    : [];
-  return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
-});
-
-const allRepositoriesNames = computed(() => props.integration.settings.orgs
-  .map((org: any) => org.repos.map((repo: any) => repo.name))
-  .flat());
-
-const isInProgress = computed(() => mappedRepositories.value.length < allRepositoriesNames.value.length);
-onMounted(() => {
-  if (props.integration.status !== 'mapping') {
-    IntegrationService.fetchGitHubMappings(props.integration).then((res) => {
-      mappings.value = res;
-    });
-  }
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubParams',
-};
-</script>
diff --git a/frontend/src/config/integrations/github-nango/config.ts b/frontend/src/config/integrations/github-nango/config.ts
index a4d2e47230..b19bda0fbb 100644
--- a/frontend/src/config/integrations/github-nango/config.ts
+++ b/frontend/src/config/integrations/github-nango/config.ts
@@ -2,7 +2,8 @@ import { IntegrationConfig } from '@/config/integrations'
 import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue'
 // For now we will be referencing the connect component from the github (old) integration
 import GithubConnect from '@/config/integrations/github/components/github-connect.vue'
-import GithubParams from './components/github-params.vue'
+import GithubParams from '@/config/integrations/github/components/github-params.vue'
+import GithubStatus from '@/config/integrations/github/components/github-status.vue'
 import GithubDropdown from './components/github-dropdown.vue'
 import GithubMappedRepos from './components/github-mapped-repos.vue'
 
@@ -16,7 +17,7 @@ const github: IntegrationConfig = {
     'Connect GitHub to sync profile information, stars, forks, pull requests, issues, and discussions.',
   connectComponent: GithubConnect,
   dropdownComponent: GithubDropdown,
-  statusComponent: GithubParams,
+  statusComponent: GithubStatus,
   connectedParamsComponent: GithubParams,
   mappedReposComponent: GithubMappedRepos,
   settingComponent: LfGithubSettingsDrawer,
diff --git a/frontend/src/config/integrations/github/components/github-mappings-display.vue b/frontend/src/config/integrations/github/components/github-mappings-display.vue
new file mode 100644
index 0000000000..3cbd470054
--- /dev/null
+++ b/frontend/src/config/integrations/github/components/github-mappings-display.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="flex items-center gap-1">
+    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
+      <template #reference>
+        <div
+          class="text-gray-600 text-2xs flex items-center leading-5"
+        >
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+          <span class="font-semibold underline decoration-dashed cursor-default">
+            {{ pluralize("repository", Object.keys(mappings).length, true) }}
+          </span>
+        </div>
+      </template>
+
+      <p class="text-gray-400 text-sm font-semibold mb-4">
+        GitHub repositories
+      </p>
+      <div class="-my-1 px-1 max-h-44 overflow-auto">
+        <article
+          v-for="mapping of mappings"
+          :key="mapping.url"
+          class="py-2 flex items-center flex-nowrap"
+        >
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-2" />
+          <a
+            :href="mapping.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+          >
+            /{{ repoNameFromUrl(mapping.url) }}
+          </a>
+          <lf-icon name="arrow-right" :size="16" class="text-gray-400 mx-2 flex items-center" />
+          <div class="text-xs leading-5 max-w-3xs truncate">
+            {{ mapping.segment.name }}
+          </div>
+        </article>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import pluralize from 'pluralize';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
+
+const props = defineProps<{
+  mappings: IntegrationMapping[];
+}>();
+
+const repoNameFromUrl = (url: string) => url.split('/').at(-1);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfGithubMappingsDisplay',
+};
+</script>
diff --git a/frontend/src/config/integrations/github/components/github-params.vue b/frontend/src/config/integrations/github/components/github-params.vue
index 275c1af234..2ae29ff558 100644
--- a/frontend/src/config/integrations/github/components/github-params.vue
+++ b/frontend/src/config/integrations/github/components/github-params.vue
@@ -1,59 +1,17 @@
 <template>
-  <div class="flex items-center gap-1">
-    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-      <template #reference>
-        <div
-          class="text-gray-600 text-2xs flex items-center leading-5"
-        >
-          <lf-svg name="git-repository" class="w-4 h-4 !text-gray-600 mr-1 flex items-center" />
-          <span class="font-semibold">
-            {{ pluralize("repository", Object.keys(mappings).length, true) }}
-          </span>
-        </div>
-      </template>
-
-      <p class="text-gray-400 text-sm font-semibold mb-4">
-        GitHub repositories
-      </p>
-      <div class="-my-1 px-1 max-h-44 overflow-auto">
-        <article
-          v-for="mapping of mappings"
-          :key="mapping.url"
-          class="py-2 flex items-center flex-nowrap"
-        >
-          <lf-svg name="git-repository" class="w-4 h-4 mr-2 flex items-center" />
-          <a
-            :href="mapping.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
-          >
-            /{{ repoNameFromUrl(mapping.url) }}
-          </a>
-          <lf-icon name="arrow-right" :size="16" class="text-gray-400 mx-2 flex items-center" />
-          <div class="text-xs leading-5 max-w-3xs truncate">
-            {{ mapping.segment.name }}
-          </div>
-        </article>
-      </div>
-    </el-popover>
-  </div>
+  <lf-github-mappings-display :mappings="mappings" />
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
-import pluralize from 'pluralize';
-import LfSvg from '@/shared/svg/svg.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
 
 const props = defineProps<{
   integration: any;
 }>();
 
-const mappings = ref([]);
-
-const repoNameFromUrl = (url) => url.split('/').at(-1);
+const mappings = ref<IntegrationMapping[]>([]);
 
 onMounted(() => {
   if (props.integration.status !== 'mapping') {
diff --git a/frontend/src/config/integrations/github/components/github-status.vue b/frontend/src/config/integrations/github/components/github-status.vue
index 9559fe4f32..a8e9fa7ee7 100644
--- a/frontend/src/config/integrations/github/components/github-status.vue
+++ b/frontend/src/config/integrations/github/components/github-status.vue
@@ -1,19 +1,101 @@
 <template>
-  <div
-    v-if="props.integration?.status === 'mapping'"
-    class="flex items-center gap-1"
-  >
-    <lf-svg name="git-repository" class="w-4 h-4" />
-    Mapping repositories...
+  <div class="flex flex-col gap-3">
+    <div class="flex items-center" v-if="mappedRepositories.length > 0">
+      <lf-github-mappings-display :mappings="mappedRepositories" />
+      <span class="font-semibold">&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+      <!-- see integration-list-item.vue for last data check completed -->
+      <span class="text-small text-gray-500">
+        Last data check completed 1 hour ago
+      </span>
+    </div>
+
+    <div class="flex items-center gap-1" v-for="org of orgs" :key="org.url">
+      <lf-icon
+        name="arrows-rotate"
+        :size="16"
+        class="text-gray-400 flex items-center"
+      />
+      <p class="text-gray-600 text-xs">
+        Syncing GitHub data from <span class="font-semibold">{{ org.name }}</span> for 
+        <el-popover trigger="hover" placement="top" popper-class="!w-auto">
+          <template #reference>
+            <span class="underline decoration-dashed cursor-default">
+              {{ pluralize('repository', remainingRepositories(org.url).length, true) }}
+            </span>
+          </template>
+
+          <div class="-my-1 px-1 max-h-44 overflow-auto" v-if="remainingRepositories(org.url).length > 0">
+            <article
+              v-for="repo of remainingRepositories(org.url)"
+              :key="repo.name"
+              class="py-2 flex items-center flex-nowrap"
+            >
+              <lf-icon name="book" :size="16" class="text-gray-600 mr-2" />
+              <a
+                :href="repo.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+              >
+                /{{ repo.name }}
+              </a>
+            </article>
+          </div>
+        </el-popover>
+        
+      </p>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import LfSvg from '@/shared/svg/svg.vue';
+import { computed, onMounted, ref } from 'vue';
+import { IntegrationService } from '@/modules/integration/integration-service';
+import pluralize from 'pluralize';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
+import LfGithubMappingsDisplay from './github-mappings-display.vue';
 
 const props = defineProps<{
   integration: any;
 }>();
+
+const mockNango = {
+  test: {repoName: 'styled-components',}
+};
+
+const mappings = ref<IntegrationMapping[]>([]);
+
+const repoNameFromUrl = (url: string) => url.split('/').at(-1);
+const remainingRepositories = (orgUrl: string) => {
+  const orgRepos = props.integration.settings.orgs.find((o: any) => o.url === orgUrl)?.repos;
+
+  if (!orgRepos) return [];
+
+  return orgRepos.filter((repo: any) => !mappedRepositories.value.includes(repo.url));
+};
+
+const mappedRepositories = computed(() => {
+  const reposObj = props.integration.settings.nangoMapping || mockNango;
+
+  const mapped = reposObj
+    ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
+    : [];
+  return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
+});
+
+const allRepositoriesNames = computed(() => props.integration.settings.orgs
+  .map((org: any) => org.repos.map((repo: any) => repo))
+  .flat());
+const orgs = computed(() => props.integration.settings.orgs);
+
+onMounted(() => {
+  if (props.integration.status !== 'mapping') {
+    IntegrationService.fetchGitHubMappings(props.integration).then((res) => {
+      mappings.value = res;
+    });
+  }
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
index 6ea946a885..e4a999e696 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
@@ -46,9 +46,8 @@
       <div class="items-center py-2.5 px-4 flex justify-between">
         <!-- Custom content -->
         <div class="text-small flex items-center" :class="status.actionBar.color">
-          <div v-if="isInProgress">
-            <lf-github-integration-progress v-if="integration.key === 'github'" :integration="integration" />
-            <app-integration-progress-bar v-else :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
+          <div v-if="isInProgress && integration.key !== 'github'">
+            <app-integration-progress-bar :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
           </div>
           <div v-else-if="hasError">
             {{ props.config.name }} integration failed to connect due to an API error.
@@ -172,7 +171,6 @@ import { dateHelper } from '@/shared/date-helper/date-helper';
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
-import LfGithubIntegrationProgress from '@/modules/integration/components/github-integration-progress.vue';
 
 const props = defineProps<{
   config: IntegrationConfig,
diff --git a/frontend/src/modules/admin/modules/integration/types/Integration.ts b/frontend/src/modules/admin/modules/integration/types/Integration.ts
index 6ad68c2214..c2d94d4720 100644
--- a/frontend/src/modules/admin/modules/integration/types/Integration.ts
+++ b/frontend/src/modules/admin/modules/integration/types/Integration.ts
@@ -1,5 +1,15 @@
-export interface Integration<Settings>{
-  id: string;
-  status: string;
-  settings: Settings;
+export interface Integration<Settings> {
+  id: string
+  status: string
+  settings: Settings
+}
+
+export interface IntegrationMapping {
+  gitIntegrationId?: string
+  sourceIntegrationId?: string
+  url: string
+  segment: {
+    id: string
+    name: string
+  }
 }
diff --git a/frontend/src/modules/integration/components/github-integration-progress.vue b/frontend/src/modules/integration/components/github-integration-progress.vue
deleted file mode 100644
index 8994acdc88..0000000000
--- a/frontend/src/modules/integration/components/github-integration-progress.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div class="flex items-center gap-1">
-    <lf-icon
-      name="arrows-rotate"
-      :size="16"
-      class="text-gray-400 mx-2 flex items-center"
-    />
-    <p class="text-gray-600 text-xs">
-      Syncing GitHub data from <span class="font-semibold">{{ orgName }}</span> for 
-      <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-        <template #reference>
-          <span class="underline decoration-dashed cursor-default">
-            {{ pluralize('repository', allRepositoriesNames.length, true) }}
-          </span>
-        </template>
-
-        <div class="-my-1 px-1 max-h-44 overflow-auto" v-if="allRepositoriesNames.length > 0">
-          <article
-            v-for="repo of allRepositoriesNames"
-            :key="repo.name"
-            class="py-2 flex items-center flex-nowrap"
-          >
-            <lf-svg
-              name="git-repository"
-              class="w-4 h-4 mr-2 flex items-center"
-            />
-            <a
-              :href="repo.url"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
-            >
-              /{{ repo.name }}
-            </a>
-          </article>
-        </div>
-      </el-popover>
-      
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import { IntegrationService } from '@/modules/integration/integration-service';
-import pluralize from 'pluralize';
-import LfSvg from '@/shared/svg/svg.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-
-const props = defineProps<{
-  integration: any;
-}>();
-
-const mappings = ref<
-  {
-    url: string;
-    segment: {
-      id: string;
-      name: string;
-    };
-  }[]
->([]);
-
-const repoNameFromUrl = (url: string) => url.split('/').at(-1);
-
-// TODO: verify if the status of mappedRepositories is available for github old integration
-// const mappedRepositories = computed(() => {
-//   const reposObj = props.integration.settings.nangoMapping;
-//   const mapped = reposObj
-//     ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
-//     : [];
-//   return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
-// });
-
-const allRepositoriesNames = computed(() => props.integration.settings.orgs
-  .map((org: any) => org.repos.map((repo: any) => repo))
-  .flat());
-const orgName = computed(() => props.integration.settings.orgs.length > 0 ? props.integration.settings.orgs[0].name : 'blah');
-
-onMounted(() => {
-  if (props.integration.status !== 'mapping') {
-    IntegrationService.fetchGitHubMappings(props.integration).then((res) => {
-      mappings.value = res;
-    });
-  }
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubIntegrationProgress',
-};
-</script>

From cc69c205f508b7fd318059b1007ccaee9b495039 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Wed, 21 Jan 2026 17:14:34 +0800
Subject: [PATCH 04/22] chore: changed integration description text

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../config/integrations/confluence/config.ts  |  2 +-
 .../src/config/integrations/devto/config.ts   |  2 +-
 .../src/config/integrations/discord/config.ts |  2 +-
 .../config/integrations/discourse/config.ts   |  2 +-
 .../src/config/integrations/gerrit/config.ts  |  2 +-
 .../git/components/git-params.vue             | 16 ++++++-------
 .../src/config/integrations/git/config.ts     |  2 +-
 .../settings/github-settings-drawer.vue       |  2 +-
 .../integrations/github-nango/config.ts       | 23 +++++++++----------
 .../github/components/github-connect.vue      |  2 +-
 .../components/github-mappings-display.vue    |  2 +-
 .../github/components/github-status.vue       | 20 +++++++---------
 .../github/components/github-version-tag.vue  | 11 +++++----
 .../src/config/integrations/github/config.ts  | 21 ++++++++---------
 .../src/config/integrations/gitlab/config.ts  |  2 +-
 .../config/integrations/groupsio/config.ts    |  2 +-
 .../config/integrations/hackernews/config.ts  |  3 +--
 .../src/config/integrations/jira/config.ts    |  2 +-
 .../config/integrations/linkedin/config.ts    |  2 +-
 .../src/config/integrations/reddit/config.ts  |  2 +-
 .../src/config/integrations/slack/config.ts   |  2 +-
 .../integrations/stackoverflow/config.ts      |  2 +-
 .../src/config/integrations/twitter/config.ts |  2 +-
 frontend/src/config/links.ts                  |  6 ++---
 .../pages/integration-list.page.vue           |  5 ----
 .../src/ui-kit/button/types/ButtonType.ts     |  2 +-
 26 files changed, 65 insertions(+), 76 deletions(-)

diff --git a/frontend/src/config/integrations/confluence/config.ts b/frontend/src/config/integrations/confluence/config.ts
index 5c100c9035..1d93a93c0b 100644
--- a/frontend/src/config/integrations/confluence/config.ts
+++ b/frontend/src/config/integrations/confluence/config.ts
@@ -10,7 +10,7 @@ const confluence: IntegrationConfig = {
   key: 'confluence',
   name: 'Confluence',
   image,
-  description: 'Connect Confluence to sync documentation activities from your repos.',
+  description: 'Sync documentation activities from your spaces.',
   connectComponent: ConfluenceConnect,
   connectedParamsComponent: ConfluenceParams,
   dropdownComponent: ConfluenceDropdown,
diff --git a/frontend/src/config/integrations/devto/config.ts b/frontend/src/config/integrations/devto/config.ts
index 2e1692da18..fc359da4c1 100644
--- a/frontend/src/config/integrations/devto/config.ts
+++ b/frontend/src/config/integrations/devto/config.ts
@@ -8,7 +8,7 @@ const devto: IntegrationConfig = {
   key: 'devto',
   name: 'DEV',
   image,
-  description: 'Connect DEV to sync profile information and comments on articles.',
+  description: 'Sync profile information and comments on articles.',
   connectComponent: DevtoConnect,
   connectedParamsComponent: DevtoParams,
   showProgress: false,
diff --git a/frontend/src/config/integrations/discord/config.ts b/frontend/src/config/integrations/discord/config.ts
index 173a7af1a5..1b20fb65f2 100644
--- a/frontend/src/config/integrations/discord/config.ts
+++ b/frontend/src/config/integrations/discord/config.ts
@@ -8,7 +8,7 @@ const discord: IntegrationConfig = {
   key: 'discord',
   name: 'Discord',
   image,
-  description: 'Connect Discord to sync messages, threads, forum channels, and new joiners.',
+  description: 'Sync messages, threads, forum channels, and new joiners.',
   connectComponent: DiscordConnect,
   connectedParamsComponent: DiscordParams,
   showProgress: false,
diff --git a/frontend/src/config/integrations/discourse/config.ts b/frontend/src/config/integrations/discourse/config.ts
index 7f9f32e520..4038923220 100644
--- a/frontend/src/config/integrations/discourse/config.ts
+++ b/frontend/src/config/integrations/discourse/config.ts
@@ -10,7 +10,7 @@ const discourse: IntegrationConfig = {
   key: 'discourse',
   name: 'Discourse',
   image,
-  description: 'Connect Discourse to sync topics, posts, and replies from your account forums.',
+  description: 'Sync topics, posts, and replies from your account forums.',
   connectComponent: DiscourseConnect,
   connectedParamsComponent: DiscourseParams,
   dropdownComponent: DiscourseDropdown,
diff --git a/frontend/src/config/integrations/gerrit/config.ts b/frontend/src/config/integrations/gerrit/config.ts
index 3783f1727b..59a79c2fea 100644
--- a/frontend/src/config/integrations/gerrit/config.ts
+++ b/frontend/src/config/integrations/gerrit/config.ts
@@ -10,7 +10,7 @@ const gerrit: IntegrationConfig = {
   key: 'gerrit',
   name: 'Gerrit',
   image,
-  description: 'Connect Gerrit to sync documentation activities from your repos.',
+  description: 'Sync documentation activities from Gerrit repositories.',
   connectComponent: GerritConnect,
   connectedParamsComponent: GerritParams,
   dropdownComponent: GerritDropdown,
diff --git a/frontend/src/config/integrations/git/components/git-params.vue b/frontend/src/config/integrations/git/components/git-params.vue
index 30e0102990..b96120f6f6 100644
--- a/frontend/src/config/integrations/git/components/git-params.vue
+++ b/frontend/src/config/integrations/git/components/git-params.vue
@@ -2,7 +2,7 @@
   <div class="flex items-center gap-1">
     <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
 
-    <el-popover trigger="hover" placement="top" popper-class="!w-72" v-if="reposNoMirrored.length > 0">
+    <el-popover v-if="reposNoMirrored.length > 0" trigger="hover" placement="top" popper-class="!w-72">
       <template #reference>
         <div
           class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
@@ -34,10 +34,10 @@
         </article>
       </div>
     </el-popover>
-    
+
     <span v-if="mirroredRepoUrls.length > 0 && reposNoMirrored.length > 0">/</span>
 
-    <el-popover trigger="hover" placement="top" popper-class="!w-72" v-if="mirroredRepoUrls.length > 0">
+    <el-popover v-if="mirroredRepoUrls.length > 0" trigger="hover" placement="top" popper-class="!w-72">
       <template #reference>
         <div
           class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
@@ -55,7 +55,7 @@
           :key="repository"
           class="flex items-center flex-nowrap mb-4 last:mb-0"
         >
-        <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
 
           <a
             :href="repository"
@@ -68,13 +68,13 @@
         </article>
       </div>
     </el-popover>
-
-    
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, computed } from 'vue';
+import {
+  ref, onMounted, watch, computed,
+} from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
 import pluralize from 'pluralize';
@@ -89,7 +89,7 @@ const props = defineProps({
 const repositories = ref<string[]>([]);
 
 // Track mirrored repos (sourceIntegrationId != gitIntegrationId)
-const mirroredRepoUrls =  ref<string[]>([]);
+const mirroredRepoUrls = ref<string[]>([]);
 const reposNoMirrored = computed(() => repositories.value.filter((r) => !mirroredRepoUrls.value.includes(r)));
 
 const fetchRepositories = () => {
diff --git a/frontend/src/config/integrations/git/config.ts b/frontend/src/config/integrations/git/config.ts
index 9e4de87ca4..8c1004b5fb 100644
--- a/frontend/src/config/integrations/git/config.ts
+++ b/frontend/src/config/integrations/git/config.ts
@@ -10,7 +10,7 @@ const git: IntegrationConfig = {
   key: 'git',
   name: 'Git',
   image,
-  description: 'Connect Git to sync commit activities from your repos.',
+  description: 'Sync commit activities from Git repositories.',
   connectComponent: GitConnect,
   dropdownComponent: GitDropdown,
   connectedParamsComponent: GitParams,
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index 2d6b43e132..6696bc7b70 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -10,7 +10,7 @@
             <div class="flex items-center gap-2">
               <img :src="githubImage" alt="GitHub" class="h-6 min-w-6" />
               <h5 class="text-black">
-                GitHub 
+                GitHub
               </h5>
               <lf-github-version-tag version="v2" tooltip-content="New integration" />
             </div>
diff --git a/frontend/src/config/integrations/github-nango/config.ts b/frontend/src/config/integrations/github-nango/config.ts
index b19bda0fbb..f06f648b47 100644
--- a/frontend/src/config/integrations/github-nango/config.ts
+++ b/frontend/src/config/integrations/github-nango/config.ts
@@ -1,20 +1,19 @@
-import { IntegrationConfig } from '@/config/integrations'
-import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue'
+import { IntegrationConfig } from '@/config/integrations';
+import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
 // For now we will be referencing the connect component from the github (old) integration
-import GithubConnect from '@/config/integrations/github/components/github-connect.vue'
-import GithubParams from '@/config/integrations/github/components/github-params.vue'
-import GithubStatus from '@/config/integrations/github/components/github-status.vue'
-import GithubDropdown from './components/github-dropdown.vue'
-import GithubMappedRepos from './components/github-mapped-repos.vue'
+import GithubConnect from '@/config/integrations/github/components/github-connect.vue';
+import GithubParams from '@/config/integrations/github/components/github-params.vue';
+import GithubStatus from '@/config/integrations/github/components/github-status.vue';
+import GithubDropdown from './components/github-dropdown.vue';
+import GithubMappedRepos from './components/github-mapped-repos.vue';
 
-const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
 
 const github: IntegrationConfig = {
   key: 'github',
   name: 'GitHub (v2)',
   image,
-  description:
-    'Connect GitHub to sync profile information, stars, forks, pull requests, issues, and discussions.',
+  description: 'Sync profile information, stars, forks, pull requests, issues, and discussions.',
   connectComponent: GithubConnect,
   dropdownComponent: GithubDropdown,
   statusComponent: GithubStatus,
@@ -32,6 +31,6 @@ const github: IntegrationConfig = {
       text: 'Select repositories to track and map them to projects.',
     },
   ],
-}
+};
 
-export default github
+export default github;
diff --git a/frontend/src/config/integrations/github/components/github-connect.vue b/frontend/src/config/integrations/github/components/github-connect.vue
index 5241c6ef80..bc37153b2b 100644
--- a/frontend/src/config/integrations/github/components/github-connect.vue
+++ b/frontend/src/config/integrations/github/components/github-connect.vue
@@ -19,7 +19,7 @@
               GitHub - New integration
             </div>
             <p class="text-xs text-gray-500">
-              Sync repositories from multiple GitHub organizations. Doesn’t require organization admin permissions.  
+              Sync repositories from multiple GitHub organizations. Doesn’t require organization admin permissions.
             </p>
           </div>
         </div>
diff --git a/frontend/src/config/integrations/github/components/github-mappings-display.vue b/frontend/src/config/integrations/github/components/github-mappings-display.vue
index 3cbd470054..1510144fb0 100644
--- a/frontend/src/config/integrations/github/components/github-mappings-display.vue
+++ b/frontend/src/config/integrations/github/components/github-mappings-display.vue
@@ -45,7 +45,7 @@ import pluralize from 'pluralize';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
 
-const props = defineProps<{
+defineProps<{
   mappings: IntegrationMapping[];
 }>();
 
diff --git a/frontend/src/config/integrations/github/components/github-status.vue b/frontend/src/config/integrations/github/components/github-status.vue
index a8e9fa7ee7..8cdd174a62 100644
--- a/frontend/src/config/integrations/github/components/github-status.vue
+++ b/frontend/src/config/integrations/github/components/github-status.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-3">
-    <div class="flex items-center" v-if="mappedRepositories.length > 0">
+    <div v-if="mappedRepositories.length > 0" class="flex items-center">
       <lf-github-mappings-display :mappings="mappedRepositories" />
       <span class="font-semibold">&nbsp;&nbsp;•&nbsp;&nbsp;</span>
       <!-- see integration-list-item.vue for last data check completed -->
@@ -9,14 +9,14 @@
       </span>
     </div>
 
-    <div class="flex items-center gap-1" v-for="org of orgs" :key="org.url">
+    <div v-for="org of orgs" :key="org.url" class="flex items-center gap-1">
       <lf-icon
         name="arrows-rotate"
         :size="16"
         class="text-gray-400 flex items-center"
       />
       <p class="text-gray-600 text-xs">
-        Syncing GitHub data from <span class="font-semibold">{{ org.name }}</span> for 
+        Syncing GitHub data from <span class="font-semibold">{{ org.name }}</span> for
         <el-popover trigger="hover" placement="top" popper-class="!w-auto">
           <template #reference>
             <span class="underline decoration-dashed cursor-default">
@@ -24,7 +24,7 @@
             </span>
           </template>
 
-          <div class="-my-1 px-1 max-h-44 overflow-auto" v-if="remainingRepositories(org.url).length > 0">
+          <div v-if="remainingRepositories(org.url).length > 0" class="-my-1 px-1 max-h-44 overflow-auto">
             <article
               v-for="repo of remainingRepositories(org.url)"
               :key="repo.name"
@@ -42,7 +42,6 @@
             </article>
           </div>
         </el-popover>
-        
       </p>
     </div>
   </div>
@@ -60,9 +59,9 @@ const props = defineProps<{
   integration: any;
 }>();
 
-const mockNango = {
-  test: {repoName: 'styled-components',}
-};
+// const mockNango = {
+//   test: {repoName: 'styled-components',}
+// };
 
 const mappings = ref<IntegrationMapping[]>([]);
 
@@ -76,7 +75,7 @@ const remainingRepositories = (orgUrl: string) => {
 };
 
 const mappedRepositories = computed(() => {
-  const reposObj = props.integration.settings.nangoMapping || mockNango;
+  const reposObj = props.integration.settings.nangoMapping;
 
   const mapped = reposObj
     ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
@@ -84,9 +83,6 @@ const mappedRepositories = computed(() => {
   return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
 });
 
-const allRepositoriesNames = computed(() => props.integration.settings.orgs
-  .map((org: any) => org.repos.map((repo: any) => repo))
-  .flat());
 const orgs = computed(() => props.integration.settings.orgs);
 
 onMounted(() => {
diff --git a/frontend/src/config/integrations/github/components/github-version-tag.vue b/frontend/src/config/integrations/github/components/github-version-tag.vue
index 5daa267d9e..164f2e09b8 100644
--- a/frontend/src/config/integrations/github/components/github-version-tag.vue
+++ b/frontend/src/config/integrations/github/components/github-version-tag.vue
@@ -1,9 +1,10 @@
 <template>
-  <lf-tooltip 
-    :content="props.tooltipContent" 
-    :disabled="!props.tooltipContent" 
+  <lf-tooltip
+    :content="props.tooltipContent"
+    :disabled="!props.tooltipContent"
     placement="top"
-    class="font-primary font-semibold">
+    class="font-primary font-semibold"
+  >
     <lfx-chip
       type="bordered"
       size="default"
@@ -24,4 +25,4 @@ const props = defineProps<{
   version: 'v1' | 'v2';
   tooltipContent?: string;
 }>();
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/config/integrations/github/config.ts b/frontend/src/config/integrations/github/config.ts
index 3fc9a6b3d8..58fb055d69 100644
--- a/frontend/src/config/integrations/github/config.ts
+++ b/frontend/src/config/integrations/github/config.ts
@@ -1,18 +1,17 @@
-import { IntegrationConfig } from '@/config/integrations'
-import GithubConnect from './components/github-connect.vue'
-import GithubStatus from './components/github-status.vue'
-import GithubAction from './components/github-action.vue'
-import GithubParams from './components/github-params.vue'
-import GithubMappedRepos from './components/github-mapped-repos.vue'
+import { IntegrationConfig } from '@/config/integrations';
+import GithubConnect from './components/github-connect.vue';
+import GithubStatus from './components/github-status.vue';
+import GithubAction from './components/github-action.vue';
+import GithubParams from './components/github-params.vue';
+import GithubMappedRepos from './components/github-mapped-repos.vue';
 
-const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
 
 const github: IntegrationConfig = {
   key: 'github',
   name: 'GitHub',
   image,
-  description:
-    'Connect GitHub to sync profile information, stars, forks, pull requests, issues, and discussions.',
+  description: 'Sync profile information, stars, forks, pull requests, issues, and discussions.',
   connectComponent: GithubConnect,
   statusComponent: GithubStatus,
   actionComponent: GithubAction,
@@ -33,6 +32,6 @@ const github: IntegrationConfig = {
       text: 'Waiting for organization admin to approve the installation.',
     },
   ],
-}
+};
 
-export default github
+export default github;
diff --git a/frontend/src/config/integrations/gitlab/config.ts b/frontend/src/config/integrations/gitlab/config.ts
index e970a9c01f..5bdb7aaba0 100644
--- a/frontend/src/config/integrations/gitlab/config.ts
+++ b/frontend/src/config/integrations/gitlab/config.ts
@@ -10,7 +10,7 @@ const gitlab: IntegrationConfig = {
   key: 'gitlab',
   name: 'GitLab',
   image,
-  description: 'Connect GitLab to sync profile information, merge requests, issues, and more.',
+  description: 'Sync profile information, merge requests, issues, and more.',
   connectComponent: GitlabConnect,
   connectedParamsComponent: GitlabParams,
   actionComponent: GitlabAction,
diff --git a/frontend/src/config/integrations/groupsio/config.ts b/frontend/src/config/integrations/groupsio/config.ts
index 14767bcea9..2db48741f3 100644
--- a/frontend/src/config/integrations/groupsio/config.ts
+++ b/frontend/src/config/integrations/groupsio/config.ts
@@ -10,7 +10,7 @@ const groupsio: IntegrationConfig = {
   key: 'groupsio',
   name: 'Groups.io',
   image,
-  description: 'Connect Groups.io to sync groups and topics activity.',
+  description: 'Sync groups and topics activity.',
   connectComponent: GroupsioConnect,
   connectedParamsComponent: GroupsioParams,
   dropdownComponent: GroupsioDropdown,
diff --git a/frontend/src/config/integrations/hackernews/config.ts b/frontend/src/config/integrations/hackernews/config.ts
index 94d8b8e7bf..bcf5680546 100644
--- a/frontend/src/config/integrations/hackernews/config.ts
+++ b/frontend/src/config/integrations/hackernews/config.ts
@@ -8,8 +8,7 @@ const hackernews: IntegrationConfig = {
   key: 'hackernews',
   name: 'Hacker News',
   image,
-  description:
-    'Connect Hacker News to get posts as well as their comments mentioning your community.',
+  description: 'Sync posts and comments mentioning your community.',
   connectComponent: HackernewsConnect,
   connectedParamsComponent: HackernewsParams,
   showProgress: false,
diff --git a/frontend/src/config/integrations/jira/config.ts b/frontend/src/config/integrations/jira/config.ts
index 00143935a3..0d1c452102 100644
--- a/frontend/src/config/integrations/jira/config.ts
+++ b/frontend/src/config/integrations/jira/config.ts
@@ -10,7 +10,7 @@ const jira: IntegrationConfig = {
   key: 'jira',
   name: 'Jira',
   image,
-  description: 'Connect Jira to sync issues activities from your projects.',
+  description: 'Sync issues activities from your projects.',
   connectComponent: JiraConnect,
   connectedParamsComponent: JiraParams,
   dropdownComponent: JiraDropdown,
diff --git a/frontend/src/config/integrations/linkedin/config.ts b/frontend/src/config/integrations/linkedin/config.ts
index 263dde5771..96b4c23315 100644
--- a/frontend/src/config/integrations/linkedin/config.ts
+++ b/frontend/src/config/integrations/linkedin/config.ts
@@ -11,7 +11,7 @@ const linkedin: IntegrationConfig = {
   key: 'linkedin',
   name: 'LinkedIn',
   image,
-  description: "Connect LinkedIn to sync comments and reactions from your organization's posts.",
+  description: "Sync comments and reactions from your organization's posts.",
   connectComponent: LinkedinConnect,
   connectedParamsComponent: LinkedinParams,
   actionComponent: LinkedinAction,
diff --git a/frontend/src/config/integrations/reddit/config.ts b/frontend/src/config/integrations/reddit/config.ts
index 81cf5b0e87..093ed94f85 100644
--- a/frontend/src/config/integrations/reddit/config.ts
+++ b/frontend/src/config/integrations/reddit/config.ts
@@ -10,7 +10,7 @@ const reddit: IntegrationConfig = {
   key: 'reddit',
   name: 'Reddit',
   image,
-  description: 'Connect Reddit to sync posts and comments from selected subreddits.',
+  description: 'Sync posts and comments from selected subreddits.',
   connectComponent: RedditConnect,
   connectedParamsComponent: RedditParams,
   dropdownComponent: RedditDropdown,
diff --git a/frontend/src/config/integrations/slack/config.ts b/frontend/src/config/integrations/slack/config.ts
index f17d48d3cc..c50b5c7b8e 100644
--- a/frontend/src/config/integrations/slack/config.ts
+++ b/frontend/src/config/integrations/slack/config.ts
@@ -8,7 +8,7 @@ const slack: IntegrationConfig = {
   key: 'slack',
   name: 'Slack',
   image,
-  description: 'Connect Slack to sync messages, threads, and new joiners.',
+  description: 'Sync messages, threads, and new joiners.',
   connectComponent: SlackConnect,
   connectedParamsComponent: SlackParams,
   showProgress: false,
diff --git a/frontend/src/config/integrations/stackoverflow/config.ts b/frontend/src/config/integrations/stackoverflow/config.ts
index 4c377088c5..0f51cf15e2 100644
--- a/frontend/src/config/integrations/stackoverflow/config.ts
+++ b/frontend/src/config/integrations/stackoverflow/config.ts
@@ -10,7 +10,7 @@ const stackoverflow: IntegrationConfig = {
   key: 'stackoverflow',
   name: 'Stack Overflow',
   image,
-  description: 'Connect Stack Overflow to sync questions and answers based on selected tags.',
+  description: 'Sync questions and answers based on selected tags.',
   connectComponent: StackoverflowConnect,
   dropdownComponent: StackoverflowDropdown,
   connectedParamsComponent: StackoverflowParams,
diff --git a/frontend/src/config/integrations/twitter/config.ts b/frontend/src/config/integrations/twitter/config.ts
index 3b81c7a2be..76332e3d10 100644
--- a/frontend/src/config/integrations/twitter/config.ts
+++ b/frontend/src/config/integrations/twitter/config.ts
@@ -10,7 +10,7 @@ const twitter: IntegrationConfig = {
   key: 'twitter',
   name: 'X/Twitter',
   image,
-  description: 'Connect X/Twitter to sync profile information, followers, and relevant tweets.',
+  description: 'Sync profile information, followers, and relevant tweets.',
   connectComponent: TwitterConnect,
   connectedParamsComponent: TwitterParams,
   dropdownComponent: TwitterDropdown,
diff --git a/frontend/src/config/links.ts b/frontend/src/config/links.ts
index 13e2f76af1..d4c64ca77f 100644
--- a/frontend/src/config/links.ts
+++ b/frontend/src/config/links.ts
@@ -2,6 +2,6 @@
 // SPDX-License-Identifier: MIT
 
 export const links = {
-  integrations: `https://docs.crowd.dev/docs/getting-started/integrations`,
-  githubIntegration: `https://docs.crowd.dev/docs/getting-started/integrations/github-integration`,
-}
+  integrations: 'https://docs.crowd.dev/docs/getting-started/integrations',
+  githubIntegration: 'https://docs.crowd.dev/docs/getting-started/integrations/github-integration',
+};
diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
index 53dc6dc465..21df30d416 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
@@ -24,7 +24,6 @@
 
       <!-- Header -->
       <div class="py-5">
-        
         <h4 class="pb-1">
           Integrations
         </h4>
@@ -163,10 +162,6 @@ const platformsByStatus = computed(() => {
   return all.filter((platform) => matching.includes(platform));
 });
 
-const isGithubConnected = computed(() => array.value.some(
-  (integration: any) => integration.platform === 'github',
-));
-
 const getIntegrationCountPerStatus = computed<Record<string, number>>(() => {
   const statusCount: any = {};
   Object.entries(lfIntegrationStatusesTabs).forEach(([key, statusConfig]) => {
diff --git a/frontend/src/ui-kit/button/types/ButtonType.ts b/frontend/src/ui-kit/button/types/ButtonType.ts
index 5863be91cf..b92b555c46 100644
--- a/frontend/src/ui-kit/button/types/ButtonType.ts
+++ b/frontend/src/ui-kit/button/types/ButtonType.ts
@@ -10,6 +10,6 @@ export const buttonTypes = [
   'primary-link',
   'secondary-link',
   'outline',
-] as const
+] as const;
 
 export type ButtonType = (typeof buttonTypes)[number]

From 4e23589dad3f70814e12c424d81ccb1a81bb9afc Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 20 Jan 2026 15:26:28 +0800
Subject: [PATCH 05/22] feat: update header and tabs

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/config/links.ts                  |  6 ++
 .../pages/integration-list.page.vue           | 60 ++++++++++------
 frontend/src/ui-kit/index.scss                |  1 +
 frontend/src/ui-kit/lfx/tabs/tab.vue          | 30 ++++++++
 frontend/src/ui-kit/lfx/tabs/tabs.scss        | 32 +++++++++
 frontend/src/ui-kit/lfx/tabs/tabs.vue         | 70 +++++++++++++++++++
 .../src/ui-kit/lfx/tabs/types/TabsSize.ts     |  6 ++
 7 files changed, 185 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/config/links.ts
 create mode 100644 frontend/src/ui-kit/lfx/tabs/tab.vue
 create mode 100644 frontend/src/ui-kit/lfx/tabs/tabs.scss
 create mode 100644 frontend/src/ui-kit/lfx/tabs/tabs.vue
 create mode 100644 frontend/src/ui-kit/lfx/tabs/types/TabsSize.ts

diff --git a/frontend/src/config/links.ts b/frontend/src/config/links.ts
new file mode 100644
index 0000000000..f2e51cffc8
--- /dev/null
+++ b/frontend/src/config/links.ts
@@ -0,0 +1,6 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+export const links = {
+  integrations: `https://docs.crowd.dev/docs/getting-started/integrations`,
+}
diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
index e36958853e..fcf1b486f1 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
@@ -2,7 +2,7 @@
   <div class="mx-auto max-w-254">
     <div class="sticky -top-5 -mt-5 z-10 bg-white border-b border-b-white">
       <!-- Back button -->
-      <div class="border-b border-gray-100 py-3.5">
+      <div class="pt-6 flex items-center gap-1 text-xs">
         <router-link
           :to="{
             name: 'adminProjects',
@@ -11,52 +11,71 @@
             },
           }"
         >
-          <lf-button type="secondary-ghost">
-            <lf-icon name="angle-left" type="regular" />
-            {{ getSegmentName(grandparentId) || subproject?.grandparentName }}
-          </lf-button>
+          {{ getSegmentName(grandparentId) || subproject?.grandparentName }}
         </router-link>
+        <p v-if="subproject" class="text-gray-600">
+          >
+          {{ subproject?.name }}
+        </p>
+        <p v-if="subproject" class="text-gray-600">
+          (Integrations)
+        </p>
       </div>
 
       <!-- Header -->
-      <div class="py-6">
-        <p v-if="subproject" class="text-small text-gray-500 pb-2">
-          {{ subproject?.name }}
-        </p>
-        <h4 class="pb-2">
+      <div class="py-5">
+        
+        <h4 class="pb-1">
           Integrations
         </h4>
         <p class="text-small text-gray-500">
           Connect with the data sources where interactions happen within your
           community.
+          <a
+            aria-label="Question"
+            class="btn btn-link btn-link--primary hover:no-underline gap-1 "
+            :href="links.integrations"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <lf-icon name="book-open" :size="16" />
+            Learn more
+          </a>
         </p>
       </div>
 
       <!-- Tabs -->
       <section>
-        <div class="w-full bg-white">
-          <lf-tabs v-model="tab">
-            <lf-tab v-model="tab" name="all">
+        <div class="w-full bg-white mb-8">
+          <lfx-tabs v-model="tab">
+            <lfx-tab v-model="tab" name="all">
               All integrations
-            </lf-tab>
-            <lf-tab
+            </lfx-tab>
+            <lfx-tab
               v-for="(status, key) in lfIntegrationStatusesTabs"
               :key="key"
               v-model="tab"
               :name="key"
             >
               <div class="flex items-center gap-1.5">
+                <lf-icon
+                  v-if="status.chipStatus?.icon || status.status.icon"
+                  :name="status.chipStatus?.icon || status.status.icon"
+                  :type="tab === key ? 'solid' : 'light'"
+                  :class="tab === key ? status.chipStatus?.color || status.status.color : 'text-gray-500'"
+                  :size="20"
+                />
                 <span>{{ status.tabs.text }}</span>
                 <div
                   v-if="getIntegrationCountPerStatus[key] > 0"
-                  class="rounded py-0.5 px-1 text-tiny text-black"
+                  class="rounded-full py-0.5 px-1 text-tiny text-black"
                   :class="status.tabs.badge"
                 >
                   {{ getIntegrationCountPerStatus[key] }}
                 </div>
               </div>
-            </lf-tab>
-          </lf-tabs>
+            </lfx-tab>
+          </lfx-tabs>
         </div>
         <div
           class="w-full h-8 bg-gradient-to-b from-white to-transparent pl-10"
@@ -125,15 +144,16 @@ import { computed, onMounted, ref } from 'vue';
 import { getSegmentName } from '@/utils/segments';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
 import { lfIntegrations } from '@/config/integrations';
-import LfTabs from '@/ui-kit/tabs/Tabs.vue';
+import LfxTabs from '@/ui-kit/lfx/tabs/Tabs.vue';
 import LfIntegrationListItem from '@/modules/admin/modules/integration/components/integration-list-item.vue';
-import LfTab from '@/ui-kit/tabs/Tab.vue';
+import LfxTab from '@/ui-kit/lfx/tabs/Tab.vue';
 import AppIntegrationProgressWrapper from '@/modules/integration/components/integration-progress-wrapper.vue';
 import { mapActions, mapGetters } from '@/shared/vuex/vuex.helpers';
 import LfSwitch from '@/ui-kit/switch/Switch.vue';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import config from '@/config';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
+import { links } from '@/config/links';
 
 const route = useRoute();
 
diff --git a/frontend/src/ui-kit/index.scss b/frontend/src/ui-kit/index.scss
index db438da436..4713b57f71 100644
--- a/frontend/src/ui-kit/index.scss
+++ b/frontend/src/ui-kit/index.scss
@@ -25,3 +25,4 @@
 @import 'lfx/dropdown/dropdown';
 @import 'lfx/popover/popover';
 @import 'lfx/chip/chip';
+@import 'lfx/tabs/tabs';
\ No newline at end of file
diff --git a/frontend/src/ui-kit/lfx/tabs/tab.vue b/frontend/src/ui-kit/lfx/tabs/tab.vue
new file mode 100644
index 0000000000..70c2b6e9dc
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/tabs/tab.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="lfx-c-tab" :class="{ 'is-active': isActive }" @click="selectTab">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance } from 'vue';
+
+const props = defineProps<{
+  name: string,
+}>();
+
+const parent = computed(() => {
+  const instance = getCurrentInstance();
+  return instance?.parent;
+});
+
+const isActive = computed<boolean>(() => parent.value.props.modelValue === props.name);
+
+const selectTab = () => {
+  parent.value?.emit('update:modelValue', props.name);
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxTab',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/tabs/tabs.scss b/frontend/src/ui-kit/lfx/tabs/tabs.scss
new file mode 100644
index 0000000000..dee1b7ed67
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/tabs/tabs.scss
@@ -0,0 +1,32 @@
+.lfx-c-tabs {
+  @apply flex relative whitespace-nowrap w-fit transition bg-gray-100 rounded-full gap-1 p-1;
+
+  &--small {
+    .lfx-c-tab {
+      --lf-tab-font-size: var(--lf-tabs-small-font-size);
+      --lf-tab-line-height: var(--lf-tabs-small-line-height);
+      --lf-tab-padding: var(--lf-tabs-small-padding);
+    }
+  }
+
+  &--medium {
+    .lfx-c-tab {
+      --lf-tab-font-size: var(--lf-tabs-medium-font-size);
+      --lf-tab-line-height: var(--lf-tabs-medium-line-height);
+      --lf-tab-padding: var(--lf-tabs-medium-padding);
+    }
+  }
+}
+
+.lfx-c-tab {
+  @apply flex items-center justify-center text-center cursor-pointer transition-all select-none;
+  @apply rounded-full px-3 py-1 text-gray-600 font-normal leading-5 text-sm;
+
+  &:hover {
+    background: var(--lf-tab-hover-background);
+  }
+
+  &.is-active {
+    @apply bg-white text-gray-900 font-medium;
+  }
+}
diff --git a/frontend/src/ui-kit/lfx/tabs/tabs.vue b/frontend/src/ui-kit/lfx/tabs/tabs.vue
new file mode 100644
index 0000000000..9f61cca9ca
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/tabs/tabs.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="lfx-c-tabs" :class="`lfx-c-tabs--${props.size}`">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed, onMounted, watch,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { TabsSize } from '@/ui-kit/tabs/types/TabsSize';
+
+const props = withDefaults(defineProps<{
+  modelValue?: string,
+  size?: TabsSize,
+  fragment?: boolean,
+}>(), {
+  modelValue: '',
+  size: 'medium',
+  fragment: true,
+});
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string): void}>();
+
+const route = useRoute();
+const router = useRouter();
+
+const model = computed({
+  get() {
+    return props.modelValue || '';
+  },
+  set(value: string) {
+    emit('update:modelValue', value);
+  },
+});
+
+watch(() => props.modelValue, () => {
+  if (props.fragment) {
+    router.replace({
+      ...route,
+      hash: `#${props.modelValue}`,
+    });
+  }
+});
+
+const readHash = () => {
+  if (!props.fragment) {
+    return;
+  }
+  const hash = route?.hash.replace('#', '');
+  if (hash && hash !== model.value) {
+    emit('update:modelValue', hash);
+  }
+};
+
+onMounted(() => {
+  readHash();
+});
+
+watch(() => route?.hash, () => {
+  readHash();
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxTabs',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/tabs/types/TabsSize.ts b/frontend/src/ui-kit/lfx/tabs/types/TabsSize.ts
new file mode 100644
index 0000000000..fd90a69e52
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/tabs/types/TabsSize.ts
@@ -0,0 +1,6 @@
+export const tabsSize = [
+  'small',
+  'medium',
+] as const;
+
+export type TabsSize = typeof tabsSize[number];

From 1549c4e9f4abe7de2244b630b44ca34ad18ef5b9 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Wed, 21 Jan 2026 15:11:56 +0800
Subject: [PATCH 06/22] feat: update card borders and github integration status

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/config/styles/components/button.scss |  19 +++
 .../components/confluence-connect.vue         |   2 +-
 .../devto/components/devto-connect.vue        |   2 +-
 .../discord/components/discord-connect.vue    |   2 +-
 .../components/discourse-connect.vue          |   2 +-
 .../gerrit/components/gerrit-connect.vue      |   2 +-
 .../git/components/git-connect.vue            |   2 +-
 .../git/components/git-params.vue             | 117 ++++++++++++------
 .../components/connect/github-connect.vue     |  76 ------------
 .../components/github-connect.vue             |  44 -------
 .../settings/github-settings-drawer.vue       |  28 +++--
 .../settings/github-settings-empty.vue        |  28 +++--
 .../integrations/github-nango/config.ts       |  19 +--
 .../components/connect/github-connect.vue     |  72 -----------
 .../github/components/github-connect.vue      | 113 ++++++++++++++---
 .../github/components/github-version-tag.vue  |  27 ++++
 .../src/config/integrations/github/config.ts  |  18 +--
 .../gitlab/components/gitlab-connect.vue      |   2 +-
 .../groupsio/components/groupsio-connect.vue  |   2 +-
 .../components/hackernews-connect.vue         |   2 +-
 .../jira/components/jira-connect.vue          |   2 +-
 .../linkedin/components/linkedin-connect.vue  |   2 +-
 .../reddit/components/reddit-connect.vue      |   2 +-
 .../slack/components/slack-connect.vue        |   2 +-
 .../components/stackoverflow-connect.vue      |   2 +-
 .../twitter/components/twitter-connect.vue    |   2 +-
 frontend/src/config/links.ts                  |   1 +
 .../components/integration-list-item.vue      |  26 ++--
 .../pages/integration-list.page.vue           |  35 +-----
 .../github-integration-progress.vue           |  93 ++++++++++++++
 frontend/src/ui-kit/button/button.scss        |  28 +++++
 .../src/ui-kit/button/types/ButtonType.ts     |   5 +-
 frontend/tailwind.config.js                   |   2 +-
 33 files changed, 443 insertions(+), 338 deletions(-)
 delete mode 100644 frontend/src/config/integrations/github-nango/components/connect/github-connect.vue
 delete mode 100644 frontend/src/config/integrations/github-nango/components/github-connect.vue
 delete mode 100644 frontend/src/config/integrations/github/components/connect/github-connect.vue
 create mode 100644 frontend/src/config/integrations/github/components/github-version-tag.vue
 create mode 100644 frontend/src/modules/integration/components/github-integration-progress.vue

diff --git a/frontend/config/styles/components/button.scss b/frontend/config/styles/components/button.scss
index 2a1bda5ab5..458129bd5c 100644
--- a/frontend/config/styles/components/button.scss
+++ b/frontend/config/styles/components/button.scss
@@ -272,4 +272,23 @@
   --lf-btn-secondary-link-loading-text: var(--lf-color-gray-400);
   --lf-btn-secondary-link-loading-background: var(--lf-color-transparent);
   --lf-btn-secondary-link-loading-border: var(--lf-color-transparent);
+
+  /* Outline */
+  --lf-btn-outline-text: var(--lf-color-gray-900);
+  --lf-btn-outline-background: var(--lf-color-white);
+  --lf-btn-outline-border: var(--lf-color-gray-200);
+  --lf-btn-outline-shadow: var(--shadow-none);
+  // Active
+  --lf-btn-outline-active-text: var(--lf-color-gray-900);
+  --lf-btn-outline-active-background: var(--lf-color-white);
+  --lf-btn-outline-active-border: var(--lf-color-gray-200);
+  // Disabled
+  --lf-btn-secondary-link-disabled-text: var(--lf-color-gray-400);
+  --lf-btn-secondary-link-disabled-background: var(--lf-color-white);
+  --lf-btn-secondary-link-disabled-border: var(--lf-color-gray-200);
+  // Loading
+  --lf-btn-secondary-link-loading-text: var(--lf-color-gray-400);
+  --lf-btn-secondary-link-loading-background: var(--lf-color-white);
+  --lf-btn-secondary-link-loading-border: var(--lf-color-gray-200);
+
 }
diff --git a/frontend/src/config/integrations/confluence/components/confluence-connect.vue b/frontend/src/config/integrations/confluence/components/confluence-connect.vue
index 3608911b5f..d17f76d541 100644
--- a/frontend/src/config/integrations/confluence/components/confluence-connect.vue
+++ b/frontend/src/config/integrations/confluence/components/confluence-connect.vue
@@ -1,6 +1,6 @@
 <template>
   <lf-button
-    type="secondary"
+    type="outline"
     @click="isConfluenceSettingsDrawerVisible = true"
   >
     <lf-icon name="link-simple" />
diff --git a/frontend/src/config/integrations/devto/components/devto-connect.vue b/frontend/src/config/integrations/devto/components/devto-connect.vue
index 3e49ed40b5..e906f63908 100644
--- a/frontend/src/config/integrations/devto/components/devto-connect.vue
+++ b/frontend/src/config/integrations/devto/components/devto-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isDevtoConnectDrawerVisible = true">
+    <lf-button type="outline" @click="isDevtoConnectDrawerVisible = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/discord/components/discord-connect.vue b/frontend/src/config/integrations/discord/components/discord-connect.vue
index 3424c20c83..17f321d683 100644
--- a/frontend/src/config/integrations/discord/components/discord-connect.vue
+++ b/frontend/src/config/integrations/discord/components/discord-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/discourse/components/discourse-connect.vue b/frontend/src/config/integrations/discourse/components/discourse-connect.vue
index 690b04a97d..50bc32751c 100644
--- a/frontend/src/config/integrations/discourse/components/discourse-connect.vue
+++ b/frontend/src/config/integrations/discourse/components/discourse-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isDiscourseConnectDrawerOpen = true">
+    <lf-button type="outline" @click="isDiscourseConnectDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-connect.vue b/frontend/src/config/integrations/gerrit/components/gerrit-connect.vue
index 2180f82d4e..5dbc7c3c51 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-connect.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isGerritConnectDrawerOpen = true">
+    <lf-button type="outline" @click="isGerritConnectDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/git/components/git-connect.vue b/frontend/src/config/integrations/git/components/git-connect.vue
index b825ee9b59..fa1993afd1 100644
--- a/frontend/src/config/integrations/git/components/git-connect.vue
+++ b/frontend/src/config/integrations/git/components/git-connect.vue
@@ -5,7 +5,7 @@
       <!--        <lf-icon name="circle-info" type="regular" />-->
       <!--        Details-->
       <!--      </lf-button>-->
-      <lf-button type="secondary" @click="isGitConnectDrawerVisible = true">
+      <lf-button type="outline" @click="isGitConnectDrawerVisible = true">
         <lf-icon name="link-simple" />
         <slot>Connect</slot>
       </lf-button>
diff --git a/frontend/src/config/integrations/git/components/git-params.vue b/frontend/src/config/integrations/git/components/git-params.vue
index 0f06207ed3..30e0102990 100644
--- a/frontend/src/config/integrations/git/components/git-params.vue
+++ b/frontend/src/config/integrations/git/components/git-params.vue
@@ -1,47 +1,83 @@
 <template>
-  <div>
-    <div class="flex items-center gap-1">
-      <el-popover trigger="hover" placement="top" popper-class="!w-72">
-        <template #reference>
-          <div
-            class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
-          >
-            <lf-svg name="git-repository" class="w-4 h-4 !text-gray-600 mr-1 flex items-center" />
-            {{ repositories.length }}
-            {{ repositories.length !== 1 ? "remote URLs" : "remote URL" }}
-          </div>
-        </template>
-
-        <p class="text-gray-400 text-[13px] font-semibold mb-4">
-          Git Remote URLs
-        </p>
-        <div class="max-h-44 overflow-auto -my-1 px-1">
-          <article
-            v-for="repository of repositories"
-            :key="repository"
-            class="flex items-center flex-nowrap mb-4 last:mb-0"
+  <div class="flex items-center gap-1">
+    <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+
+    <el-popover trigger="hover" placement="top" popper-class="!w-72" v-if="reposNoMirrored.length > 0">
+      <template #reference>
+        <div
+          class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
+        >
+          {{ reposNoMirrored.length }}
+          {{ reposNoMirrored.length !== 1 ? "remote URLs" : "remote URL" }}
+        </div>
+      </template>
+
+      <p class="text-gray-400 text-[13px] font-semibold mb-4">
+        Git Remote URLs
+      </p>
+      <div class="max-h-44 overflow-auto -my-1 px-1">
+        <article
+          v-for="repository of reposNoMirrored"
+          :key="repository"
+          class="flex items-center flex-nowrap mb-4 last:mb-0"
+        >
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+
+          <a
+            :href="repository"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-gray-900 text-[13px] max-w-3xs truncate hover:underline"
           >
-            <lf-svg name="git-repository" class="w-4 h-4 mr-1 flex items-center" />
-
-            <a
-              :href="repository"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-gray-900 text-[13px] max-w-3xs truncate hover:underline"
-            >
-              {{ removeProtocolAndDomain(repository) }}
-            </a>
-          </article>
+            {{ removeProtocolAndDomain(repository) }}
+          </a>
+        </article>
+      </div>
+    </el-popover>
+    
+    <span v-if="mirroredRepoUrls.length > 0 && reposNoMirrored.length > 0">/</span>
+
+    <el-popover trigger="hover" placement="top" popper-class="!w-72" v-if="mirroredRepoUrls.length > 0">
+      <template #reference>
+        <div
+          class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
+        >
+          {{ pluralize('repository', mirroredRepoUrls.length, true) }} (via GitHub)
         </div>
-      </el-popover>
-    </div>
+      </template>
+
+      <p class="text-gray-400 text-[13px] font-semibold mb-4">
+        Repositories
+      </p>
+      <div class="max-h-44 overflow-auto -my-1 px-1">
+        <article
+          v-for="repository of mirroredRepoUrls"
+          :key="repository"
+          class="flex items-center flex-nowrap mb-4 last:mb-0"
+        >
+        <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+
+          <a
+            :href="repository"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-gray-900 text-[13px] max-w-3xs truncate hover:underline"
+          >
+            {{ removeProtocolAndDomain(repository) }}
+          </a>
+        </article>
+      </div>
+    </el-popover>
+
+    
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
-import LfSvg from '@/shared/svg/svg.vue';
+import { ref, onMounted, watch, computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
+import pluralize from 'pluralize';
 
 const props = defineProps({
   integration: {
@@ -52,16 +88,25 @@ const props = defineProps({
 
 const repositories = ref<string[]>([]);
 
+// Track mirrored repos (sourceIntegrationId != gitIntegrationId)
+const mirroredRepoUrls =  ref<string[]>([]);
+const reposNoMirrored = computed(() => repositories.value.filter((r) => !mirroredRepoUrls.value.includes(r)));
+
 const fetchRepositories = () => {
   if (!props.integration?.id) return;
 
   IntegrationService.fetchGitMappings(props.integration)
     .then((res: any[]) => {
       repositories.value = res.map((r) => r.url);
+
+      mirroredRepoUrls.value = res
+        .filter((r) => r.sourceIntegrationId !== r.gitIntegrationId)
+        .map((r) => r.url);
     })
     .catch(() => {
       // Fallback to settings.remotes if API fails
       repositories.value = props.integration.settings?.remotes || [];
+      mirroredRepoUrls.value = [];
     });
 };
 
diff --git a/frontend/src/config/integrations/github-nango/components/connect/github-connect.vue b/frontend/src/config/integrations/github-nango/components/connect/github-connect.vue
deleted file mode 100644
index fbf455d262..0000000000
--- a/frontend/src/config/integrations/github-nango/components/connect/github-connect.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div>
-    <div class="flex items-center gap-4">
-      <!--      <lf-button type="secondary-ghost" class="!text-gray-500" @click="isDetailsModalOpen = true">-->
-      <!--        <lf-icon name="circle-info" type="regular" />-->
-      <!--        Details-->
-      <!--      </lf-button>-->
-      <el-tooltip
-        content="Onboarding new data for GitHub is currently disabled due to some issues we are experiencing.
-      Please contact support if you need to onboard new data or update settings."
-        placement="top"
-      >
-        <span>
-          <lf-button type="secondary" disabled @click="isConnectModalOpen = true">
-            <lf-icon name="link-simple" />
-            Connect
-          </lf-button>
-        </span>
-      </el-tooltip>
-    </div>
-    <lf-github-connect-modal
-      v-if="isConnectModalOpen"
-      v-model="isConnectModalOpen"
-    />
-    <!--    <lf-github-details-modal-->
-    <!--      v-if="isDetailsModalOpen"-->
-    <!--      v-model="isDetailsModalOpen"-->
-    <!--      @connect="isConnectModalOpen = true; isDetailsModalOpen = false;"-->
-    <!--    />-->
-    <lf-github-connect-finishing-modal v-model="isFinishingModalOpen" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import LfButton from '@/ui-kit/button/Button.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-import { useRoute } from 'vue-router';
-import { mapActions } from '@/shared/vuex/vuex.helpers';
-
-const route = useRoute();
-const { doGithubConnect } = mapActions('integration');
-
-const isConnectModalOpen = ref(false);
-// const isDetailsModalOpen = ref(false);
-const isFinishingModalOpen = ref(false);
-
-const finallizeGithubConnect = () => {
-  const {
-    code, source, state,
-  } = route.query;
-  const setupAction = route.query.setup_action;
-  const installId = route.query.installation_id;
-
-  if (code && !source && state !== 'noconnect') {
-    isFinishingModalOpen.value = true;
-    doGithubConnect({
-      code,
-      installId,
-      setupAction,
-    }).then(() => {
-      isFinishingModalOpen.value = false;
-    });
-  }
-};
-
-onMounted(() => {
-  finallizeGithubConnect();
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubConnect',
-};
-</script>
diff --git a/frontend/src/config/integrations/github-nango/components/github-connect.vue b/frontend/src/config/integrations/github-nango/components/github-connect.vue
deleted file mode 100644
index cf0ed4d7d7..0000000000
--- a/frontend/src/config/integrations/github-nango/components/github-connect.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div>
-    <div class="flex items-center gap-4">
-      <!--      <lf-button v-if="!props.hideDetails" type="secondary-ghost" class="!text-gray-500" @click="isDetailsModalOpen = true">-->
-      <!--        <lf-icon name="circle-info" type="regular" />-->
-      <!--        Details-->
-      <!--      </lf-button>-->
-      <lf-button type="secondary" @click="isSettingsDrawerOpen = true">
-        <lf-icon name="link-simple" />
-        <slot>Connect</slot>
-      </lf-button>
-    </div>
-    <lf-github-settings-drawer
-      v-if="isSettingsDrawerOpen"
-      v-model="isSettingsDrawerOpen"
-      :integration="props.integration"
-      :segment-id="props.segmentId"
-      :grandparent-id="props.grandparentId"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import LfButton from '@/ui-kit/button/Button.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
-// import { useAuthStore } from '@/modules/auth/store/auth.store';
-// import { storeToRefs } from 'pinia';
-
-const props = defineProps<{
-  integration: any;
-  segmentId: string | null;
-  grandparentId: string | null;
-}>();
-
-const isSettingsDrawerOpen = ref(false);
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubConnect',
-};
-</script>
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index 2938e2d8ac..2d6b43e132 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <lf-drawer v-model="isDrawerVisible">
     <div class="flex flex-col justify-between h-full">
-      <section class="pt-4 px-6 pb-6 border-b border-gray-100">
+      <section class="px-6 py-5 border-b border-gray-100">
         <div class="flex justify-between pb-3">
           <div>
             <p class="text-tiny text-gray-500 mb-1.5">
@@ -10,21 +10,31 @@
             <div class="flex items-center gap-2">
               <img :src="githubImage" alt="GitHub" class="h-6 min-w-6" />
               <h5 class="text-black">
-                GitHub
+                GitHub 
               </h5>
+              <lf-github-version-tag version="v2" tooltip-content="New integration" />
             </div>
           </div>
           <lf-button
-            type="secondary-ghost"
+            type="outline"
             icon-only
             @click="isDrawerVisible = false"
           >
             <lf-icon name="xmark" />
           </lf-button>
         </div>
-        <p class="text-small text-gray-500">
-          Sync GitHub repositories to track profile information and all relevant
-          activities like commits, pull requests, discussions, and more.
+        <p class="text-xs text-gray-500">
+          Sync profile information, stars, forks, pull requests, issues, and discussions.
+          <a
+            aria-label="Question"
+            class="btn btn-link btn-link--primary hover:no-underline gap-1 "
+            :href="links.githubIntegration"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <lf-icon name="book-open" :size="16" />
+            Learn more
+          </a>
         </p>
       </section>
       <div class="flex-grow overflow-auto">
@@ -47,7 +57,7 @@
         style="box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.05)"
       >
         <lf-button
-          type="secondary-ghost-light"
+          type="outline"
           @click="isDrawerVisible = false"
         >
           Cancel
@@ -55,12 +65,14 @@
         <span>
           <lf-button
             type="primary"
+            class="!rounded-full"
             :disabled="
               $v.$invalid
                 || !repositories.length
             "
             @click="connect()"
           >
+            <lf-icon name="link-simple" :size="16" />
             {{ props.integration ? 'Update settings' : 'Connect' }}
           </lf-button>
         </span>
@@ -107,6 +119,8 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import { showIntegrationProgressNotification } from '@/modules/integration/helpers/integration-progress-notification';
 import { dateHelper } from '@/shared/date-helper/date-helper';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
+import { links } from '@/config/links';
+import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
 
 const props = defineProps<{
   modelValue: boolean;
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-empty.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-empty.vue
index 4f77802a6e..34b80e4745 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-empty.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-empty.vue
@@ -1,23 +1,33 @@
 <template>
   <div class="flex justify-center">
-    <div class="pt-16 flex flex-col items-center w-full max-w-100">
-      <lf-svg name="git-repository" class="w-16 h-16 text-gray-300 mb-6" />
-      <h6 class="text-center pb-3">
+    <div class="pt-10 flex flex-col items-center w-full max-w-100 gap-4">
+      <lf-icon name="book" type="regular" :size="50" class="text-gray-400" />
+      <h6 class="text-center">
         Sync and map GitHub repositories
       </h6>
-      <p class="text-center text-small text-gray-500 pb-6">
-        Choose which repositories you want to track, and map them with the corresponding project.
-      </p>
+      <div class="flex flex-col gap-4">
+        <div class="text-small text-gray-600 flex flex-row gap-4">
+          <div class="text-xs font-medium bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center shrink-0">
+            1
+          </div>
+          Choose which repositories you want to track, or sync entire GitHub organizations;
+        </div>
+        <div class="text-small text-gray-600 flex flex-row gap-4">
+          <div class="text-xs font-medium bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center shrink-0">
+            2
+          </div>
+          Map each repository with the corresponding project.
+        </div>
+      </div>
       <lf-button type="primary-ghost" @click="emit('add')">
-        <lf-icon name="arrows-rotate" type="regular" />
-        Add repositories
+        <lf-icon name="plus" type="regular" />
+        Sync repositories/organizations
       </lf-button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import LfSvg from '@/shared/svg/svg.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 
diff --git a/frontend/src/config/integrations/github-nango/config.ts b/frontend/src/config/integrations/github-nango/config.ts
index d1e754bf81..a4d2e47230 100644
--- a/frontend/src/config/integrations/github-nango/config.ts
+++ b/frontend/src/config/integrations/github-nango/config.ts
@@ -1,11 +1,12 @@
-import { IntegrationConfig } from '@/config/integrations';
-import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
-import GithubConnect from './components/github-connect.vue';
-import GithubParams from './components/github-params.vue';
-import GithubDropdown from './components/github-dropdown.vue';
-import GithubMappedRepos from './components/github-mapped-repos.vue';
+import { IntegrationConfig } from '@/config/integrations'
+import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue'
+// For now we will be referencing the connect component from the github (old) integration
+import GithubConnect from '@/config/integrations/github/components/github-connect.vue'
+import GithubParams from './components/github-params.vue'
+import GithubDropdown from './components/github-dropdown.vue'
+import GithubMappedRepos from './components/github-mapped-repos.vue'
 
-const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href
 
 const github: IntegrationConfig = {
   key: 'github',
@@ -30,6 +31,6 @@ const github: IntegrationConfig = {
       text: 'Select repositories to track and map them to projects.',
     },
   ],
-};
+}
 
-export default github;
+export default github
diff --git a/frontend/src/config/integrations/github/components/connect/github-connect.vue b/frontend/src/config/integrations/github/components/connect/github-connect.vue
deleted file mode 100644
index bb6a355448..0000000000
--- a/frontend/src/config/integrations/github/components/connect/github-connect.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div>
-    <div class="flex items-center gap-4">
-      <!--      <lf-button type="secondary-ghost" class="!text-gray-500" @click="isDetailsModalOpen = true">-->
-      <!--        <lf-icon name="circle-info" type="regular" />-->
-      <!--        Details-->
-      <!--      </lf-button>-->
-      <lf-button type="secondary" @click="isConnectModalOpen = true">
-        <lf-icon name="link-simple" />
-        Connect
-      </lf-button>
-    </div>
-    <lf-github-connect-modal
-      v-if="isConnectModalOpen"
-      v-model="isConnectModalOpen"
-    />
-    <!--    <lf-github-details-modal-->
-    <!--      v-if="isDetailsModalOpen"-->
-    <!--      v-model="isDetailsModalOpen"-->
-    <!--      @connect="isConnectModalOpen = true; isDetailsModalOpen = false;"-->
-    <!--    />-->
-    <lf-github-connect-finishing-modal v-model="isFinishingModalOpen" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import LfButton from '@/ui-kit/button/Button.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-import { useRoute } from 'vue-router';
-import { mapActions } from '@/shared/vuex/vuex.helpers';
-import LfGithubConnectFinishingModal
-  from '@/config/integrations/github/components/connect/github-connect-finishing-modal.vue';
-// import LfGithubDetailsModal from '@/config/integrations/github/components/github-details-modal.vue';
-import LfGithubConnectModal from './github-connect-modal.vue';
-
-const route = useRoute();
-const { doGithubConnect } = mapActions('integration');
-
-const isConnectModalOpen = ref(false);
-// const isDetailsModalOpen = ref(false);
-const isFinishingModalOpen = ref(false);
-
-const finallizeGithubConnect = () => {
-  const {
-    code, source, state,
-  } = route.query;
-  const setupAction = route.query.setup_action;
-  const installId = route.query.installation_id;
-
-  if (code && !source && state !== 'noconnect') {
-    isFinishingModalOpen.value = true;
-    doGithubConnect({
-      code,
-      installId,
-      setupAction,
-    }).then(() => {
-      isFinishingModalOpen.value = false;
-    });
-  }
-};
-
-onMounted(() => {
-  finallizeGithubConnect();
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubConnect',
-};
-</script>
diff --git a/frontend/src/config/integrations/github/components/github-connect.vue b/frontend/src/config/integrations/github/components/github-connect.vue
index 7dac4be9c2..5241c6ef80 100644
--- a/frontend/src/config/integrations/github/components/github-connect.vue
+++ b/frontend/src/config/integrations/github/components/github-connect.vue
@@ -1,38 +1,111 @@
 <template>
   <div>
-    <div class="flex items-center gap-4">
-      <!--      <lf-button v-if="!props.hideDetails" type="secondary-ghost" class="!text-gray-500" @click="isDetailsModalOpen = true">-->
-      <!--        <lf-icon name="circle-info" type="regular" />-->
-      <!--        Details-->
-      <!--      </lf-button>-->
-      <lf-button type="secondary" @click="isSettingsDrawerOpen = true">
-        <lf-icon name="link-simple" />
-        <slot>Connect</slot>
-      </lf-button>
-    </div>
-    <lf-github-settings-drawer
-      v-if="isSettingsDrawerOpen"
-      v-model="isSettingsDrawerOpen"
-      :integration="props.integration"
-      :segment-id="props.segmentId"
-      :grandparent-id="props.grandparentId"
-    />
+    <lfx-dropdown
+      placement="bottom-end"
+      width="20rem"
+    >
+      <template #trigger>
+        <lf-button type="outline">
+          <lf-icon name="link-simple" />
+          <slot>Connect</slot>
+        </lf-button>
+      </template>
+
+      <lfx-dropdown-item @click="isV2SettingsDrawerOpen = true">
+        <div class="flex items-start gap-2">
+          <lf-github-version-tag version="v2" />
+          <div>
+            <div class="text-sm text-gray-900">
+              GitHub - New integration
+            </div>
+            <p class="text-xs text-gray-500">
+              Sync repositories from multiple GitHub organizations. Doesn’t require organization admin permissions.  
+            </p>
+          </div>
+        </div>
+      </lfx-dropdown-item>
+      <lfx-dropdown-item @click="isV1SettingsDrawerOpen = true">
+        <div class="flex items-start gap-2">
+          <lf-github-version-tag version="v1" />
+          <div>
+            <div class="text-sm text-gray-900">
+              GitHub - Old integration
+            </div>
+            <p class="text-xs text-gray-500">
+              Sync repositories from a GitHub organization. Requires organization admin permissions.
+            </p>
+          </div>
+        </div>
+      </lfx-dropdown-item>
+    </lfx-dropdown>
   </div>
+
+  <!-- V2 Settings Drawer -->
+  <lf-github-nango-settings-drawer
+    v-if="isV2SettingsDrawerOpen"
+    v-model="isV2SettingsDrawerOpen"
+    :integration="props.integration"
+    :segment-id="props.segmentId"
+    :grandparent-id="props.grandparentId"
+  />
+
+  <!-- V1 Settings Drawer -->
+  <lf-github-connect-modal
+    v-if="isV1SettingsDrawerOpen"
+    v-model="isV1SettingsDrawerOpen"
+  />
+  <lf-github-connect-finishing-modal v-model="isFinishingModalOpen" />
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
-import LfGithubSettingsDrawer from '@/config/integrations/github/components/settings/github-settings-drawer.vue';
+import LfxDropdown from '@/ui-kit/lfx/dropdown/dropdown.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfGithubNangoSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
+import LfGithubConnectModal from '@/config/integrations/github/components/connect/github-connect-modal.vue';
+import LfGithubConnectFinishingModal from '@/config/integrations/github/components/connect/github-connect-finishing-modal.vue';
+import { mapActions } from '@/shared/vuex/vuex.helpers';
+import { useRoute } from 'vue-router';
+import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
 
+const route = useRoute();
 const props = defineProps<{
   integration: any,
   segmentId: string | null;
   grandparentId: string | null;
 }>();
 
-const isSettingsDrawerOpen = ref(false);
+const isV2SettingsDrawerOpen = ref(false);
+const isV1SettingsDrawerOpen = ref(false);
+
+const isFinishingModalOpen = ref(false);
+
+const { doGithubConnect } = mapActions('integration');
+
+const finallizeGithubConnect = () => {
+  const {
+    code, source, state,
+  } = route.query;
+  const setupAction = route.query.setup_action;
+  const installId = route.query.installation_id;
+
+  if (code && !source && state !== 'noconnect') {
+    isFinishingModalOpen.value = true;
+    doGithubConnect({
+      code,
+      installId,
+      setupAction,
+    }).then(() => {
+      isFinishingModalOpen.value = false;
+    });
+  }
+};
+
+onMounted(() => {
+  finallizeGithubConnect();
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/config/integrations/github/components/github-version-tag.vue b/frontend/src/config/integrations/github/components/github-version-tag.vue
new file mode 100644
index 0000000000..5daa267d9e
--- /dev/null
+++ b/frontend/src/config/integrations/github/components/github-version-tag.vue
@@ -0,0 +1,27 @@
+<template>
+  <lf-tooltip 
+    :content="props.tooltipContent" 
+    :disabled="!props.tooltipContent" 
+    placement="top"
+    class="font-primary font-semibold">
+    <lfx-chip
+      type="bordered"
+      size="default"
+      class="cursor-default"
+    >
+      <span class="text-xs text-gray-500 font-semibold font-primary">
+        {{ props.version }}
+      </span>
+    </lfx-chip>
+  </lf-tooltip>
+</template>
+
+<script setup lang="ts">
+import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
+import LfxChip from '@/ui-kit/lfx/chip/chip.vue';
+
+const props = defineProps<{
+  version: 'v1' | 'v2';
+  tooltipContent?: string;
+}>();
+</script>
\ No newline at end of file
diff --git a/frontend/src/config/integrations/github/config.ts b/frontend/src/config/integrations/github/config.ts
index 4f77eecc2a..3fc9a6b3d8 100644
--- a/frontend/src/config/integrations/github/config.ts
+++ b/frontend/src/config/integrations/github/config.ts
@@ -1,11 +1,11 @@
-import { IntegrationConfig } from '@/config/integrations';
-import GithubConnect from './components/connect/github-connect.vue';
-import GithubStatus from './components/github-status.vue';
-import GithubAction from './components/github-action.vue';
-import GithubParams from './components/github-params.vue';
-import GithubMappedRepos from './components/github-mapped-repos.vue';
+import { IntegrationConfig } from '@/config/integrations'
+import GithubConnect from './components/github-connect.vue'
+import GithubStatus from './components/github-status.vue'
+import GithubAction from './components/github-action.vue'
+import GithubParams from './components/github-params.vue'
+import GithubMappedRepos from './components/github-mapped-repos.vue'
 
-const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href
 
 const github: IntegrationConfig = {
   key: 'github',
@@ -33,6 +33,6 @@ const github: IntegrationConfig = {
       text: 'Waiting for organization admin to approve the installation.',
     },
   ],
-};
+}
 
-export default github;
+export default github
diff --git a/frontend/src/config/integrations/gitlab/components/gitlab-connect.vue b/frontend/src/config/integrations/gitlab/components/gitlab-connect.vue
index e95cebde22..cf40fbc0ce 100644
--- a/frontend/src/config/integrations/gitlab/components/gitlab-connect.vue
+++ b/frontend/src/config/integrations/gitlab/components/gitlab-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/groupsio/components/groupsio-connect.vue b/frontend/src/config/integrations/groupsio/components/groupsio-connect.vue
index 917b5818f6..7e24261838 100644
--- a/frontend/src/config/integrations/groupsio/components/groupsio-connect.vue
+++ b/frontend/src/config/integrations/groupsio/components/groupsio-connect.vue
@@ -4,7 +4,7 @@
     <!--      <lf-icon name="circle-info" type="regular" />-->
     <!--      Details-->
     <!--    </lf-button>-->
-    <lf-button type="secondary" @click="isSettingsDrawerOpen = true">
+    <lf-button type="outline" @click="isSettingsDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/hackernews/components/hackernews-connect.vue b/frontend/src/config/integrations/hackernews/components/hackernews-connect.vue
index 8008a46d0a..7f9459361c 100644
--- a/frontend/src/config/integrations/hackernews/components/hackernews-connect.vue
+++ b/frontend/src/config/integrations/hackernews/components/hackernews-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isHackernewsSettingsDrawerOpen = true">
+    <lf-button type="outline" @click="isHackernewsSettingsDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/jira/components/jira-connect.vue b/frontend/src/config/integrations/jira/components/jira-connect.vue
index fd74db2995..61ee1b9bcb 100644
--- a/frontend/src/config/integrations/jira/components/jira-connect.vue
+++ b/frontend/src/config/integrations/jira/components/jira-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isJiraSettingsDrawerVisible = true">
+    <lf-button type="outline" @click="isJiraSettingsDrawerVisible = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/linkedin/components/linkedin-connect.vue b/frontend/src/config/integrations/linkedin/components/linkedin-connect.vue
index 7aa6f98aca..88c9ce1a1a 100644
--- a/frontend/src/config/integrations/linkedin/components/linkedin-connect.vue
+++ b/frontend/src/config/integrations/linkedin/components/linkedin-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/reddit/components/reddit-connect.vue b/frontend/src/config/integrations/reddit/components/reddit-connect.vue
index 1d3f87dc3e..fd1ef05a22 100644
--- a/frontend/src/config/integrations/reddit/components/reddit-connect.vue
+++ b/frontend/src/config/integrations/reddit/components/reddit-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isRedditSettingsDrawerOpen = true">
+    <lf-button type="outline" @click="isRedditSettingsDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/slack/components/slack-connect.vue b/frontend/src/config/integrations/slack/components/slack-connect.vue
index 0911f545fe..8e621dc8e1 100644
--- a/frontend/src/config/integrations/slack/components/slack-connect.vue
+++ b/frontend/src/config/integrations/slack/components/slack-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/stackoverflow/components/stackoverflow-connect.vue b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-connect.vue
index 255c053ae0..d2a7a39307 100644
--- a/frontend/src/config/integrations/stackoverflow/components/stackoverflow-connect.vue
+++ b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-connect.vue
@@ -4,7 +4,7 @@
     <!--        <lf-icon name="circle-info" type="regular" />-->
     <!--        Details-->
     <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isStackoverflowConnectDrawerOpen = true">
+    <lf-button type="outline" @click="isStackoverflowConnectDrawerOpen = true">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/integrations/twitter/components/twitter-connect.vue b/frontend/src/config/integrations/twitter/components/twitter-connect.vue
index cbe5925115..1b0d4fd170 100644
--- a/frontend/src/config/integrations/twitter/components/twitter-connect.vue
+++ b/frontend/src/config/integrations/twitter/components/twitter-connect.vue
@@ -4,7 +4,7 @@
     <!--      <lf-icon name="circle-info" type="regular" />-->
     <!--      Details-->
     <!--    </lf-button>-->
-    <lf-button type="secondary" @click="connect()">
+    <lf-button type="outline" @click="connect()">
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
diff --git a/frontend/src/config/links.ts b/frontend/src/config/links.ts
index f2e51cffc8..13e2f76af1 100644
--- a/frontend/src/config/links.ts
+++ b/frontend/src/config/links.ts
@@ -3,4 +3,5 @@
 
 export const links = {
   integrations: `https://docs.crowd.dev/docs/getting-started/integrations`,
+  githubIntegration: `https://docs.crowd.dev/docs/getting-started/integrations/github-integration`,
 }
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
index ba0b8f0e4c..6ea946a885 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
@@ -1,9 +1,9 @@
 <template>
   <article
     v-if="props.config"
-    class="border border-gray-200 shadow-sm rounded-lg"
+    class="border border-gray-200 shadow-xs rounded-xl overflow-hidden"
   >
-    <div class="py-4 pl-4 pr-5 flex justify-between items-center">
+    <div class="p-5 pr-5 flex justify-between items-center">
       <!-- Info -->
       <div class="flex items-center gap-4">
         <div class=" h-12 w-12 border border-gray-200 rounded-md flex items-center justify-center">
@@ -12,8 +12,12 @@
           </div>
         </div>
         <div>
-          <h6 class="mb-0.5">
-            {{ props.config.name }}
+          <h6 v-if="isV2" class="mb-0.5 flex items-center gap-2">
+            Github
+            <lf-github-version-tag v-if="isV2" version="v2" tooltip-content="New integration" />
+          </h6>
+          <h6 v-else class="mb-0.5">
+            {{ props.config.name.replace(' (v2)', '') }}
           </h6>
           <p class="text-gray-500 text-small">
             {{ props.config.description }}
@@ -27,7 +31,7 @@
       </div>
 
       <!-- Connect component -->
-      <div v-else class="flex items-center justify-end gap-4">
+      <div v-else class="flex items-center justify-end">
         <component
           :is="props.config.connectComponent"
           v-if="props.config.connectComponent && isComponentMounted"
@@ -38,12 +42,13 @@
       </div>
     </div>
 
-    <div v-if="integration && integration.status" :class="status.actionBar.background">
+    <div v-if="integration && integration.status" :class="isGithubInProgress ? 'bg-gray-50' : status.actionBar.background">
       <div class="items-center py-2.5 px-4 flex justify-between">
         <!-- Custom content -->
         <div class="text-small flex items-center" :class="status.actionBar.color">
-          <div v-if="isInProgress && !integration.isNango">
-            <app-integration-progress-bar :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
+          <div v-if="isInProgress">
+            <lf-github-integration-progress v-if="integration.key === 'github'" :integration="integration" />
+            <app-integration-progress-bar v-else :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
           </div>
           <div v-else-if="hasError">
             {{ props.config.name }} integration failed to connect due to an API error.
@@ -166,6 +171,8 @@ import { useRoute } from 'vue-router';
 import { dateHelper } from '@/shared/date-helper/date-helper';
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
+import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
+import LfGithubIntegrationProgress from '@/modules/integration/components/github-integration-progress.vue';
 
 const props = defineProps<{
   config: IntegrationConfig,
@@ -185,6 +192,7 @@ const { trackEvent } = useProductTracking();
 
 const integration = computed(() => findByPlatform.value(props.config.key));
 const status = computed(() => getIntegrationStatus(integration.value));
+const isV2 = computed(() => integration.value?.isNango && integration.value?.status);
 
 const lastDataCheckCompleted = computed(() => {
   if (['github', 'gerrit', 'jira', 'confluence'].includes(integration.value.platform)) {
@@ -202,6 +210,8 @@ const isInProgress = computed(() => integration.value.status === 'in-progress');
 const hasError = computed(() => integration.value.status === 'error');
 const isComplete = computed(() => integration.value.status === 'done');
 
+const isGithubInProgress = computed(() => integration.value?.platform === 'github' && isInProgress.value);
+
 const selectedProgress = computed(() => (props.progress || []).find((p) => p.platform === props.config.key));
 
 const isComponentMounted = ref(false);
diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
index fcf1b486f1..53dc6dc465 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
@@ -86,32 +86,10 @@
     <section v-loading="loadingFetch">
       <app-integration-progress-wrapper
         v-if="!loadingFetch"
-        :segments="[route.params.id]"
+        :segments="[route.params.id as string]"
       >
         <template #default="{ progress, progressError }">
           <div v-if="platformsByStatus.length > 0" class="flex flex-col gap-6">
-            <lf-tooltip
-              v-if="isTeamUser"
-              class="ml-auto"
-              placement="top"
-              content-class="!max-w-76 !p-3 !text-start"
-              :disabled="!isGithubConnected"
-              content="Please disconnect the existing integration to be able to select the GitHub version"
-            >
-              <lf-switch
-                v-model="useGitHubNango"
-                :size="'small'"
-                :disabled="isGithubConnected"
-              >
-                <template #inactive>
-                  <span class="text-gray-500 text-small mr-2">Use old GitHub integration</span>
-                </template>
-                <template #default>
-                  <span class="text-gray-500 text-small">Use new GitHub integration</span>
-                </template>
-              </lf-switch>
-            </lf-tooltip>
-
             <lf-integration-list-item
               v-for="key in platformsByStatus"
               :key="key"
@@ -137,22 +115,19 @@
 
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
-import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { computed, onMounted, ref } from 'vue';
 import { getSegmentName } from '@/utils/segments';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
 import { lfIntegrations } from '@/config/integrations';
-import LfxTabs from '@/ui-kit/lfx/tabs/Tabs.vue';
+import LfxTabs from '@/ui-kit/lfx/tabs/tabs.vue';
 import LfIntegrationListItem from '@/modules/admin/modules/integration/components/integration-list-item.vue';
-import LfxTab from '@/ui-kit/lfx/tabs/Tab.vue';
+import LfxTab from '@/ui-kit/lfx/tabs/tab.vue';
 import AppIntegrationProgressWrapper from '@/modules/integration/components/integration-progress-wrapper.vue';
 import { mapActions, mapGetters } from '@/shared/vuex/vuex.helpers';
-import LfSwitch from '@/ui-kit/switch/Switch.vue';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import config from '@/config';
-import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import { links } from '@/config/links';
 
 const route = useRoute();
@@ -210,8 +185,8 @@ const env = computed(() => config.env);
 const isTeamUser = computed(() => env.value !== 'production' || teamUserIds.value?.includes(userId.value));
 
 onMounted(() => {
-  localStorage.setItem('segmentId', id);
-  localStorage.setItem('segmentGrandparentId', grandparentId);
+  localStorage.setItem('segmentId', id as string);
+  localStorage.setItem('segmentGrandparentId', grandparentId as string);
 
   doFetch().then(() => {
     useGitHubNango.value = updateGithubVersion();
diff --git a/frontend/src/modules/integration/components/github-integration-progress.vue b/frontend/src/modules/integration/components/github-integration-progress.vue
new file mode 100644
index 0000000000..8994acdc88
--- /dev/null
+++ b/frontend/src/modules/integration/components/github-integration-progress.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="flex items-center gap-1">
+    <lf-icon
+      name="arrows-rotate"
+      :size="16"
+      class="text-gray-400 mx-2 flex items-center"
+    />
+    <p class="text-gray-600 text-xs">
+      Syncing GitHub data from <span class="font-semibold">{{ orgName }}</span> for 
+      <el-popover trigger="hover" placement="top" popper-class="!w-auto">
+        <template #reference>
+          <span class="underline decoration-dashed cursor-default">
+            {{ pluralize('repository', allRepositoriesNames.length, true) }}
+          </span>
+        </template>
+
+        <div class="-my-1 px-1 max-h-44 overflow-auto" v-if="allRepositoriesNames.length > 0">
+          <article
+            v-for="repo of allRepositoriesNames"
+            :key="repo.name"
+            class="py-2 flex items-center flex-nowrap"
+          >
+            <lf-svg
+              name="git-repository"
+              class="w-4 h-4 mr-2 flex items-center"
+            />
+            <a
+              :href="repo.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+            >
+              /{{ repo.name }}
+            </a>
+          </article>
+        </div>
+      </el-popover>
+      
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { IntegrationService } from '@/modules/integration/integration-service';
+import pluralize from 'pluralize';
+import LfSvg from '@/shared/svg/svg.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = defineProps<{
+  integration: any;
+}>();
+
+const mappings = ref<
+  {
+    url: string;
+    segment: {
+      id: string;
+      name: string;
+    };
+  }[]
+>([]);
+
+const repoNameFromUrl = (url: string) => url.split('/').at(-1);
+
+// TODO: verify if the status of mappedRepositories is available for github old integration
+// const mappedRepositories = computed(() => {
+//   const reposObj = props.integration.settings.nangoMapping;
+//   const mapped = reposObj
+//     ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
+//     : [];
+//   return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
+// });
+
+const allRepositoriesNames = computed(() => props.integration.settings.orgs
+  .map((org: any) => org.repos.map((repo: any) => repo))
+  .flat());
+const orgName = computed(() => props.integration.settings.orgs.length > 0 ? props.integration.settings.orgs[0].name : 'blah');
+
+onMounted(() => {
+  if (props.integration.status !== 'mapping') {
+    IntegrationService.fetchGitHubMappings(props.integration).then((res) => {
+      mappings.value = res;
+    });
+  }
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfGithubIntegrationProgress',
+};
+</script>
diff --git a/frontend/src/ui-kit/button/button.scss b/frontend/src/ui-kit/button/button.scss
index c79b6d8df8..6921b5880c 100644
--- a/frontend/src/ui-kit/button/button.scss
+++ b/frontend/src/ui-kit/button/button.scss
@@ -371,6 +371,34 @@
     --lf-btn-loading-background: var(--lf-btn-secondary-link-loading-background);
     --lf-btn-loading-border: var(--lf-btn-secondary-link-loading-border);
   }
+
+  &--outline {
+    @apply rounded-full;
+    --lf-btn-text: var(--lf-btn-outline-text);
+    --lf-btn-background: var(--lf-btn-outline-background);
+    --lf-btn-border: var(--lf-btn-outline-border);
+    --lf-btn-shadow: var(--lf-btn-outline-shadow);
+
+    // Hover
+    --lf-btn-hover-text: var(--lf-btn-outline-text);
+    --lf-btn-hover-background: var(--lf-btn-outline-background);
+    --lf-btn-hover-border: var(--lf-btn-outline-border);
+
+    // Active
+    --lf-btn-active-text: var(--lf-btn-outline-active-text);
+    --lf-btn-active-background: var(--lf-btn-outline-active-background);
+    --lf-btn-active-border: var(--lf-btn-outline-active-border);
+
+    // Disabled
+    --lf-btn-disabled-text: var(--lf-btn-outline-disabled-text);
+    --lf-btn-disabled-background: var(--lf-btn-outline-disabled-background);
+    --lf-btn-disabled-border: var(--lf-btn-outline-disabled-border);
+
+    // Loading
+    --lf-btn-loading-text: var(--lf-btn-outline-loading-text);
+    --lf-btn-loading-background: var(--lf-btn-outline-loading-background);
+    --lf-btn-loading-border: var(--lf-btn-outline-loading-border);
+  }
 }
 
 .c-btn-group{
diff --git a/frontend/src/ui-kit/button/types/ButtonType.ts b/frontend/src/ui-kit/button/types/ButtonType.ts
index 0a43c93dfe..5863be91cf 100644
--- a/frontend/src/ui-kit/button/types/ButtonType.ts
+++ b/frontend/src/ui-kit/button/types/ButtonType.ts
@@ -9,6 +9,7 @@ export const buttonTypes = [
   'secondary-ghost-light',
   'primary-link',
   'secondary-link',
-] as const;
+  'outline',
+] as const
 
-export type ButtonType = typeof buttonTypes[number];
+export type ButtonType = (typeof buttonTypes)[number]
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 4787e63d16..6c7f7a85eb 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -193,7 +193,7 @@ module.exports = {
         lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
         xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
         '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-        xs: '0 1px 2px -1px rgba(0, 0, 0, 0.10), 0 1px 3px 0 rgba(0, 0, 0, 0.10)',
+        xs: '0 1px 2px 0 rgba(0, 0, 0, 0.02)',
       },
       fontSize: {
         '4xs': ['0.5rem'],

From 265e3c0fc489d278cec9758773b533eefcc83f5e Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Wed, 21 Jan 2026 17:00:34 +0800
Subject: [PATCH 07/22] fix: github mapping display

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../github-nango/components/github-params.vue | 104 ------------------
 .../integrations/github-nango/config.ts       |   5 +-
 .../components/github-mappings-display.vue    |  59 ++++++++++
 .../github/components/github-params.vue       |  48 +-------
 .../github/components/github-status.vue       |  96 ++++++++++++++--
 .../components/integration-list-item.vue      |   6 +-
 .../modules/integration/types/Integration.ts  |  18 ++-
 .../github-integration-progress.vue           |  93 ----------------
 8 files changed, 170 insertions(+), 259 deletions(-)
 delete mode 100644 frontend/src/config/integrations/github-nango/components/github-params.vue
 create mode 100644 frontend/src/config/integrations/github/components/github-mappings-display.vue
 delete mode 100644 frontend/src/modules/integration/components/github-integration-progress.vue

diff --git a/frontend/src/config/integrations/github-nango/components/github-params.vue b/frontend/src/config/integrations/github-nango/components/github-params.vue
deleted file mode 100644
index 278198f817..0000000000
--- a/frontend/src/config/integrations/github-nango/components/github-params.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <div class="flex items-center gap-1">
-    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-      <template #reference>
-        <div v-if="!isInProgress" class="text-gray-600 text-2xs flex items-center leading-5">
-          <lf-svg
-            name="git-repository"
-            class="w-4 h-4 !text-gray-600 mr-1 flex items-center"
-          />
-          <span class="font-semibold">
-            {{ pluralize('repository', Object.keys(mappings).length, true) }}
-          </span>
-        </div>
-        <span v-else class="text-gray-600 text-2xs flex items-center leading-5 font-semibold">
-          {{ mappedRepositories.length }} out of
-          {{ allRepositoriesNames.length }} repositories connected
-        </span>
-      </template>
-
-      <p class="text-gray-400 text-sm font-semibold mb-4">
-        {{ isInProgress ? 'Connected GitHub repositories' : 'GitHub repositories' }}
-      </p>
-      <div class="-my-1 px-1 max-h-44 overflow-auto">
-        <article
-          v-for="mapping of mappedRepositories"
-          :key="mapping.url"
-          class="py-2 flex items-center flex-nowrap"
-        >
-          <lf-svg
-            name="git-repository"
-            class="w-4 h-4 mr-2 flex items-center"
-          />
-          <a
-            :href="mapping.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
-          >
-            /{{ repoNameFromUrl(mapping.url) }}
-          </a>
-          <lf-icon
-            name="arrow-right"
-            :size="16"
-            class="text-gray-400 mx-2 flex items-center"
-          />
-          <div class="text-xs leading-5 max-w-3xs truncate">
-            {{ mapping.segment.name }}
-          </div>
-        </article>
-      </div>
-    </el-popover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import { IntegrationService } from '@/modules/integration/integration-service';
-import pluralize from 'pluralize';
-import LfSvg from '@/shared/svg/svg.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-
-const props = defineProps<{
-  integration: any;
-}>();
-
-const mappings = ref<
-  {
-    url: string;
-    segment: {
-      id: string;
-      name: string;
-    };
-  }[]
->([]);
-
-const repoNameFromUrl = (url: string) => url.split('/').at(-1);
-
-const mappedRepositories = computed(() => {
-  const reposObj = props.integration.settings.nangoMapping;
-  const mapped = reposObj
-    ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
-    : [];
-  return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
-});
-
-const allRepositoriesNames = computed(() => props.integration.settings.orgs
-  .map((org: any) => org.repos.map((repo: any) => repo.name))
-  .flat());
-
-const isInProgress = computed(() => mappedRepositories.value.length < allRepositoriesNames.value.length);
-onMounted(() => {
-  if (props.integration.status !== 'mapping') {
-    IntegrationService.fetchGitHubMappings(props.integration).then((res) => {
-      mappings.value = res;
-    });
-  }
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubParams',
-};
-</script>
diff --git a/frontend/src/config/integrations/github-nango/config.ts b/frontend/src/config/integrations/github-nango/config.ts
index a4d2e47230..b19bda0fbb 100644
--- a/frontend/src/config/integrations/github-nango/config.ts
+++ b/frontend/src/config/integrations/github-nango/config.ts
@@ -2,7 +2,8 @@ import { IntegrationConfig } from '@/config/integrations'
 import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue'
 // For now we will be referencing the connect component from the github (old) integration
 import GithubConnect from '@/config/integrations/github/components/github-connect.vue'
-import GithubParams from './components/github-params.vue'
+import GithubParams from '@/config/integrations/github/components/github-params.vue'
+import GithubStatus from '@/config/integrations/github/components/github-status.vue'
 import GithubDropdown from './components/github-dropdown.vue'
 import GithubMappedRepos from './components/github-mapped-repos.vue'
 
@@ -16,7 +17,7 @@ const github: IntegrationConfig = {
     'Connect GitHub to sync profile information, stars, forks, pull requests, issues, and discussions.',
   connectComponent: GithubConnect,
   dropdownComponent: GithubDropdown,
-  statusComponent: GithubParams,
+  statusComponent: GithubStatus,
   connectedParamsComponent: GithubParams,
   mappedReposComponent: GithubMappedRepos,
   settingComponent: LfGithubSettingsDrawer,
diff --git a/frontend/src/config/integrations/github/components/github-mappings-display.vue b/frontend/src/config/integrations/github/components/github-mappings-display.vue
new file mode 100644
index 0000000000..3cbd470054
--- /dev/null
+++ b/frontend/src/config/integrations/github/components/github-mappings-display.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="flex items-center gap-1">
+    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
+      <template #reference>
+        <div
+          class="text-gray-600 text-2xs flex items-center leading-5"
+        >
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+          <span class="font-semibold underline decoration-dashed cursor-default">
+            {{ pluralize("repository", Object.keys(mappings).length, true) }}
+          </span>
+        </div>
+      </template>
+
+      <p class="text-gray-400 text-sm font-semibold mb-4">
+        GitHub repositories
+      </p>
+      <div class="-my-1 px-1 max-h-44 overflow-auto">
+        <article
+          v-for="mapping of mappings"
+          :key="mapping.url"
+          class="py-2 flex items-center flex-nowrap"
+        >
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-2" />
+          <a
+            :href="mapping.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+          >
+            /{{ repoNameFromUrl(mapping.url) }}
+          </a>
+          <lf-icon name="arrow-right" :size="16" class="text-gray-400 mx-2 flex items-center" />
+          <div class="text-xs leading-5 max-w-3xs truncate">
+            {{ mapping.segment.name }}
+          </div>
+        </article>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import pluralize from 'pluralize';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
+
+const props = defineProps<{
+  mappings: IntegrationMapping[];
+}>();
+
+const repoNameFromUrl = (url: string) => url.split('/').at(-1);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfGithubMappingsDisplay',
+};
+</script>
diff --git a/frontend/src/config/integrations/github/components/github-params.vue b/frontend/src/config/integrations/github/components/github-params.vue
index 275c1af234..2ae29ff558 100644
--- a/frontend/src/config/integrations/github/components/github-params.vue
+++ b/frontend/src/config/integrations/github/components/github-params.vue
@@ -1,59 +1,17 @@
 <template>
-  <div class="flex items-center gap-1">
-    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-      <template #reference>
-        <div
-          class="text-gray-600 text-2xs flex items-center leading-5"
-        >
-          <lf-svg name="git-repository" class="w-4 h-4 !text-gray-600 mr-1 flex items-center" />
-          <span class="font-semibold">
-            {{ pluralize("repository", Object.keys(mappings).length, true) }}
-          </span>
-        </div>
-      </template>
-
-      <p class="text-gray-400 text-sm font-semibold mb-4">
-        GitHub repositories
-      </p>
-      <div class="-my-1 px-1 max-h-44 overflow-auto">
-        <article
-          v-for="mapping of mappings"
-          :key="mapping.url"
-          class="py-2 flex items-center flex-nowrap"
-        >
-          <lf-svg name="git-repository" class="w-4 h-4 mr-2 flex items-center" />
-          <a
-            :href="mapping.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
-          >
-            /{{ repoNameFromUrl(mapping.url) }}
-          </a>
-          <lf-icon name="arrow-right" :size="16" class="text-gray-400 mx-2 flex items-center" />
-          <div class="text-xs leading-5 max-w-3xs truncate">
-            {{ mapping.segment.name }}
-          </div>
-        </article>
-      </div>
-    </el-popover>
-  </div>
+  <lf-github-mappings-display :mappings="mappings" />
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
-import pluralize from 'pluralize';
-import LfSvg from '@/shared/svg/svg.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
 
 const props = defineProps<{
   integration: any;
 }>();
 
-const mappings = ref([]);
-
-const repoNameFromUrl = (url) => url.split('/').at(-1);
+const mappings = ref<IntegrationMapping[]>([]);
 
 onMounted(() => {
   if (props.integration.status !== 'mapping') {
diff --git a/frontend/src/config/integrations/github/components/github-status.vue b/frontend/src/config/integrations/github/components/github-status.vue
index 9559fe4f32..a8e9fa7ee7 100644
--- a/frontend/src/config/integrations/github/components/github-status.vue
+++ b/frontend/src/config/integrations/github/components/github-status.vue
@@ -1,19 +1,101 @@
 <template>
-  <div
-    v-if="props.integration?.status === 'mapping'"
-    class="flex items-center gap-1"
-  >
-    <lf-svg name="git-repository" class="w-4 h-4" />
-    Mapping repositories...
+  <div class="flex flex-col gap-3">
+    <div class="flex items-center" v-if="mappedRepositories.length > 0">
+      <lf-github-mappings-display :mappings="mappedRepositories" />
+      <span class="font-semibold">&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+      <!-- see integration-list-item.vue for last data check completed -->
+      <span class="text-small text-gray-500">
+        Last data check completed 1 hour ago
+      </span>
+    </div>
+
+    <div class="flex items-center gap-1" v-for="org of orgs" :key="org.url">
+      <lf-icon
+        name="arrows-rotate"
+        :size="16"
+        class="text-gray-400 flex items-center"
+      />
+      <p class="text-gray-600 text-xs">
+        Syncing GitHub data from <span class="font-semibold">{{ org.name }}</span> for 
+        <el-popover trigger="hover" placement="top" popper-class="!w-auto">
+          <template #reference>
+            <span class="underline decoration-dashed cursor-default">
+              {{ pluralize('repository', remainingRepositories(org.url).length, true) }}
+            </span>
+          </template>
+
+          <div class="-my-1 px-1 max-h-44 overflow-auto" v-if="remainingRepositories(org.url).length > 0">
+            <article
+              v-for="repo of remainingRepositories(org.url)"
+              :key="repo.name"
+              class="py-2 flex items-center flex-nowrap"
+            >
+              <lf-icon name="book" :size="16" class="text-gray-600 mr-2" />
+              <a
+                :href="repo.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+              >
+                /{{ repo.name }}
+              </a>
+            </article>
+          </div>
+        </el-popover>
+        
+      </p>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import LfSvg from '@/shared/svg/svg.vue';
+import { computed, onMounted, ref } from 'vue';
+import { IntegrationService } from '@/modules/integration/integration-service';
+import pluralize from 'pluralize';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
+import LfGithubMappingsDisplay from './github-mappings-display.vue';
 
 const props = defineProps<{
   integration: any;
 }>();
+
+const mockNango = {
+  test: {repoName: 'styled-components',}
+};
+
+const mappings = ref<IntegrationMapping[]>([]);
+
+const repoNameFromUrl = (url: string) => url.split('/').at(-1);
+const remainingRepositories = (orgUrl: string) => {
+  const orgRepos = props.integration.settings.orgs.find((o: any) => o.url === orgUrl)?.repos;
+
+  if (!orgRepos) return [];
+
+  return orgRepos.filter((repo: any) => !mappedRepositories.value.includes(repo.url));
+};
+
+const mappedRepositories = computed(() => {
+  const reposObj = props.integration.settings.nangoMapping || mockNango;
+
+  const mapped = reposObj
+    ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
+    : [];
+  return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
+});
+
+const allRepositoriesNames = computed(() => props.integration.settings.orgs
+  .map((org: any) => org.repos.map((repo: any) => repo))
+  .flat());
+const orgs = computed(() => props.integration.settings.orgs);
+
+onMounted(() => {
+  if (props.integration.status !== 'mapping') {
+    IntegrationService.fetchGitHubMappings(props.integration).then((res) => {
+      mappings.value = res;
+    });
+  }
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
index 6ea946a885..e4a999e696 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
@@ -46,9 +46,8 @@
       <div class="items-center py-2.5 px-4 flex justify-between">
         <!-- Custom content -->
         <div class="text-small flex items-center" :class="status.actionBar.color">
-          <div v-if="isInProgress">
-            <lf-github-integration-progress v-if="integration.key === 'github'" :integration="integration" />
-            <app-integration-progress-bar v-else :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
+          <div v-if="isInProgress && integration.key !== 'github'">
+            <app-integration-progress-bar :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
           </div>
           <div v-else-if="hasError">
             {{ props.config.name }} integration failed to connect due to an API error.
@@ -172,7 +171,6 @@ import { dateHelper } from '@/shared/date-helper/date-helper';
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
-import LfGithubIntegrationProgress from '@/modules/integration/components/github-integration-progress.vue';
 
 const props = defineProps<{
   config: IntegrationConfig,
diff --git a/frontend/src/modules/admin/modules/integration/types/Integration.ts b/frontend/src/modules/admin/modules/integration/types/Integration.ts
index 6ad68c2214..c2d94d4720 100644
--- a/frontend/src/modules/admin/modules/integration/types/Integration.ts
+++ b/frontend/src/modules/admin/modules/integration/types/Integration.ts
@@ -1,5 +1,15 @@
-export interface Integration<Settings>{
-  id: string;
-  status: string;
-  settings: Settings;
+export interface Integration<Settings> {
+  id: string
+  status: string
+  settings: Settings
+}
+
+export interface IntegrationMapping {
+  gitIntegrationId?: string
+  sourceIntegrationId?: string
+  url: string
+  segment: {
+    id: string
+    name: string
+  }
 }
diff --git a/frontend/src/modules/integration/components/github-integration-progress.vue b/frontend/src/modules/integration/components/github-integration-progress.vue
deleted file mode 100644
index 8994acdc88..0000000000
--- a/frontend/src/modules/integration/components/github-integration-progress.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div class="flex items-center gap-1">
-    <lf-icon
-      name="arrows-rotate"
-      :size="16"
-      class="text-gray-400 mx-2 flex items-center"
-    />
-    <p class="text-gray-600 text-xs">
-      Syncing GitHub data from <span class="font-semibold">{{ orgName }}</span> for 
-      <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-        <template #reference>
-          <span class="underline decoration-dashed cursor-default">
-            {{ pluralize('repository', allRepositoriesNames.length, true) }}
-          </span>
-        </template>
-
-        <div class="-my-1 px-1 max-h-44 overflow-auto" v-if="allRepositoriesNames.length > 0">
-          <article
-            v-for="repo of allRepositoriesNames"
-            :key="repo.name"
-            class="py-2 flex items-center flex-nowrap"
-          >
-            <lf-svg
-              name="git-repository"
-              class="w-4 h-4 mr-2 flex items-center"
-            />
-            <a
-              :href="repo.url"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
-            >
-              /{{ repo.name }}
-            </a>
-          </article>
-        </div>
-      </el-popover>
-      
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import { IntegrationService } from '@/modules/integration/integration-service';
-import pluralize from 'pluralize';
-import LfSvg from '@/shared/svg/svg.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-
-const props = defineProps<{
-  integration: any;
-}>();
-
-const mappings = ref<
-  {
-    url: string;
-    segment: {
-      id: string;
-      name: string;
-    };
-  }[]
->([]);
-
-const repoNameFromUrl = (url: string) => url.split('/').at(-1);
-
-// TODO: verify if the status of mappedRepositories is available for github old integration
-// const mappedRepositories = computed(() => {
-//   const reposObj = props.integration.settings.nangoMapping;
-//   const mapped = reposObj
-//     ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
-//     : [];
-//   return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
-// });
-
-const allRepositoriesNames = computed(() => props.integration.settings.orgs
-  .map((org: any) => org.repos.map((repo: any) => repo))
-  .flat());
-const orgName = computed(() => props.integration.settings.orgs.length > 0 ? props.integration.settings.orgs[0].name : 'blah');
-
-onMounted(() => {
-  if (props.integration.status !== 'mapping') {
-    IntegrationService.fetchGitHubMappings(props.integration).then((res) => {
-      mappings.value = res;
-    });
-  }
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubIntegrationProgress',
-};
-</script>

From ce60eab0f1ffd555f3e08952b6c53bb46c059af7 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Wed, 21 Jan 2026 17:14:34 +0800
Subject: [PATCH 08/22] chore: changed integration description text

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../config/integrations/confluence/config.ts  |  2 +-
 .../src/config/integrations/devto/config.ts   |  2 +-
 .../src/config/integrations/discord/config.ts |  2 +-
 .../config/integrations/discourse/config.ts   |  2 +-
 .../src/config/integrations/gerrit/config.ts  |  2 +-
 .../git/components/git-params.vue             | 16 ++++++-------
 .../src/config/integrations/git/config.ts     |  2 +-
 .../settings/github-settings-drawer.vue       |  2 +-
 .../integrations/github-nango/config.ts       | 23 +++++++++----------
 .../github/components/github-connect.vue      |  2 +-
 .../components/github-mappings-display.vue    |  2 +-
 .../github/components/github-status.vue       | 20 +++++++---------
 .../github/components/github-version-tag.vue  | 11 +++++----
 .../src/config/integrations/github/config.ts  | 21 ++++++++---------
 .../src/config/integrations/gitlab/config.ts  |  2 +-
 .../config/integrations/groupsio/config.ts    |  2 +-
 .../config/integrations/hackernews/config.ts  |  3 +--
 .../src/config/integrations/jira/config.ts    |  2 +-
 .../config/integrations/linkedin/config.ts    |  2 +-
 .../src/config/integrations/reddit/config.ts  |  2 +-
 .../src/config/integrations/slack/config.ts   |  2 +-
 .../integrations/stackoverflow/config.ts      |  2 +-
 .../src/config/integrations/twitter/config.ts |  2 +-
 frontend/src/config/links.ts                  |  6 ++---
 .../pages/integration-list.page.vue           |  5 ----
 .../src/ui-kit/button/types/ButtonType.ts     |  2 +-
 26 files changed, 65 insertions(+), 76 deletions(-)

diff --git a/frontend/src/config/integrations/confluence/config.ts b/frontend/src/config/integrations/confluence/config.ts
index 5c100c9035..1d93a93c0b 100644
--- a/frontend/src/config/integrations/confluence/config.ts
+++ b/frontend/src/config/integrations/confluence/config.ts
@@ -10,7 +10,7 @@ const confluence: IntegrationConfig = {
   key: 'confluence',
   name: 'Confluence',
   image,
-  description: 'Connect Confluence to sync documentation activities from your repos.',
+  description: 'Sync documentation activities from your spaces.',
   connectComponent: ConfluenceConnect,
   connectedParamsComponent: ConfluenceParams,
   dropdownComponent: ConfluenceDropdown,
diff --git a/frontend/src/config/integrations/devto/config.ts b/frontend/src/config/integrations/devto/config.ts
index 2e1692da18..fc359da4c1 100644
--- a/frontend/src/config/integrations/devto/config.ts
+++ b/frontend/src/config/integrations/devto/config.ts
@@ -8,7 +8,7 @@ const devto: IntegrationConfig = {
   key: 'devto',
   name: 'DEV',
   image,
-  description: 'Connect DEV to sync profile information and comments on articles.',
+  description: 'Sync profile information and comments on articles.',
   connectComponent: DevtoConnect,
   connectedParamsComponent: DevtoParams,
   showProgress: false,
diff --git a/frontend/src/config/integrations/discord/config.ts b/frontend/src/config/integrations/discord/config.ts
index 173a7af1a5..1b20fb65f2 100644
--- a/frontend/src/config/integrations/discord/config.ts
+++ b/frontend/src/config/integrations/discord/config.ts
@@ -8,7 +8,7 @@ const discord: IntegrationConfig = {
   key: 'discord',
   name: 'Discord',
   image,
-  description: 'Connect Discord to sync messages, threads, forum channels, and new joiners.',
+  description: 'Sync messages, threads, forum channels, and new joiners.',
   connectComponent: DiscordConnect,
   connectedParamsComponent: DiscordParams,
   showProgress: false,
diff --git a/frontend/src/config/integrations/discourse/config.ts b/frontend/src/config/integrations/discourse/config.ts
index 7f9f32e520..4038923220 100644
--- a/frontend/src/config/integrations/discourse/config.ts
+++ b/frontend/src/config/integrations/discourse/config.ts
@@ -10,7 +10,7 @@ const discourse: IntegrationConfig = {
   key: 'discourse',
   name: 'Discourse',
   image,
-  description: 'Connect Discourse to sync topics, posts, and replies from your account forums.',
+  description: 'Sync topics, posts, and replies from your account forums.',
   connectComponent: DiscourseConnect,
   connectedParamsComponent: DiscourseParams,
   dropdownComponent: DiscourseDropdown,
diff --git a/frontend/src/config/integrations/gerrit/config.ts b/frontend/src/config/integrations/gerrit/config.ts
index 3783f1727b..59a79c2fea 100644
--- a/frontend/src/config/integrations/gerrit/config.ts
+++ b/frontend/src/config/integrations/gerrit/config.ts
@@ -10,7 +10,7 @@ const gerrit: IntegrationConfig = {
   key: 'gerrit',
   name: 'Gerrit',
   image,
-  description: 'Connect Gerrit to sync documentation activities from your repos.',
+  description: 'Sync documentation activities from Gerrit repositories.',
   connectComponent: GerritConnect,
   connectedParamsComponent: GerritParams,
   dropdownComponent: GerritDropdown,
diff --git a/frontend/src/config/integrations/git/components/git-params.vue b/frontend/src/config/integrations/git/components/git-params.vue
index 30e0102990..b96120f6f6 100644
--- a/frontend/src/config/integrations/git/components/git-params.vue
+++ b/frontend/src/config/integrations/git/components/git-params.vue
@@ -2,7 +2,7 @@
   <div class="flex items-center gap-1">
     <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
 
-    <el-popover trigger="hover" placement="top" popper-class="!w-72" v-if="reposNoMirrored.length > 0">
+    <el-popover v-if="reposNoMirrored.length > 0" trigger="hover" placement="top" popper-class="!w-72">
       <template #reference>
         <div
           class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
@@ -34,10 +34,10 @@
         </article>
       </div>
     </el-popover>
-    
+
     <span v-if="mirroredRepoUrls.length > 0 && reposNoMirrored.length > 0">/</span>
 
-    <el-popover trigger="hover" placement="top" popper-class="!w-72" v-if="mirroredRepoUrls.length > 0">
+    <el-popover v-if="mirroredRepoUrls.length > 0" trigger="hover" placement="top" popper-class="!w-72">
       <template #reference>
         <div
           class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
@@ -55,7 +55,7 @@
           :key="repository"
           class="flex items-center flex-nowrap mb-4 last:mb-0"
         >
-        <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
 
           <a
             :href="repository"
@@ -68,13 +68,13 @@
         </article>
       </div>
     </el-popover>
-
-    
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, computed } from 'vue';
+import {
+  ref, onMounted, watch, computed,
+} from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
 import pluralize from 'pluralize';
@@ -89,7 +89,7 @@ const props = defineProps({
 const repositories = ref<string[]>([]);
 
 // Track mirrored repos (sourceIntegrationId != gitIntegrationId)
-const mirroredRepoUrls =  ref<string[]>([]);
+const mirroredRepoUrls = ref<string[]>([]);
 const reposNoMirrored = computed(() => repositories.value.filter((r) => !mirroredRepoUrls.value.includes(r)));
 
 const fetchRepositories = () => {
diff --git a/frontend/src/config/integrations/git/config.ts b/frontend/src/config/integrations/git/config.ts
index 9e4de87ca4..8c1004b5fb 100644
--- a/frontend/src/config/integrations/git/config.ts
+++ b/frontend/src/config/integrations/git/config.ts
@@ -10,7 +10,7 @@ const git: IntegrationConfig = {
   key: 'git',
   name: 'Git',
   image,
-  description: 'Connect Git to sync commit activities from your repos.',
+  description: 'Sync commit activities from Git repositories.',
   connectComponent: GitConnect,
   dropdownComponent: GitDropdown,
   connectedParamsComponent: GitParams,
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index 2d6b43e132..6696bc7b70 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -10,7 +10,7 @@
             <div class="flex items-center gap-2">
               <img :src="githubImage" alt="GitHub" class="h-6 min-w-6" />
               <h5 class="text-black">
-                GitHub 
+                GitHub
               </h5>
               <lf-github-version-tag version="v2" tooltip-content="New integration" />
             </div>
diff --git a/frontend/src/config/integrations/github-nango/config.ts b/frontend/src/config/integrations/github-nango/config.ts
index b19bda0fbb..f06f648b47 100644
--- a/frontend/src/config/integrations/github-nango/config.ts
+++ b/frontend/src/config/integrations/github-nango/config.ts
@@ -1,20 +1,19 @@
-import { IntegrationConfig } from '@/config/integrations'
-import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue'
+import { IntegrationConfig } from '@/config/integrations';
+import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
 // For now we will be referencing the connect component from the github (old) integration
-import GithubConnect from '@/config/integrations/github/components/github-connect.vue'
-import GithubParams from '@/config/integrations/github/components/github-params.vue'
-import GithubStatus from '@/config/integrations/github/components/github-status.vue'
-import GithubDropdown from './components/github-dropdown.vue'
-import GithubMappedRepos from './components/github-mapped-repos.vue'
+import GithubConnect from '@/config/integrations/github/components/github-connect.vue';
+import GithubParams from '@/config/integrations/github/components/github-params.vue';
+import GithubStatus from '@/config/integrations/github/components/github-status.vue';
+import GithubDropdown from './components/github-dropdown.vue';
+import GithubMappedRepos from './components/github-mapped-repos.vue';
 
-const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
 
 const github: IntegrationConfig = {
   key: 'github',
   name: 'GitHub (v2)',
   image,
-  description:
-    'Connect GitHub to sync profile information, stars, forks, pull requests, issues, and discussions.',
+  description: 'Sync profile information, stars, forks, pull requests, issues, and discussions.',
   connectComponent: GithubConnect,
   dropdownComponent: GithubDropdown,
   statusComponent: GithubStatus,
@@ -32,6 +31,6 @@ const github: IntegrationConfig = {
       text: 'Select repositories to track and map them to projects.',
     },
   ],
-}
+};
 
-export default github
+export default github;
diff --git a/frontend/src/config/integrations/github/components/github-connect.vue b/frontend/src/config/integrations/github/components/github-connect.vue
index 5241c6ef80..bc37153b2b 100644
--- a/frontend/src/config/integrations/github/components/github-connect.vue
+++ b/frontend/src/config/integrations/github/components/github-connect.vue
@@ -19,7 +19,7 @@
               GitHub - New integration
             </div>
             <p class="text-xs text-gray-500">
-              Sync repositories from multiple GitHub organizations. Doesn’t require organization admin permissions.  
+              Sync repositories from multiple GitHub organizations. Doesn’t require organization admin permissions.
             </p>
           </div>
         </div>
diff --git a/frontend/src/config/integrations/github/components/github-mappings-display.vue b/frontend/src/config/integrations/github/components/github-mappings-display.vue
index 3cbd470054..1510144fb0 100644
--- a/frontend/src/config/integrations/github/components/github-mappings-display.vue
+++ b/frontend/src/config/integrations/github/components/github-mappings-display.vue
@@ -45,7 +45,7 @@ import pluralize from 'pluralize';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
 
-const props = defineProps<{
+defineProps<{
   mappings: IntegrationMapping[];
 }>();
 
diff --git a/frontend/src/config/integrations/github/components/github-status.vue b/frontend/src/config/integrations/github/components/github-status.vue
index a8e9fa7ee7..8cdd174a62 100644
--- a/frontend/src/config/integrations/github/components/github-status.vue
+++ b/frontend/src/config/integrations/github/components/github-status.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-3">
-    <div class="flex items-center" v-if="mappedRepositories.length > 0">
+    <div v-if="mappedRepositories.length > 0" class="flex items-center">
       <lf-github-mappings-display :mappings="mappedRepositories" />
       <span class="font-semibold">&nbsp;&nbsp;•&nbsp;&nbsp;</span>
       <!-- see integration-list-item.vue for last data check completed -->
@@ -9,14 +9,14 @@
       </span>
     </div>
 
-    <div class="flex items-center gap-1" v-for="org of orgs" :key="org.url">
+    <div v-for="org of orgs" :key="org.url" class="flex items-center gap-1">
       <lf-icon
         name="arrows-rotate"
         :size="16"
         class="text-gray-400 flex items-center"
       />
       <p class="text-gray-600 text-xs">
-        Syncing GitHub data from <span class="font-semibold">{{ org.name }}</span> for 
+        Syncing GitHub data from <span class="font-semibold">{{ org.name }}</span> for
         <el-popover trigger="hover" placement="top" popper-class="!w-auto">
           <template #reference>
             <span class="underline decoration-dashed cursor-default">
@@ -24,7 +24,7 @@
             </span>
           </template>
 
-          <div class="-my-1 px-1 max-h-44 overflow-auto" v-if="remainingRepositories(org.url).length > 0">
+          <div v-if="remainingRepositories(org.url).length > 0" class="-my-1 px-1 max-h-44 overflow-auto">
             <article
               v-for="repo of remainingRepositories(org.url)"
               :key="repo.name"
@@ -42,7 +42,6 @@
             </article>
           </div>
         </el-popover>
-        
       </p>
     </div>
   </div>
@@ -60,9 +59,9 @@ const props = defineProps<{
   integration: any;
 }>();
 
-const mockNango = {
-  test: {repoName: 'styled-components',}
-};
+// const mockNango = {
+//   test: {repoName: 'styled-components',}
+// };
 
 const mappings = ref<IntegrationMapping[]>([]);
 
@@ -76,7 +75,7 @@ const remainingRepositories = (orgUrl: string) => {
 };
 
 const mappedRepositories = computed(() => {
-  const reposObj = props.integration.settings.nangoMapping || mockNango;
+  const reposObj = props.integration.settings.nangoMapping;
 
   const mapped = reposObj
     ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
@@ -84,9 +83,6 @@ const mappedRepositories = computed(() => {
   return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
 });
 
-const allRepositoriesNames = computed(() => props.integration.settings.orgs
-  .map((org: any) => org.repos.map((repo: any) => repo))
-  .flat());
 const orgs = computed(() => props.integration.settings.orgs);
 
 onMounted(() => {
diff --git a/frontend/src/config/integrations/github/components/github-version-tag.vue b/frontend/src/config/integrations/github/components/github-version-tag.vue
index 5daa267d9e..164f2e09b8 100644
--- a/frontend/src/config/integrations/github/components/github-version-tag.vue
+++ b/frontend/src/config/integrations/github/components/github-version-tag.vue
@@ -1,9 +1,10 @@
 <template>
-  <lf-tooltip 
-    :content="props.tooltipContent" 
-    :disabled="!props.tooltipContent" 
+  <lf-tooltip
+    :content="props.tooltipContent"
+    :disabled="!props.tooltipContent"
     placement="top"
-    class="font-primary font-semibold">
+    class="font-primary font-semibold"
+  >
     <lfx-chip
       type="bordered"
       size="default"
@@ -24,4 +25,4 @@ const props = defineProps<{
   version: 'v1' | 'v2';
   tooltipContent?: string;
 }>();
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/config/integrations/github/config.ts b/frontend/src/config/integrations/github/config.ts
index 3fc9a6b3d8..58fb055d69 100644
--- a/frontend/src/config/integrations/github/config.ts
+++ b/frontend/src/config/integrations/github/config.ts
@@ -1,18 +1,17 @@
-import { IntegrationConfig } from '@/config/integrations'
-import GithubConnect from './components/github-connect.vue'
-import GithubStatus from './components/github-status.vue'
-import GithubAction from './components/github-action.vue'
-import GithubParams from './components/github-params.vue'
-import GithubMappedRepos from './components/github-mapped-repos.vue'
+import { IntegrationConfig } from '@/config/integrations';
+import GithubConnect from './components/github-connect.vue';
+import GithubStatus from './components/github-status.vue';
+import GithubAction from './components/github-action.vue';
+import GithubParams from './components/github-params.vue';
+import GithubMappedRepos from './components/github-mapped-repos.vue';
 
-const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
 
 const github: IntegrationConfig = {
   key: 'github',
   name: 'GitHub',
   image,
-  description:
-    'Connect GitHub to sync profile information, stars, forks, pull requests, issues, and discussions.',
+  description: 'Sync profile information, stars, forks, pull requests, issues, and discussions.',
   connectComponent: GithubConnect,
   statusComponent: GithubStatus,
   actionComponent: GithubAction,
@@ -33,6 +32,6 @@ const github: IntegrationConfig = {
       text: 'Waiting for organization admin to approve the installation.',
     },
   ],
-}
+};
 
-export default github
+export default github;
diff --git a/frontend/src/config/integrations/gitlab/config.ts b/frontend/src/config/integrations/gitlab/config.ts
index e970a9c01f..5bdb7aaba0 100644
--- a/frontend/src/config/integrations/gitlab/config.ts
+++ b/frontend/src/config/integrations/gitlab/config.ts
@@ -10,7 +10,7 @@ const gitlab: IntegrationConfig = {
   key: 'gitlab',
   name: 'GitLab',
   image,
-  description: 'Connect GitLab to sync profile information, merge requests, issues, and more.',
+  description: 'Sync profile information, merge requests, issues, and more.',
   connectComponent: GitlabConnect,
   connectedParamsComponent: GitlabParams,
   actionComponent: GitlabAction,
diff --git a/frontend/src/config/integrations/groupsio/config.ts b/frontend/src/config/integrations/groupsio/config.ts
index 14767bcea9..2db48741f3 100644
--- a/frontend/src/config/integrations/groupsio/config.ts
+++ b/frontend/src/config/integrations/groupsio/config.ts
@@ -10,7 +10,7 @@ const groupsio: IntegrationConfig = {
   key: 'groupsio',
   name: 'Groups.io',
   image,
-  description: 'Connect Groups.io to sync groups and topics activity.',
+  description: 'Sync groups and topics activity.',
   connectComponent: GroupsioConnect,
   connectedParamsComponent: GroupsioParams,
   dropdownComponent: GroupsioDropdown,
diff --git a/frontend/src/config/integrations/hackernews/config.ts b/frontend/src/config/integrations/hackernews/config.ts
index 94d8b8e7bf..bcf5680546 100644
--- a/frontend/src/config/integrations/hackernews/config.ts
+++ b/frontend/src/config/integrations/hackernews/config.ts
@@ -8,8 +8,7 @@ const hackernews: IntegrationConfig = {
   key: 'hackernews',
   name: 'Hacker News',
   image,
-  description:
-    'Connect Hacker News to get posts as well as their comments mentioning your community.',
+  description: 'Sync posts and comments mentioning your community.',
   connectComponent: HackernewsConnect,
   connectedParamsComponent: HackernewsParams,
   showProgress: false,
diff --git a/frontend/src/config/integrations/jira/config.ts b/frontend/src/config/integrations/jira/config.ts
index 00143935a3..0d1c452102 100644
--- a/frontend/src/config/integrations/jira/config.ts
+++ b/frontend/src/config/integrations/jira/config.ts
@@ -10,7 +10,7 @@ const jira: IntegrationConfig = {
   key: 'jira',
   name: 'Jira',
   image,
-  description: 'Connect Jira to sync issues activities from your projects.',
+  description: 'Sync issues activities from your projects.',
   connectComponent: JiraConnect,
   connectedParamsComponent: JiraParams,
   dropdownComponent: JiraDropdown,
diff --git a/frontend/src/config/integrations/linkedin/config.ts b/frontend/src/config/integrations/linkedin/config.ts
index 263dde5771..96b4c23315 100644
--- a/frontend/src/config/integrations/linkedin/config.ts
+++ b/frontend/src/config/integrations/linkedin/config.ts
@@ -11,7 +11,7 @@ const linkedin: IntegrationConfig = {
   key: 'linkedin',
   name: 'LinkedIn',
   image,
-  description: "Connect LinkedIn to sync comments and reactions from your organization's posts.",
+  description: "Sync comments and reactions from your organization's posts.",
   connectComponent: LinkedinConnect,
   connectedParamsComponent: LinkedinParams,
   actionComponent: LinkedinAction,
diff --git a/frontend/src/config/integrations/reddit/config.ts b/frontend/src/config/integrations/reddit/config.ts
index 81cf5b0e87..093ed94f85 100644
--- a/frontend/src/config/integrations/reddit/config.ts
+++ b/frontend/src/config/integrations/reddit/config.ts
@@ -10,7 +10,7 @@ const reddit: IntegrationConfig = {
   key: 'reddit',
   name: 'Reddit',
   image,
-  description: 'Connect Reddit to sync posts and comments from selected subreddits.',
+  description: 'Sync posts and comments from selected subreddits.',
   connectComponent: RedditConnect,
   connectedParamsComponent: RedditParams,
   dropdownComponent: RedditDropdown,
diff --git a/frontend/src/config/integrations/slack/config.ts b/frontend/src/config/integrations/slack/config.ts
index f17d48d3cc..c50b5c7b8e 100644
--- a/frontend/src/config/integrations/slack/config.ts
+++ b/frontend/src/config/integrations/slack/config.ts
@@ -8,7 +8,7 @@ const slack: IntegrationConfig = {
   key: 'slack',
   name: 'Slack',
   image,
-  description: 'Connect Slack to sync messages, threads, and new joiners.',
+  description: 'Sync messages, threads, and new joiners.',
   connectComponent: SlackConnect,
   connectedParamsComponent: SlackParams,
   showProgress: false,
diff --git a/frontend/src/config/integrations/stackoverflow/config.ts b/frontend/src/config/integrations/stackoverflow/config.ts
index 4c377088c5..0f51cf15e2 100644
--- a/frontend/src/config/integrations/stackoverflow/config.ts
+++ b/frontend/src/config/integrations/stackoverflow/config.ts
@@ -10,7 +10,7 @@ const stackoverflow: IntegrationConfig = {
   key: 'stackoverflow',
   name: 'Stack Overflow',
   image,
-  description: 'Connect Stack Overflow to sync questions and answers based on selected tags.',
+  description: 'Sync questions and answers based on selected tags.',
   connectComponent: StackoverflowConnect,
   dropdownComponent: StackoverflowDropdown,
   connectedParamsComponent: StackoverflowParams,
diff --git a/frontend/src/config/integrations/twitter/config.ts b/frontend/src/config/integrations/twitter/config.ts
index 3b81c7a2be..76332e3d10 100644
--- a/frontend/src/config/integrations/twitter/config.ts
+++ b/frontend/src/config/integrations/twitter/config.ts
@@ -10,7 +10,7 @@ const twitter: IntegrationConfig = {
   key: 'twitter',
   name: 'X/Twitter',
   image,
-  description: 'Connect X/Twitter to sync profile information, followers, and relevant tweets.',
+  description: 'Sync profile information, followers, and relevant tweets.',
   connectComponent: TwitterConnect,
   connectedParamsComponent: TwitterParams,
   dropdownComponent: TwitterDropdown,
diff --git a/frontend/src/config/links.ts b/frontend/src/config/links.ts
index 13e2f76af1..d4c64ca77f 100644
--- a/frontend/src/config/links.ts
+++ b/frontend/src/config/links.ts
@@ -2,6 +2,6 @@
 // SPDX-License-Identifier: MIT
 
 export const links = {
-  integrations: `https://docs.crowd.dev/docs/getting-started/integrations`,
-  githubIntegration: `https://docs.crowd.dev/docs/getting-started/integrations/github-integration`,
-}
+  integrations: 'https://docs.crowd.dev/docs/getting-started/integrations',
+  githubIntegration: 'https://docs.crowd.dev/docs/getting-started/integrations/github-integration',
+};
diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
index 53dc6dc465..21df30d416 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
@@ -24,7 +24,6 @@
 
       <!-- Header -->
       <div class="py-5">
-        
         <h4 class="pb-1">
           Integrations
         </h4>
@@ -163,10 +162,6 @@ const platformsByStatus = computed(() => {
   return all.filter((platform) => matching.includes(platform));
 });
 
-const isGithubConnected = computed(() => array.value.some(
-  (integration: any) => integration.platform === 'github',
-));
-
 const getIntegrationCountPerStatus = computed<Record<string, number>>(() => {
   const statusCount: any = {};
   Object.entries(lfIntegrationStatusesTabs).forEach(([key, statusConfig]) => {
diff --git a/frontend/src/ui-kit/button/types/ButtonType.ts b/frontend/src/ui-kit/button/types/ButtonType.ts
index 5863be91cf..b92b555c46 100644
--- a/frontend/src/ui-kit/button/types/ButtonType.ts
+++ b/frontend/src/ui-kit/button/types/ButtonType.ts
@@ -10,6 +10,6 @@ export const buttonTypes = [
   'primary-link',
   'secondary-link',
   'outline',
-] as const
+] as const;
 
 export type ButtonType = (typeof buttonTypes)[number]

From 83c305724d0b5737597010a38170ac62ca9e3cb5 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Wed, 21 Jan 2026 18:41:09 +0800
Subject: [PATCH 09/22] chore: revert to previous status display

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../github-nango/components/github-params.vue | 104 ++++++++++++++++++
 .../integrations/github-nango/config.ts       |  21 ++--
 .../github/components/github-status.vue       |  92 ++--------------
 .../components/integration-list-item.vue      |   9 +-
 4 files changed, 128 insertions(+), 98 deletions(-)
 create mode 100644 frontend/src/config/integrations/github-nango/components/github-params.vue

diff --git a/frontend/src/config/integrations/github-nango/components/github-params.vue b/frontend/src/config/integrations/github-nango/components/github-params.vue
new file mode 100644
index 0000000000..278198f817
--- /dev/null
+++ b/frontend/src/config/integrations/github-nango/components/github-params.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="flex items-center gap-1">
+    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
+      <template #reference>
+        <div v-if="!isInProgress" class="text-gray-600 text-2xs flex items-center leading-5">
+          <lf-svg
+            name="git-repository"
+            class="w-4 h-4 !text-gray-600 mr-1 flex items-center"
+          />
+          <span class="font-semibold">
+            {{ pluralize('repository', Object.keys(mappings).length, true) }}
+          </span>
+        </div>
+        <span v-else class="text-gray-600 text-2xs flex items-center leading-5 font-semibold">
+          {{ mappedRepositories.length }} out of
+          {{ allRepositoriesNames.length }} repositories connected
+        </span>
+      </template>
+
+      <p class="text-gray-400 text-sm font-semibold mb-4">
+        {{ isInProgress ? 'Connected GitHub repositories' : 'GitHub repositories' }}
+      </p>
+      <div class="-my-1 px-1 max-h-44 overflow-auto">
+        <article
+          v-for="mapping of mappedRepositories"
+          :key="mapping.url"
+          class="py-2 flex items-center flex-nowrap"
+        >
+          <lf-svg
+            name="git-repository"
+            class="w-4 h-4 mr-2 flex items-center"
+          />
+          <a
+            :href="mapping.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+          >
+            /{{ repoNameFromUrl(mapping.url) }}
+          </a>
+          <lf-icon
+            name="arrow-right"
+            :size="16"
+            class="text-gray-400 mx-2 flex items-center"
+          />
+          <div class="text-xs leading-5 max-w-3xs truncate">
+            {{ mapping.segment.name }}
+          </div>
+        </article>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { IntegrationService } from '@/modules/integration/integration-service';
+import pluralize from 'pluralize';
+import LfSvg from '@/shared/svg/svg.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = defineProps<{
+  integration: any;
+}>();
+
+const mappings = ref<
+  {
+    url: string;
+    segment: {
+      id: string;
+      name: string;
+    };
+  }[]
+>([]);
+
+const repoNameFromUrl = (url: string) => url.split('/').at(-1);
+
+const mappedRepositories = computed(() => {
+  const reposObj = props.integration.settings.nangoMapping;
+  const mapped = reposObj
+    ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
+    : [];
+  return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
+});
+
+const allRepositoriesNames = computed(() => props.integration.settings.orgs
+  .map((org: any) => org.repos.map((repo: any) => repo.name))
+  .flat());
+
+const isInProgress = computed(() => mappedRepositories.value.length < allRepositoriesNames.value.length);
+onMounted(() => {
+  if (props.integration.status !== 'mapping') {
+    IntegrationService.fetchGitHubMappings(props.integration).then((res) => {
+      mappings.value = res;
+    });
+  }
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfGithubParams',
+};
+</script>
diff --git a/frontend/src/config/integrations/github-nango/config.ts b/frontend/src/config/integrations/github-nango/config.ts
index f06f648b47..85b51d38d3 100644
--- a/frontend/src/config/integrations/github-nango/config.ts
+++ b/frontend/src/config/integrations/github-nango/config.ts
@@ -1,13 +1,12 @@
-import { IntegrationConfig } from '@/config/integrations';
-import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
+import { IntegrationConfig } from '@/config/integrations'
+import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue'
 // For now we will be referencing the connect component from the github (old) integration
-import GithubConnect from '@/config/integrations/github/components/github-connect.vue';
-import GithubParams from '@/config/integrations/github/components/github-params.vue';
-import GithubStatus from '@/config/integrations/github/components/github-status.vue';
-import GithubDropdown from './components/github-dropdown.vue';
-import GithubMappedRepos from './components/github-mapped-repos.vue';
+import GithubConnect from '@/config/integrations/github/components/github-connect.vue'
+import GithubParams from './components/github-params.vue'
+import GithubDropdown from './components/github-dropdown.vue'
+import GithubMappedRepos from './components/github-mapped-repos.vue'
 
-const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href
 
 const github: IntegrationConfig = {
   key: 'github',
@@ -16,7 +15,7 @@ const github: IntegrationConfig = {
   description: 'Sync profile information, stars, forks, pull requests, issues, and discussions.',
   connectComponent: GithubConnect,
   dropdownComponent: GithubDropdown,
-  statusComponent: GithubStatus,
+  statusComponent: GithubParams,
   connectedParamsComponent: GithubParams,
   mappedReposComponent: GithubMappedRepos,
   settingComponent: LfGithubSettingsDrawer,
@@ -31,6 +30,6 @@ const github: IntegrationConfig = {
       text: 'Select repositories to track and map them to projects.',
     },
   ],
-};
+}
 
-export default github;
+export default github
diff --git a/frontend/src/config/integrations/github/components/github-status.vue b/frontend/src/config/integrations/github/components/github-status.vue
index 8cdd174a62..9559fe4f32 100644
--- a/frontend/src/config/integrations/github/components/github-status.vue
+++ b/frontend/src/config/integrations/github/components/github-status.vue
@@ -1,97 +1,19 @@
 <template>
-  <div class="flex flex-col gap-3">
-    <div v-if="mappedRepositories.length > 0" class="flex items-center">
-      <lf-github-mappings-display :mappings="mappedRepositories" />
-      <span class="font-semibold">&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-      <!-- see integration-list-item.vue for last data check completed -->
-      <span class="text-small text-gray-500">
-        Last data check completed 1 hour ago
-      </span>
-    </div>
-
-    <div v-for="org of orgs" :key="org.url" class="flex items-center gap-1">
-      <lf-icon
-        name="arrows-rotate"
-        :size="16"
-        class="text-gray-400 flex items-center"
-      />
-      <p class="text-gray-600 text-xs">
-        Syncing GitHub data from <span class="font-semibold">{{ org.name }}</span> for
-        <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-          <template #reference>
-            <span class="underline decoration-dashed cursor-default">
-              {{ pluralize('repository', remainingRepositories(org.url).length, true) }}
-            </span>
-          </template>
-
-          <div v-if="remainingRepositories(org.url).length > 0" class="-my-1 px-1 max-h-44 overflow-auto">
-            <article
-              v-for="repo of remainingRepositories(org.url)"
-              :key="repo.name"
-              class="py-2 flex items-center flex-nowrap"
-            >
-              <lf-icon name="book" :size="16" class="text-gray-600 mr-2" />
-              <a
-                :href="repo.url"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
-              >
-                /{{ repo.name }}
-              </a>
-            </article>
-          </div>
-        </el-popover>
-      </p>
-    </div>
+  <div
+    v-if="props.integration?.status === 'mapping'"
+    class="flex items-center gap-1"
+  >
+    <lf-svg name="git-repository" class="w-4 h-4" />
+    Mapping repositories...
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import { IntegrationService } from '@/modules/integration/integration-service';
-import pluralize from 'pluralize';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
-import LfGithubMappingsDisplay from './github-mappings-display.vue';
+import LfSvg from '@/shared/svg/svg.vue';
 
 const props = defineProps<{
   integration: any;
 }>();
-
-// const mockNango = {
-//   test: {repoName: 'styled-components',}
-// };
-
-const mappings = ref<IntegrationMapping[]>([]);
-
-const repoNameFromUrl = (url: string) => url.split('/').at(-1);
-const remainingRepositories = (orgUrl: string) => {
-  const orgRepos = props.integration.settings.orgs.find((o: any) => o.url === orgUrl)?.repos;
-
-  if (!orgRepos) return [];
-
-  return orgRepos.filter((repo: any) => !mappedRepositories.value.includes(repo.url));
-};
-
-const mappedRepositories = computed(() => {
-  const reposObj = props.integration.settings.nangoMapping;
-
-  const mapped = reposObj
-    ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
-    : [];
-  return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
-});
-
-const orgs = computed(() => props.integration.settings.orgs);
-
-onMounted(() => {
-  if (props.integration.status !== 'mapping') {
-    IntegrationService.fetchGitHubMappings(props.integration).then((res) => {
-      mappings.value = res;
-    });
-  }
-});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
index e4a999e696..9cd3e560b9 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
@@ -42,11 +42,11 @@
       </div>
     </div>
 
-    <div v-if="integration && integration.status" :class="isGithubInProgress ? 'bg-gray-50' : status.actionBar.background">
+    <div v-if="integration && integration.status" :class="status.actionBar.background">
       <div class="items-center py-2.5 px-4 flex justify-between">
         <!-- Custom content -->
         <div class="text-small flex items-center" :class="status.actionBar.color">
-          <div v-if="isInProgress && integration.key !== 'github'">
+          <div v-if="isInProgress && !integration.isNango">
             <app-integration-progress-bar :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
           </div>
           <div v-else-if="hasError">
@@ -189,6 +189,11 @@ const disconnectConfirm = ref('');
 const { trackEvent } = useProductTracking();
 
 const integration = computed(() => findByPlatform.value(props.config.key));
+// const integration = computed(() => {
+//   const inte = {...findByPlatform.value(props.config.key)}
+//   inte.status = 'in-progress';
+//   return inte;
+// });
 const status = computed(() => getIntegrationStatus(integration.value));
 const isV2 = computed(() => integration.value?.isNango && integration.value?.status);
 

From 2125949b5c2bcf89ee26730b0465760c5309cb87 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 22 Jan 2026 15:18:50 +0800
Subject: [PATCH 10/22] fix: github footer display

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../git/components/git-params.vue             |  4 +-
 .../components/github-mapped-repos.vue        | 72 -----------------
 .../github-nango/components/github-params.vue | 79 ++++---------------
 .../integrations/github-nango/config.ts       | 18 ++---
 .../github/components/github-mapped-repos.vue | 12 ++-
 .../components/github-mappings-display.vue    | 22 +++---
 .../github/components/github-params.vue       |  1 +
 .../components/integration-list-item.vue      | 66 +++++++++-------
 8 files changed, 85 insertions(+), 189 deletions(-)
 delete mode 100644 frontend/src/config/integrations/github-nango/components/github-mapped-repos.vue

diff --git a/frontend/src/config/integrations/git/components/git-params.vue b/frontend/src/config/integrations/git/components/git-params.vue
index b96120f6f6..d701b75f69 100644
--- a/frontend/src/config/integrations/git/components/git-params.vue
+++ b/frontend/src/config/integrations/git/components/git-params.vue
@@ -5,7 +5,7 @@
     <el-popover v-if="reposNoMirrored.length > 0" trigger="hover" placement="top" popper-class="!w-72">
       <template #reference>
         <div
-          class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
+          class="text-gray-600 text-2xs flex items-center leading-5 font-medium underline decoration-dashed cursor-default"
         >
           {{ reposNoMirrored.length }}
           {{ reposNoMirrored.length !== 1 ? "remote URLs" : "remote URL" }}
@@ -40,7 +40,7 @@
     <el-popover v-if="mirroredRepoUrls.length > 0" trigger="hover" placement="top" popper-class="!w-72">
       <template #reference>
         <div
-          class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
+          class="text-gray-600 text-2xs flex items-center leading-5 font-medium underline decoration-dashed cursor-default"
         >
           {{ pluralize('repository', mirroredRepoUrls.length, true) }} (via GitHub)
         </div>
diff --git a/frontend/src/config/integrations/github-nango/components/github-mapped-repos.vue b/frontend/src/config/integrations/github-nango/components/github-mapped-repos.vue
deleted file mode 100644
index f8d1dbfe24..0000000000
--- a/frontend/src/config/integrations/github-nango/components/github-mapped-repos.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <!-- Mapped repos with other projects -->
-  <div
-    v-if="!!mappedReposWithOtherProject?.repositories?.length"
-    class="items-center py-2.5 px-4 flex justify-between bg-gray-50 border-t border-gray-200"
-  >
-    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-      <template #reference>
-        <span class="text-gray-600 text-2xs flex items-center leading-5 font-semibold">
-          Syncing GitHub data from <span class="font-bold px-1"> {{ mappedReposWithOtherProject.project }} project </span>
-          for {{ pluralize('repository', mappedReposWithOtherProject.repositories.length, true) }}.
-        </span>
-      </template>
-
-      <p class="text-gray-400 text-sm font-semibold mb-4">
-        Mapped GitHub repositories
-      </p>
-      <div class="-my-1 px-1 max-h-44 overflow-auto">
-        <article
-          v-for="repo of mappedReposWithOtherProject.repositories"
-          :key="repo.url"
-          class="py-2 flex items-center flex-nowrap"
-        >
-          <lf-svg
-            name="git-repository"
-            class="w-4 h-4 mr-2 flex items-center"
-          />
-          <a
-            :href="repo.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
-          >
-            /{{ repoNameFromUrl(repo.url) }}
-          </a>
-        </article>
-      </div>
-    </el-popover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { IntegrationService } from '@/modules/integration/integration-service';
-import LfSvg from '@/shared/svg/svg.vue';
-import pluralize from 'pluralize';
-
-const props = defineProps<{
-  segmentId: string;
-}>();
-
-const mappedReposWithOtherProject = ref<{
-  project: string;
-  repositories: {
-    url: string;
-  }[];
-}>();
-
-const repoNameFromUrl = (url: string) => url.split('/').at(-1);
-
-onMounted(() => {
-  IntegrationService.fetchGitHubMappedRepos(props.segmentId).then((res) => {
-    mappedReposWithOtherProject.value = res;
-  });
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfGithubParams',
-};
-</script>
diff --git a/frontend/src/config/integrations/github-nango/components/github-params.vue b/frontend/src/config/integrations/github-nango/components/github-params.vue
index 278198f817..ef5b540778 100644
--- a/frontend/src/config/integrations/github-nango/components/github-params.vue
+++ b/frontend/src/config/integrations/github-nango/components/github-params.vue
@@ -1,76 +1,31 @@
 <template>
-  <div class="flex items-center gap-1">
-    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-      <template #reference>
-        <div v-if="!isInProgress" class="text-gray-600 text-2xs flex items-center leading-5">
-          <lf-svg
-            name="git-repository"
-            class="w-4 h-4 !text-gray-600 mr-1 flex items-center"
-          />
-          <span class="font-semibold">
-            {{ pluralize('repository', Object.keys(mappings).length, true) }}
-          </span>
-        </div>
-        <span v-else class="text-gray-600 text-2xs flex items-center leading-5 font-semibold">
-          {{ mappedRepositories.length }} out of
-          {{ allRepositoriesNames.length }} repositories connected
-        </span>
-      </template>
-
-      <p class="text-gray-400 text-sm font-semibold mb-4">
-        {{ isInProgress ? 'Connected GitHub repositories' : 'GitHub repositories' }}
-      </p>
-      <div class="-my-1 px-1 max-h-44 overflow-auto">
-        <article
-          v-for="mapping of mappedRepositories"
-          :key="mapping.url"
-          class="py-2 flex items-center flex-nowrap"
-        >
-          <lf-svg
-            name="git-repository"
-            class="w-4 h-4 mr-2 flex items-center"
-          />
-          <a
-            :href="mapping.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
-          >
-            /{{ repoNameFromUrl(mapping.url) }}
-          </a>
-          <lf-icon
-            name="arrow-right"
-            :size="16"
-            class="text-gray-400 mx-2 flex items-center"
-          />
-          <div class="text-xs leading-5 max-w-3xs truncate">
-            {{ mapping.segment.name }}
-          </div>
-        </article>
-      </div>
-    </el-popover>
-  </div>
+  <lf-github-mappings-display v-if="!isInProgress" :mappings="mappings" />
+  <lf-github-mappings-display v-else :mappings="mappedRepositories">
+    <template #trigger>
+      <span
+        class="text-gray-600 text-xs flex items-center leading-5 font-semibold underline decoration-dashed cursor-default"
+      >
+        {{ mappedRepositories.length }} out of
+        {{ allRepositoriesNames.length }} repositories connected
+      </span>
+    </template>
+    <template #popupTitle>
+      Connected GitHub repositories
+    </template>
+  </lf-github-mappings-display>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
-import pluralize from 'pluralize';
-import LfSvg from '@/shared/svg/svg.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
+import LfGithubMappingsDisplay from '@/config/integrations/github/components/github-mappings-display.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
 
 const props = defineProps<{
   integration: any;
 }>();
 
-const mappings = ref<
-  {
-    url: string;
-    segment: {
-      id: string;
-      name: string;
-    };
-  }[]
+const mappings = ref<IntegrationMapping[]
 >([]);
 
 const repoNameFromUrl = (url: string) => url.split('/').at(-1);
diff --git a/frontend/src/config/integrations/github-nango/config.ts b/frontend/src/config/integrations/github-nango/config.ts
index 85b51d38d3..06012ae2a0 100644
--- a/frontend/src/config/integrations/github-nango/config.ts
+++ b/frontend/src/config/integrations/github-nango/config.ts
@@ -1,12 +1,12 @@
-import { IntegrationConfig } from '@/config/integrations'
-import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue'
+import { IntegrationConfig } from '@/config/integrations';
+import LfGithubSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
 // For now we will be referencing the connect component from the github (old) integration
-import GithubConnect from '@/config/integrations/github/components/github-connect.vue'
-import GithubParams from './components/github-params.vue'
-import GithubDropdown from './components/github-dropdown.vue'
-import GithubMappedRepos from './components/github-mapped-repos.vue'
+import GithubConnect from '@/config/integrations/github/components/github-connect.vue';
+import GithubMappedRepos from '@/config/integrations/github/components/github-mapped-repos.vue';
+import GithubParams from './components/github-params.vue';
+import GithubDropdown from './components/github-dropdown.vue';
 
-const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
 
 const github: IntegrationConfig = {
   key: 'github',
@@ -30,6 +30,6 @@ const github: IntegrationConfig = {
       text: 'Select repositories to track and map them to projects.',
     },
   ],
-}
+};
 
-export default github
+export default github;
diff --git a/frontend/src/config/integrations/github/components/github-mapped-repos.vue b/frontend/src/config/integrations/github/components/github-mapped-repos.vue
index f8d1dbfe24..63b262f8e7 100644
--- a/frontend/src/config/integrations/github/components/github-mapped-repos.vue
+++ b/frontend/src/config/integrations/github/components/github-mapped-repos.vue
@@ -2,7 +2,7 @@
   <!-- Mapped repos with other projects -->
   <div
     v-if="!!mappedReposWithOtherProject?.repositories?.length"
-    class="items-center py-2.5 px-4 flex justify-between bg-gray-50 border-t border-gray-200"
+    class="items-center py-2.5 px-4 flex justify-between bg-gray-50"
   >
     <el-popover trigger="hover" placement="top" popper-class="!w-auto">
       <template #reference>
@@ -21,10 +21,7 @@
           :key="repo.url"
           class="py-2 flex items-center flex-nowrap"
         >
-          <lf-svg
-            name="git-repository"
-            class="w-4 h-4 mr-2 flex items-center"
-          />
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-2" />
           <a
             :href="repo.url"
             target="_blank"
@@ -42,7 +39,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
-import LfSvg from '@/shared/svg/svg.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import pluralize from 'pluralize';
 
 const props = defineProps<{
@@ -59,6 +56,7 @@ const mappedReposWithOtherProject = ref<{
 const repoNameFromUrl = (url: string) => url.split('/').at(-1);
 
 onMounted(() => {
+  // mappedReposWithOtherProject.value = {"project":"Project Test","repositories":[{"url":"https://github.com/emlim23/array-flattener"}]};
   IntegrationService.fetchGitHubMappedRepos(props.segmentId).then((res) => {
     mappedReposWithOtherProject.value = res;
   });
@@ -67,6 +65,6 @@ onMounted(() => {
 
 <script lang="ts">
 export default {
-  name: 'LfGithubParams',
+  name: 'LfGithubMappedRepos',
 };
 </script>
diff --git a/frontend/src/config/integrations/github/components/github-mappings-display.vue b/frontend/src/config/integrations/github/components/github-mappings-display.vue
index 1510144fb0..e7def66a8a 100644
--- a/frontend/src/config/integrations/github/components/github-mappings-display.vue
+++ b/frontend/src/config/integrations/github/components/github-mappings-display.vue
@@ -2,18 +2,22 @@
   <div class="flex items-center gap-1">
     <el-popover trigger="hover" placement="top" popper-class="!w-auto">
       <template #reference>
-        <div
-          class="text-gray-600 text-2xs flex items-center leading-5"
-        >
-          <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
-          <span class="font-semibold underline decoration-dashed cursor-default">
-            {{ pluralize("repository", Object.keys(mappings).length, true) }}
-          </span>
-        </div>
+        <slot name="trigger">
+          <div
+            class="text-gray-600 text-2xs flex items-center leading-5"
+          >
+            <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+            <span class="font-semibold underline decoration-dashed cursor-default">
+              {{ pluralize("repository", Object.keys(mappings).length, true) }}
+            </span>
+          </div>
+        </slot>
       </template>
 
       <p class="text-gray-400 text-sm font-semibold mb-4">
-        GitHub repositories
+        <slot name="popupTitle">
+          GitHub repositories
+        </slot>
       </p>
       <div class="-my-1 px-1 max-h-44 overflow-auto">
         <article
diff --git a/frontend/src/config/integrations/github/components/github-params.vue b/frontend/src/config/integrations/github/components/github-params.vue
index 2ae29ff558..942c81718f 100644
--- a/frontend/src/config/integrations/github/components/github-params.vue
+++ b/frontend/src/config/integrations/github/components/github-params.vue
@@ -5,6 +5,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
+import LfGithubMappingsDisplay from '@/config/integrations/github/components/github-mappings-display.vue';
 import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
 
 const props = defineProps<{
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
index 9cd3e560b9..79ddbdd774 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
@@ -42,38 +42,49 @@
       </div>
     </div>
 
-    <div v-if="integration && integration.status" :class="status.actionBar.background">
+    <div
+      v-if="integration && integration.status"
+      :class="[status.actionBar.background, !isInProgress && !hasError ? 'border-t border-gray-100' : '']"
+    >
       <div class="items-center py-2.5 px-4 flex justify-between">
         <!-- Custom content -->
-        <div class="text-small flex items-center" :class="status.actionBar.color">
-          <div v-if="isInProgress && !integration.isNango">
-            <app-integration-progress-bar :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
-          </div>
-          <div v-else-if="hasError">
-            {{ props.config.name }} integration failed to connect due to an API error.
-          </div>
+        <div>
+          <div class="text-small flex items-center" :class="status.actionBar.color">
+            <div v-if="isInProgress && !integration.isNango">
+              <app-integration-progress-bar :progress="selectedProgress" :hide-bar="true" text-class="!text-secondary-500 text-small" />
+            </div>
+            <div v-else-if="hasError">
+              {{ props.config.name }} integration failed to connect due to an API error.
+            </div>
 
-          <component
-            :is="props.config.connectedParamsComponent"
-            v-else-if="isComplete && props.config.connectedParamsComponent"
-            :integration="integration"
-            :segment-id="route.params.id"
-            :grandparent-id="route.params.grandparentId"
-          />
+            <component
+              :is="props.config.connectedParamsComponent"
+              v-else-if="isComplete && props.config.connectedParamsComponent"
+              :integration="integration"
+              :segment-id="route.params.id"
+              :grandparent-id="route.params.grandparentId"
+            />
+
+            <component
+              :is="props.config.statusComponent"
+              v-else-if="!isComplete && props.config.statusComponent"
+              :integration="integration"
+              :segment-id="route.params.id"
+              :grandparent-id="route.params.grandparentId"
+            />
 
+            <p v-if="isComplete && integration.lastProcessedAt" class="text-small text-gray-500">
+              <span v-if="props.config.connectedParamsComponent" class="font-semibold">&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+              Last data check completed {{ lastDataCheckCompleted }}
+            </p>
+          </div>
           <component
-            :is="props.config.statusComponent"
-            v-else-if="!isComplete && props.config.statusComponent"
-            :integration="integration"
+            :is="props.config.mappedReposComponent"
+            v-if="props.config.mappedReposComponent"
             :segment-id="route.params.id"
-            :grandparent-id="route.params.grandparentId"
+            class="!px-0 !pt-3 !pb-0"
           />
-          <p v-if="isComplete && integration.lastProcessedAt" class="text-small text-gray-500">
-            <span v-if="props.config.connectedParamsComponent" class="font-semibold">&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-            Last data check completed {{ lastDataCheckCompleted }}
-          </p>
         </div>
-
         <div class="flex items-center gap-4">
           <component
             :is="props.config.actionComponent"
@@ -115,8 +126,9 @@
 
     <component
       :is="props.config.mappedReposComponent"
-      v-if="props.config.mappedReposComponent"
+      v-if="props.config.mappedReposComponent && !(integration && integration.status)"
       :segment-id="route.params.id"
+      class="border-t border-gray-100"
     />
 
     <lf-modal v-model="isModalOpen">
@@ -191,7 +203,7 @@ const { trackEvent } = useProductTracking();
 const integration = computed(() => findByPlatform.value(props.config.key));
 // const integration = computed(() => {
 //   const inte = {...findByPlatform.value(props.config.key)}
-//   inte.status = 'in-progress';
+//   inte.status = 'done';
 //   return inte;
 // });
 const status = computed(() => getIntegrationStatus(integration.value));
@@ -213,8 +225,6 @@ const isInProgress = computed(() => integration.value.status === 'in-progress');
 const hasError = computed(() => integration.value.status === 'error');
 const isComplete = computed(() => integration.value.status === 'done');
 
-const isGithubInProgress = computed(() => integration.value?.platform === 'github' && isInProgress.value);
-
 const selectedProgress = computed(() => (props.progress || []).find((p) => p.platform === props.config.key));
 
 const isComponentMounted = ref(false);

From 56f9f736b2dbd51e9b8bcd4134784418403d9df8 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 22 Jan 2026 16:43:51 +0800
Subject: [PATCH 11/22] feat: changed github mapping drawer to match new design

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/config/styles/components/button.scss | 21 +++++
 frontend/src/assets/scss/form/select.scss     | 12 +++
 .../settings/github-settings-drawer.vue       | 54 +++++++++++--
 .../settings/github-settings-mapping.vue      | 16 ++--
 .../settings/github-settings-org-item.vue     |  4 +-
 .../settings/github-settings-repo-item.vue    |  9 +--
 .../github/components/github-mapped-repos.vue | 58 +++++++-------
 .../integration-confirmation-modal.vue        | 79 +++++++++++++++++++
 .../components/integration-list-item.vue      | 60 +++-----------
 frontend/src/ui-kit/button/button.scss        | 29 +++++++
 .../src/ui-kit/button/types/ButtonType.ts     |  1 +
 11 files changed, 243 insertions(+), 100 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue

diff --git a/frontend/config/styles/components/button.scss b/frontend/config/styles/components/button.scss
index 458129bd5c..f915bcbcc1 100644
--- a/frontend/config/styles/components/button.scss
+++ b/frontend/config/styles/components/button.scss
@@ -180,6 +180,27 @@
   --lf-btn-secondary-ghost-loading-background: var(--lf-color-transparent);
   --lf-btn-secondary-ghost-loading-border: var(--lf-color-transparent);
 
+  /* Danger Ghost */
+  --lf-btn-danger-ghost-text: var(--lf-color-red-500);
+  --lf-btn-danger-ghost-background: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-border: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-shadow: var(--shadow-none);
+  // Hover
+  --lf-btn-danger-ghost-hover-text: var(--lf-color-red-500);
+  --lf-btn-danger-ghost-hover-background: var(--lf-color-red-100);
+  --lf-btn-danger-ghost-hover-border: var(--lf-color-red-100);
+  // Active
+  --lf-btn-danger-ghost-active-text: var(--lf-color-red-500);
+  --lf-btn-danger-ghost-active-background: var(--lf-color-red-100);
+  --lf-btn-danger-ghost-active-border: var(--lf-color-red-100);
+  // Disabled
+  --lf-btn-danger-ghost-disabled-text: var(--lf-color-red-200);
+  --lf-btn-danger-ghost-disabled-background: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-disabled-border: var(--lf-color-transparent);
+  // Loading
+  --lf-btn-danger-ghost-loading-text: var(--lf-color-red-200);
+  --lf-btn-danger-ghost-loading-background: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-loading-border: var(--lf-color-transparent);
 
   /* Secondary Gray */
   --lf-btn-secondary-gray-text: var(--lf-color-primary-500);
diff --git a/frontend/src/assets/scss/form/select.scss b/frontend/src/assets/scss/form/select.scss
index 4ecfa45905..65f5a86940 100644
--- a/frontend/src/assets/scss/form/select.scss
+++ b/frontend/src/assets/scss/form/select.scss
@@ -138,3 +138,15 @@
     }
   }
 }
+
+.el-select.el-select--pill {
+  .el-select__wrapper {
+    &.el-tooltip__trigger {
+      @apply rounded-full;
+    }
+
+    .el-select__suffix i{
+      @apply text-gray-900;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index 6696bc7b70..06e972448f 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -53,16 +53,34 @@
         </div>
       </div>
       <div
-        class="border-t border-gray-100 py-5 px-6 flex justify-end gap-4"
+        class="border-t border-gray-100 py-5 px-6 flex gap-4"
+        :class="{ 'justify-between': props.integration, 'justify-end': !props.integration }"
         style="box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.05)"
       >
         <lf-button
-          type="outline"
-          @click="isDrawerVisible = false"
+          v-if="props.integration"
+          type="danger-ghost"
+          @click="isDisconnectIntegrationModalOpen = true"
         >
-          Cancel
+          Disconnect
         </lf-button>
-        <span>
+        <span class="flex gap-3">
+          <lf-button
+            v-if="!props.integration"
+            type="outline"
+            @click="isDrawerVisible = false"
+          >
+            Cancel
+          </lf-button>
+          <lf-button
+            v-if="hasChanges && props.integration"
+            type="outline"
+            @click="revertChanges()"
+          >
+            <lf-icon name="arrow-rotate-left" :size="16" />
+            Revert changes
+          </lf-button>
+
           <lf-button
             type="primary"
             class="!rounded-full"
@@ -72,8 +90,8 @@
             "
             @click="connect()"
           >
-            <lf-icon name="link-simple" :size="16" />
-            {{ props.integration ? 'Update settings' : 'Connect' }}
+            <lf-icon v-if="!props.integration" name="link-simple" :size="16" />
+            {{ props.integration ? 'Update' : 'Connect' }}
           </lf-button>
         </span>
       </div>
@@ -86,6 +104,12 @@
     v-model:repositories="repositories"
     :integration="props.integration"
   />
+  <integration-confirmation-modal
+    v-if="props.integration"
+    v-model="isDisconnectIntegrationModalOpen"
+    :platform="Platform.GITHUB"
+    :integration-id="props.integration.id"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -121,6 +145,7 @@ import { dateHelper } from '@/shared/date-helper/date-helper';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 import { links } from '@/config/links';
 import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
+import IntegrationConfirmationModal from '@/modules/admin/modules/integration/components/integration-confirmation-modal.vue';
 
 const props = defineProps<{
   modelValue: boolean;
@@ -140,7 +165,13 @@ const subprojects = ref([]);
 const organizations = ref<GitHubOrganization[]>([]);
 const repositories = ref<GitHubSettingsRepository[]>([]);
 const repoMappings = ref<Record<string, string>>({});
+const initialRepositories = ref<GitHubSettingsRepository[]>([]);
+const initialOrganizations = ref<GitHubOrganization[]>([]);
 const initialRepoMappings = ref<Record<string, string>>({});
+const isDisconnectIntegrationModalOpen = ref(false);
+
+const hasChanges = computed(() => repositories.value.length !== initialRepositories.value.length
+    || JSON.stringify(repoMappings.value) !== JSON.stringify(initialRepoMappings.value));
 
 // Drawer visibility
 const isDrawerVisible = computed({
@@ -260,6 +291,12 @@ const errorHandler = (error: any) => {
   }
 };
 
+const revertChanges = () => {
+  repositories.value = [...initialRepositories.value];
+  organizations.value = [...initialOrganizations.value];
+  repoMappings.value = { ...initialRepoMappings.value };
+};
+
 const fetchGithubMappings = () => {
   if (!props.integration) return;
   IntegrationService.fetchGitHubMappings(props.integration).then(
@@ -307,6 +344,9 @@ watch(
         ],
         [],
       );
+
+      initialRepositories.value = [...repositories.value];
+      initialOrganizations.value = [...organizations.value];
     }
   },
   { immediate: true },
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-mapping.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-mapping.vue
index 1ec552083d..eca6bc86f6 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-mapping.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-mapping.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <div class="flex justify-between pb-6">
-      <lf-button type="primary-link" @click="emit('add')">
+      <lf-button type="primary-link" class="!font-medium" @click="emit('add')">
         <lf-icon name="plus" />
-        Add repositories
+        Sync repositories/organizations
       </lf-button>
-      <lf-button type="secondary-link" @click="isBulkSelectOpened = true">
-        <lf-icon name="list-check" />
+      <lf-button type="secondary-link" class="!font-medium" @click="isBulkSelectOpened = true">
+        <lf-icon name="list-check" type="light" class="!font-light" />
         Bulk mapping
       </lf-button>
     </div>
@@ -14,7 +14,7 @@
       <lf-search
         v-model="search"
         placeholder="Search repositories..."
-        class="!h-9"
+        class="!h-9 !rounded-full"
       />
     </div>
     <div v-if="filteredRepos.length === 0" class="flex justify-center">
@@ -38,12 +38,12 @@
         @remove-mapping="(urls) => urls.forEach((url) => removeMapping(url))"
       >
         <lf-table>
-          <thead>
+          <thead class="!border-b-gray-200">
             <tr>
-              <th class="w-5/12">
+              <th class="w-5/12 !h-10 !text-gray-500">
                 Repository
               </th>
-              <th class="w-7/12">
+              <th class="w-7/12 !h-10 !text-gray-500">
                 Mapped with
               </th>
             </tr>
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-org-item.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-org-item.vue
index 46b9c39df1..d118e1cb51 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-org-item.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-org-item.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-gray-50 px-2 py-1.5 border-t border-b border-gray-100 flex flex-col"
+      class="bg-gray-50 px-2 py-1.5 border-t border-b border-gray-200 flex flex-col"
     >
       <div class="flex w-full items-center justify-between gap-3">
         <!-- Org information -->
@@ -37,7 +37,7 @@
           <lf-dropdown placement="bottom-end" width="11.125rem">
             <template #trigger>
               <lf-button type="secondary-ghost" icon-only>
-                <lf-icon name="ellipsis" />
+                <lf-icon name="ellipsis" type="light" class="!font-light" />
               </lf-button>
             </template>
             <lf-dropdown-item v-if="!isSynced" @click="sync()">
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-repo-item.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-repo-item.vue
index 4cf2faaaef..9fa2aea6ae 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-repo-item.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-repo-item.vue
@@ -3,8 +3,8 @@
     <td class="!pb-2.5" :class="ri > 0 ? '!pt-2.5' : '!pt-5'">
       <div>
         <div class="flex items-center gap-1.5 mb-0.5">
-          <lf-svg name="git-repository" class="w-4 h-4 text-gray-900" />
-          <p class="text-small">
+          <lf-icon name="book" :size="16" class="text-gray-400" />
+          <p class="text-small font-medium">
             {{ props.repository.name }}
           </p>
         </div>
@@ -23,7 +23,7 @@
           <el-select
             v-model="model"
             placeholder="Select sub-project"
-            class="w-full"
+            class="w-full el-select--pill"
             placement="bottom-end"
             filterable
             @blur="$v.model.$touch"
@@ -44,7 +44,7 @@
           content="Remove repository"
         >
           <lf-button type="secondary-ghost" icon-only @click="removeRepo()">
-            <lf-icon name="circle-minus" type="regular" class="text-gray-500" />
+            <lf-icon name="circle-xmark" type="light" class="text-gray-900 !font-light" />
           </lf-button>
         </lf-tooltip>
       </div>
@@ -55,7 +55,6 @@
 <script lang="ts" setup>
 import { GitHubRepository } from '@/config/integrations/github-nango/types/GithubSettings';
 import { computed, watch } from 'vue';
-import LfSvg from '@/shared/svg/svg.vue';
 import AppFormItem from '@/shared/form/form-item.vue';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
diff --git a/frontend/src/config/integrations/github/components/github-mapped-repos.vue b/frontend/src/config/integrations/github/components/github-mapped-repos.vue
index 63b262f8e7..a4d058e2df 100644
--- a/frontend/src/config/integrations/github/components/github-mapped-repos.vue
+++ b/frontend/src/config/integrations/github/components/github-mapped-repos.vue
@@ -4,35 +4,39 @@
     v-if="!!mappedReposWithOtherProject?.repositories?.length"
     class="items-center py-2.5 px-4 flex justify-between bg-gray-50"
   >
-    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-      <template #reference>
-        <span class="text-gray-600 text-2xs flex items-center leading-5 font-semibold">
-          Syncing GitHub data from <span class="font-bold px-1"> {{ mappedReposWithOtherProject.project }} project </span>
-          for {{ pluralize('repository', mappedReposWithOtherProject.repositories.length, true) }}.
-        </span>
-      </template>
+    <span class="text-gray-600 text-2xs flex items-center leading-5 font-semibold">
+      Syncing GitHub data from <span class="font-bold px-1"> {{ mappedReposWithOtherProject.project }} project </span>
+      for&nbsp;
 
-      <p class="text-gray-400 text-sm font-semibold mb-4">
-        Mapped GitHub repositories
-      </p>
-      <div class="-my-1 px-1 max-h-44 overflow-auto">
-        <article
-          v-for="repo of mappedReposWithOtherProject.repositories"
-          :key="repo.url"
-          class="py-2 flex items-center flex-nowrap"
-        >
-          <lf-icon name="book" :size="16" class="text-gray-600 mr-2" />
-          <a
-            :href="repo.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+      <el-popover trigger="hover" placement="top" popper-class="!w-auto">
+        <template #reference>
+          <span class="underline decoration-dashed cursor-default">
+            {{ pluralize('repository', mappedReposWithOtherProject.repositories.length, true) }}
+          </span>.
+        </template>
+
+        <p class="text-gray-400 text-sm font-semibold mb-4">
+          Mapped GitHub repositories
+        </p>
+        <div class="-my-1 px-1 max-h-44 overflow-auto">
+          <article
+            v-for="repo of mappedReposWithOtherProject.repositories"
+            :key="repo.url"
+            class="py-2 flex items-center flex-nowrap"
           >
-            /{{ repoNameFromUrl(repo.url) }}
-          </a>
-        </article>
-      </div>
-    </el-popover>
+            <lf-icon name="book" :size="16" class="text-gray-600 mr-2" />
+            <a
+              :href="repo.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+            >
+              /{{ repoNameFromUrl(repo.url) }}
+            </a>
+          </article>
+        </div>
+      </el-popover>
+    </span>
   </div>
 </template>
 
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue b/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue
new file mode 100644
index 0000000000..7636f0f789
--- /dev/null
+++ b/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue
@@ -0,0 +1,79 @@
+<template>
+  <lf-modal v-model="isModalOpen">
+    <template #default>
+      <div class="px-6 pt-6 flex gap-4">
+        <div class="min-w-10 w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
+          <lf-icon name="link-simple-slash" class="text-red-500" :size="16" />
+        </div>
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <span class="font-semibold">Are you sure you want to disconnect this integration?</span>
+            <p class="text-gray-500 text-small">
+              Once disconnected, data will no longer sync from this source.
+              You can reconnect anytime to resume syncing, but this action can’t be undone.
+            </p>
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="font-semibold">Type DISCONNECT to confirm</span>
+            <lf-input v-model="disconnectConfirm" placeholder="DISCONNECT" class="w-full" />
+          </div>
+        </div>
+      </div>
+      <div class="px-6 py-4.5 bg-gray-50 mt-8 flex justify-end gap-4">
+        <lf-button type="secondary-ghost-light" @click="isModalOpen = false">
+          Cancel
+        </lf-button>
+        <lf-button type="danger" :disabled="disconnectConfirm !== 'DISCONNECT'" @click="disconnectIntegration()">
+          Disconnect integration
+        </lf-button>
+      </div>
+    </template>
+  </lf-modal>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import LfModal from '@/ui-kit/modal/Modal.vue';
+import LfButton from '@/ui-kit/button/Button.vue';
+import LfInput from '@/ui-kit/input/Input.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { mapActions } from '@/shared/vuex/vuex.helpers';
+import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
+import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
+
+const { doDestroy } = mapActions('integration');
+const { trackEvent } = useProductTracking();
+
+const props = defineProps<{
+  modelValue: boolean;
+  platform: string;
+  integrationId: string;
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: boolean): void}>();
+
+const disconnectConfirm = ref('');
+
+const isModalOpen = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+});
+
+const disconnectIntegration = () => {
+  isModalOpen.value = false;
+  trackEvent({
+    key: FeatureEventKey.DISCONNECT_INTEGRATION,
+    type: EventType.FEATURE,
+    properties: {
+      platform: props.platform,
+    },
+  });
+  doDestroy(props.integrationId);
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'IntegrationConfirmationModal',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
index 79ddbdd774..fc70db50c6 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
@@ -96,7 +96,7 @@
           <lf-dropdown placement="bottom-end" width="14.5rem">
             <template #trigger>
               <lf-button type="secondary-ghost" icon-only>
-                <lf-icon name="ellipsis" />
+                <lf-icon name="ellipsis" type="light" class="!font-light" />
               </lf-button>
             </template>
             <component
@@ -131,43 +131,19 @@
       class="border-t border-gray-100"
     />
 
-    <lf-modal v-model="isModalOpen">
-      <template #default>
-        <div class="px-6 pt-6 flex gap-4">
-          <div class="min-w-10 w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
-            <lf-icon name="link-simple-slash" class="text-red-500" :size="16" />
-          </div>
-          <div class="flex flex-col gap-6">
-            <div class="flex flex-col gap-2">
-              <span class="font-semibold">Are you sure you want to disconnect this integration?</span>
-              <p class="text-gray-500 text-small">
-                Once disconnected, data will no longer sync from this source.
-                You can reconnect anytime to resume syncing, but this action can’t be undone.
-              </p>
-            </div>
-            <div class="flex flex-col gap-1">
-              <span class="font-semibold">Type DISCONNECT to confirm</span>
-              <lf-input v-model="disconnectConfirm" placeholder="DISCONNECT" class="w-full" />
-            </div>
-          </div>
-        </div>
-        <div class="px-6 py-4.5 bg-gray-50 mt-8 flex justify-end gap-4">
-          <lf-button type="secondary-ghost-light" @click="isModalOpen = false">
-            Cancel
-          </lf-button>
-          <lf-button type="danger" :disabled="disconnectConfirm !== 'DISCONNECT'" @click="disconnectIntegration()">
-            Disconnect integration
-          </lf-button>
-        </div>
-      </template>
-    </lf-modal>
+    <integration-confirmation-modal
+      v-if="integration"
+      v-model="isModalOpen"
+      :platform="props.config.key"
+      :integration-id="integration.id"
+    />
   </article>
 </template>
 
 <script lang="ts" setup>
 import { IntegrationConfig } from '@/config/integrations';
 import { computed, onMounted, ref } from 'vue';
-import { mapActions, mapGetters } from '@/shared/vuex/vuex.helpers';
+import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import LfIntegrationStatus from '@/modules/admin/modules/integration/components/integration-status.vue';
 import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
@@ -176,13 +152,10 @@ import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import AppIntegrationProgressBar from '@/modules/integration/components/integration-progress-bar.vue';
 import { IntegrationProgress } from '@/modules/integration/types/IntegrationProgress';
-import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
-import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { useRoute } from 'vue-router';
 import { dateHelper } from '@/shared/date-helper/date-helper';
-import LfModal from '@/ui-kit/modal/Modal.vue';
-import LfInput from '@/ui-kit/input/Input.vue';
 import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
+import IntegrationConfirmationModal from '@/modules/admin/modules/integration/components/integration-confirmation-modal.vue';
 
 const props = defineProps<{
   config: IntegrationConfig,
@@ -192,13 +165,9 @@ const props = defineProps<{
 
 const route = useRoute();
 
-const { doDestroy } = mapActions('integration');
 const { findByPlatform } = mapGetters('integration');
 
 const isModalOpen = ref(false);
-const disconnectConfirm = ref('');
-
-const { trackEvent } = useProductTracking();
 
 const integration = computed(() => findByPlatform.value(props.config.key));
 // const integration = computed(() => {
@@ -233,17 +202,6 @@ const isSettingsOpen = ref(false);
 onMounted(() => {
   isComponentMounted.value = true;
 });
-
-const disconnectIntegration = () => {
-  trackEvent({
-    key: FeatureEventKey.DISCONNECT_INTEGRATION,
-    type: EventType.FEATURE,
-    properties: {
-      platform: props.config.key,
-    },
-  });
-  doDestroy(integration.value.id);
-};
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/ui-kit/button/button.scss b/frontend/src/ui-kit/button/button.scss
index 6921b5880c..a2f09b6ff9 100644
--- a/frontend/src/ui-kit/button/button.scss
+++ b/frontend/src/ui-kit/button/button.scss
@@ -262,6 +262,35 @@
     --lf-btn-loading-border: var(--lf-btn-secondary-ghost-loading-border);
   }
 
+  &--danger-ghost {
+    --lf-btn-text: var(--lf-btn-danger-ghost-text);
+    --lf-btn-background: var(--lf-btn-danger-ghost-background);
+    --lf-btn-border: var(--lf-btn-danger-ghost-border);
+    --lf-btn-shadow: var(--lf-btn-danger-ghost-shadow);
+
+    // Hover
+    --lf-btn-hover-text: var(--lf-btn-danger-ghost-hover-text);
+    --lf-btn-hover-background: var(--lf-btn-danger-ghost-hover-background);
+    --lf-btn-hover-border: var(--lf-btn-danger-ghost-hover-border);
+
+    // Active
+    --lf-btn-active-text: var(--lf-btn-danger-ghost-active-text);
+    --lf-btn-active-background: var(--lf-btn-danger-ghost-active-background);
+    --lf-btn-active-border: var(--lf-btn-danger-ghost-active-border);
+
+    // Disabled
+    --lf-btn-disabled-text: var(--lf-btn-danger-ghost-disabled-text);
+    --lf-btn-disabled-background: var(--lf-btn-danger-ghost-disabled-background);
+    --lf-btn-disabled-border: var(--lf-btn-danger-ghost-disabled-border);
+
+    // Loading
+    --lf-btn-loading-text: var(--lf-btn-danger-ghost-loading-text);
+    --lf-btn-loading-background: var(--lf-btn-danger-ghost-loading-background);
+    --lf-btn-loading-border: var(--lf-btn-danger-ghost-loading-border);
+
+    @apply rounded-full;
+  }
+
   &--secondary-gray {
     --lf-btn-text: var(--lf-btn-secondary-gray-text);
     --lf-btn-background: var(--lf-btn-secondary-gray-background);
diff --git a/frontend/src/ui-kit/button/types/ButtonType.ts b/frontend/src/ui-kit/button/types/ButtonType.ts
index b92b555c46..e10607fb46 100644
--- a/frontend/src/ui-kit/button/types/ButtonType.ts
+++ b/frontend/src/ui-kit/button/types/ButtonType.ts
@@ -6,6 +6,7 @@ export const buttonTypes = [
   'bordered',
   'primary-ghost',
   'secondary-ghost',
+  'danger-ghost',
   'secondary-ghost-light',
   'primary-link',
   'secondary-link',

From e2ab9b183347b401da1073e6937dfbf1bf420ee9 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 22 Jan 2026 17:06:31 +0800
Subject: [PATCH 12/22] fix: git footer display

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/assets/scss/form/input.scss              |  4 ++++
 .../config/integrations/git/components/git-params.vue |  3 ++-
 .../components/settings/github-settings-drawer.vue    | 11 +++++------
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/assets/scss/form/input.scss b/frontend/src/assets/scss/form/input.scss
index 7b332adcf5..fc786647cc 100644
--- a/frontend/src/assets/scss/form/input.scss
+++ b/frontend/src/assets/scss/form/input.scss
@@ -48,6 +48,10 @@
       border: 1px solid var(--el-input-focus-border-color);
     }
   }
+
+  &.is-rounded .el-input__wrapper{
+    @apply rounded-full;
+  }
 }
 
 // Inner input/textarea color
diff --git a/frontend/src/config/integrations/git/components/git-params.vue b/frontend/src/config/integrations/git/components/git-params.vue
index d701b75f69..35eebd718e 100644
--- a/frontend/src/config/integrations/git/components/git-params.vue
+++ b/frontend/src/config/integrations/git/components/git-params.vue
@@ -97,7 +97,8 @@ const fetchRepositories = () => {
 
   IntegrationService.fetchGitMappings(props.integration)
     .then((res: any[]) => {
-      repositories.value = res.map((r) => r.url);
+      const reposFromMappings = res.map((r) => r.url);
+      repositories.value = reposFromMappings.length > 0 ? reposFromMappings : [...(props.integration.settings?.remotes || [])];
 
       mirroredRepoUrls.value = res
         .filter((r) => r.sourceIntegrationId !== r.gitIntegrationId)
diff --git a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
index ab46827e4d..27dc3e223c 100644
--- a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
@@ -85,6 +85,7 @@
             v-model="search"
             clearable
             placeholder="Search repositories..."
+            class="is-rounded"
           >
             <template #prefix>
               <lf-icon name="magnifying-glass" class="text-gray-400" />
@@ -117,7 +118,7 @@
               class="py-1.5 flex items-center"
             >
               <div class="w-1/2 flex items-center pr-4">
-                <lf-svg name="git-repository" class="w-4 h-4 mr-2" />
+                <lf-icon name="book" :size="16" class="text-gray-400 mr-2" />
                 <p class="text-2xs leading-5 flex-grow truncate">
                   /{{ repo.name }}
                 </p>
@@ -134,7 +135,7 @@
                   <el-select
                     v-model="form[repo.url]"
                     placeholder="Select sub-project"
-                    class="w-full"
+                    class="w-full el-select--pill"
                     placement="bottom-end"
                     filterable
                     @blur="$v[repo.url].$touch"
@@ -171,8 +172,7 @@
     <template #footer>
       <div style="flex: auto">
         <lf-button
-          type="bordered"
-          size="medium"
+          type="outline"
           class="mr-3"
           @click="isDrawerVisible = false"
         >
@@ -180,7 +180,7 @@
         </lf-button>
         <lf-button
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="sending || $v.$invalid"
           :loading="sending"
           @click="connect()"
@@ -220,7 +220,6 @@ import {
 } from '@/shared/modules/monitoring/types/event';
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import AppGithubSettingsBulkSelect from '@/config/integrations/github/components/settings/github-settings-bulk-select.vue';
-import LfSvg from '@/shared/svg/svg.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import { ProjectGroup, SubProject } from '@/modules/lf/segments/types/Segments';

From bdfc0159691bc4a63d1c40a539f91fd4e644f11a Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 22 Jan 2026 17:12:39 +0800
Subject: [PATCH 13/22] chore: changed all button drawers to rounded

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../confluence/components/confluence-settings-drawer.vue  | 5 ++---
 .../devto/components/devto-connect-drawer.vue             | 5 ++---
 .../discourse/components/discourse-settings-drawer.vue    | 5 ++---
 .../gerrit/components/gerrit-settings-drawer.vue          | 3 ++-
 .../gitlab/components/gitlab-settings-drawer.vue          | 4 ++--
 .../groupsio/components/groupsio-settings-drawer.vue      | 5 ++---
 .../hackernews/components/hackernews-settings-drawer.vue  | 5 ++---
 .../integrations/jira/components/jira-settings-drawer.vue | 5 ++---
 .../linkedin/components/linkedin-settings-drawer.vue      | 5 ++---
 .../reddit/components/reddit-settings-drawer.vue          | 5 ++---
 .../components/stackoverflow-settings-drawer.vue          | 8 +++-----
 .../twitter/components/twitter-settings-drawer.vue        | 8 +++-----
 12 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue b/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
index f627d3c045..60270e7b95 100644
--- a/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
+++ b/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
@@ -112,8 +112,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -123,7 +122,7 @@
         <lf-button
           id="confluenceConnect"
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="$v.$invalid || loading"
           :loading="loading"
           @click="connect"
diff --git a/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
index 6d06bb1c9d..46a629c772 100644
--- a/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
+++ b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
@@ -167,8 +167,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -178,7 +177,7 @@
         <lf-button
           id="devConnect"
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="
             connectDisabled || loading || !isAPIConnectionValid || isValidating
           "
diff --git a/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue b/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
index c4497710b0..614b1d2720 100644
--- a/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
+++ b/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
@@ -191,8 +191,7 @@
     <template #footer>
       <div style="flex: auto">
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-3"
           :disabled="loading"
           @click="handleCancel"
@@ -201,7 +200,7 @@
         </lf-button>
         <lf-button
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="
             $v.$invalid
               || !hasFormChanged || loading"
diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
index d748336675..ef42fc063f 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
@@ -80,7 +80,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -90,6 +90,7 @@
         <lf-button
           id="gerritConnect"
           type="primary"
+          class="!rounded-full"
           :disabled="$v.$invalid || !hasFormChanged || loading"
           :loading="loading"
           @click="connect"
diff --git a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
index dc8a00357a..c22c0e589f 100644
--- a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
+++ b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
@@ -157,7 +157,7 @@
 
     <template #footer>
       <div style="flex: auto">
-        <lf-button type="bordered" size="medium" class="mr-3" @click="isDrawerVisible = false">
+        <lf-button type="outline" class="mr-3" @click="isDrawerVisible = false">
           Cancel
         </lf-button>
         <el-tooltip
@@ -168,7 +168,7 @@
           <span>
             <lf-button
               type="primary"
-              size="medium"
+              class="!rounded-full"
               :disabled="sending || $v.$invalid || !hasSelectedRepos"
               :loading="sending"
               @click="connect()"
diff --git a/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue b/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
index 8b33a2fc18..fad7954ddc 100644
--- a/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
+++ b/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
@@ -243,8 +243,7 @@
     <template #footer>
       <div style="flex: auto">
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-3"
           :disabled="loading"
           @click="handleCancel"
@@ -253,7 +252,7 @@
         </lf-button>
         <lf-button
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="cantConnect || !hasSelectedGroups"
           :loading="loading"
           @click="connect()"
diff --git a/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue b/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
index 56f0ae30fc..750a78114e 100644
--- a/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
+++ b/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
@@ -81,8 +81,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -92,7 +91,7 @@
         <lf-button
           id="devConnect"
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="connectDisabled || loading"
           :loading="loading"
           @click="save"
diff --git a/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue b/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
index c18a785f6c..28b4e3f45a 100644
--- a/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
+++ b/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
@@ -128,8 +128,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -139,7 +138,7 @@
         <lf-button
           id="jiraConnect"
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="$v.$invalid || !hasFormChanged || loading"
           :loading="loading"
           @click="connect"
diff --git a/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue b/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
index 5352d47035..8922b186be 100644
--- a/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
+++ b/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
@@ -80,15 +80,14 @@
         </lf-button>
         <div class="flex gap-4">
           <lf-button
-            type="secondary-gray"
-            size="medium"
+            type="outline"
             @click="isVisible = false"
           >
             Cancel
           </lf-button>
           <lf-button
             type="primary"
-            size="medium"
+            class="!rounded-full"
             :disabled="!hasFormChanged || loading"
             :loading="loading"
             @click="hasFormChanged ? connect() : undefined"
diff --git a/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue b/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
index 58ef62fb1a..fedc79cf44 100644
--- a/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
+++ b/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
@@ -90,15 +90,14 @@
         </lf-button>
         <div class="flex gap-4">
           <lf-button
-            type="secondary-gray"
-            size="medium"
+            type="outline"
             @click="isVisible = false"
           >
             Cancel
           </lf-button>
           <lf-button
             type="primary"
-            size="medium"
+            class="!rounded-full"
             :disabled="!hasFormChanged || connectDisabled"
             @click="hasFormChanged ? connect() : undefined"
           >
diff --git a/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
index a3eff6c8be..28e914a3fa 100644
--- a/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
+++ b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
@@ -133,8 +133,7 @@
       >
         <lf-button
           v-if="hasFormChanged"
-          type="primary-link"
-          size="medium"
+          type="outline"
           @click="doReset"
         >
           <lf-icon name="arrow-turn-left" :size="16" />
@@ -142,15 +141,14 @@
         </lf-button>
         <div class="flex gap-4">
           <lf-button
-            type="secondary-gray"
-            size="medium"
+            type="outline"
             @click="doCancel"
           >
             Cancel
           </lf-button>
           <lf-button
             type="primary"
-            size="medium"
+            class="!rounded-full"
             :disabled="!hasFormChanged || connectDisabled"
             :loading="isVolumeUpdating"
             @click="
diff --git a/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue b/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
index 2896866d45..2f6c04a611 100644
--- a/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
+++ b/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
@@ -34,8 +34,7 @@
       >
         <lf-button
           v-if="hasFormChanged"
-          type="primary-link"
-          size="medium"
+          type="outline"
           @click="doReset"
         >
           <lf-icon name="arrow-turn-left" :size="16" />
@@ -43,15 +42,14 @@
         </lf-button>
         <div class="flex gap-4">
           <lf-button
-            type="bordered"
-            size="medium"
+            type="outline"
             @click="isVisible = false"
           >
             Cancel
           </lf-button>
           <lf-button
             type="primary"
-            size="medium"
+            class="!rounded-full"
             :disabled="!hasFormChanged"
             :href="hasFormChanged
               ? computedConnectUrl

From 4f600c71664cb63a09c6e415b811c19caa21eeac Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 22 Jan 2026 18:31:08 +0800
Subject: [PATCH 14/22] chore: fix all integration drawwers

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/assets/scss/drawer.scss          |   3 +-
 .../components/confluence-settings-drawer.vue |   4 +
 .../devto/components/devto-connect-drawer.vue |   4 +
 .../components/discourse-settings-drawer.vue  |   4 +
 .../components/gerrit-settings-drawer.vue     |   4 +
 .../git/components/git-settings-drawer.vue    |   4 +
 .../settings/github-settings-drawer.vue       | 168 ++++++++----------
 .../settings/github-settings-drawer.vue       |   4 +
 .../components/gitlab-settings-drawer.vue     |   4 +
 .../components/groupsio-settings-drawer.vue   |   4 +
 .../components/hackernews-settings-drawer.vue |   8 +
 .../jira/components/jira-settings-drawer.vue  |   4 +
 .../components/linkedin-settings-drawer.vue   |   4 +
 .../components/reddit-settings-drawer.vue     |   4 +
 .../stackoverflow-settings-drawer.vue         |   6 +-
 .../components/twitter-settings-drawer.vue    |   4 +
 frontend/src/config/links.ts                  |  22 ++-
 .../components/drawer-description.vue         |  30 ++++
 frontend/src/shared/drawer/drawer.vue         |  67 +++----
 19 files changed, 225 insertions(+), 127 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/integration/components/drawer-description.vue

diff --git a/frontend/src/assets/scss/drawer.scss b/frontend/src/assets/scss/drawer.scss
index f667a657b8..c07e9d4ac9 100644
--- a/frontend/src/assets/scss/drawer.scss
+++ b/frontend/src/assets/scss/drawer.scss
@@ -12,7 +12,8 @@
   }
 
   &__footer {
-    @apply p-6 bg-gray-50 border-t border-gray-200;
+    @apply px-6 py-5 bg-gray-50 border-t border-gray-100 bg-white;
+    box-shadow: 0 -4px 20px 0 rgba(0, 0, 0, 0.05);
   }
 
   &__close-btn {
diff --git a/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue b/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
index 60270e7b95..458e274b8c 100644
--- a/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
+++ b/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
@@ -10,6 +10,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Confluence logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="confluence" />
+    </template>
     <template #content>
       <div class="text-gray-900 text-sm font-medium">
         Authentication
@@ -152,6 +155,7 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfButton from '@/ui-kit/button/Button.vue';
 import AppArrayInput from '@/shared/form/array-input.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
diff --git a/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
index 46a629c772..e650bf2ebb 100644
--- a/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
+++ b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
@@ -10,6 +10,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="DEV logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="devto" />
+    </template>
     <template #content>
       <el-form class="form integration-devto-form" @submit.prevent>
         <app-form-item
@@ -213,6 +216,7 @@ import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/ev
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const { doDevtoConnect } = mapActions('integration');
 
diff --git a/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue b/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
index 614b1d2720..ea94d97e5e 100644
--- a/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
+++ b/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
@@ -16,6 +16,9 @@
         alt="Discourse logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="discourse" />
+    </template>
     <template #content>
       <el-form
         label-position="top"
@@ -234,6 +237,7 @@ import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfCard from '@/ui-kit/card/Card.vue';
 import { ToastStore } from '@/shared/message/notification';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const { trackEvent } = useProductTracking();
 
diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
index ef42fc063f..f6301aa327 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
@@ -10,6 +10,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Gerrit logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="gerrit" />
+    </template>
     <template #content>
       <div class="text-gray-900 text-sm font-medium">
         Remote URL
@@ -123,6 +126,7 @@ import LfCheckbox from '@/ui-kit/checkbox/Checkbox.vue';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 import { IntegrationService } from '@/modules/integration/integration-service';
 import { ToastStore } from '@/shared/message/notification';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
diff --git a/frontend/src/config/integrations/git/components/git-settings-drawer.vue b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
index 4d29bb9c54..0167b0934c 100644
--- a/frontend/src/config/integrations/git/components/git-settings-drawer.vue
+++ b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
@@ -10,6 +10,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Git logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="git" />
+    </template>
     <template #content>
       <div class="text-gray-900 text-sm font-medium">
         Remote URL(s)
@@ -98,6 +101,7 @@ import LfButton from '@/ui-kit/button/Button.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
 import { ToastStore } from '@/shared/message/notification';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index 06e972448f..80e7fa7d8a 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -1,102 +1,88 @@
 <template>
-  <lf-drawer v-model="isDrawerVisible">
-    <div class="flex flex-col justify-between h-full">
-      <section class="px-6 py-5 border-b border-gray-100">
-        <div class="flex justify-between pb-3">
-          <div>
-            <p class="text-tiny text-gray-500 mb-1.5">
-              Integration
-            </p>
-            <div class="flex items-center gap-2">
-              <img :src="githubImage" alt="GitHub" class="h-6 min-w-6" />
-              <h5 class="text-black">
-                GitHub
-              </h5>
-              <lf-github-version-tag version="v2" tooltip-content="New integration" />
-            </div>
-          </div>
-          <lf-button
-            type="outline"
-            icon-only
-            @click="isDrawerVisible = false"
-          >
-            <lf-icon name="xmark" />
-          </lf-button>
-        </div>
-        <p class="text-xs text-gray-500">
-          Sync profile information, stars, forks, pull requests, issues, and discussions.
-          <a
-            aria-label="Question"
-            class="btn btn-link btn-link--primary hover:no-underline gap-1 "
-            :href="links.githubIntegration"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <lf-icon name="book-open" :size="16" />
-            Learn more
-          </a>
-        </p>
-      </section>
-      <div class="flex-grow overflow-auto">
-        <lf-github-settings-empty
-          v-if="repositories.length === 0"
-          @add="isAddRepositoryModalOpen = true"
+  <app-drawer 
+    v-model="isDrawerVisible"
+    title="GitHub"
+    size="600px"
+    pre-title="Integration"
+    :show-footer="true"
+    has-border>
+      <template #beforeTitle>
+        <img
+          :src="githubImage"
+          class="min-w-6 h-6 mr-2"
+          alt="GitHub logo"
         />
-        <div v-else class="px-6 pt-5">
-          <lf-github-settings-mapping
-            v-model:repositories="repositories"
-            v-model:organizations="organizations"
-            v-model:mappings="repoMappings"
-            :subprojects="subprojects"
+      </template>
+      <template #afterTitle>
+        <lf-github-version-tag version="v2" tooltip-content="New integration" class="ml-2" />
+      </template>
+      <template #belowTitle>
+        <drawer-description integration-key="github" />
+      </template>
+      <template #content>
+        <div class="flex-grow overflow-auto">
+          <lf-github-settings-empty
+            v-if="repositories.length === 0"
             @add="isAddRepositoryModalOpen = true"
           />
+          <div v-else>
+            <lf-github-settings-mapping
+              v-model:repositories="repositories"
+              v-model:organizations="organizations"
+              v-model:mappings="repoMappings"
+              :subprojects="subprojects"
+              @add="isAddRepositoryModalOpen = true"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        class="border-t border-gray-100 py-5 px-6 flex gap-4"
-        :class="{ 'justify-between': props.integration, 'justify-end': !props.integration }"
-        style="box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.05)"
-      >
-        <lf-button
-          v-if="props.integration"
-          type="danger-ghost"
-          @click="isDisconnectIntegrationModalOpen = true"
+      </template>
+
+      <template #footer>
+        <div
+          class="flex gap-4"
+          :class="{ 'justify-between': props.integration, 'justify-end': !props.integration }"
         >
-          Disconnect
-        </lf-button>
-        <span class="flex gap-3">
           <lf-button
-            v-if="!props.integration"
-            type="outline"
-            @click="isDrawerVisible = false"
+            v-if="props.integration"
+            type="danger-ghost"
+            @click="isDisconnectIntegrationModalOpen = true"
           >
-            Cancel
-          </lf-button>
-          <lf-button
-            v-if="hasChanges && props.integration"
-            type="outline"
-            @click="revertChanges()"
-          >
-            <lf-icon name="arrow-rotate-left" :size="16" />
-            Revert changes
+            Disconnect
           </lf-button>
+          <span class="flex gap-3">
+            <lf-button
+              v-if="!props.integration"
+              type="outline"
+              @click="isDrawerVisible = false"
+            >
+              Cancel
+            </lf-button>
+            <lf-button
+              v-if="hasChanges && props.integration"
+              type="outline"
+              @click="revertChanges()"
+            >
+              <lf-icon name="arrow-rotate-left" :size="16" />
+              Revert changes
+            </lf-button>
 
-          <lf-button
-            type="primary"
-            class="!rounded-full"
-            :disabled="
-              $v.$invalid
-                || !repositories.length
-            "
-            @click="connect()"
-          >
-            <lf-icon v-if="!props.integration" name="link-simple" :size="16" />
-            {{ props.integration ? 'Update' : 'Connect' }}
-          </lf-button>
-        </span>
-      </div>
-    </div>
-  </lf-drawer>
+            <lf-button
+              type="primary"
+              class="!rounded-full"
+              :disabled="
+                $v.$invalid
+                  || !repositories.length
+              "
+              @click="connect()"
+            >
+              <lf-icon v-if="!props.integration" name="link-simple" :size="16" />
+              {{ props.integration ? 'Update' : 'Connect' }}
+            </lf-button>
+          </span>
+        </div>
+      </template>
+    <!-- </div> -->
+  </app-drawer>
   <lf-github-settings-add-repository-modal
     v-if="isAddRepositoryModalOpen"
     v-model="isAddRepositoryModalOpen"
@@ -117,7 +103,6 @@ import {
   computed, onMounted, ref, watch,
 } from 'vue';
 import useVuelidate from '@vuelidate/core';
-import LfDrawer from '@/ui-kit/drawer/Drawer.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfGithubSettingsEmpty from '@/config/integrations/github-nango/components/settings/github-settings-empty.vue';
@@ -135,6 +120,7 @@ import { IntegrationService } from '@/modules/integration/integration-service';
 import { ToastStore } from '@/shared/message/notification';
 import { mapActions } from '@/shared/vuex/vuex.helpers';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
+import AppDrawer from '@/shared/drawer/drawer.vue';
 import {
   EventType,
   FeatureEventKey,
@@ -143,9 +129,9 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import { showIntegrationProgressNotification } from '@/modules/integration/helpers/integration-progress-notification';
 import { dateHelper } from '@/shared/date-helper/date-helper';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
-import { links } from '@/config/links';
 import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
 import IntegrationConfirmationModal from '@/modules/admin/modules/integration/components/integration-confirmation-modal.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const props = defineProps<{
   modelValue: boolean;
diff --git a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
index 27dc3e223c..d40c12c388 100644
--- a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
@@ -15,6 +15,9 @@
         alt="GitHub logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="github" />
+    </template>
     <template #content>
       <div>
         <!-- Connected organization info -->
@@ -224,6 +227,7 @@ import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import { ProjectGroup, SubProject } from '@/modules/lf/segments/types/Segments';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const props = defineProps<{
   modelValue: boolean;
diff --git a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
index c22c0e589f..5896fcc96d 100644
--- a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
+++ b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
@@ -11,6 +11,9 @@
     <template #beforeTitle>
       <img :src="gitlabDetails.image" class="min-w-6 h-6 mr-2" alt="GitLab logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="gitlab" />
+    </template>
     <template #content>
       <div>
         <!-- Connected user info -->
@@ -210,6 +213,7 @@ import LfButton from '@/ui-kit/button/Button.vue';
 import LfCheckbox from '@/ui-kit/checkbox/Checkbox.vue';
 import LfTag from '@/ui-kit/tag/Tag.vue';
 import AppGitlabSettingsBulkSelect from './gitlab-settings-bulk-select.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const props = defineProps<{
   modelValue: boolean;
diff --git a/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue b/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
index fad7954ddc..1fc1147b1e 100644
--- a/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
+++ b/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
@@ -12,6 +12,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Groups.io logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="groupsio" />
+    </template>
     <template #content>
       <div class="w-full flex flex-col mb-6">
         <p class="text-[16px] font-semibold">
@@ -286,6 +289,7 @@ import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfSwitch from '@/ui-kit/switch/Switch.vue';
 import LfCheckbox from '@/ui-kit/checkbox/Checkbox.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const { doGroupsioConnect } = mapActions('integration');
 
diff --git a/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue b/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
index 750a78114e..99c4e4094b 100644
--- a/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
+++ b/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
@@ -3,6 +3,7 @@
     v-model="isVisible"
     custom-class="integration-hackerNews-drawer"
     title="Hacker News"
+    size="600px"
     pre-title="Integration"
     has-border
     @close="cancel"
@@ -10,6 +11,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Hacker News logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="hackernews" />
+    </template>
     <template #content>
       <div class="flex flex-col gap-2 items-start mb-2">
         <span class="text-xs font-light mb-2 text-gray-900">
@@ -115,12 +119,16 @@ import {
 } from '@/shared/modules/monitoring/types/event';
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfButton from '@/ui-kit/button/Button.vue';
+import AppDrawer from '@/shared/drawer/drawer.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 export default {
   name: 'LfHackernewsSettingsDrawer',
   components: {
     LfIcon,
     LfButton,
+    AppDrawer,
+    DrawerDescription,
   },
   props: {
     integration: {
diff --git a/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue b/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
index 28b4e3f45a..5ca0e98f03 100644
--- a/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
+++ b/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
@@ -12,6 +12,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Jira logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="jira" />
+    </template>
     <template #content>
       <div class="w-full flex flex-col mb-6">
         <p class="text-[16px] font-semibold">
@@ -165,6 +168,7 @@ import AppDrawer from '@/shared/drawer/drawer.vue';
 import AppFormItem from '@/shared/form/form-item.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 // import elementChangeDetector from '@/shared/form/element-change';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
diff --git a/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue b/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
index 8922b186be..2defdfed67 100644
--- a/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
+++ b/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
@@ -15,6 +15,9 @@
         alt="LinkedIn logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="linkedin" />
+    </template>
     <template #content>
       <div
         class="flex flex-col gap-2 items-start mb-2"
@@ -119,6 +122,7 @@ import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/ev
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const store = useStore();
 
diff --git a/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue b/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
index fedc79cf44..e443d332e4 100644
--- a/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
+++ b/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
@@ -15,6 +15,9 @@
         alt="Git logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="reddit" />
+    </template>
     <template #content>
       <div
         class="flex flex-col gap-2 items-start mb-2"
@@ -133,6 +136,7 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import reddit from '@/config/integrations/reddit/config';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const store = useStore();
 
diff --git a/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
index 28e914a3fa..74284bb224 100644
--- a/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
+++ b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
@@ -15,6 +15,9 @@
         alt="Stack Overflow logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="stackoverflow" />
+    </template>
     <template #content>
       <el-form
         label-position="top"
@@ -171,7 +174,7 @@
 
 <script setup>
 import {
-  computed, defineEmits, defineProps, ref, watch,
+  computed, ref, watch,
 } from 'vue';
 import { useThrottleFn } from '@vueuse/core';
 import { useStore } from 'vuex';
@@ -185,6 +188,7 @@ import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/ev
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const MAX_STACK_OVERFLOW_QUESTIONS_PER_TAG = 350000;
 const MAX_STACK_OVERFLOW_QUESTIONS_FOR_KEYWORDS = 1100;
diff --git a/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue b/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
index 2f6c04a611..66896176cd 100644
--- a/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
+++ b/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
@@ -9,6 +9,9 @@
     pre-title-img-alt="X/Twitter logo"
     @close="isVisible = false"
   >
+    <template #belowTitle>
+      <drawer-description integration-key="twitter" />
+    </template>
     <template #content>
       <el-form label-position="top" class="form integration-twitter-form" @submit.prevent>
         <el-form-item :label="hashtagField.label">
@@ -77,6 +80,7 @@ import twitter from '@/config/integrations/twitter/config';
 import LfButton from '@/ui-kit/button/Button.vue';
 import config from '@/config';
 import { AuthService } from '@/modules/auth/services/auth.service';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const props = defineProps({
   modelValue: {
diff --git a/frontend/src/config/links.ts b/frontend/src/config/links.ts
index d4c64ca77f..b87c04a74b 100644
--- a/frontend/src/config/links.ts
+++ b/frontend/src/config/links.ts
@@ -3,5 +3,23 @@
 
 export const links = {
   integrations: 'https://docs.crowd.dev/docs/getting-started/integrations',
-  githubIntegration: 'https://docs.crowd.dev/docs/getting-started/integrations/github-integration',
-};
+  integrationLinks: {
+    github: 'https://docs.crowd.dev/docs/getting-started/integrations/github-integration',
+    git: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    groupsio: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    confluence: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    jira: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    slack: 'https://docs.crowd.dev/docs/getting-started/integrations/slack-integration',
+    discord: 'https://docs.crowd.dev/docs/getting-started/integrations/discord-integration',
+    linkedin: 'https://docs.crowd.dev/docs/getting-started/integrations/linkedin-integration',
+    twitter: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    reddit: 'https://docs.crowd.dev/docs/getting-started/integrations/reddit-integration',
+    hackernews: 'https://docs.crowd.dev/docs/getting-started/integrations/hacker-news-integration',
+    stackoverflow:
+      'https://docs.crowd.dev/docs/getting-started/integrations/stack-overflow-integration',
+    gitlab: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    gerrit: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    discourse: 'https://docs.crowd.dev/docs/getting-started/integrations/discourse-integration',
+    devto: 'https://docs.crowd.dev/docs/getting-started/integrations/dev-integration',
+  },
+}
diff --git a/frontend/src/modules/admin/modules/integration/components/drawer-description.vue b/frontend/src/modules/admin/modules/integration/components/drawer-description.vue
new file mode 100644
index 0000000000..4abd3b1133
--- /dev/null
+++ b/frontend/src/modules/admin/modules/integration/components/drawer-description.vue
@@ -0,0 +1,30 @@
+<template>
+  <p class="text-xs text-gray-500">
+    {{ integration.description }}
+    <a
+      aria-label="Question"
+      class="btn btn-link btn-link--primary hover:no-underline gap-1 "
+      :href="integrationLink"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <lf-icon name="book-open" :size="16" />
+      Learn more
+    </a>
+  </p>
+</template>
+
+<script setup lang="ts">
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { links } from '@/config/links';
+import { computed } from 'vue';
+import { lfIntegrations } from '@/config/integrations';
+
+const props = defineProps<{
+  integrationKey: string;
+}>();
+
+const integration = computed(() => lfIntegrations()[props.integrationKey]);
+const integrationLink = computed(() => links.integrationLinks[props.integrationKey as keyof typeof links.integrationLinks] || 
+links.integrations);
+</script>
\ No newline at end of file
diff --git a/frontend/src/shared/drawer/drawer.vue b/frontend/src/shared/drawer/drawer.vue
index ce65d74b29..1564a96c6d 100644
--- a/frontend/src/shared/drawer/drawer.vue
+++ b/frontend/src/shared/drawer/drawer.vue
@@ -15,42 +15,45 @@
       @close="onClose"
     >
       <template #header="{ close, titleId, titleClass }">
-        <div class="flex grow justify-between items-start">
-          <slot name="header">
-            <div class="h-fit">
-              <div
-                v-if="preTitle"
-                class="text-gray-600 text-2xs"
-              >
-                {{ preTitle }}
-              </div>
-              <div class="flex items-center">
-                <slot name="beforeTitle" />
-                <h5
-                  :id="titleId"
-                  class="text-black"
-                  :class="titleClass"
+        <div class="flex flex-col gap-1">
+          <div class="flex grow justify-between items-start">
+            <slot name="header">
+              <div class="h-fit">
+                <div
+                  v-if="preTitle"
+                  class="text-gray-600 text-2xs"
                 >
-                  {{ title }}
-                </h5>
+                  {{ preTitle }}
+                </div>
+                <div class="flex items-center">
+                  <slot name="beforeTitle" />
+                  <h5
+                    :id="titleId"
+                    class="text-black grow-0"
+                    :style="{ textWrap: 'nowrap' }"
+                    :class="titleClass"
+                  >
+                    {{ title }}
+                  </h5>
+                  <slot name="afterTitle" />
+                </div>
               </div>
-              <slot name="belowTitle" />
-            </div>
-          </slot>
+            </slot>
 
-          <div class="flex gap-3 items-center">
-            <slot name="header-label" />
-            <div class="ml-3">
-              <lf-button
-                type="primary-link"
-                size="tiny"
-                class="w-8 !h-8 hover:!no-underline group"
-                @click="close"
-              >
-                <lf-icon name="xmark" :size="20" class="text-gray-400 group-hover:text-primary-500" />
-              </lf-button>
+            <div class="flex gap-3 items-center">
+              <slot name="header-label" />
+              <div class="ml-3">
+                <lf-button
+                  type="outline"
+                  icon-only
+                  @click="close"
+                >
+                  <lf-icon name="xmark" :size="20" class="text-gray-900 group-hover:text-primary-500" />
+                </lf-button>
+              </div>
             </div>
           </div>
+          <slot name="belowTitle" />
         </div>
       </template>
 
@@ -65,7 +68,7 @@
 </template>
 
 <script setup>
-import { defineProps, computed, defineEmits } from 'vue';
+import { computed } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import { number } from 'yup';

From 35cc25369edd59cecc49b1694a072054d8330f49 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 23 Jan 2026 09:50:40 +0800
Subject: [PATCH 15/22] feat: changed UI for git and gerrit drawers

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/assets/scss/drawer.scss          |   2 +-
 .../components/gerrit-settings-drawer.vue     | 138 +++++++++---------
 .../components/gerrit-settings-empty.vue      |  32 ++++
 .../git/components/git-settings-drawer.vue    | 105 +++++++------
 .../git/components/git-settings-empty.vue     |  32 ++++
 .../settings/github-settings-drawer.vue       | 135 ++++++++---------
 .../settings/github-settings-drawer.vue       |   1 +
 .../components/gitlab-settings-drawer.vue     |   2 +-
 frontend/src/config/links.ts                  |   2 +-
 .../components/drawer-description.vue         |   6 +-
 frontend/src/shared/form/array-input.vue      |   6 +-
 11 files changed, 279 insertions(+), 182 deletions(-)
 create mode 100644 frontend/src/config/integrations/gerrit/components/gerrit-settings-empty.vue
 create mode 100644 frontend/src/config/integrations/git/components/git-settings-empty.vue

diff --git a/frontend/src/assets/scss/drawer.scss b/frontend/src/assets/scss/drawer.scss
index c07e9d4ac9..5f318e4b52 100644
--- a/frontend/src/assets/scss/drawer.scss
+++ b/frontend/src/assets/scss/drawer.scss
@@ -1,6 +1,6 @@
 .el-drawer {
   @apply opacity-100;
-  --el-drawer-padding-primary: 24px;
+  --el-drawer-padding-primary: 20px 24px;
   box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.05);
 
   &__header {
diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
index f6301aa327..984d33189a 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
@@ -14,69 +14,67 @@
       <drawer-description integration-key="gerrit" />
     </template>
     <template #content>
-      <div class="text-gray-900 text-sm font-medium">
-        Remote URL
-      </div>
-      <div class="text-2xs text-gray-500">
-        Connect remote Gerrit repository.
-      </div>
-
-      <el-form class="mt-2" @submit.prevent>
-        <el-input
-          id="devUrl"
-          v-model="form.orgURL"
-          class="text-green-500"
-          spellcheck="false"
-          placeholder="Enter Organization URL"
-        />
-        <!-- <el-input
-          id="devUrl"
-          v-model="form.user"
-          class="text-green-500 mt-2"
-          spellcheck="false"
-          placeholder="Enter username"
-        />
-        <el-input
-          id="devUrl"
-          v-model="form.pass"
-          class="text-green-500 mt-2"
-          spellcheck="false"
-          placeholder="Enter user HTTP password"
-        /> -->
-        <app-array-input
-          v-for="(_, ii) of form.repoNames"
-          :key="ii"
-          v-model="form.repoNames[ii]"
-          class="text-green-500 mt-2"
-          placeholder="Enter Project Name"
-        >
-          <template #after>
-            <lf-button
-              type="primary-link"
-              size="medium"
-              class="w-10 h-10"
-              @click="removeRepoName(ii)"
-            >
-              <lf-icon name="trash-can" :size="20" />
-            </lf-button>
-          </template>
-        </app-array-input>
-      </el-form>
-      <lf-button
-        type="primary-link"
-        size="medium"
-        @click="addRepoName()"
-      >
-        + Add Repository Name
-      </lf-button>
-      <br />
-      <div class="flex mt-2">
-        <lf-checkbox id="enableAllRepos" v-model="form.enableAllRepos" size="large">
-          Enable All Projects
-        </lf-checkbox>
-        <!-- <lf-checkbox id="enableGit" v-model="form.enableGit" size="large">
-          Enable Git Integration
-        </lf-checkbox> -->
+      <lf-gerrit-settings-empty v-if="showEmptyState" @add="showEmptyState = false" />
+      <div v-else class="flex flex-col gap-5 items-start">
+        <div class="flex justify-between w-full">
+          <lf-button
+            type="primary-link"
+            size="medium"
+            @click="addRepoName()"
+          >
+            + Add Repository Name
+          </lf-button>
+          <lf-switch
+            v-model="form.enableAllRepos"
+            :size="'small'"
+          >
+            <template #default>
+              <span class="text-gray-900 text-small mr-2 underline decoration-dotted decoration-gray-400">Enable All Projects</span>
+            </template>
+          </lf-switch>
+        </div>
+
+        <el-form class="mt-2 w-full" @submit.prevent>
+          <el-input
+            id="devUrl"
+            v-model="form.orgURL"
+            class="text-green-500"
+            spellcheck="false"
+            placeholder="Enter Organization URL"
+          />
+          <!-- <el-input
+            id="devUrl"
+            v-model="form.user"
+            class="text-green-500 mt-2"
+            spellcheck="false"
+            placeholder="Enter username"
+          />
+          <el-input
+            id="devUrl"
+            v-model="form.pass"
+            class="text-green-500 mt-2"
+            spellcheck="false"
+            placeholder="Enter user HTTP password"
+          /> -->
+          <app-array-input
+            v-for="(_, ii) of form.repoNames"
+            :key="ii"
+            v-model="form.repoNames[ii]"
+            class="text-green-500 mt-2"
+            placeholder="Enter Project Name"
+          >
+            <template #after>
+              <lf-button
+                type="secondary-link"
+                size="medium"
+                class="w-10 h-10"
+                @click="removeRepoName(ii)"
+              >
+                <lf-icon name="circle-xmark" :size="20" />
+              </lf-button>
+            </template>
+          </app-array-input>
+        </el-form>
       </div>
     </template>
 
@@ -107,8 +105,9 @@
 
 <script setup lang="ts">
 import useVuelidate from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import {
-  computed, defineProps, onMounted, reactive, ref,
+  computed, onMounted, reactive, ref,
 } from 'vue';
 import gerrit from '@/config/integrations/gerrit/config';
 import formChangeDetector from '@/shared/form/form-change';
@@ -122,11 +121,12 @@ import {
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfCheckbox from '@/ui-kit/checkbox/Checkbox.vue';
+import LfSwitch from '@/ui-kit/switch/Switch.vue';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 import { IntegrationService } from '@/modules/integration/integration-service';
 import { ToastStore } from '@/shared/message/notification';
 import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
+import LfGerritSettingsEmpty from '@/config/integrations/gerrit/components/gerrit-settings-empty.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
@@ -149,7 +149,12 @@ const form = reactive({
 });
 
 const { hasFormChanged, formSnapshot } = formChangeDetector(form);
-const $v = useVuelidate({}, form, { $stopPropagation: true });
+const $v = useVuelidate({
+  orgURL: { required },
+  repoNames: {
+    required: (value: string[]) => value.length > 0 && value.every((v) => v.trim() !== ''),
+  },
+}, form, { $stopPropagation: true });
 
 const { doGerritConnect } = mapActions('integration');
 const isVisible = computed({
@@ -161,6 +166,7 @@ const isVisible = computed({
   },
 });
 const logoUrl = gerrit.image;
+const showEmptyState = ref(!props.integration?.settings?.remote?.orgURL);
 
 onMounted(() => {
   if (props.integration?.settings?.remote) {
diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-settings-empty.vue b/frontend/src/config/integrations/gerrit/components/gerrit-settings-empty.vue
new file mode 100644
index 0000000000..379aa42e5f
--- /dev/null
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-empty.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="flex justify-center">
+    <div class="pt-10 flex flex-col items-center w-full max-w-100 gap-4">
+      <lf-icon name="book" type="regular" :size="50" class="text-gray-400" />
+      <h6 class="text-center">
+        Sync Gerrit repositories
+      </h6>
+      <div class="flex flex-col gap-4">
+        <div class="text-small text-gray-600 text-center">
+          Add a remote URL for each Gerrit repository you want to connect
+        </div>
+      </div>
+      <lf-button type="primary-ghost" @click="emit('add')">
+        <lf-icon name="plus" type="regular" />
+        Add remote URL
+      </lf-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LfButton from '@/ui-kit/button/Button.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const emit = defineEmits<{(e: 'add'): void }>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfGerritSettingsEmpty',
+};
+</script>
diff --git a/frontend/src/config/integrations/git/components/git-settings-drawer.vue b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
index 0167b0934c..e912192f1e 100644
--- a/frontend/src/config/integrations/git/components/git-settings-drawer.vue
+++ b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
@@ -14,54 +14,62 @@
       <drawer-description integration-key="git" />
     </template>
     <template #content>
-      <div class="text-gray-900 text-sm font-medium">
-        Remote URL(s)
-      </div>
-      <div class="text-2xs text-gray-500">
-        Connect remotes for each Git repository.
-      </div>
-
-      <el-form class="mt-2" @submit.prevent>
-        <el-tooltip
-          v-for="(remote, ii) of form.remotes"
-          :key="ii"
-          :disabled="!isMirroredRepo(remote)"
-          content="Repository is managed by another integration and mirrored to Git"
-          placement="top"
+      <lf-git-settings-empty v-if="showEmptyState" @add="showEmptyState = false" />
+      <div v-else class="flex flex-col gap-5 items-start">
+        <lf-button
+          type="primary-link"
+          size="medium"
+          @click="addRemote()"
         >
-          <app-array-input
-            v-model="form.remotes[ii]"
-            placeholder="https://github.com/CrowdDotDev/crowd.dev.git"
-            :disabled="isMirroredRepo(remote)"
-          >
-            <template #after>
-              <lf-button
-                type="primary-link"
-                size="medium"
-                class="w-10 h-10"
-                :disabled="isMirroredRepo(remote)"
-                :class="{ 'opacity-50 cursor-not-allowed': isMirroredRepo(remote) }"
-                @click="!isMirroredRepo(remote) && removeRemote(ii)"
-              >
-                <lf-icon name="trash-can" :size="20" />
-              </lf-button>
-            </template>
-          </app-array-input>
-        </el-tooltip>
-      </el-form>
+          + Add remote URL
+        </lf-button>
 
-      <lf-button
-        type="primary-link"
-        size="medium"
-        @click="addRemote()"
-      >
-        + Add remote URL
-      </lf-button>
+        <el-form class="mt-2 w-full" @submit.prevent>
+          <el-tooltip
+            v-for="(remote, ii) of form.remotes"
+            :key="ii"
+            :disabled="!isMirroredRepo(remote)"
+            content="Repository is managed by another integration and mirrored to Git"
+            placement="top"
+          >
+            <app-array-input
+              v-model="form.remotes[ii]"
+              placeholder="Enter remote URL"
+              input-class="is-rounded"
+              :disabled="isMirroredRepo(remote)"
+            >
+              <template #after>
+                <lf-button
+                  type="secondary-link"
+                  size="medium"
+                  class="w-10 h-10"
+                  :disabled="isMirroredRepo(remote)"
+                  :class="{ 'opacity-50 cursor-not-allowed': isMirroredRepo(remote) }"
+                  @click="!isMirroredRepo(remote) && removeRemote(ii)"
+                >
+                  <lf-icon name="circle-xmark" :size="20" />
+                </lf-button>
+              </template>
+            </app-array-input>
+          </el-tooltip>
+        </el-form>
+      </div>
     </template>
 
     <template #footer>
-      <div>
+      <div
+        class="flex gap-4"
+        :class="{ 'justify-between': integration?.settings?.remotes?.length, 'justify-end': !integration?.settings?.remotes?.length }"
+      >
+        <lf-button
+          v-if="integration?.settings?.remotes?.length"
+          type="danger-ghost"
+          @click="isDisconnectIntegrationModalOpen = true"
+        >
+          Disconnect
+        </lf-button>
         <lf-button
+          v-else
           type="secondary-gray"
           size="medium"
           class="mr-4"
@@ -78,11 +86,19 @@
           :loading="loading"
           @click="connect"
         >
+          <lf-icon v-if="!integration?.settings?.remotes?.length" name="link-simple" :size="16" />
           {{ integration?.settings?.remotes?.length ? 'Update' : 'Connect' }}
         </lf-button>
       </div>
     </template>
   </app-drawer>
+
+  <integration-confirmation-modal
+    v-if="props.integration"
+    v-model="isDisconnectIntegrationModalOpen"
+    :platform="Platform.GIT"
+    :integration-id="props.integration.id"
+  />
 </template>
 
 <script setup>
@@ -102,6 +118,8 @@ import { IntegrationService } from '@/modules/integration/integration-service';
 import { ToastStore } from '@/shared/message/notification';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
+import LfGitSettingsEmpty from '@/config/integrations/git/components/git-settings-empty.vue';
+import IntegrationConfirmationModal from '@/modules/admin/modules/integration/components/integration-confirmation-modal.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -130,6 +148,9 @@ const form = reactive({
   remotes: [''],
 });
 
+const showEmptyState = ref(!props.integration?.settings?.remotes?.length);
+const isDisconnectIntegrationModalOpen = ref(false);
+
 // Track mirrored repos (sourceIntegrationId != gitIntegrationId)
 const mirroredRepoUrls = ref(new Set());
 
diff --git a/frontend/src/config/integrations/git/components/git-settings-empty.vue b/frontend/src/config/integrations/git/components/git-settings-empty.vue
new file mode 100644
index 0000000000..9747f44ad6
--- /dev/null
+++ b/frontend/src/config/integrations/git/components/git-settings-empty.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="flex justify-center">
+    <div class="pt-10 flex flex-col items-center w-full max-w-100 gap-4">
+      <lf-icon name="book" type="regular" :size="50" class="text-gray-400" />
+      <h6 class="text-center">
+        Sync Git repositories
+      </h6>
+      <div class="flex flex-col gap-4">
+        <div class="text-small text-gray-600 text-center">
+          Add a remote URL for each Git repository you want to connect
+        </div>
+      </div>
+      <lf-button type="primary-ghost" @click="emit('add')">
+        <lf-icon name="plus" type="regular" />
+        Add remote URL
+      </lf-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LfButton from '@/ui-kit/button/Button.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const emit = defineEmits<{(e: 'add'): void }>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfGitSettingsEmpty',
+};
+</script>
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index 80e7fa7d8a..1725223944 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -1,86 +1,87 @@
 <template>
-  <app-drawer 
+  <app-drawer
     v-model="isDrawerVisible"
     title="GitHub"
     size="600px"
     pre-title="Integration"
     :show-footer="true"
-    has-border>
-      <template #beforeTitle>
-        <img
-          :src="githubImage"
-          class="min-w-6 h-6 mr-2"
-          alt="GitHub logo"
+    has-border
+  >
+    <template #beforeTitle>
+      <img
+        :src="githubImage"
+        class="min-w-6 h-6 mr-2"
+        alt="GitHub logo"
+      />
+    </template>
+    <template #afterTitle>
+      <lf-github-version-tag version="v2" tooltip-content="New integration" class="ml-2" />
+    </template>
+    <template #belowTitle>
+      <drawer-description integration-key="github" />
+    </template>
+    <template #content>
+      <div class="flex-grow overflow-auto">
+        <lf-github-settings-empty
+          v-if="repositories.length === 0"
+          @add="isAddRepositoryModalOpen = true"
         />
-      </template>
-      <template #afterTitle>
-        <lf-github-version-tag version="v2" tooltip-content="New integration" class="ml-2" />
-      </template>
-      <template #belowTitle>
-        <drawer-description integration-key="github" />
-      </template>
-      <template #content>
-        <div class="flex-grow overflow-auto">
-          <lf-github-settings-empty
-            v-if="repositories.length === 0"
+        <div v-else>
+          <lf-github-settings-mapping
+            v-model:repositories="repositories"
+            v-model:organizations="organizations"
+            v-model:mappings="repoMappings"
+            :subprojects="subprojects"
             @add="isAddRepositoryModalOpen = true"
           />
-          <div v-else>
-            <lf-github-settings-mapping
-              v-model:repositories="repositories"
-              v-model:organizations="organizations"
-              v-model:mappings="repoMappings"
-              :subprojects="subprojects"
-              @add="isAddRepositoryModalOpen = true"
-            />
-          </div>
         </div>
-      </template>
+      </div>
+    </template>
 
-      <template #footer>
-        <div
-          class="flex gap-4"
-          :class="{ 'justify-between': props.integration, 'justify-end': !props.integration }"
+    <template #footer>
+      <div
+        class="flex gap-4"
+        :class="{ 'justify-between': props.integration, 'justify-end': !props.integration }"
+      >
+        <lf-button
+          v-if="props.integration"
+          type="danger-ghost"
+          @click="isDisconnectIntegrationModalOpen = true"
         >
+          Disconnect
+        </lf-button>
+        <span class="flex gap-3">
           <lf-button
-            v-if="props.integration"
-            type="danger-ghost"
-            @click="isDisconnectIntegrationModalOpen = true"
+            v-if="!props.integration"
+            type="outline"
+            @click="isDrawerVisible = false"
           >
-            Disconnect
+            Cancel
+          </lf-button>
+          <lf-button
+            v-if="hasChanges && props.integration"
+            type="outline"
+            @click="revertChanges()"
+          >
+            <lf-icon name="arrow-rotate-left" :size="16" />
+            Revert changes
           </lf-button>
-          <span class="flex gap-3">
-            <lf-button
-              v-if="!props.integration"
-              type="outline"
-              @click="isDrawerVisible = false"
-            >
-              Cancel
-            </lf-button>
-            <lf-button
-              v-if="hasChanges && props.integration"
-              type="outline"
-              @click="revertChanges()"
-            >
-              <lf-icon name="arrow-rotate-left" :size="16" />
-              Revert changes
-            </lf-button>
 
-            <lf-button
-              type="primary"
-              class="!rounded-full"
-              :disabled="
-                $v.$invalid
-                  || !repositories.length
-              "
-              @click="connect()"
-            >
-              <lf-icon v-if="!props.integration" name="link-simple" :size="16" />
-              {{ props.integration ? 'Update' : 'Connect' }}
-            </lf-button>
-          </span>
-        </div>
-      </template>
+          <lf-button
+            type="primary"
+            class="!rounded-full"
+            :disabled="
+              $v.$invalid
+                || !repositories.length
+            "
+            @click="connect()"
+          >
+            <lf-icon v-if="!props.integration" name="link-simple" :size="16" />
+            {{ props.integration ? 'Update' : 'Connect' }}
+          </lf-button>
+        </span>
+      </div>
+    </template>
     <!-- </div> -->
   </app-drawer>
   <lf-github-settings-add-repository-modal
diff --git a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
index d40c12c388..a04fbdc1bb 100644
--- a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
@@ -188,6 +188,7 @@
           :loading="sending"
           @click="connect()"
         >
+          <lf-icon name="link-simple" :size="16" />
           Connect
         </lf-button>
       </div>
diff --git a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
index 5896fcc96d..7812897737 100644
--- a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
+++ b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
@@ -212,8 +212,8 @@ import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfCheckbox from '@/ui-kit/checkbox/Checkbox.vue';
 import LfTag from '@/ui-kit/tag/Tag.vue';
-import AppGitlabSettingsBulkSelect from './gitlab-settings-bulk-select.vue';
 import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
+import AppGitlabSettingsBulkSelect from './gitlab-settings-bulk-select.vue';
 
 const props = defineProps<{
   modelValue: boolean;
diff --git a/frontend/src/config/links.ts b/frontend/src/config/links.ts
index b87c04a74b..8e6b9045a7 100644
--- a/frontend/src/config/links.ts
+++ b/frontend/src/config/links.ts
@@ -22,4 +22,4 @@ export const links = {
     discourse: 'https://docs.crowd.dev/docs/getting-started/integrations/discourse-integration',
     devto: 'https://docs.crowd.dev/docs/getting-started/integrations/dev-integration',
   },
-}
+};
diff --git a/frontend/src/modules/admin/modules/integration/components/drawer-description.vue b/frontend/src/modules/admin/modules/integration/components/drawer-description.vue
index 4abd3b1133..581a9147b1 100644
--- a/frontend/src/modules/admin/modules/integration/components/drawer-description.vue
+++ b/frontend/src/modules/admin/modules/integration/components/drawer-description.vue
@@ -25,6 +25,6 @@ const props = defineProps<{
 }>();
 
 const integration = computed(() => lfIntegrations()[props.integrationKey]);
-const integrationLink = computed(() => links.integrationLinks[props.integrationKey as keyof typeof links.integrationLinks] || 
-links.integrations);
-</script>
\ No newline at end of file
+const integrationLink = computed(() => links.integrationLinks[props.integrationKey as keyof typeof links.integrationLinks]
+|| links.integrations);
+</script>
diff --git a/frontend/src/shared/form/array-input.vue b/frontend/src/shared/form/array-input.vue
index d21f8a093d..9d62572350 100644
--- a/frontend/src/shared/form/array-input.vue
+++ b/frontend/src/shared/form/array-input.vue
@@ -12,7 +12,7 @@
           v-model="model"
           :placeholder="placeholder"
           :disabled="disabled"
-          :class="{ 'opacity-50': disabled }"
+          :class="[{ 'opacity-50': disabled }, inputClass]"
           @blur="$v.$touch"
           @change="$v.$touch"
         />
@@ -43,6 +43,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  inputClass: {
+    type: String,
+    default: '',
+  },
 });
 
 const rules = {

From 9332d5778458cad13c26e7497310c0ccd1e9a3c7 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 23 Jan 2026 09:52:10 +0800
Subject: [PATCH 16/22] chore: reorder integrations list

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/config/integrations/index.ts | 50 +++++++++++------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/frontend/src/config/integrations/index.ts b/frontend/src/config/integrations/index.ts
index d7f2f0db7e..52ee377377 100644
--- a/frontend/src/config/integrations/index.ts
+++ b/frontend/src/config/integrations/index.ts
@@ -1,21 +1,21 @@
-import config from '@/config';
-import github from './github/config';
-import githubNango from './github-nango/config';
-import git from './git/config';
-import groupsio from './groupsio/config';
-import confluence from './confluence/config';
-import jira from './jira/config';
-import slack from './slack/config';
-import discord from './discord/config';
-import linkedin from './linkedin/config';
-import twitter from './twitter/config';
-import reddit from './reddit/config';
-import hackernews from './hackernews/config';
-import stackoverflow from './stackoverflow/config';
-import gitlab from './gitlab/config';
-import gerrit from './gerrit/config';
-import discourse from './discourse/config';
-import devto from './devto/config';
+import config from '@/config'
+import github from './github/config'
+import githubNango from './github-nango/config'
+import git from './git/config'
+import groupsio from './groupsio/config'
+import confluence from './confluence/config'
+import jira from './jira/config'
+import slack from './slack/config'
+import discord from './discord/config'
+import linkedin from './linkedin/config'
+import twitter from './twitter/config'
+import reddit from './reddit/config'
+import hackernews from './hackernews/config'
+import stackoverflow from './stackoverflow/config'
+import gitlab from './gitlab/config'
+import gerrit from './gerrit/config'
+import discourse from './discourse/config'
+import devto from './devto/config'
 
 export interface ActionRequiredMessage {
   key: string
@@ -39,19 +39,21 @@ export interface IntegrationConfig {
 
 export const getGithubIntegration = () => {
   if (config.env === 'staging') {
-    const useGitHubNango = localStorage.getItem('useGitHubNango') === 'true';
+    const useGitHubNango = localStorage.getItem('useGitHubNango') === 'true'
 
-    return useGitHubNango ? githubNango : github;
+    return useGitHubNango ? githubNango : github
   }
 
-  return github;
-};
+  return github
+}
 
 export const lfIntegrations: (useGitHubNango?: boolean) => Record<string, IntegrationConfig> = (
   useGitHubNango?: boolean,
 ) => ({
   github: useGitHubNango ? githubNango : getGithubIntegration(),
   git,
+  gitlab,
+  gerrit,
   groupsio,
   confluence,
   jira,
@@ -62,8 +64,6 @@ export const lfIntegrations: (useGitHubNango?: boolean) => Record<string, Integr
   reddit,
   hackernews,
   stackoverflow,
-  gitlab,
-  gerrit,
   discourse,
   devto,
-});
+})

From 57ba3168911793fae225543e8a4cc09b018e321f Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 23 Jan 2026 10:43:01 +0800
Subject: [PATCH 17/22] feat: changed git drawer ui design

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../git/components/git-settings-drawer.vue    | 138 ++++++++++--------
 1 file changed, 81 insertions(+), 57 deletions(-)

diff --git a/frontend/src/config/integrations/git/components/git-settings-drawer.vue b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
index e912192f1e..805b4a7275 100644
--- a/frontend/src/config/integrations/git/components/git-settings-drawer.vue
+++ b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
@@ -25,34 +25,44 @@
         </lf-button>
 
         <el-form class="mt-2 w-full" @submit.prevent>
-          <el-tooltip
+          <app-array-input
             v-for="(remote, ii) of form.remotes"
             :key="ii"
-            :disabled="!isMirroredRepo(remote)"
-            content="Repository is managed by another integration and mirrored to Git"
-            placement="top"
+            v-model="form.remotes[ii]"
+            placeholder="Enter remote URL"
+            input-class="is-rounded"
+            :disabled="isMirroredRepo(remote)"
           >
-            <app-array-input
-              v-model="form.remotes[ii]"
-              placeholder="Enter remote URL"
-              input-class="is-rounded"
-              :disabled="isMirroredRepo(remote)"
-            >
-              <template #after>
-                <lf-button
-                  type="secondary-link"
-                  size="medium"
-                  class="w-10 h-10"
-                  :disabled="isMirroredRepo(remote)"
-                  :class="{ 'opacity-50 cursor-not-allowed': isMirroredRepo(remote) }"
-                  @click="!isMirroredRepo(remote) && removeRemote(ii)"
-                >
-                  <lf-icon name="circle-xmark" :size="20" />
-                </lf-button>
-              </template>
-            </app-array-input>
-          </el-tooltip>
+            <template #after>
+              <lf-button
+                type="secondary-link"
+                size="medium"
+                class="w-10 h-10"
+                :disabled="isMirroredRepo(remote)"
+                :class="{ 'opacity-50 cursor-not-allowed': isMirroredRepo(remote) }"
+                @click="!isMirroredRepo(remote) && removeRemote(ii)"
+              >
+                <lf-icon name="circle-xmark" :size="20" />
+              </lf-button>
+            </template>
+          </app-array-input>
         </el-form>
+
+        <div v-if="mirroredRepos.length > 0" class="flex flex-col gap-3 border-t border-gray-200 pt-5">
+          <div class="text-xs flex flex-col gap-1 mb-2">
+            <div class="text-gray-900 font-semibold">
+              Repositories managed by a different integration
+            </div>
+            <div class="text-gray-600">
+              Repositories synced via GitHub, GitLab, or Gerrit, are automatically mirrored by Git integration.
+            </div>
+          </div>
+
+          <div v-for="mirroredRepo of mirroredRepos" :key="mirroredRepo.url" class="text-gray-900 text-small flex items-center gap-2">
+            <lf-icon name="book" :size="16" class="text-gray-400" />
+            {{ mirroredRepo.url }}
+          </div>
+        </div>
       </div>
     </template>
 
@@ -65,30 +75,41 @@
           v-if="integration?.settings?.remotes?.length"
           type="danger-ghost"
           @click="isDisconnectIntegrationModalOpen = true"
+          :disabled="mirroredRepos.length > 0"
         >
           Disconnect
         </lf-button>
-        <lf-button
-          v-else
-          type="secondary-gray"
-          size="medium"
-          class="mr-4"
-          :disabled="loading"
-          @click="cancel"
-        >
-          Cancel
-        </lf-button>
-        <lf-button
-          id="gitConnect"
-          type="primary"
-          size="medium"
-          :disabled="$v.$invalid || !hasFormChanged || loading"
-          :loading="loading"
-          @click="connect"
-        >
-          <lf-icon v-if="!integration?.settings?.remotes?.length" name="link-simple" :size="16" />
-          {{ integration?.settings?.remotes?.length ? 'Update' : 'Connect' }}
-        </lf-button>
+        <span class="flex gap-3">
+          <lf-button
+            v-if="!integration?.settings?.remotes?.length"
+            type="secondary-gray"
+            size="medium"
+            class="mr-4"
+            :disabled="loading"
+            @click="cancel"
+          >
+            Cancel
+          </lf-button>
+          <lf-button
+            v-if="hasFormChanged && props.integration"
+            type="outline"
+            @click="revertChanges()"
+          >
+            <lf-icon name="arrow-rotate-left" :size="16" />
+            Revert changes
+          </lf-button>
+          <lf-button
+            id="gitConnect"
+            type="primary"
+            size="medium"
+            :disabled="$v.$invalid || !hasFormChanged || loading"
+            :loading="loading"
+            @click="connect"
+          >
+            <lf-icon v-if="!integration?.settings?.remotes?.length" name="link-simple" :size="16" />
+            {{ integration?.settings?.remotes?.length ? 'Update' : 'Connect' }}
+          </lf-button>
+        </span>
       </div>
     </template>
   </app-drawer>
@@ -152,7 +173,8 @@ const showEmptyState = ref(!props.integration?.settings?.remotes?.length);
 const isDisconnectIntegrationModalOpen = ref(false);
 
 // Track mirrored repos (sourceIntegrationId != gitIntegrationId)
-const mirroredRepoUrls = ref(new Set());
+const mirroredRepos = ref([]);
+const mirroredRepoUrls = computed(() => new Set(mirroredRepos.value.map((r) => r.url)));
 
 // Track original form state for change detection
 const originalRemotes = ref([]);
@@ -189,23 +211,21 @@ const fetchRepoMappings = () => {
   IntegrationService.fetchGitMappings(props.integration)
     .then((repos) => {
       // Find repos where sourceIntegrationId != gitIntegrationId (mirrored from other platforms)
-      const mirrored = repos
-        .filter((r) => r.sourceIntegrationId !== r.gitIntegrationId)
-        .map((r) => r.url);
-      mirroredRepoUrls.value = new Set(mirrored);
-
-      // Populate form with all repos (both native and mirrored)
-      const allRepoUrls = repos.map((r) => r.url);
-      if (allRepoUrls.length > 0) {
-        form.remotes = allRepoUrls;
-      } else if (!props.integration?.settings?.remotes?.length) {
+      mirroredRepos.value = repos
+        .filter((r) => r.sourceIntegrationId !== r.gitIntegrationId);
+
+      // Populate native remotes
+      const nativeRepoUrls = repos.filter((r) => r.sourceIntegrationId === r.gitIntegrationId).map((r) => r.url);
+      if (nativeRepoUrls.length > 0) {
+        form.remotes = nativeRepoUrls;
+      } else {
         form.remotes = [''];
       }
       formSnapshot();
     })
     .catch(() => {
       // Fallback to settings.remotes if API fails
-      mirroredRepoUrls.value = new Set();
+      mirroredRepos.value = [];
       if (props.integration?.settings?.remotes?.length) {
         form.remotes = [...props.integration.settings.remotes];
       }
@@ -278,6 +298,10 @@ const errorHandler = (error) => {
       });
   }
 };
+
+const revertChanges = () => {
+  form.remotes = [...originalRemotes.value];
+};
 </script>
 
 <script>

From c103160a0c073d32c9d26d5df181cb605f9fe957 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 23 Jan 2026 15:00:07 +0800
Subject: [PATCH 18/22] feat: added disabled tooltip to git drawer disconnect

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/assets/scss/drawer.scss          |  1 +
 frontend/src/assets/scss/layout.scss          |  4 ++
 .../git/components/git-settings-drawer.vue    | 24 +++++++---
 frontend/src/config/integrations/index.ts     | 46 +++++++++----------
 .../components/integration-list-item.vue      | 32 +++++++++++--
 5 files changed, 73 insertions(+), 34 deletions(-)

diff --git a/frontend/src/assets/scss/drawer.scss b/frontend/src/assets/scss/drawer.scss
index 5f318e4b52..6808653249 100644
--- a/frontend/src/assets/scss/drawer.scss
+++ b/frontend/src/assets/scss/drawer.scss
@@ -2,6 +2,7 @@
   @apply opacity-100;
   --el-drawer-padding-primary: 20px 24px;
   box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.05);
+  overflow: unset;
 
   &__header {
     @apply mb-4;
diff --git a/frontend/src/assets/scss/layout.scss b/frontend/src/assets/scss/layout.scss
index be9dbc148f..3c01ee078a 100644
--- a/frontend/src/assets/scss/layout.scss
+++ b/frontend/src/assets/scss/layout.scss
@@ -102,3 +102,7 @@ input:-webkit-autofill:active {
   transition: background-color 5000s ease-in-out 0s;
   -webkit-text-fill-color: #000 !important;
 }
+
+.el-overlay .el-splitter-panel{
+  overflow: unset;
+}
\ No newline at end of file
diff --git a/frontend/src/config/integrations/git/components/git-settings-drawer.vue b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
index 805b4a7275..3b8ec77ea5 100644
--- a/frontend/src/config/integrations/git/components/git-settings-drawer.vue
+++ b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
@@ -71,14 +71,22 @@
         class="flex gap-4"
         :class="{ 'justify-between': integration?.settings?.remotes?.length, 'justify-end': !integration?.settings?.remotes?.length }"
       >
-        <lf-button
-          v-if="integration?.settings?.remotes?.length"
-          type="danger-ghost"
-          @click="isDisconnectIntegrationModalOpen = true"
-          :disabled="mirroredRepos.length > 0"
+        <lf-tooltip
+          content="Git can’t be disconnected while it’s mirroring repositories from GitHub, GitLab, or Gerrit integrations."
+          :disabled="mirroredRepos.length === 0"
+          placement="top"
+          class="font-primary font-semibold"
+          content-class="!w-100"
         >
-          Disconnect
-        </lf-button>
+          <lf-button
+            v-if="integration?.settings?.remotes?.length"
+            type="danger-ghost"
+            :disabled="mirroredRepos.length > 0"
+            @click="isDisconnectIntegrationModalOpen = true"
+          >
+            Disconnect
+          </lf-button>
+        </lf-tooltip>
         <span class="flex gap-3">
           <lf-button
             v-if="!integration?.settings?.remotes?.length"
@@ -141,6 +149,8 @@ import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helper
 import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 import LfGitSettingsEmpty from '@/config/integrations/git/components/git-settings-empty.vue';
 import IntegrationConfirmationModal from '@/modules/admin/modules/integration/components/integration-confirmation-modal.vue';
+import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
+import AppDrawer from '@/shared/drawer/drawer.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
diff --git a/frontend/src/config/integrations/index.ts b/frontend/src/config/integrations/index.ts
index 52ee377377..452aaad367 100644
--- a/frontend/src/config/integrations/index.ts
+++ b/frontend/src/config/integrations/index.ts
@@ -1,21 +1,21 @@
-import config from '@/config'
-import github from './github/config'
-import githubNango from './github-nango/config'
-import git from './git/config'
-import groupsio from './groupsio/config'
-import confluence from './confluence/config'
-import jira from './jira/config'
-import slack from './slack/config'
-import discord from './discord/config'
-import linkedin from './linkedin/config'
-import twitter from './twitter/config'
-import reddit from './reddit/config'
-import hackernews from './hackernews/config'
-import stackoverflow from './stackoverflow/config'
-import gitlab from './gitlab/config'
-import gerrit from './gerrit/config'
-import discourse from './discourse/config'
-import devto from './devto/config'
+import config from '@/config';
+import github from './github/config';
+import githubNango from './github-nango/config';
+import git from './git/config';
+import groupsio from './groupsio/config';
+import confluence from './confluence/config';
+import jira from './jira/config';
+import slack from './slack/config';
+import discord from './discord/config';
+import linkedin from './linkedin/config';
+import twitter from './twitter/config';
+import reddit from './reddit/config';
+import hackernews from './hackernews/config';
+import stackoverflow from './stackoverflow/config';
+import gitlab from './gitlab/config';
+import gerrit from './gerrit/config';
+import discourse from './discourse/config';
+import devto from './devto/config';
 
 export interface ActionRequiredMessage {
   key: string
@@ -39,13 +39,13 @@ export interface IntegrationConfig {
 
 export const getGithubIntegration = () => {
   if (config.env === 'staging') {
-    const useGitHubNango = localStorage.getItem('useGitHubNango') === 'true'
+    const useGitHubNango = localStorage.getItem('useGitHubNango') === 'true';
 
-    return useGitHubNango ? githubNango : github
+    return useGitHubNango ? githubNango : github;
   }
 
-  return github
-}
+  return github;
+};
 
 export const lfIntegrations: (useGitHubNango?: boolean) => Record<string, IntegrationConfig> = (
   useGitHubNango?: boolean,
@@ -66,4 +66,4 @@ export const lfIntegrations: (useGitHubNango?: boolean) => Record<string, Integr
   stackoverflow,
   discourse,
   devto,
-})
+});
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
index fc70db50c6..a169bf8ee3 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
@@ -107,10 +107,17 @@
               :grandparent-id="route.params.grandparentId"
               @open-setting="isSettingsOpen = true"
             />
-            <lf-dropdown-item type="danger" @click="isModalOpen = true">
-              <lf-icon name="link-simple-slash" type="regular" />
-              Disconnect integration
-            </lf-dropdown-item>
+            <lf-tooltip
+              content="Git can’t be disconnected while it’s mirroring repositories from GitHub, GitLab, or Gerrit integrations."
+              :disabled="!isDisconnectDisabled"
+              placement="top"
+              class="font-primary font-semibold"
+            >
+              <lf-dropdown-item type="danger" :disabled="isDisconnectDisabled" @click="isModalOpen = true">
+                <lf-icon name="link-simple-slash" type="regular" />
+                Disconnect integration
+              </lf-dropdown-item>
+            </lf-tooltip>
           </lf-dropdown>
           <component
             :is="props.config.settingComponent"
@@ -156,6 +163,8 @@ import { useRoute } from 'vue-router';
 import { dateHelper } from '@/shared/date-helper/date-helper';
 import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
 import IntegrationConfirmationModal from '@/modules/admin/modules/integration/components/integration-confirmation-modal.vue';
+import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
+import { IntegrationService } from '@/modules/integration/integration-service';
 
 const props = defineProps<{
   config: IntegrationConfig,
@@ -168,6 +177,7 @@ const route = useRoute();
 const { findByPlatform } = mapGetters('integration');
 
 const isModalOpen = ref(false);
+const isDisconnectDisabled = ref(false);
 
 const integration = computed(() => findByPlatform.value(props.config.key));
 // const integration = computed(() => {
@@ -199,8 +209,22 @@ const selectedProgress = computed(() => (props.progress || []).find((p) => p.pla
 const isComponentMounted = ref(false);
 const isSettingsOpen = ref(false);
 
+// For Git integration, we need to check if there are any mirrored repositories
+const fetchRepoMappings = () => {
+  if (integration.value && integration.value.platform === 'git') {
+    IntegrationService.fetchGitMappings(integration.value)
+      .then((repos) => {
+        isDisconnectDisabled.value = repos
+          .filter((r) => r.sourceIntegrationId !== r.gitIntegrationId).length > 0;
+      }).catch(() => {
+        isDisconnectDisabled.value = false;
+      });
+  }
+};
+
 onMounted(() => {
   isComponentMounted.value = true;
+  fetchRepoMappings();
 });
 </script>
 

From 1ea079caeaa3aba7209683b5234176b8acea38cd Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 26 Jan 2026 14:26:21 +0800
Subject: [PATCH 19/22] chore: address PR comments

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/config/styles/components/button.scss       | 12 ++++++------
 .../integrations/git/components/git-params.vue      | 12 ++++++------
 .../components/settings/github-settings-drawer.vue  |  3 ++-
 .../github/components/github-connect.vue            |  4 ++--
 .../github/components/github-mapped-repos.vue       |  1 -
 .../integration/components/drawer-description.vue   |  3 ++-
 .../components/integration-confirmation-modal.vue   | 10 +++++++++-
 .../components/integration-list-item.vue            | 13 +++----------
 frontend/src/ui-kit/lfx/tabs/tab.vue                |  2 +-
 9 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/frontend/config/styles/components/button.scss b/frontend/config/styles/components/button.scss
index f915bcbcc1..c4b5eb305c 100644
--- a/frontend/config/styles/components/button.scss
+++ b/frontend/config/styles/components/button.scss
@@ -304,12 +304,12 @@
   --lf-btn-outline-active-background: var(--lf-color-white);
   --lf-btn-outline-active-border: var(--lf-color-gray-200);
   // Disabled
-  --lf-btn-secondary-link-disabled-text: var(--lf-color-gray-400);
-  --lf-btn-secondary-link-disabled-background: var(--lf-color-white);
-  --lf-btn-secondary-link-disabled-border: var(--lf-color-gray-200);
+  --lf-btn-outline-disabled-text: var(--lf-color-gray-400);
+  --lf-btn-outline-disabled-background: var(--lf-color-white);
+  --lf-btn-outline-disabled-border: var(--lf-color-gray-200);
   // Loading
-  --lf-btn-secondary-link-loading-text: var(--lf-color-gray-400);
-  --lf-btn-secondary-link-loading-background: var(--lf-color-white);
-  --lf-btn-secondary-link-loading-border: var(--lf-color-gray-200);
+  --lf-btn-outline-loading-text: var(--lf-color-gray-400);
+  --lf-btn-outline-loading-background: var(--lf-color-white);
+  --lf-btn-outline-loading-border: var(--lf-color-gray-200);
 
 }
diff --git a/frontend/src/config/integrations/git/components/git-params.vue b/frontend/src/config/integrations/git/components/git-params.vue
index 35eebd718e..9ede4ae819 100644
--- a/frontend/src/config/integrations/git/components/git-params.vue
+++ b/frontend/src/config/integrations/git/components/git-params.vue
@@ -2,13 +2,13 @@
   <div class="flex items-center gap-1">
     <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
 
-    <el-popover v-if="reposNoMirrored.length > 0" trigger="hover" placement="top" popper-class="!w-72">
+    <el-popover v-if="nativeRepos.length > 0" trigger="hover" placement="top" popper-class="!w-72">
       <template #reference>
         <div
           class="text-gray-600 text-2xs flex items-center leading-5 font-medium underline decoration-dashed cursor-default"
         >
-          {{ reposNoMirrored.length }}
-          {{ reposNoMirrored.length !== 1 ? "remote URLs" : "remote URL" }}
+          {{ nativeRepos.length }}
+          {{ nativeRepos.length !== 1 ? "remote URLs" : "remote URL" }}
         </div>
       </template>
 
@@ -17,7 +17,7 @@
       </p>
       <div class="max-h-44 overflow-auto -my-1 px-1">
         <article
-          v-for="repository of reposNoMirrored"
+          v-for="repository of nativeRepos"
           :key="repository"
           class="flex items-center flex-nowrap mb-4 last:mb-0"
         >
@@ -35,7 +35,7 @@
       </div>
     </el-popover>
 
-    <span v-if="mirroredRepoUrls.length > 0 && reposNoMirrored.length > 0">/</span>
+    <span v-if="mirroredRepoUrls.length > 0 && nativeRepos.length > 0">/</span>
 
     <el-popover v-if="mirroredRepoUrls.length > 0" trigger="hover" placement="top" popper-class="!w-72">
       <template #reference>
@@ -90,7 +90,7 @@ const repositories = ref<string[]>([]);
 
 // Track mirrored repos (sourceIntegrationId != gitIntegrationId)
 const mirroredRepoUrls = ref<string[]>([]);
-const reposNoMirrored = computed(() => repositories.value.filter((r) => !mirroredRepoUrls.value.includes(r)));
+const nativeRepos = computed(() => repositories.value.filter((r) => !mirroredRepoUrls.value.includes(r)));
 
 const fetchRepositories = () => {
   if (!props.integration?.id) return;
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index 1725223944..e37e338735 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -103,6 +103,7 @@
 import {
   computed, onMounted, ref, watch,
 } from 'vue';
+import isEqual from 'lodash/isEqual';
 import useVuelidate from '@vuelidate/core';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
@@ -158,7 +159,7 @@ const initialRepoMappings = ref<Record<string, string>>({});
 const isDisconnectIntegrationModalOpen = ref(false);
 
 const hasChanges = computed(() => repositories.value.length !== initialRepositories.value.length
-    || JSON.stringify(repoMappings.value) !== JSON.stringify(initialRepoMappings.value));
+    || !isEqual(repoMappings.value, initialRepoMappings.value));
 
 // Drawer visibility
 const isDrawerVisible = computed({
diff --git a/frontend/src/config/integrations/github/components/github-connect.vue b/frontend/src/config/integrations/github/components/github-connect.vue
index bc37153b2b..019b1e9ae9 100644
--- a/frontend/src/config/integrations/github/components/github-connect.vue
+++ b/frontend/src/config/integrations/github/components/github-connect.vue
@@ -84,7 +84,7 @@ const isFinishingModalOpen = ref(false);
 
 const { doGithubConnect } = mapActions('integration');
 
-const finallizeGithubConnect = () => {
+const finalizeGithubConnect = () => {
   const {
     code, source, state,
   } = route.query;
@@ -104,7 +104,7 @@ const finallizeGithubConnect = () => {
 };
 
 onMounted(() => {
-  finallizeGithubConnect();
+  finalizeGithubConnect();
 });
 </script>
 
diff --git a/frontend/src/config/integrations/github/components/github-mapped-repos.vue b/frontend/src/config/integrations/github/components/github-mapped-repos.vue
index a4d058e2df..90c8f8bf64 100644
--- a/frontend/src/config/integrations/github/components/github-mapped-repos.vue
+++ b/frontend/src/config/integrations/github/components/github-mapped-repos.vue
@@ -60,7 +60,6 @@ const mappedReposWithOtherProject = ref<{
 const repoNameFromUrl = (url: string) => url.split('/').at(-1);
 
 onMounted(() => {
-  // mappedReposWithOtherProject.value = {"project":"Project Test","repositories":[{"url":"https://github.com/emlim23/array-flattener"}]};
   IntegrationService.fetchGitHubMappedRepos(props.segmentId).then((res) => {
     mappedReposWithOtherProject.value = res;
   });
diff --git a/frontend/src/modules/admin/modules/integration/components/drawer-description.vue b/frontend/src/modules/admin/modules/integration/components/drawer-description.vue
index 581a9147b1..a378137946 100644
--- a/frontend/src/modules/admin/modules/integration/components/drawer-description.vue
+++ b/frontend/src/modules/admin/modules/integration/components/drawer-description.vue
@@ -24,7 +24,8 @@ const props = defineProps<{
   integrationKey: string;
 }>();
 
-const integration = computed(() => lfIntegrations()[props.integrationKey]);
+const integrations = lfIntegrations();
+const integration = computed(() => integrations[props.integrationKey]);
 const integrationLink = computed(() => links.integrationLinks[props.integrationKey as keyof typeof links.integrationLinks]
 || links.integrations);
 </script>
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue b/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue
index 7636f0f789..4546d520c8 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
@@ -59,6 +59,12 @@ const isModalOpen = computed({
   set: (value: boolean) => emit('update:modelValue', value),
 });
 
+watch(isModalOpen, (open) => {
+  if (!open) {
+    disconnectConfirm.value = '';
+  }
+});
+
 const disconnectIntegration = () => {
   isModalOpen.value = false;
   trackEvent({
@@ -70,6 +76,8 @@ const disconnectIntegration = () => {
   });
   doDestroy(props.integrationId);
 };
+
+
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
index a169bf8ee3..be34a152bf 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
@@ -12,12 +12,9 @@
           </div>
         </div>
         <div>
-          <h6 v-if="isV2" class="mb-0.5 flex items-center gap-2">
-            Github
-            <lf-github-version-tag v-if="isV2" version="v2" tooltip-content="New integration" />
-          </h6>
-          <h6 v-else class="mb-0.5">
+          <h6 class="mb-0.5 flex items-center gap-2">
             {{ props.config.name.replace(' (v2)', '') }}
+            <lf-github-version-tag v-if="isV2" version="v2" tooltip-content="New integration" />
           </h6>
           <p class="text-gray-500 text-small">
             {{ props.config.description }}
@@ -180,11 +177,7 @@ const isModalOpen = ref(false);
 const isDisconnectDisabled = ref(false);
 
 const integration = computed(() => findByPlatform.value(props.config.key));
-// const integration = computed(() => {
-//   const inte = {...findByPlatform.value(props.config.key)}
-//   inte.status = 'done';
-//   return inte;
-// });
+
 const status = computed(() => getIntegrationStatus(integration.value));
 const isV2 = computed(() => integration.value?.isNango && integration.value?.status);
 
diff --git a/frontend/src/ui-kit/lfx/tabs/tab.vue b/frontend/src/ui-kit/lfx/tabs/tab.vue
index 70c2b6e9dc..4c1781c443 100644
--- a/frontend/src/ui-kit/lfx/tabs/tab.vue
+++ b/frontend/src/ui-kit/lfx/tabs/tab.vue
@@ -16,7 +16,7 @@ const parent = computed(() => {
   return instance?.parent;
 });
 
-const isActive = computed<boolean>(() => parent.value.props.modelValue === props.name);
+const isActive = computed<boolean>(() => parent.value?.props?.modelValue === props.name);
 
 const selectTab = () => {
   parent.value?.emit('update:modelValue', props.name);

From a11edb59cd893bc2553c85d2fc6fca63e35b31fc Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 26 Jan 2026 15:32:53 +0800
Subject: [PATCH 20/22] feat: added connected repo message to drawers

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../gerrit/components/gerrit-settings-drawer.vue       |  9 +++++++++
 .../components/settings/github-settings-drawer.vue     |  9 +++++++++
 .../components/settings/github-settings-drawer.vue     | 10 ++++++++++
 .../gitlab/components/gitlab-settings-drawer.vue       |  9 +++++++++
 .../components/integration-confirmation-modal.vue      |  1 -
 5 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
index 984d33189a..56d898f80e 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
@@ -14,6 +14,15 @@
       <drawer-description integration-key="gerrit" />
     </template>
     <template #content>
+      <div class="flex gap-2 bg-blue-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-blue-500" :size="16" />
+        </div>
+        <div class="text-xs text-blue-800">
+          Connected repositories are also synced through Git, which automatically mirrors your
+          GitHub settings for adding, updating, and deleting repositories.
+        </div>
+      </div>
       <lf-gerrit-settings-empty v-if="showEmptyState" @add="showEmptyState = false" />
       <div v-else class="flex flex-col gap-5 items-start">
         <div class="flex justify-between w-full">
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index e37e338735..e646c35d2f 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -21,6 +21,15 @@
       <drawer-description integration-key="github" />
     </template>
     <template #content>
+      <div class="flex gap-2 bg-blue-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-blue-500" :size="16" />
+        </div>
+        <div class="text-xs text-blue-800">
+          Connected repositories are also synced through Git, which automatically mirrors your
+          GitHub settings for adding, updating, and deleting repositories.
+        </div>
+      </div>
       <div class="flex-grow overflow-auto">
         <lf-github-settings-empty
           v-if="repositories.length === 0"
diff --git a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
index a04fbdc1bb..b9f5c8071b 100644
--- a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
@@ -19,6 +19,15 @@
       <drawer-description integration-key="github" />
     </template>
     <template #content>
+      <div class="flex gap-2 bg-blue-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-blue-500" :size="16" />
+        </div>
+        <div class="text-xs text-blue-800">
+          Connected repositories are also synced through Git, which automatically mirrors your
+          GitHub settings for adding, updating, and deleting repositories.
+        </div>
+      </div>
       <div>
         <!-- Connected organization info -->
         <section
@@ -229,6 +238,7 @@ import LfButton from '@/ui-kit/button/Button.vue';
 import { ProjectGroup, SubProject } from '@/modules/lf/segments/types/Segments';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
+import AppDrawer from '@/shared/drawer/drawer.vue';
 
 const props = defineProps<{
   modelValue: boolean;
diff --git a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
index 7812897737..81d886aa47 100644
--- a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
+++ b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
@@ -15,6 +15,15 @@
       <drawer-description integration-key="gitlab" />
     </template>
     <template #content>
+      <div class="flex gap-2 bg-blue-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-blue-500" :size="16" />
+        </div>
+        <div class="text-xs text-blue-800">
+          Connected repositories are also synced through Git, which automatically mirrors your
+          GitHub settings for adding, updating, and deleting repositories.
+        </div>
+      </div>
       <div>
         <!-- Connected user info -->
         <section v-if="connectedUser" class="border border-gray-200 rounded-md py-4 px-5 mb-6">
diff --git a/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue b/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue
index 4546d520c8..fdc7383af6 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue
@@ -77,7 +77,6 @@ const disconnectIntegration = () => {
   doDestroy(props.integrationId);
 };
 
-
 </script>
 
 <script lang="ts">

From a2823332f6e548b75e8996d93dab04749fdd70a7 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 27 Jan 2026 12:46:52 +0800
Subject: [PATCH 21/22] fix: notification text for gerrit and gitlab

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../integrations/gerrit/components/gerrit-settings-drawer.vue   | 2 +-
 .../integrations/gitlab/components/gitlab-settings-drawer.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
index 56d898f80e..856325bc1f 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
@@ -20,7 +20,7 @@
         </div>
         <div class="text-xs text-blue-800">
           Connected repositories are also synced through Git, which automatically mirrors your
-          GitHub settings for adding, updating, and deleting repositories.
+          Gerrit settings for adding, updating, and deleting repositories.
         </div>
       </div>
       <lf-gerrit-settings-empty v-if="showEmptyState" @add="showEmptyState = false" />
diff --git a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
index 81d886aa47..4954c7851f 100644
--- a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
+++ b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
@@ -21,7 +21,7 @@
         </div>
         <div class="text-xs text-blue-800">
           Connected repositories are also synced through Git, which automatically mirrors your
-          GitHub settings for adding, updating, and deleting repositories.
+          GitLab settings for adding, updating, and deleting repositories.
         </div>
       </div>
       <div>

From 47d4eb202a90640ae936037779a6683d706d106e Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 29 Jan 2026 15:50:48 +0800
Subject: [PATCH 22/22] feat: redesign gerrit drawer

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/config/styles/components/switch.scss |  14 +-
 frontend/src/assets/scss/form/input.scss      |  12 ++
 .../components/gerrit-settings-drawer.vue     | 145 ++++++++++--------
 frontend/src/shared/form/array-input.vue      |  23 ++-
 frontend/src/ui-kit/switch/switch.scss        |   2 +-
 5 files changed, 111 insertions(+), 85 deletions(-)

diff --git a/frontend/config/styles/components/switch.scss b/frontend/config/styles/components/switch.scss
index 8cfdf9d97e..d04e92358f 100644
--- a/frontend/config/styles/components/switch.scss
+++ b/frontend/config/styles/components/switch.scss
@@ -24,19 +24,9 @@
 
   // Disabled Unchecked
   --lf-switch-disabled-unchecked-handle: var(--lf-color-white);
-
-  // Disabled Checked
+  --lf-switch-disabled-background: var(--lf-color-gray-200);
   --lf-switch-disabled-checked-handle: var(--lf-color-white);
-
-  /* ---------------------------------- *\
-           Switch sizes
-  \* ---------------------------------- */
-
-  /* Tiny */
-  --lf-switch-tiny-height: #{rem(16)};
-  --lf-switch-tiny-width: #{rem(30)};
-  --lf-switch-tiny-font-size: #{rem(12)};
-  --lf-switch-tiny-line-height: #{rem(15)};
+  --lf-switch-disabled-checked-background: var(--lf-color-primary-500);
 
   /* Small */
   --lf-switch-small-height: #{rem(20)};
diff --git a/frontend/src/assets/scss/form/input.scss b/frontend/src/assets/scss/form/input.scss
index fc786647cc..5c0e9502a1 100644
--- a/frontend/src/assets/scss/form/input.scss
+++ b/frontend/src/assets/scss/form/input.scss
@@ -54,6 +54,18 @@
   }
 }
 
+.input-label-container {
+  @apply border border-solid border-gray-200 rounded-full flex items-stretch;
+
+  span {
+    @apply text-gray-900 text-small px-3 bg-gray-50 border-r border-r-gray-200 flex items-center
+    rounded-l-full;
+  }
+  .el-input__wrapper{
+    @apply border-none rounded-l-none rounded-r-full #{!important};
+  }
+}
+
 // Inner input/textarea color
 .el-input__inner,
 .el-textarea__inner {
diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
index 856325bc1f..8aaa5e88bd 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
@@ -25,88 +25,104 @@
       </div>
       <lf-gerrit-settings-empty v-if="showEmptyState" @add="showEmptyState = false" />
       <div v-else class="flex flex-col gap-5 items-start">
-        <div class="flex justify-between w-full">
+        <div class="flex flex-col gap-2 w-full">
+          <label for="devUrl" class="text-gray-900 text-small">
+            Gerrit organization URL<span class="text-red-500">*</span>
+          </label>
+          <div class="flex justify-between w-full gap-5 items-center">
+            <el-form class="w-full" @submit.prevent>
+              <el-input
+                id="devUrl"
+                v-model="form.orgURL"
+                class="text-green-500 is-rounded"
+                spellcheck="false"
+                placeholder="Enter organization URL"
+              />
+            </el-form>
+
+            <div class="flex-shrink-0">
+              <lf-switch
+                v-model="form.enableAllRepos"
+                :size="'small'"
+                :disabled="form.orgURL.length === 0"
+                :class="{ 'opacity-50': form.orgURL.length === 0 }"
+              >
+                <template #default>
+                  <span class="text-gray-900 text-small mr-2">All remote URLs</span>
+                </template>
+              </lf-switch>
+            </div>
+          </div>
+        </div>
+
+        <hr class="w-full border border-solid border-gray-200" />
+
+        <template v-if="!form.enableAllRepos">
           <lf-button
             type="primary-link"
             size="medium"
+            :disabled="form.orgURL.length === 0"
+            :class="{ 'opacity-50': form.orgURL.length === 0 }"
             @click="addRepoName()"
           >
-            + Add Repository Name
+            + Add remote URL
           </lf-button>
-          <lf-switch
-            v-model="form.enableAllRepos"
-            :size="'small'"
-          >
-            <template #default>
-              <span class="text-gray-900 text-small mr-2 underline decoration-dotted decoration-gray-400">Enable All Projects</span>
-            </template>
-          </lf-switch>
+          <el-form class="w-full" @submit.prevent>
+            <app-array-input
+              v-for="(_, ii) of form.repoNames"
+              :key="ii"
+              v-model="form.repoNames[ii]"
+              class="text-green-500 pb-5"
+              placeholder="Enter repository name"
+              :input-label="form.orgURL"
+            >
+              <template #after>
+                <lf-button
+                  type="secondary-link"
+                  size="medium"
+                  class="w-10 h-10"
+                  @click="removeRepoName(ii)"
+                >
+                  <lf-icon name="circle-xmark" :size="20" />
+                </lf-button>
+              </template>
+            </app-array-input>
+          </el-form>
+        </template>
+        <div v-else class="text-gray-500 text-xs flex items-start gap-2">
+          <lf-icon name="circle-info" :size="16" class="mt-0.5" />
+          All repositories under the selected Gerrit organization are automatically synced.
+          Manual repository selection is disabled to avoid conflicts.
         </div>
-
-        <el-form class="mt-2 w-full" @submit.prevent>
-          <el-input
-            id="devUrl"
-            v-model="form.orgURL"
-            class="text-green-500"
-            spellcheck="false"
-            placeholder="Enter Organization URL"
-          />
-          <!-- <el-input
-            id="devUrl"
-            v-model="form.user"
-            class="text-green-500 mt-2"
-            spellcheck="false"
-            placeholder="Enter username"
-          />
-          <el-input
-            id="devUrl"
-            v-model="form.pass"
-            class="text-green-500 mt-2"
-            spellcheck="false"
-            placeholder="Enter user HTTP password"
-          /> -->
-          <app-array-input
-            v-for="(_, ii) of form.repoNames"
-            :key="ii"
-            v-model="form.repoNames[ii]"
-            class="text-green-500 mt-2"
-            placeholder="Enter Project Name"
-          >
-            <template #after>
-              <lf-button
-                type="secondary-link"
-                size="medium"
-                class="w-10 h-10"
-                @click="removeRepoName(ii)"
-              >
-                <lf-icon name="circle-xmark" :size="20" />
-              </lf-button>
-            </template>
-          </app-array-input>
-        </el-form>
       </div>
     </template>
 
     <template #footer>
-      <div>
+      <div class="flex justify-end gap-3">
         <lf-button
           type="outline"
-          class="mr-4"
           :disabled="loading"
           @click="cancel"
         >
           Cancel
         </lf-button>
-        <lf-button
-          id="gerritConnect"
-          type="primary"
-          class="!rounded-full"
-          :disabled="$v.$invalid || !hasFormChanged || loading"
-          :loading="loading"
-          @click="connect"
+        <lf-tooltip
+          content="Please enter the organization URL, and at least 1 remote URL, in order to connect Gerrit"
+          content-class="!w-50"
+          placement="top-end"
+          :disabled="!($v.$invalid || !hasFormChanged || loading)"
         >
-          Connect
-        </lf-button>
+          <lf-button
+            id="gerritConnect"
+            type="primary"
+            class="!rounded-full"
+            :disabled="$v.$invalid || !hasFormChanged || loading"
+            :loading="loading"
+            @click="connect"
+          >
+            Connect
+          </lf-button>
+        </lf-tooltip>
       </div>
     </template>
   </app-drawer>
@@ -136,6 +152,7 @@ import { IntegrationService } from '@/modules/integration/integration-service';
 import { ToastStore } from '@/shared/message/notification';
 import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 import LfGerritSettingsEmpty from '@/config/integrations/gerrit/components/gerrit-settings-empty.vue';
+import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
@@ -161,7 +178,7 @@ const { hasFormChanged, formSnapshot } = formChangeDetector(form);
 const $v = useVuelidate({
   orgURL: { required },
   repoNames: {
-    required: (value: string[]) => value.length > 0 && value.every((v) => v.trim() !== ''),
+    required: (value: string[]) => (form.enableAllRepos ? true : value.length > 0 && value.every((v) => v.trim() !== '')),
   },
 }, form, { $stopPropagation: true });
 
diff --git a/frontend/src/shared/form/array-input.vue b/frontend/src/shared/form/array-input.vue
index 9d62572350..87253dca4c 100644
--- a/frontend/src/shared/form/array-input.vue
+++ b/frontend/src/shared/form/array-input.vue
@@ -8,14 +8,17 @@
         }"
         class="mb-0 mr-2 no-margin flex-grow is-error-relative"
       >
-        <el-input
-          v-model="model"
-          :placeholder="placeholder"
-          :disabled="disabled"
-          :class="[{ 'opacity-50': disabled }, inputClass]"
-          @blur="$v.$touch"
-          @change="$v.$touch"
-        />
+        <div :class="{ 'input-label-container': !!inputLabel }">
+          <span v-if="inputLabel">{{ inputLabel }}</span>
+          <el-input
+            v-model="model"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :class="[{ 'opacity-50': disabled }, inputClass]"
+            @blur="$v.$touch"
+            @change="$v.$touch"
+          />
+        </div>
       </app-form-item>
     </div>
     <slot name="after" />
@@ -47,6 +50,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  inputLabel: {
+    type: String,
+    default: '',
+  },
 });
 
 const rules = {
diff --git a/frontend/src/ui-kit/switch/switch.scss b/frontend/src/ui-kit/switch/switch.scss
index bd5a180eda..c28046d43a 100644
--- a/frontend/src/ui-kit/switch/switch.scss
+++ b/frontend/src/ui-kit/switch/switch.scss
@@ -40,7 +40,7 @@
     // Disabled
     &:disabled {
       --lf-switch-handle: var(--lf-switch-disabled-unchecked-handle);
-      --lf-switch-background: var(--lf-switch-unchecked-background);
+      --lf-switch-background: var(--lf-switch-disabled-background);
       @apply cursor-not-allowed opacity-60;
 
       &:checked {