diff --git a/backend/src/services/integrationService.ts b/backend/src/services/integrationService.ts
index 62df8f408b..a5e9d89264 100644
--- a/backend/src/services/integrationService.ts
+++ b/backend/src/services/integrationService.ts
@@ -28,8 +28,8 @@ import {
   softDeleteRepositories,
 } from '@crowd/data-access-layer/src/repositories'
 import {
+  getMappedAllWithSegmentName,
   getMappedRepos,
-  getMappedWithSegmentName,
   hasMappedRepos,
 } from '@crowd/data-access-layer/src/segments'
 import {
@@ -2683,10 +2683,10 @@ export default class IntegrationService {
       getMappedRepos(qx, segmentId, PlatformType.GITHUB_NANGO),
       getMappedRepos(qx, segmentId, PlatformType.GITLAB),
     ])
-    const project = await getMappedWithSegmentName(qx, segmentId, githubPlatforms)
+    const projects = await getMappedAllWithSegmentName(qx, segmentId, githubPlatforms)
 
     return {
-      project,
+      projects,
       repositories: [...githubMappedRepos, ...githubNangoMappedRepos, ...gitlabMappedRepos],
     }
   }
diff --git a/frontend/config/styles/components/button.scss b/frontend/config/styles/components/button.scss
index 2a1bda5ab5..5be6605b72 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);
@@ -272,4 +293,27 @@
   --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-neutral-900);
+  --lf-btn-outline-background: var(--lf-color-white);
+  --lf-btn-outline-border: var(--lf-color-neutral-200);
+  --lf-btn-outline-shadow: var(--shadow-none);
+  // Hover
+  --lf-btn-outline-hover-text: var(--lf-color-neutral-900);
+  --lf-btn-outline-hover-background: var(--lf-color-neutral-50);
+  --lf-btn-outline-hover-border: var(--lf-color-neutral-200);
+  // Active
+  --lf-btn-outline-active-text: var(--lf-color-neutral-900);
+  --lf-btn-outline-active-background: var(--lf-color-neutral-50);
+  --lf-btn-outline-active-border: var(--lf-color-neutral-200);
+  // Disabled
+  --lf-btn-outline-disabled-text: var(--lf-color-neutral-400);
+  --lf-btn-outline-disabled-background: var(--lf-color-white);
+  --lf-btn-outline-disabled-border: var(--lf-color-neutral-200);
+  // Loading
+  --lf-btn-outline-loading-text: var(--lf-color-neutral-400);
+  --lf-btn-outline-loading-background: var(--lf-color-white);
+  --lf-btn-outline-loading-border: var(--lf-color-neutral-200);
+
 }
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/config/styles/variables/_colors.scss b/frontend/config/styles/variables/_colors.scss
index c2f81c877f..23f697f78a 100755
--- a/frontend/config/styles/variables/_colors.scss
+++ b/frontend/config/styles/variables/_colors.scss
@@ -31,6 +31,18 @@
   --lf-color-secondary-200: #99AFC9;
   --lf-color-secondary-100: #CCD7E4;
   --lf-color-secondary-50: #E6EBF2;
+  
+  // Brand
+  --lf-color-brand-900: #000816;
+  --lf-color-brand-800: #002648;
+  --lf-color-brand-700: #004880;
+  --lf-color-brand-600: #006DBE;
+  --lf-color-brand-500: #0094FF;
+  --lf-color-brand-400: #54ABFF;
+  --lf-color-brand-300: #83C1FF;
+  --lf-color-brand-200: #ADD6FF;
+  --lf-color-brand-100: #D6EBFF;
+  --lf-color-brand-50: #EBF5FF;
 
   // Gray
   --lf-color-gray-900: #111827;
@@ -45,6 +57,19 @@
   --lf-color-gray-100: #F3F4F6;
   --lf-color-gray-50: #F9FAFB;
 
+  // Neutral
+  --lf-color-neutral-900: #0F172B;
+  --lf-color-neutral-800: #1D293D;
+  --lf-color-neutral-700: #314158;
+  --lf-color-neutral-600: #45556C;
+  --lf-color-neutral-500: #62748E;
+  --lf-color-neutral-400: #90A1B9;
+  --lf-color-neutral-300: #CAD5E2;
+  --lf-color-neutral-250: #e6e6e6;
+  --lf-color-neutral-200: #E2E8F0;
+  --lf-color-neutral-100: #F1F5F9;
+  --lf-color-neutral-50: #F8FAFC;
+
   // Red
   --lf-color-red-900: #7F1D1D;
   --lf-color-red-800: #991B1B;
diff --git a/frontend/src/assets/images/integrations/git-repository-line.svg b/frontend/src/assets/images/integrations/git-repository-line.svg
new file mode 100644
index 0000000000..1e3f5e8110
--- /dev/null
+++ b/frontend/src/assets/images/integrations/git-repository-line.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.66667 13.9999V15.6666L6.66667 14.3333L4.66667 15.6666V13.9999H4.33333C3.04467 13.9999 2 12.9553 2 11.6666V3.33325C2 2.22869 2.89543 1.33325 4 1.33325H13.3333C13.7015 1.33325 14 1.63173 14 1.99992V13.3333C14 13.7015 13.7015 13.9999 13.3333 13.9999H8.66667ZM8.66667 12.6666H12.6667V10.6666H4.33333C3.78105 10.6666 3.33333 11.1143 3.33333 11.6666C3.33333 12.2189 3.78105 12.6666 4.33333 12.6666H4.66667V11.3333H8.66667V12.6666ZM12.6667 9.33325V2.66659H4V9.35685C4.10887 9.34132 4.22016 9.33325 4.33333 9.33325H12.6667ZM4.66667 3.33325H6V4.66658H4.66667V3.33325ZM4.66667 5.33325H6V6.66658H4.66667V5.33325ZM4.66667 7.33325H6V8.66658H4.66667V7.33325Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/scss/drawer.scss b/frontend/src/assets/scss/drawer.scss
index f667a657b8..99f198a23c 100644
--- a/frontend/src/assets/scss/drawer.scss
+++ b/frontend/src/assets/scss/drawer.scss
@@ -1,7 +1,8 @@
 .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);
+  overflow: unset;
 
   &__header {
     @apply mb-4;
@@ -12,7 +13,25 @@
   }
 
   &__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;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -20px;
+      left: 0;
+      right: 0;
+      height: 20px;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.06), transparent);
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+  }
+
+  &.has-scroll .el-drawer__footer::before {
+    opacity: 1;
   }
 
   &__close-btn {
diff --git a/frontend/src/assets/scss/form/input.scss b/frontend/src/assets/scss/form/input.scss
index 7b332adcf5..5c0e9502a1 100644
--- a/frontend/src/assets/scss/form/input.scss
+++ b/frontend/src/assets/scss/form/input.scss
@@ -48,6 +48,22 @@
       border: 1px solid var(--el-input-focus-border-color);
     }
   }
+
+  &.is-rounded .el-input__wrapper{
+    @apply rounded-full;
+  }
+}
+
+.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
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/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/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/confluence/components/confluence-settings-drawer.vue b/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
index f627d3c045..97d237388f 100644
--- a/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
+++ b/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
@@ -2,14 +2,20 @@
   <app-drawer
     v-model="isVisible"
     custom-class="integration-confluence-drawer"
+    size="600px"
     title="Confluence"
     pre-title="Integration"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="cancel"
   >
     <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
@@ -110,29 +116,19 @@
     </template>
 
     <template #footer>
-      <div>
-        <lf-button
-          type="secondary-gray"
-          size="medium"
-          class="mr-4"
-          :disabled="loading"
-          @click="cancel"
-        >
-          Cancel
-        </lf-button>
-        <lf-button
-          id="confluenceConnect"
-          type="primary"
-          size="medium"
-          :disabled="$v.$invalid || loading"
-          :loading="loading"
-          @click="connect"
-        >
-          {{ integration?.settings ? 'Update' : 'Connect' }}
-        </lf-button>
-      </div>
+      <drawer-footer-buttons
+        :integration="props.integration"
+        :is-edit-mode="!!props.integration"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="$v.$invalid || !hasFormChanged || loading"
+        :cancel="cancel"
+        :revert-changes="revertChanges"
+        :connect="connect"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script setup lang="ts">
@@ -153,6 +149,9 @@ 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -175,6 +174,7 @@ const props = defineProps({
 });
 
 const { trackEvent } = useProductTracking();
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
 
 const loading = ref(false);
 const form = reactive({
@@ -186,7 +186,7 @@ const form = reactive({
   spaces: [''],
 });
 
-const { formSnapshot } = formChangeDetector(form);
+const { formSnapshot, hasFormChanged } = formChangeDetector(form);
 const $v = useVuelidate({
   url: { required },
   username: { required },
@@ -198,6 +198,22 @@ const $v = useVuelidate({
   },
 }, form, { $stopPropagation: true });
 
+const revertChanges = () => {
+  if (props.integration?.settings) {
+    form.url = props.integration.settings.url;
+    form.username = props.integration.settings.username || '';
+    form.apiToken = props.integration.settings.apiToken || '';
+    form.orgAdminApiToken = props.integration.settings.orgAdminApiToken || '';
+    form.orgAdminId = props.integration.settings.orgAdminId || '';
+    if (props.integration?.settings.space) {
+      form.spaces = [props.integration?.settings.space.key];
+    } else {
+      form.spaces = [...(props.integration?.settings.spaces || [])];
+    }
+    formSnapshot();
+  }
+};
+
 const { doConfluenceConnect } = mapActions('integration');
 const isVisible = computed({
   get() {
@@ -228,7 +244,7 @@ onMounted(() => {
     if (props.integration?.settings.space) {
       form.spaces = [props.integration?.settings.space.key];
     } else {
-      form.spaces = props.integration?.settings.spaces;
+      form.spaces = [...(props.integration?.settings.spaces || [])];
     }
   }
   formSnapshot();
@@ -238,6 +254,21 @@ const cancel = () => {
   isVisible.value = false;
 };
 
+const canClose = (done: (value: boolean) => void) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        revertChanges();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const connect = async () => {
   loading.value = true;
 
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/components/devto-connect-drawer.vue b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
index 6d06bb1c9d..1ba0d58643 100644
--- a/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
+++ b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
@@ -2,6 +2,7 @@
   <app-drawer
     v-model="isVisible"
     custom-class="integration-devto-drawer"
+    size="600px"
     title="DEV"
     pre-title="Integration"
     has-border
@@ -10,6 +11,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
@@ -165,29 +169,16 @@
       </el-form>
     </template>
     <template #footer>
-      <div>
-        <lf-button
-          type="secondary-gray"
-          size="medium"
-          class="mr-4"
-          :disabled="loading"
-          @click="cancel"
-        >
-          Cancel
-        </lf-button>
-        <lf-button
-          id="devConnect"
-          type="primary"
-          size="medium"
-          :disabled="
-            connectDisabled || loading || !isAPIConnectionValid || isValidating
-          "
-          :loading="loading"
-          @click="save"
-        >
-          Connect
-        </lf-button>
-      </div>
+      <drawer-footer-buttons
+        :integration="props.integration"
+        :is-edit-mode="!!props.integration"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="connectDisabled || loading || !isAPIConnectionValid || isValidating"
+        :cancel="cancel"
+        :revert-changes="revertChanges"
+        :connect="save"
+      />
     </template>
   </app-drawer>
 </template>
@@ -214,6 +205,9 @@ 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';
+import formChangeDetector from '@/shared/form/form-change';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
 
 const { doDevtoConnect } = mapActions('integration');
 
@@ -478,6 +472,8 @@ const $externalResults = ref({});
 
 const $v = useVuelidate(rules, form, { $externalResults, $stopPropagation: true });
 
+const { formSnapshot, hasFormChanged } = formChangeDetector(form);
+
 watch(
   () => props.integration,
   (newVal) => {
@@ -498,6 +494,14 @@ const isVisible = computed({
   },
 });
 
+const revertChanges = () => {
+  if (props.integration?.settings) {
+    syncData();
+
+    formSnapshot();
+  }
+};
+
 onMounted(syncData);
 </script>
 
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/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/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/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/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/discourse/components/discourse-settings-drawer.vue b/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
index c4497710b0..990f25dcbb 100644
--- a/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
+++ b/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
@@ -7,6 +7,8 @@
     pre-title="Integration"
     :show-footer="true"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="handleCancel()"
   >
     <template #beforeTitle>
@@ -16,6 +18,9 @@
         alt="Discourse logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="discourse" />
+    </template>
     <template #content>
       <el-form
         label-position="top"
@@ -189,30 +194,19 @@
     </template>
 
     <template #footer>
-      <div style="flex: auto">
-        <lf-button
-          type="secondary-gray"
-          size="medium"
-          class="mr-3"
-          :disabled="loading"
-          @click="handleCancel"
-        >
-          Cancel
-        </lf-button>
-        <lf-button
-          type="primary"
-          size="medium"
-          :disabled="
-            $v.$invalid
-              || !hasFormChanged || loading"
-          :loading="loading"
-          @click="connect()"
-        >
-          {{ integration?.settings?.forumHostname ? "Update" : "Connect" }}
-        </lf-button>
-      </div>
+      <drawer-footer-buttons
+        :integration="props.integration"
+        :is-edit-mode="!!integration?.settings?.forumHostname"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="$v.$invalid || !hasFormChanged || loading"
+        :cancel="handleCancel"
+        :revert-changes="revertChanges"
+        :connect="connect"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script setup lang="ts">
@@ -235,8 +229,12 @@ 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const { trackEvent } = useProductTracking();
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
 
 const props = defineProps<{
   modelValue: boolean,
@@ -247,8 +245,7 @@ const props = defineProps<{
 
 const inputRef = ref();
 const showToken = ref(false);
-
-const payloadURL = ref(undefined);
+const payloadURL = ref<string | undefined>(undefined);
 const webhookSecret = ref(undefined);
 
 const { doDiscourseConnect } = mapActions('integration');
@@ -362,6 +359,21 @@ const isVisible = computed({
   },
 });
 
+const canClose = (done: (value: boolean) => void) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        revertChanges();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const handleCancel = () => {
   emit('update:modelValue', false);
   if (!props.integration?.settings?.forumHostname) {
@@ -388,7 +400,7 @@ const handleCancel = () => {
   formSnapshot();
 };
 
-onMounted(() => {
+const syncData = () => {
   if (props.integration?.settings?.forumHostname) {
     form.discourseURL = props.integration?.settings.forumHostname;
     form.apiKey = props.integration?.settings.apiKey;
@@ -397,6 +409,14 @@ onMounted(() => {
     isAPIConnectionValid.value = true;
   }
   formSnapshot();
+};
+
+const revertChanges = () => {
+  syncData();
+};
+
+onMounted(() => {
+  syncData();
 });
 
 const verifyWebhook = async () => {
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/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/gerrit/components/gerrit-settings-drawer.vue b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
index d748336675..35b367bdb2 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
@@ -2,109 +2,126 @@
   <app-drawer
     v-model="isVisible"
     custom-class="integration-gerrit-drawer"
+    size="600px"
     title="Gerrit"
     pre-title="Integration"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="cancel"
   >
     <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
-      </div>
-      <div class="text-2xs text-gray-500">
-        Connect remote Gerrit repository.
+      <div class="flex gap-2 bg-brand-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-brand-500" :size="20" />
+        </div>
+        <div class="text-xs text-brand-800">
+          Connected repositories are also synced through Git, which automatically mirrors your
+          Gerrit 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 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>
 
-      <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)"
+        <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 remote URL
+          </lf-button>
+          <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"
             >
-              <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> -->
+              <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>
       </div>
     </template>
 
     <template #footer>
-      <div>
-        <lf-button
-          type="secondary-gray"
-          class="mr-4"
-          :disabled="loading"
-          @click="cancel"
-        >
-          Cancel
-        </lf-button>
-        <lf-button
-          id="gerritConnect"
-          type="primary"
-          :disabled="$v.$invalid || !hasFormChanged || loading"
-          :loading="loading"
-          @click="connect"
-        >
-          Connect
-        </lf-button>
-      </div>
+      <drawer-footer-buttons
+        :integration="props.integration"
+        :is-edit-mode="!!props.integration?.settings"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="$v.$invalid || !hasFormChanged || loading"
+        :cancel="cancel"
+        :revert-changes="revertChanges"
+        :connect="connect"
+        :connect-tooltip-content="connectTooltipContent"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <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';
@@ -118,10 +135,14 @@ 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
@@ -132,6 +153,7 @@ const props = defineProps<{
 }>();
 
 const { trackEvent } = useProductTracking();
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
 
 const loading = ref(false);
 const form = reactive({
@@ -140,11 +162,16 @@ const form = reactive({
   // pass: '',
   enableAllRepos: false,
   enableGit: true,
-  repoNames: [],
+  repoNames: [] as string[],
 });
 
 const { hasFormChanged, formSnapshot } = formChangeDetector(form);
-const $v = useVuelidate({}, form, { $stopPropagation: true });
+const $v = useVuelidate({
+  orgURL: { required },
+  repoNames: {
+    required: (value: string[]) => (form.enableAllRepos ? true : value.length > 0 && value.every((v) => v.trim() !== '')),
+  },
+}, form, { $stopPropagation: true });
 
 const { doGerritConnect } = mapActions('integration');
 const isVisible = computed({
@@ -156,26 +183,58 @@ const isVisible = computed({
   },
 });
 const logoUrl = gerrit.image;
+const showEmptyState = ref(!props.integration?.settings?.remote?.orgURL);
 
-onMounted(() => {
+const connectTooltipContent = computed(() => {
+  // if edit mode
+  if (props.integration?.settings) {
+    return hasFormChanged.value
+    && $v.value.$invalid ? 'Please enter the organization URL, and at least 1 remote URL, in order to connect Gerrit' : undefined;
+  }
+
+  return 'Please enter the organization URL, and at least 1 remote URL, in order to connect Gerrit';
+});
+
+const syncData = () => {
   if (props.integration?.settings?.remote) {
     form.orgURL = props.integration?.settings.remote.orgURL;
-    // form.user = props.integration?.settings.remote.user;
-    // form.pass = props.integration?.settings.remote.pass;
-    form.repoNames = props.integration?.settings.remote.repoNames;
+    form.repoNames = [...(props.integration?.settings.remote.repoNames || [])];
     form.enableAllRepos = props.integration?.settings.remote.enableAllRepos;
   }
   formSnapshot();
+};
+
+const revertChanges = () => {
+  syncData();
+};
+
+onMounted(() => {
+  syncData();
 });
 
 const addRepoName = () => {
   form.repoNames.push('');
 };
 
-const removeRepoName = (index) => {
+const removeRepoName = (index: number) => {
   form.repoNames.splice(index, 1);
 };
 
+const canClose = (done: (value: boolean) => void) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        revertChanges();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const cancel = () => {
   isVisible.value = false;
 };
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/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-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..f47da4f894 100644
--- a/frontend/src/config/integrations/git/components/git-params.vue
+++ b/frontend/src/config/integrations/git/components/git-params.vue
@@ -1,27 +1,69 @@
 <template>
-  <div>
-    <div class="flex items-center gap-1">
-      <el-popover trigger="hover" placement="top" popper-class="!w-72">
+  <div class="flex items-center gap-1">
+    <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+
+    <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-semibold underline decoration-dotted cursor-default"
+        >
+          {{ nativeRepos.length }}
+          {{ nativeRepos.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 nativeRepos"
+          :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>
+
+    <span v-if="mirroredRepoUrls.length > 0 && nativeRepos.length > 0">/</span>
+
+    <template
+      v-for="(gmKey, idx) of Object.keys(groupedMirroredRepos)"
+      :key="gmKey"
+    >
+      <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"
+            class="text-gray-600 text-2xs flex items-center leading-5 font-semibold underline decoration-dotted cursor-default"
           >
-            <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" }}
+            {{ pluralize('repository', groupedMirroredRepos[gmKey].length, true) }} (via {{ getIntegrationName(gmKey) }})
           </div>
         </template>
 
         <p class="text-gray-400 text-[13px] font-semibold mb-4">
-          Git Remote URLs
+          Repositories
         </p>
         <div class="max-h-44 overflow-auto -my-1 px-1">
           <article
-            v-for="repository of repositories"
+            v-for="repository of groupedMirroredRepos[gmKey]"
             :key="repository"
             class="flex items-center flex-nowrap mb-4 last:mb-0"
           >
-            <lf-svg name="git-repository" class="w-4 h-4 mr-1 flex items-center" />
+            <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
 
             <a
               :href="repository"
@@ -34,14 +76,21 @@
           </article>
         </div>
       </el-popover>
-    </div>
+
+      <span v-if="idx < Object.keys(groupedMirroredRepos).length - 1">/</span>
+    </template>
   </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';
+import { lfIntegrations } from '@/config/integrations';
+import { Platform } from '@/shared/modules/platform/types/Platform';
 
 const props = defineProps({
   integration: {
@@ -50,18 +99,36 @@ const props = defineProps({
   },
 });
 
+const allIntegrations = computed(() => lfIntegrations());
+
 const repositories = ref<string[]>([]);
 
+// Track mirrored repos (sourceIntegrationId != gitIntegrationId)
+const mirroredRepoUrls = ref<string[]>([]);
+const groupedMirroredRepos = ref<{ [key: string]: string[] }>({});
+const nativeRepos = 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);
+      const reposFromMappings = res.map((r) => r.url);
+      repositories.value = reposFromMappings.length > 0 ? reposFromMappings : [...(props.integration.settings?.remotes || [])];
+      groupedMirroredRepos.value = res.filter((r) => r.sourcePlatform !== Platform.GIT).reduce((acc, r) => {
+        acc[r.sourcePlatform] = [...(acc[r.sourcePlatform] || []), r.url];
+        return acc;
+      }, {} as { [key: string]: string[] });
+
+      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 = [];
+      groupedMirroredRepos.value = {};
     });
 };
 
@@ -93,6 +160,8 @@ const removeProtocolAndDomain = (url: string) => {
     return url.replace(/^(https?:\/\/|git@)/, '').replace(/\.git$/, '');
   }
 };
+
+const getIntegrationName = (key: string) => allIntegrations.value[key.replace('-nango', '')]?.name || key;
 </script>
 
 <script lang="ts">
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..d065b0cf7f 100644
--- a/frontend/src/config/integrations/git/components/git-settings-drawer.vue
+++ b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
@@ -2,87 +2,102 @@
   <app-drawer
     v-model="isVisible"
     custom-class="integration-git-drawer"
+    size="600px"
     title="Git"
     pre-title="Integration"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="cancel"
   >
     <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)
-      </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()"
         >
+          + Add remote URL
+        </lf-button>
+
+        <el-form class="mt-2 w-full" @submit.prevent>
           <app-array-input
+            v-for="(remote, ii) of form.remotes"
+            :key="ii"
             v-model="form.remotes[ii]"
-            placeholder="https://github.com/CrowdDotDev/crowd.dev.git"
+            placeholder="Enter remote URL"
+            input-class="is-rounded"
+            class="!items-start"
             :disabled="isMirroredRepo(remote)"
           >
             <template #after>
               <lf-button
-                type="primary-link"
+                type="secondary-link"
                 size="medium"
-                class="w-10 h-10"
+                class="w-10 h-10 mt-2"
                 :disabled="isMirroredRepo(remote)"
                 :class="{ 'opacity-50 cursor-not-allowed': isMirroredRepo(remote) }"
                 @click="!isMirroredRepo(remote) && removeRemote(ii)"
               >
-                <lf-icon name="trash-can" :size="20" />
+                <lf-icon name="circle-xmark" :size="20" />
               </lf-button>
             </template>
           </app-array-input>
-        </el-tooltip>
-      </el-form>
-
-      <lf-button
-        type="primary-link"
-        size="medium"
-        @click="addRemote()"
-      >
-        + Add remote URL
-      </lf-button>
+        </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-neutral-900 font-semibold">
+              Repositories managed by a different integration
+            </div>
+            <div class="text-neutral-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-neutral-900 text-small flex items-center gap-2">
+            <div class="relative">
+              <lf-icon name="book" :size="20" class="text-neutral-400" />
+              <div class="absolute -top-1 -right-1 w-3.5 h-3.5 rounded-full bg-white flex items-center justify-center">
+                <img
+                  :src="getIntegrationImage(mirroredRepo.sourcePlatform)"
+                  :alt="mirroredRepo.sourcePlatform"
+                  class="object-contain w-2.5 h-2.5"
+                />
+              </div>
+            </div>
+            {{ removeProtocolAndDomain(mirroredRepo.url) }}
+          </div>
+        </div>
+      </div>
     </template>
 
     <template #footer>
-      <div>
-        <lf-button
-          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"
-        >
-          {{ integration?.settings?.remotes?.length ? 'Update' : 'Connect' }}
-        </lf-button>
-      </div>
+      <drawer-footer-buttons
+        :integration="props.integration"
+        :is-edit-mode="!!props.integration?.settings?.remotes?.length"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="$v.$invalid || !hasFormChanged || loading"
+        :cancel="cancel"
+        :revert-changes="revertChanges"
+        :connect="connect"
+        :is-disconnect-disabled="mirroredRepos.length > 0"
+        disconnect-tooltip-content="Git can’t be disconnected while it’s mirroring repositories from GitHub, GitLab, or Gerrit integrations."
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import useVuelidate from '@vuelidate/core';
 import {
   computed, onMounted, reactive, ref,
@@ -98,6 +113,12 @@ 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';
+import LfGitSettingsEmpty from '@/config/integrations/git/components/git-settings-empty.vue';
+import AppDrawer from '@/shared/drawer/drawer.vue';
+import { lfIntegrations } from '@/config/integrations';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -120,17 +141,21 @@ const props = defineProps({
 });
 
 const { trackEvent } = useProductTracking();
-
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
+const allIntegrations = computed(() => lfIntegrations());
 const loading = ref(false);
 const form = reactive({
   remotes: [''],
 });
 
+const showEmptyState = ref(!props.integration?.settings?.remotes?.length);
+
 // Track mirrored repos (sourceIntegrationId != gitIntegrationId)
-const mirroredRepoUrls = ref(new Set());
+const mirroredRepos = ref<any[]>([]);
+const mirroredRepoUrls = computed(() => new Set(mirroredRepos.value.map((r: any) => r.url)));
 
 // Track original form state for change detection
-const originalRemotes = ref([]);
+const originalRemotes = ref<string[]>([]);
 const hasFormChanged = computed(() => {
   const currentSorted = [...form.remotes].filter((r) => r).sort().join(',');
   const originalSorted = [...originalRemotes.value].filter((r) => r).sort().join(',');
@@ -156,31 +181,29 @@ const isVisible = computed({
 const logoUrl = git.image;
 
 // Check if a repo is mirrored (managed by another integration)
-const isMirroredRepo = (url) => mirroredRepoUrls.value.has(url);
+const isMirroredRepo = (url: string) => mirroredRepoUrls.value.has(url);
 
 const fetchRepoMappings = () => {
   if (!props.integration?.id) return;
 
   IntegrationService.fetchGitMappings(props.integration)
-    .then((repos) => {
+    .then((repos: any[]) => {
       // 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];
       }
@@ -200,10 +223,25 @@ const addRemote = () => {
   form.remotes.push('');
 };
 
-const removeRemote = (index) => {
+const removeRemote = (index: number) => {
   form.remotes.splice(index, 1);
 };
 
+const canClose = (done: (value: boolean) => void) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        revertChanges();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const cancel = () => {
   isVisible.value = false;
 };
@@ -237,7 +275,7 @@ const connect = async () => {
     });
 };
 
-const errorHandler = (error) => {
+const errorHandler = (error: any) => {
   const errorMessage = error?.response?.data;
   const parsedError = parseDuplicateRepoError(errorMessage, 'There was an error mapping git repositories');
 
@@ -253,9 +291,36 @@ const errorHandler = (error) => {
       });
   }
 };
+
+const revertChanges = () => {
+  form.remotes = [...originalRemotes.value];
+};
+
+const getIntegrationImage = (platform: string) => allIntegrations.value[platform.replace('-nango', '')]?.image;
+
+const removeProtocolAndDomain = (url: string) => {
+  try {
+    const parsedUrl = new URL(url);
+    let path = parsedUrl.pathname;
+
+    // Remove leading slash and trailing .git if present
+    path = path.replace(/^\//, '').replace(/\.git$/, '');
+
+    // For SSH URLs (git@github.com:user/repo.git)
+    if (parsedUrl.protocol === 'ssh:') {
+      const sshParts = url.split(':');
+      path = sshParts[1].replace(/\.git$/, '');
+    }
+
+    return path;
+  } catch (error) {
+    // If URL parsing fails, return the original string
+    return url.replace(/^(https?:\/\/|git@)/, '').replace(/\.git$/, '');
+  }
+};
 </script>
 
-<script>
+<script lang="ts">
 export default {
   name: 'LfGitSettingsDrawer',
 };
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/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/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/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..e0281b05dd 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-dotted 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);
@@ -80,6 +35,7 @@ const mappedRepositories = computed(() => {
   const mapped = reposObj
     ? Object.values(reposObj).map((repo: any) => repo.repoName) || []
     : [];
+
   return mappings.value.filter((mapping) => mapped.includes(repoNameFromUrl(mapping.url)));
 });
 
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..a0b9e07fda 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,38 +1,43 @@
 <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">
-        <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>
-            </div>
-          </div>
-          <lf-button
-            type="secondary-ghost"
-            icon-only
-            @click="isDrawerVisible = false"
-          >
-            <lf-icon name="xmark" />
-          </lf-button>
+  <app-drawer
+    v-model="isDrawerVisible"
+    title="GitHub"
+    size="600px"
+    pre-title="Integration"
+    :show-footer="true"
+    has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
+  >
+    <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 gap-2 bg-brand-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-brand-500" :size="20" />
         </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>
-      </section>
+        <div class="text-xs text-brand-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"
           @add="isAddRepositoryModalOpen = true"
         />
-        <div v-else class="px-6 pt-5">
+        <div v-else>
           <lf-github-settings-mapping
             v-model:repositories="repositories"
             v-model:organizations="organizations"
@@ -42,31 +47,21 @@
           />
         </div>
       </div>
-      <div
-        class="border-t border-gray-100 py-5 px-6 flex justify-end gap-4"
-        style="box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.05)"
-      >
-        <lf-button
-          type="secondary-ghost-light"
-          @click="isDrawerVisible = false"
-        >
-          Cancel
-        </lf-button>
-        <span>
-          <lf-button
-            type="primary"
-            :disabled="
-              $v.$invalid
-                || !repositories.length
-            "
-            @click="connect()"
-          >
-            {{ props.integration ? 'Update settings' : 'Connect' }}
-          </lf-button>
-        </span>
-      </div>
-    </div>
-  </lf-drawer>
+    </template>
+
+    <template #footer>
+      <drawer-footer-buttons
+        :integration="props.integration"
+        :is-edit-mode="!!props.integration"
+        :has-form-changed="hasChanges"
+        :is-loading="loading"
+        :is-submit-disabled="sending || $v.$invalid || !repositories.length"
+        :cancel="() => (isDrawerVisible = false)"
+        :revert-changes="revertChanges"
+        :connect="connect"
+      />
+    </template>
+  </app-drawer>
   <lf-github-settings-add-repository-modal
     v-if="isAddRepositoryModalOpen"
     v-model="isAddRepositoryModalOpen"
@@ -74,15 +69,15 @@
     v-model:repositories="repositories"
     :integration="props.integration"
   />
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script lang="ts" setup>
 import {
   computed, onMounted, ref, watch,
 } from 'vue';
+import isEqual from 'lodash/isEqual';
 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';
 import LfGithubSettingsAddRepositoryModal from '@/config/integrations/github-nango/components/settings/github-settings-add-repository-modal.vue';
@@ -99,6 +94,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,
@@ -107,6 +103,10 @@ 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 LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const props = defineProps<{
   modelValue: boolean;
@@ -119,6 +119,7 @@ const emit = defineEmits<{(e: 'update:modelValue', value: boolean): void }>();
 
 const { doFetch } = mapActions('integration');
 const { trackEvent } = useProductTracking();
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
 
 const isAddRepositoryModalOpen = ref(false);
 
@@ -126,8 +127,16 @@ 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 hasChanges = computed(() => repositories.value.length !== initialRepositories.value.length
+    || !isEqual(repoMappings.value, initialRepoMappings.value));
+
+const loading = ref(false);
+const sending = ref(false);
+
 // Drawer visibility
 const isDrawerVisible = computed({
   get() {
@@ -191,6 +200,7 @@ const buildSettings = (): GitHubSettings => {
 };
 
 const connect = () => {
+  sending.value = true;
   const settings: GitHubSettings = buildSettings();
 
   IntegrationService.githubNangoConnect(
@@ -224,6 +234,9 @@ const connect = () => {
     })
     .catch((error) => {
       errorHandler(error);
+    })
+    .finally(() => {
+      sending.value = false;
     });
 };
 
@@ -246,6 +259,27 @@ const errorHandler = (error: any) => {
   }
 };
 
+const revertChanges = () => {
+  repositories.value = [...initialRepositories.value];
+  organizations.value = [...initialOrganizations.value];
+  repoMappings.value = { ...initialRepoMappings.value };
+};
+
+const canClose = (done: (value: boolean) => void) => {
+  if (hasChanges.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        revertChanges();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const fetchGithubMappings = () => {
   if (!props.integration) return;
   IntegrationService.fetchGitHubMappings(props.integration).then(
@@ -260,6 +294,7 @@ const fetchGithubMappings = () => {
       // Create new objects to ensure no reference sharing
       repoMappings.value = { ...mappings };
       initialRepoMappings.value = { ...mappings };
+      loading.value = false;
     },
   );
 };
@@ -268,6 +303,7 @@ watch(
   () => props.integration,
   (value?: Integration<GitHubSettings>) => {
     if (value) {
+      loading.value = true;
       fetchGithubMappings();
       const { orgs } = value.settings;
       organizations.value = orgs
@@ -293,6 +329,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-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/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-nango/config.ts b/frontend/src/config/integrations/github-nango/config.ts
index d1e754bf81..06012ae2a0 100644
--- a/frontend/src/config/integrations/github-nango/config.ts
+++ b/frontend/src/config/integrations/github-nango/config.ts
@@ -1,9 +1,10 @@
 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';
+// 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 GithubMappedRepos from '@/config/integrations/github/components/github-mapped-repos.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;
 
@@ -11,8 +12,7 @@ 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: GithubParams,
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..13c5f6dcf1 100644
--- a/frontend/src/config/integrations/github/components/github-connect.vue
+++ b/frontend/src/config/integrations/github/components/github-connect.vue
@@ -1,38 +1,113 @@
 <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"
+      :visibility="isDropdownVisible"
+      @update:visibility="isDropdownVisible = $event"
+    >
+      <template #trigger>
+        <lf-button type="outline" :class="{ 'is-active': isDropdownVisible }">
+          <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-neutral-900">
+              GitHub - New integration
+            </div>
+            <p class="text-xs text-neutral-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-neutral-900">
+              GitHub - Old integration
+            </div>
+            <p class="text-xs text-neutral-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 isDropdownVisible = ref(false);
+const isFinishingModalOpen = ref(false);
+
+const { doGithubConnect } = mapActions('integration');
+
+const finalizeGithubConnect = () => {
+  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(() => {
+  finalizeGithubConnect();
+});
 </script>
 
 <script lang="ts">
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..60ee52d806 100644
--- a/frontend/src/config/integrations/github/components/github-mapped-repos.vue
+++ b/frontend/src/config/integrations/github/components/github-mapped-repos.vue
@@ -2,47 +2,30 @@
   <!-- 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>
-        <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-neutral-600 text-2xs flex items-center leading-5">
+      <lf-icon name="arrows-rotate" :size="16" class="mr-2" />
+      Syncing GitHub data from <span class="font-semibold px-1"> {{ projectNameDisplay }} </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-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>
+      <lf-github-mappings-display :mappings="projectReposAsMappings">
+        <template #trigger>
+          <span class="underline decoration-dotted cursor-default">
+            {{ pluralize("repository", projectReposAsMappings.length, true) }}
+          </span>
+        </template>
+      </lf-github-mappings-display>
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed } 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 LfGithubMappingsDisplay from '@/config/integrations/github/components/github-mappings-display.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
 import pluralize from 'pluralize';
 
 const props = defineProps<{
@@ -50,13 +33,40 @@ const props = defineProps<{
 }>();
 
 const mappedReposWithOtherProject = ref<{
-  project: string;
+  projects: {
+    segmentName: string;
+    url: string;
+  }[];
   repositories: {
     url: string;
   }[];
 }>();
 
-const repoNameFromUrl = (url: string) => url.split('/').at(-1);
+const projectReposAsMappings = computed<IntegrationMapping[]>(() => {
+  if (!mappedReposWithOtherProject.value?.projects) return [];
+
+  return mappedReposWithOtherProject.value?.projects.map((proj) => ({
+    url: proj.url,
+    sourcePlatform: '',
+    segment: {
+      id: '',
+      name: proj.segmentName,
+    },
+  }));
+});
+
+const projectNames = computed(() => mappedReposWithOtherProject.value?.projects.reduce((acc, proj) => {
+  acc[proj.segmentName] = proj.segmentName;
+  return acc;
+}, {} as { [key: string]: string }));
+
+const projectNameDisplay = computed(() => {
+  const count = projectNames.value ? Object.keys(projectNames.value).length : 0;
+
+  if (count > 1) return `${count} projects`;
+
+  return count === 1 ? `${mappedReposWithOtherProject.value?.projects[0].segmentName} project` : 'projects';
+});
 
 onMounted(() => {
   IntegrationService.fetchGitHubMappedRepos(props.segmentId).then((res) => {
@@ -67,6 +77,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
new file mode 100644
index 0000000000..431d182ad7
--- /dev/null
+++ b/frontend/src/config/integrations/github/components/github-mappings-display.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="flex items-center gap-1">
+    <el-popover v-if="mappings.length > 0" trigger="hover" placement="top" popper-class="!w-auto">
+      <template #reference>
+        <slot name="trigger">
+          <div
+            class="text-neutral-600 text-2xs flex items-center leading-5"
+          >
+            <lf-icon name="book" :size="16" class="text-neutral-600 mr-2" />
+            <span class="font-semibold underline decoration-dotted cursor-default">
+              {{ pluralize("repository", Object.keys(mappings).length, true) }}
+            </span>
+          </div>
+        </slot>
+      </template>
+
+      <p class="text-neutral-400 text-sm font-semibold mb-4">
+        <slot name="popupTitle" />
+      </p>
+      <div class="-my-1 px-1 max-h-44 overflow-auto">
+        <div v-for="group of Object.keys(groupedMappings)" :key="group" class="mb-2.5">
+          <div class="text-neutral-400 text-sm font-semibold mb-2">
+            {{ group }}
+          </div>
+          <article
+            v-for="mapping of groupedMappings[group]"
+            :key="mapping.url"
+            class="py-2 flex items-center flex-nowrap"
+          >
+            <img
+              :src="gitRepositoryIcon"
+              width="16"
+              height="16"
+              class="text-neutral-600 mr-2"
+              alt="Github repository"
+            />
+            <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>
+          </article>
+        </div>
+      </div>
+    </el-popover>
+    <slot v-else name="trigger">
+      <div
+        class="text-neutral-600 text-2xs flex items-center leading-5"
+      >
+        <lf-icon name="book" :size="16" class="text-neutral-600 mr-1" />
+        <span class="font-semibold underline decoration-dotted cursor-default">
+          {{ pluralize("repository", Object.keys(mappings).length, true) }}
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import pluralize from 'pluralize';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
+
+const gitRepositoryIcon = new URL(
+  '@/assets/images/integrations/git-repository-line.svg',
+  import.meta.url,
+).href;
+
+const props = defineProps<{
+  mappings: IntegrationMapping[];
+}>();
+
+const repoNameFromUrl = (url: string) => url.split('/').at(-1);
+
+const groupedMappings = computed(() => props.mappings.reduce((acc, mapping) => {
+  acc[mapping.segment.name] = [...(acc[mapping.segment.name] || []), mapping];
+  return acc;
+}, {} as { [key: string]: IntegrationMapping[] }));
+</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..942c81718f 100644
--- a/frontend/src/config/integrations/github/components/github-params.vue
+++ b/frontend/src/config/integrations/github/components/github-params.vue
@@ -1,59 +1,18 @@
 <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 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([]);
-
-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-version-tag.vue b/frontend/src/config/integrations/github/components/github-version-tag.vue
new file mode 100644
index 0000000000..164f2e09b8
--- /dev/null
+++ b/frontend/src/config/integrations/github/components/github-version-tag.vue
@@ -0,0 +1,28 @@
+<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>
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..19ca04d0e9 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
@@ -6,6 +6,8 @@
     pre-title="Integration"
     :show-footer="true"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="isDrawerVisible = false"
   >
     <template #beforeTitle>
@@ -15,14 +17,26 @@
         alt="GitHub logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="github" />
+    </template>
     <template #content>
+      <div class="flex gap-2 bg-brand-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-brand-500" :size="20" />
+        </div>
+        <div class="text-xs text-brand-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
           v-if="owner"
           class="border border-gray-200 rounded-md py-4 px-5 mb-6"
         >
-          <p class="text-2xs font-medium text-gray-400 mb-1">
+          <p class="text-2xs font-medium text-neutral-400 mb-1">
             Connected organization
           </p>
           <div class="flex items-center">
@@ -57,7 +71,7 @@
                 <span class="text-xs font-normal"> Bulk selection </span>
               </div>
             </div>
-            <p class="text-2xs leading-4.5 text-gray-500">
+            <p class="text-2xs leading-4.5 text-neutral-500">
               Select the subproject you want to map with each connected
               repository.
             </p>
@@ -85,9 +99,10 @@
             v-model="search"
             clearable
             placeholder="Search repositories..."
+            class="is-rounded"
           >
             <template #prefix>
-              <lf-icon name="magnifying-glass" class="text-gray-400" />
+              <lf-icon name="magnifying-glass" class="text-neutral-400" />
             </template>
           </el-input>
         </section>
@@ -97,14 +112,14 @@
           <div class="flex border-b border-gray-200 items-center h-8">
             <div class="w-1/2 pr-4">
               <p
-                class="text-3xs uppercase text-gray-400 font-semibold tracking-1"
+                class="text-3xs uppercase text-neutral-400 font-semibold tracking-1"
               >
                 REPOSITORY
               </p>
             </div>
             <div class="w-1/2 pr-4">
               <p
-                class="text-3xs uppercase text-gray-400 font-semibold tracking-1"
+                class="text-3xs uppercase text-neutral-400 font-semibold tracking-1"
               >
                 SUB-PROJECT
               </p>
@@ -117,7 +132,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-neutral-400 mr-2" />
                 <p class="text-2xs leading-5 flex-grow truncate">
                   /{{ repo.name }}
                 </p>
@@ -134,7 +149,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"
@@ -156,12 +171,12 @@
               name="spinner"
               type="solid"
               :size="16"
-              class="text-gray-400 animate-spin"
+              class="text-neutral-400 animate-spin"
             />
           </div>
         </section>
         <section v-else>
-          <p class="text-center text-sm text-gray-500 mb-4">
+          <p class="text-center text-sm text-neutral-500 mb-4">
             No repositories found
           </p>
         </section>
@@ -169,25 +184,16 @@
     </template>
 
     <template #footer>
-      <div style="flex: auto">
-        <lf-button
-          type="bordered"
-          size="medium"
-          class="mr-3"
-          @click="isDrawerVisible = false"
-        >
-          Cancel
-        </lf-button>
-        <lf-button
-          type="primary"
-          size="medium"
-          :disabled="sending || $v.$invalid"
-          :loading="sending"
-          @click="connect()"
-        >
-          Connect
-        </lf-button>
-      </div>
+      <drawer-footer-buttons
+        :integration="props.integration"
+        :is-edit-mode="!!props.integration?.settings"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="sending || $v.$invalid"
+        :cancel="() => (isDrawerVisible = false)"
+        :revert-changes="revertChanges"
+        :connect="connect"
+      />
     </template>
   </app-drawer>
   <app-github-settings-bulk-select
@@ -196,6 +202,7 @@
     :subprojects="subprojects"
     @apply="bulkApply"
   />
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script lang="ts" setup>
@@ -220,11 +227,13 @@ 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';
 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const props = defineProps<{
   modelValue: boolean;
@@ -234,6 +243,7 @@ const props = defineProps<{
 const emit = defineEmits<{(e: 'update:modelValue', value: boolean): void }>();
 
 const { trackEvent } = useProductTracking();
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
 
 const route = useRoute();
 const router = useRouter();
@@ -302,6 +312,17 @@ const rules = computed(() => repos.value.reduce(
 
 const $v = useVuelidate(rules, form);
 
+const hasFormChanged = computed(() => {
+  const original = repos.value.reduce(
+    (a: Record<string, any>, b: any) => ({
+      ...a,
+      [b.url]: props.integration.segmentId,
+    }),
+    {},
+  );
+  return JSON.stringify(form.value) !== JSON.stringify(original);
+});
+
 // Connecting
 const sending = ref(false);
 
@@ -390,6 +411,31 @@ const fetchSubProjects = () => {
     });
 };
 
+const revertChanges = () => {
+  form.value = repos.value.reduce(
+    (a: Record<string, any>, b: any) => ({
+      ...a,
+      [b.url]: props.integration.segmentId,
+    }),
+    {},
+  );
+};
+
+const canClose = (done: (value: boolean) => void) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        revertChanges();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 onMounted(() => {
   fetchSubProjects();
 });
diff --git a/frontend/src/config/integrations/github/config.ts b/frontend/src/config/integrations/github/config.ts
index 4f77eecc2a..58fb055d69 100644
--- a/frontend/src/config/integrations/github/config.ts
+++ b/frontend/src/config/integrations/github/config.ts
@@ -1,5 +1,5 @@
 import { IntegrationConfig } from '@/config/integrations';
-import GithubConnect from './components/connect/github-connect.vue';
+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';
@@ -11,8 +11,7 @@ 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,
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/gitlab/components/gitlab-params.vue b/frontend/src/config/integrations/gitlab/components/gitlab-params.vue
index f3f193664c..0e1b459878 100644
--- a/frontend/src/config/integrations/gitlab/components/gitlab-params.vue
+++ b/frontend/src/config/integrations/gitlab/components/gitlab-params.vue
@@ -4,7 +4,7 @@
       <el-popover trigger="hover" placement="top" popper-class="!w-auto">
         <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-semibold"
           >
             <lf-svg name="git-repository" class="w-4 h-4 !text-gray-600 mr-1 flex items-center" />
             {{ pluralize("repository", Object.keys(mappings).length, true) }}
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..297a2e5249 100644
--- a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
+++ b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
@@ -6,12 +6,26 @@
     pre-title="Integration"
     :show-footer="true"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="isDrawerVisible = false"
   >
     <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 class="flex gap-2 bg-brand-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-brand-500" :size="20" />
+        </div>
+        <div class="text-xs text-brand-800">
+          Connected repositories are also synced through Git, which automatically mirrors your
+          GitLab 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">
@@ -156,28 +170,16 @@
     </template>
 
     <template #footer>
-      <div style="flex: auto">
-        <lf-button type="bordered" size="medium" class="mr-3" @click="isDrawerVisible = false">
-          Cancel
-        </lf-button>
-        <el-tooltip
-          content="Select at least one repository in order to connect GitLab"
-          placement="top"
-          :disabled="!(sending || $v.$invalid || !hasSelectedRepos)"
-        >
-          <span>
-            <lf-button
-              type="primary"
-              size="medium"
-              :disabled="sending || $v.$invalid || !hasSelectedRepos"
-              :loading="sending"
-              @click="connect()"
-            >
-              Connect
-            </lf-button>
-          </span>
-        </el-tooltip>
-      </div>
+      <drawer-footer-buttons
+        :integration="props.integration"
+        :is-edit-mode="!!props.integration"
+        :has-form-changed="hasFormChanged"
+        :is-loading="false"
+        :is-submit-disabled="sending || $v.$invalid || !hasSelectedRepos"
+        :cancel="() => (isDrawerVisible = false)"
+        :revert-changes="revertChanges"
+        :connect="connect"
+      />
     </template>
   </app-drawer>
   <app-gitlab-settings-bulk-select
@@ -187,6 +189,7 @@
     :mapped-repos="form"
     @apply="bulkApply"
   />
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script lang="ts" setup>
@@ -206,9 +209,11 @@ import { mapActions } from '@/shared/vuex/vuex.helpers';
 import { showIntegrationProgressNotification } from '@/modules/integration/helpers/integration-progress-notification';
 import LfSvg from '@/shared/svg/svg.vue';
 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 DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 import AppGitlabSettingsBulkSelect from './gitlab-settings-bulk-select.vue';
 
 const props = defineProps<{
@@ -221,6 +226,7 @@ const props = defineProps<{
 const emit = defineEmits<{(e: 'update:modelValue', value: boolean): void }>();
 
 const router = useRouter();
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
 
 // Store
 const { doFetch } = mapActions('integration');
@@ -297,6 +303,17 @@ const form = ref<Record<string, string>>(
   ),
 );
 
+const hasFormChanged = computed(() => {
+  const original = allProjects.value.reduce(
+    (a: Record<string, any>, b: any) => ({
+      ...a,
+      [b.url]: props.integration.segmentId,
+    }),
+    {},
+  );
+  return JSON.stringify(form.value) !== JSON.stringify(original);
+});
+
 const rules = computed(() => allProjects.value.reduce(
   (a: Record<string, any>, b: any) => ({
     ...a,
@@ -323,6 +340,28 @@ onMounted(() => {
   });
 });
 
+const revertChanges = () => {
+  allProjects.value.forEach((project) => {
+    selectedRepos.value[project.web_url] = false;
+    form.value[project.web_url] = props.integration.segmentId;
+  });
+};
+
+const canClose = (done: (value: boolean) => void) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        revertChanges();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 // Update selected repos
 const updateSelectedRepos = () => {
   // This function will be called whenever a checkbox is toggled
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/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/groupsio/components/groupsio-settings-drawer.vue b/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
index 8b33a2fc18..625ff57f87 100644
--- a/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
+++ b/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
@@ -7,11 +7,16 @@
     pre-title="Integration"
     :show-footer="true"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="handleCancel()"
   >
     <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">
@@ -241,28 +246,19 @@
     </template>
 
     <template #footer>
-      <div style="flex: auto">
-        <lf-button
-          type="secondary-gray"
-          size="medium"
-          class="mr-3"
-          :disabled="loading"
-          @click="handleCancel"
-        >
-          Cancel
-        </lf-button>
-        <lf-button
-          type="primary"
-          size="medium"
-          :disabled="cantConnect || !hasSelectedGroups"
-          :loading="loading"
-          @click="connect()"
-        >
-          {{ integration?.settings?.email ? "Update" : "Connect" }}
-        </lf-button>
-      </div>
+      <drawer-footer-buttons
+        :integration="props.integration"
+        :is-edit-mode="!!integration?.settings?.email"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="cantConnect || !hasSelectedGroups"
+        :cancel="handleCancel"
+        :revert-changes="revertChanges"
+        :connect="connect"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script setup>
@@ -287,6 +283,9 @@ 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const { doGroupsioConnect } = mapActions('integration');
 
@@ -322,6 +321,7 @@ const form = reactive({
 });
 
 const { trackEvent } = useProductTracking();
+const changesConfirmationModalRef = ref(null);
 
 const isValidating = ref(false);
 const isVerificationEnabled = ref(false);
@@ -494,6 +494,21 @@ const isVisible = computed({
   },
 });
 
+const canClose = (done) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges) => {
+      if (discardChanges) {
+        revertChanges();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const handleCancel = () => {
   formSnapshot();
   emit('update:modelValue', false);
@@ -510,23 +525,27 @@ const handleCancel = () => {
     errorMessage.value = '';
     $v.value.$reset();
   } else {
-    form.email = props.integration?.settings?.email;
-    form.password = '';
-    form.twoFactorCode = '';
-    form.groups = props?.integration?.settings?.groups
-      ? [...(props.integration?.settings.groups || [])]
-      : [{}];
-    form.groupsValidationState = new Array(form.groups.length).fill(true);
-    cookie.value = props?.integration?.settings?.token;
-    isAPIConnectionValid.value = true;
-    isVerifyingAccount.value = false;
-    accountVerificationFailed.value = false;
-    errorMessage.value = '';
-    $v.value.$reset();
+    revertChanges();
   }
   userSubscriptions.value = [];
 };
 
+const revertChanges = () => {
+  form.email = props.integration?.settings?.email;
+  form.password = '';
+  form.twoFactorCode = '';
+  form.groups = props?.integration?.settings?.groups
+    ? [...(props.integration?.settings.groups || [])]
+    : [{}];
+  form.groupsValidationState = new Array(form.groups.length).fill(true);
+  cookie.value = props?.integration?.settings?.token;
+  isAPIConnectionValid.value = true;
+  isVerifyingAccount.value = false;
+  accountVerificationFailed.value = false;
+  errorMessage.value = '';
+  $v.value.$reset();
+};
+
 onMounted(() => {
   if (props.integration?.settings?.email) {
     form.email = props?.integration?.settings?.email;
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/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/hackernews/components/hackernews-settings-drawer.vue b/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
index 56f0ae30fc..78deff031f 100644
--- a/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
+++ b/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
@@ -3,13 +3,19 @@
     v-model="isVisible"
     custom-class="integration-hackerNews-drawer"
     title="Hacker News"
+    size="600px"
     pre-title="Integration"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="cancel"
   >
     <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">
@@ -79,33 +85,24 @@
       </el-form>
     </template>
     <template #footer>
-      <div>
-        <lf-button
-          type="secondary-gray"
-          size="medium"
-          class="mr-4"
-          :disabled="loading"
-          @click="cancel"
-        >
-          Cancel
-        </lf-button>
-        <lf-button
-          id="devConnect"
-          type="primary"
-          size="medium"
-          :disabled="connectDisabled || loading"
-          :loading="loading"
-          @click="save"
-        >
-          Connect
-        </lf-button>
-      </div>
+      <drawer-footer-buttons
+        :integration="integration"
+        :is-edit-mode="!!integration?.settings?.urls"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="connectDisabled || loading"
+        :cancel="cancel"
+        :revert-changes="revertChanges"
+        :connect="save"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script>
 import { mapActions } from 'vuex';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 import hackernews from '@/config/integrations/hackernews/config';
 import isUrl from '@/utils/isUrl';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
@@ -116,12 +113,19 @@ 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
 
 export default {
   name: 'LfHackernewsSettingsDrawer',
   components: {
     LfIcon,
     LfButton,
+    AppDrawer,
+    DrawerDescription,
+    DrawerFooterButtons,
+    ChangesConfirmationModal,
   },
   props: {
     integration: {
@@ -149,9 +153,23 @@ export default {
       urls: [],
       keywords: [],
       loading: false,
+      changesConfirmationModalRef: null,
     };
   },
   computed: {
+    hasFormChanged() {
+      const validUrls = this.urls.filter((u) => !!u.url);
+      const validKeywords = this.keywords.filter((k) => !!k);
+      const originalUrls = this.integration?.settings?.urls || [];
+      const originalKeywords = this.integration?.settings?.keywords || [];
+
+      if (validUrls.length !== originalUrls.length) return true;
+      if (validKeywords.length !== originalKeywords.length) return true;
+      if (!validUrls.every((o) => originalUrls.includes(o.url))) return true;
+      if (!validKeywords.every((k) => originalKeywords.includes(k))) return true;
+
+      return false;
+    },
     maxId() {
       return this.urls.length;
     },
@@ -216,6 +234,21 @@ export default {
       doHackerNewsConnect: 'integration/doHackerNewsConnect',
     }),
 
+    canClose(done) {
+      if (this.hasFormChanged) {
+        this.$refs.changesConfirmationModalRef?.open().then((discardChanges) => {
+          if (discardChanges) {
+            this.revertChanges();
+            done(false);
+          } else {
+            done(true);
+          }
+        });
+      } else {
+        done(false);
+      }
+    },
+
     toggle() {
       this.isVisible = !this.isVisible;
     },
@@ -232,6 +265,11 @@ export default {
       }
     },
 
+    revertChanges() {
+      this.syncData();
+      this.keywords = this.integration?.settings.keywords;
+    },
+
     addNewUrl(url) {
       this.urls.push({
         id: this.maxId + 1,
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/index.ts b/frontend/src/config/integrations/index.ts
index d7f2f0db7e..452aaad367 100644
--- a/frontend/src/config/integrations/index.ts
+++ b/frontend/src/config/integrations/index.ts
@@ -52,6 +52,8 @@ export const lfIntegrations: (useGitHubNango?: boolean) => Record<string, Integr
 ) => ({
   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,
 });
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/jira/components/jira-settings-drawer.vue b/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
index c18a785f6c..ec348a0e90 100644
--- a/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
+++ b/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
@@ -1,17 +1,21 @@
 <template>
   <app-drawer
     v-model="isVisible"
-    custom-class="integration-jira-drawer"
     title="Jira"
     size="600px"
     pre-title="Integration"
     :show-footer="true"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="cancel"
   >
     <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">
@@ -126,29 +130,19 @@
     </template>
 
     <template #footer>
-      <div>
-        <lf-button
-          type="secondary-gray"
-          size="medium"
-          class="mr-4"
-          :disabled="loading"
-          @click="cancel"
-        >
-          Cancel
-        </lf-button>
-        <lf-button
-          id="jiraConnect"
-          type="primary"
-          size="medium"
-          :disabled="$v.$invalid || !hasFormChanged || loading"
-          :loading="loading"
-          @click="connect"
-        >
-          {{ integration?.settings?.url ? "Update" : "Connect" }}
-        </lf-button>
-      </div>
+      <drawer-footer-buttons
+        :integration="integration"
+        :is-edit-mode="!!integration?.settings?.url"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="$v.$invalid || !hasFormChanged || loading"
+        :cancel="cancel"
+        :revert-changes="revertChanges"
+        :connect="connect"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script setup lang="ts">
@@ -166,6 +160,9 @@ 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
@@ -176,12 +173,13 @@ const props = defineProps<{
 }>();
 
 const loading = ref(false);
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
 const form = reactive({
   jiraURL: '',
   apiToken: '',
   username: '',
   personalAccessToken: '',
-  projects: [],
+  projects: [] as string[],
 });
 
 const rules = {
@@ -208,16 +206,24 @@ const isVisible = computed({
 });
 const logoUrl = jira.image;
 
-onMounted(() => {
+const syncData = () => {
   if (props.integration?.settings?.url) {
     form.jiraURL = props.integration?.settings.url;
     form.personalAccessToken = props.integration?.settings.auth.personalAccessToken;
     form.username = props.integration?.settings.auth.username;
     form.apiToken = props.integration?.settings.auth.apiToken;
-    form.projects = props.integration?.settings?.projects;
+    form.projects = [...(props.integration?.settings?.projects || [])];
     isAPIConnectionValid.value = true;
   }
   formSnapshot();
+};
+
+const revertChanges = () => {
+  syncData();
+};
+
+onMounted(() => {
+  syncData();
 });
 
 const addProject = () => {
@@ -232,6 +238,21 @@ const cancel = () => {
   isVisible.value = false;
 };
 
+const canClose = (done: (value: boolean) => void) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        revertChanges();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const onBlurJiraURL = () => {
   $v.value.jiraURL.$touch();
   canVerify();
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/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/linkedin/components/linkedin-settings-drawer.vue b/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
index 5352d47035..89e0d865c9 100644
--- a/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
+++ b/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
@@ -6,6 +6,8 @@
     size="600px"
     pre-title="Integration"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="isVisible = false"
   >
     <template #beforeTitle>
@@ -15,6 +17,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"
@@ -64,45 +69,19 @@
     </template>
 
     <template #footer>
-      <div
-        class="flex grow items-center"
-        :class="
-          hasFormChanged ? 'justify-between' : 'justify-end'
-        "
-      >
-        <lf-button
-          v-if="hasFormChanged"
-          type="primary-link"
-          @click="doReset"
-        >
-          <lf-icon name="arrow-turn-left" :size="16" />
-          <span>Reset changes</span>
-        </lf-button>
-        <div class="flex gap-4">
-          <lf-button
-            type="secondary-gray"
-            size="medium"
-            @click="isVisible = false"
-          >
-            Cancel
-          </lf-button>
-          <lf-button
-            type="primary"
-            size="medium"
-            :disabled="!hasFormChanged || loading"
-            :loading="loading"
-            @click="hasFormChanged ? connect() : undefined"
-          >
-            {{
-              integration.settings?.organizations.length > 0
-                ? 'Update'
-                : 'Connect'
-            }}
-          </lf-button>
-        </div>
-      </div>
+      <drawer-footer-buttons
+        :integration="integration"
+        :is-edit-mode="integration.settings?.organizations.length > 0"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="!hasFormChanged || loading"
+        :cancel="() => (isVisible = false)"
+        :revert-changes="doReset"
+        :connect="hasFormChanged ? connect : () => {}"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script setup lang="ts">
@@ -119,7 +98,9 @@ import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const store = useStore();
 
@@ -131,6 +112,7 @@ const props = defineProps<{
 }>();
 
 const { trackEvent } = useProductTracking();
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
 
 const emit = defineEmits(['update:modelValue']);
 const organizations = computed(
@@ -167,6 +149,21 @@ const doReset = () => {
     : null;
 };
 
+const canClose = (done: (value: boolean) => void) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        doReset();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const connect = async () => {
   loading.value = true;
 
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/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/reddit/components/reddit-settings-drawer.vue b/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
index 58ef62fb1a..e27bc00556 100644
--- a/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
+++ b/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
@@ -6,6 +6,8 @@
     size="600px"
     pre-title="Integration"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="isVisible = false"
   >
     <template #beforeTitle>
@@ -15,6 +17,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"
@@ -73,45 +78,19 @@
     </template>
 
     <template #footer>
-      <div
-        class="flex grow items-center"
-        :class="
-          hasFormChanged ? 'justify-between' : 'justify-end'
-        "
-      >
-        <lf-button
-          v-if="hasFormChanged"
-          type="primary-link"
-          size="medium"
-          @click="doReset"
-        >
-          <lf-icon name="arrow-turn-left" :size="16" />
-          <span>Reset changes</span>
-        </lf-button>
-        <div class="flex gap-4">
-          <lf-button
-            type="secondary-gray"
-            size="medium"
-            @click="isVisible = false"
-          >
-            Cancel
-          </lf-button>
-          <lf-button
-            type="primary"
-            size="medium"
-            :disabled="!hasFormChanged || connectDisabled"
-            @click="hasFormChanged ? connect() : undefined"
-          >
-            {{
-              integration?.settings?.subreddits.length > 0
-                ? 'Update'
-                : 'Connect'
-            }}
-          </lf-button>
-        </div>
-      </div>
+      <drawer-footer-buttons
+        :integration="integration"
+        :is-edit-mode="integration?.settings?.subreddits.length > 0"
+        :has-form-changed="hasFormChanged"
+        :is-loading="false"
+        :is-submit-disabled="!hasFormChanged || connectDisabled"
+        :cancel="() => (isVisible = false)"
+        :revert-changes="doReset"
+        :connect="hasFormChanged ? connect : () => {}"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script setup lang="ts">
@@ -134,6 +113,9 @@ 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const store = useStore();
 
@@ -153,6 +135,7 @@ const subreddits = props.integration?.settings?.subreddits.map((i: any) => ({
 })) || [{ value: '', loading: false }];
 
 const { trackEvent } = useProductTracking();
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
 
 const model = ref(JSON.parse(JSON.stringify(subreddits)));
 
@@ -189,6 +172,21 @@ const doReset = () => {
   model.value = JSON.parse(JSON.stringify(subreddits));
 };
 
+const canClose = (done: (value: boolean) => void) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        doReset();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const handleSubredditValidation = async (index: number) => {
   try {
     let subreddit = model.value[index].value;
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/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/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/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/stackoverflow/components/stackoverflow-settings-drawer.vue b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
index a3eff6c8be..96bdfe3734 100644
--- a/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
+++ b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
@@ -6,6 +6,8 @@
     size="600px"
     pre-title="Integration"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="isVisible = false"
   >
     <template #beforeTitle>
@@ -15,6 +17,9 @@
         alt="Stack Overflow logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="stackoverflow" />
+    </template>
     <template #content>
       <el-form
         label-position="top"
@@ -125,55 +130,24 @@
     </template>
 
     <template #footer>
-      <div
-        class="flex grow items-center"
-        :class="
-          hasFormChanged ? 'justify-between' : 'justify-end'
-        "
-      >
-        <lf-button
-          v-if="hasFormChanged"
-          type="primary-link"
-          size="medium"
-          @click="doReset"
-        >
-          <lf-icon name="arrow-turn-left" :size="16" />
-          <span>Reset changes</span>
-        </lf-button>
-        <div class="flex gap-4">
-          <lf-button
-            type="secondary-gray"
-            size="medium"
-            @click="doCancel"
-          >
-            Cancel
-          </lf-button>
-          <lf-button
-            type="primary"
-            size="medium"
-            :disabled="!hasFormChanged || connectDisabled"
-            :loading="isVolumeUpdating"
-            @click="
-              hasFormChanged && !connectDisabled
-                ? connect()
-                : undefined
-            "
-          >
-            {{
-              integration?.settings?.tags.length > 0
-                ? 'Update'
-                : 'Connect'
-            }}
-          </lf-button>
-        </div>
-      </div>
+      <drawer-footer-buttons
+        :integration="integration"
+        :is-edit-mode="integration?.settings?.tags.length > 0"
+        :has-form-changed="hasFormChanged"
+        :is-loading="isVolumeUpdating"
+        :is-submit-disabled="!hasFormChanged || connectDisabled"
+        :cancel="doCancel"
+        :revert-changes="doReset"
+        :connect="hasFormChanged ? connect : () => {}"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script setup>
 import {
-  computed, defineEmits, defineProps, ref, watch,
+  computed, ref, watch,
 } from 'vue';
 import { useThrottleFn } from '@vueuse/core';
 import { useStore } from 'vuex';
@@ -187,11 +161,15 @@ 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const MAX_STACK_OVERFLOW_QUESTIONS_PER_TAG = 350000;
 const MAX_STACK_OVERFLOW_QUESTIONS_FOR_KEYWORDS = 1100;
 
 const { trackEvent } = useProductTracking();
+const changesConfirmationModalRef = ref(null);
 
 const store = useStore();
 
@@ -355,6 +333,21 @@ const doCancel = () => {
   doReset();
 };
 
+const canClose = (done) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges) => {
+      if (discardChanges) {
+        doReset();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const handleTagValidation = async (index) => {
   try {
     const tag = model.value[index].value;
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/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/integrations/twitter/components/twitter-settings-drawer.vue b/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
index 2896866d45..96c7001f8e 100644
--- a/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
+++ b/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
@@ -7,8 +7,13 @@
     pre-title="Integration"
     :pre-title-img-src="logoUrl"
     pre-title-img-alt="X/Twitter logo"
+    close-on-click-modal="true"
+    :close-function="canClose"
     @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">
@@ -27,42 +32,19 @@
     </template>
 
     <template #footer>
-      <div
-        class="flex grow items-center"
-        :class="hasFormChanged ? 'justify-between' : 'justify-end'
-        "
-      >
-        <lf-button
-          v-if="hasFormChanged"
-          type="primary-link"
-          size="medium"
-          @click="doReset"
-        >
-          <lf-icon name="arrow-turn-left" :size="16" />
-          <span>Reset changes</span>
-        </lf-button>
-        <div class="flex gap-4">
-          <lf-button
-            type="bordered"
-            size="medium"
-            @click="isVisible = false"
-          >
-            Cancel
-          </lf-button>
-          <lf-button
-            type="primary"
-            size="medium"
-            :disabled="!hasFormChanged"
-            :href="hasFormChanged
-              ? computedConnectUrl
-              : undefined"
-          >
-            Update
-          </lf-button>
-        </div>
-      </div>
+      <drawer-footer-buttons
+        :integration="integration"
+        :is-edit-mode="integration.settings?.hashtags > 0"
+        :has-form-changed="hasFormChanged"
+        :is-loading="false"
+        :is-submit-disabled="!hasFormChanged"
+        :cancel="() => (isVisible = false)"
+        :revert-changes="doReset"
+        :connect="connect"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script setup>
@@ -76,9 +58,11 @@ import isEqual from 'lodash/isEqual';
 import { FormSchema } from '@/shared/form/form-schema';
 import StringField from '@/shared/fields/string-field';
 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';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const props = defineProps({
   modelValue: {
@@ -100,6 +84,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['update:modelValue']);
+const changesConfirmationModalRef = ref(null);
 
 const getHashtags = () => props.integration.settings?.hashtags || [];
 
@@ -155,11 +140,32 @@ const computedConnectUrl = computed(() => {
   return `${getConnectUrl()}${encodedHashtags}`;
 });
 
+const connect = () => {
+  if (hasFormChanged.value) {
+    window.open(computedConnectUrl.value, '_self');
+  }
+};
+
 const doReset = () => {
   model.value = formSchema.value.initialValues({
     hashtag: parsedHashtags.value,
   });
 };
+
+const canClose = (done) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges) => {
+      if (discardChanges) {
+        doReset();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
 </script>
 
 <script>
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
new file mode 100644
index 0000000000..350398497c
--- /dev/null
+++ b/frontend/src/config/links.ts
@@ -0,0 +1,25 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+export const links = {
+  integrations: 'https://docs.linuxfoundation.org/lfx/community-management/integrations',
+  integrationLinks: {
+    github: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/github-integration',
+    git: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/git-integration',
+    groupsio: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/groups.io',
+    confluence: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/confluence',
+    jira: 'https://docs.linuxfoundation.org/lfx/community-management/integrations',
+    slack: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/slack',
+    discord: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/discord-integration',
+    linkedin: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/linkedin-integration',
+    twitter: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/x-twitter-integration',
+    reddit: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/reddit-integration',
+    hackernews: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/hacker-news-integration',
+    stackoverflow:
+      'https://docs.linuxfoundation.org/lfx/community-management/integrations/stack-overflow',
+    gitlab: 'https://docs.linuxfoundation.org/lfx/community-management/integrations',
+    gerrit: 'https://docs.linuxfoundation.org/lfx/community-management/integrations/gerrit',
+    discourse: 'https://docs.linuxfoundation.org/lfx/community-management/integrations',
+    devto: 'https://docs.linuxfoundation.org/lfx/community-management/integrations',
+  },
+};
diff --git a/frontend/src/modules/admin/modules/integration/components/changes-confirmation-modal.vue b/frontend/src/modules/admin/modules/integration/components/changes-confirmation-modal.vue
new file mode 100644
index 0000000000..3ad3c0869b
--- /dev/null
+++ b/frontend/src/modules/admin/modules/integration/components/changes-confirmation-modal.vue
@@ -0,0 +1,71 @@
+<template>
+  <lf-modal v-model="isModalOpen">
+    <template #default>
+      <div class="px-6 pt-8 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="circle-exclamation" 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 leave?</span>
+            <p class="text-gray-500 text-small">
+              You have unsaved changes that will be lost if you leave now. You can save your changes or continue editing.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="px-6 py-4.5 bg-gray-50 mt-8 flex justify-end gap-4">
+        <lf-button type="outline" @click="keepEditing">
+          Keep editing
+        </lf-button>
+        <lf-button type="danger" class="!rounded-full" @click="discardChanges">
+          Discard changes
+        </lf-button>
+      </div>
+    </template>
+  </lf-modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import LfModal from '@/ui-kit/modal/Modal.vue';
+import LfButton from '@/ui-kit/button/Button.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const isModalOpen = ref(false);
+
+let resolvePromise: ((value: boolean) => void) | null = null;
+
+const open = (): Promise<boolean> => {
+  isModalOpen.value = true;
+  return new Promise((resolve) => {
+    resolvePromise = resolve;
+  });
+};
+
+const keepEditing = () => {
+  isModalOpen.value = false;
+  if (resolvePromise) {
+    resolvePromise(false);
+    resolvePromise = null;
+  }
+};
+
+const discardChanges = () => {
+  isModalOpen.value = false;
+  if (resolvePromise) {
+    resolvePromise(true);
+    resolvePromise = null;
+  }
+};
+
+defineExpose({
+  open,
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ChangesConfirmationModal',
+};
+</script>
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..a378137946
--- /dev/null
+++ b/frontend/src/modules/admin/modules/integration/components/drawer-description.vue
@@ -0,0 +1,31 @@
+<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 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/drawer-footer-buttons.vue b/frontend/src/modules/admin/modules/integration/components/drawer-footer-buttons.vue
new file mode 100644
index 0000000000..6abda6d623
--- /dev/null
+++ b/frontend/src/modules/admin/modules/integration/components/drawer-footer-buttons.vue
@@ -0,0 +1,121 @@
+<template>
+  <div
+    class="flex"
+    :class="{ 'justify-between': isEditMode, 'justify-end': !isEditMode }"
+  >
+    <template v-if="isEditMode">
+      <lf-tooltip
+        v-if="disconnectTooltipContent"
+        :content="disconnectTooltipContent"
+        :disabled="!isDisconnectDisabled"
+        placement="top"
+        class="font-primary font-semibold"
+        content-class="!w-100"
+      >
+        <lf-button
+          type="danger-ghost"
+          :disabled="isDisconnectDisabled"
+          @click="isDisconnectIntegrationModalOpen = true"
+        >
+          <lf-icon name="link-simple-slash" :size="16" />
+          Disconnect
+        </lf-button>
+      </lf-tooltip>
+      <lf-button
+        v-else
+        type="danger-ghost"
+        @click="isDisconnectIntegrationModalOpen = true"
+      >
+        <lf-icon name="link-simple-slash" :size="16" />
+        Disconnect
+      </lf-button>
+    </template>
+
+    <span class="flex gap-3">
+      <lf-button
+        v-if="!isEditMode"
+        type="outline"
+        :disabled="isLoading"
+        @click="cancel"
+      >
+        Cancel
+      </lf-button>
+      <lf-button
+        v-if="hasFormChanged && isEditMode"
+        type="outline"
+        @click="revertChanges()"
+      >
+        <lf-icon name="arrow-rotate-left" :size="16" />
+        Revert changes
+      </lf-button>
+      <lf-tooltip
+        v-if="connectTooltipContent"
+        :content="connectTooltipContent"
+        content-class="!w-50"
+        placement="top-end"
+        :disabled="!isSubmitDisabled"
+      >
+        <lf-button
+          id="gitConnect"
+          type="primary"
+          class="!rounded-full"
+          :disabled="isSubmitDisabled"
+          :loading="isLoading"
+          @click="connect"
+        >
+          <lf-icon v-if="!isEditMode" name="link-simple" :size="16" />
+          {{ isEditMode ? 'Update' : 'Connect' }}
+        </lf-button>
+      </lf-tooltip>
+      <lf-button
+        v-else
+        id="gitConnect"
+        type="primary"
+        class="!rounded-full"
+        :disabled="isSubmitDisabled"
+        :loading="isLoading"
+        @click="connect"
+      >
+        <lf-icon v-if="!isEditMode" name="link-simple" :size="16" />
+        {{ isEditMode ? 'Update' : 'Connect' }}
+      </lf-button>
+    </span>
+  </div>
+
+  <integration-confirmation-modal
+    v-if="props.integration"
+    v-model="isDisconnectIntegrationModalOpen"
+    :platform="props.integration.platform"
+    :integration-id="props.integration.id"
+  />
+</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 LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
+import IntegrationConfirmationModal from '@/modules/admin/modules/integration/components/integration-confirmation-modal.vue';
+
+const props = defineProps<{
+  integration: any;
+  isEditMode: boolean;
+  hasFormChanged: boolean;
+  isLoading: boolean;
+  isSubmitDisabled: boolean;
+  isDisconnectDisabled?: boolean;
+  connectTooltipContent?: string;
+  disconnectTooltipContent?: string;
+  cancel:() => void;
+  revertChanges: () => void;
+  connect: () => void;
+}>();
+
+const isDisconnectIntegrationModalOpen = ref(false);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfDrawerFooterButtons',
+};
+</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
new file mode 100644
index 0000000000..bbce588051
--- /dev/null
+++ b/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue
@@ -0,0 +1,86 @@
+<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="outline" @click="isModalOpen = false">
+          Cancel
+        </lf-button>
+        <lf-button type="danger" class="!rounded-full" :disabled="disconnectConfirm !== 'DISCONNECT'" @click="disconnectIntegration()">
+          Disconnect integration
+        </lf-button>
+      </div>
+    </template>
+  </lf-modal>
+</template>
+
+<script setup lang="ts">
+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';
+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),
+});
+
+watch(isModalOpen, (open) => {
+  if (!open) {
+    disconnectConfirm.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 ba0b8f0e4c..e2f1e941e5 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,10 +12,11 @@
           </div>
         </div>
         <div>
-          <h6 class="mb-0.5">
-            {{ props.config.name }}
+          <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">
+          <p class="text-neutral-600 text-small">
             {{ props.config.description }}
           </p>
         </div>
@@ -27,7 +28,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,38 +39,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-neutral-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"
@@ -81,7 +93,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
@@ -92,10 +104,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"
@@ -111,47 +130,24 @@
 
     <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">
-      <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';
@@ -160,12 +156,12 @@ 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';
+import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
+import { IntegrationService } from '@/modules/integration/integration-service';
 
 const props = defineProps<{
   config: IntegrationConfig,
@@ -175,16 +171,15 @@ 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 isDisconnectDisabled = ref(false);
 
 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)) {
@@ -207,20 +202,23 @@ 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();
 });
-
-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/modules/admin/modules/integration/pages/integration-list.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
index e36958853e..bfb16905a9 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,88 +11,75 @@
             },
           }"
         >
-          <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="mt-0.5"
+                  :class="tab === key ? status.chipStatus?.color || status.status.color : 'text-gray-500'"
+                  :size="16"
+                />
                 <span>{{ status.tabs.text }}</span>
-                <div
-                  v-if="getIntegrationCountPerStatus[key] > 0"
-                  class="rounded 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"
-        />
       </section>
     </div>
 
     <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"
@@ -118,22 +105,20 @@
 
 <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 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();
 
@@ -168,20 +153,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]) => {
-    statusCount[key] = array.value.filter((integration: any) => statusConfig.show(integration)).length;
-  });
-  statusCount.notConnected = Object.keys(lfIntegrations(useGitHubNango.value)).length
-    - array.value.length;
-  return statusCount;
-});
-
 const authStore = useAuthStore();
 const userId = computed(() => authStore.user?.id);
 const teamUserIds = computed(() => config.permissions.teamUserIds);
@@ -190,8 +161,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/admin/modules/integration/types/Integration.ts b/frontend/src/modules/admin/modules/integration/types/Integration.ts
index 6ad68c2214..3f581e6f45 100644
--- a/frontend/src/modules/admin/modules/integration/types/Integration.ts
+++ b/frontend/src/modules/admin/modules/integration/types/Integration.ts
@@ -1,5 +1,16 @@
-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
+  sourcePlatform: string
+  segment: {
+    id: string
+    name: string
+  }
 }
diff --git a/frontend/src/shared/drawer/drawer.vue b/frontend/src/shared/drawer/drawer.vue
index ce65d74b29..91a7600331 100644
--- a/frontend/src/shared/drawer/drawer.vue
+++ b/frontend/src/shared/drawer/drawer.vue
@@ -1,56 +1,63 @@
 <template>
   <teleport to="body">
     <el-drawer
+      ref="drawerRef"
       v-model="model"
       :class="`${customClass} ${
         hasBorder ? 'bordered' : ''
       } ${
         hasPadding ? '' : 'no-padding'
+      } ${
+        hasScroll ? 'has-scroll' : ''
       }`"
       :show-close="false"
       :destroy-on-close="true"
-      :close-on-click-modal="false"
+      :close-on-click-modal="closeOnClickModal"
       :size="size"
       :z-index="zIndex"
+      :before-close="closeFunction"
       @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 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"
+                >
+                  {{ 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>
-              <div class="flex items-center">
-                <slot name="beforeTitle" />
-                <h5
-                  :id="titleId"
-                  class="text-black"
-                  :class="titleClass"
+            </slot>
+
+            <div class="flex gap-3 items-center">
+              <slot name="header-label" />
+              <div class="ml-3">
+                <lf-button
+                  type="outline"
+                  icon-only
+                  @click="close"
                 >
-                  {{ title }}
-                </h5>
+                  <lf-icon name="xmark" :size="20" class="text-gray-900 group-hover:text-primary-500" />
+                </lf-button>
               </div>
-              <slot name="belowTitle" />
-            </div>
-          </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>
           </div>
+          <slot name="belowTitle" />
         </div>
       </template>
 
@@ -65,7 +72,9 @@
 </template>
 
 <script setup>
-import { defineProps, computed, defineEmits } from 'vue';
+import {
+  computed, ref, watch, onUnmounted, nextTick,
+} from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import { number } from 'yup';
@@ -112,6 +121,16 @@ const props = defineProps({
     type: number,
     default: () => 2004,
   },
+  closeOnClickModal: {
+    type: Boolean,
+    default: () => false,
+  },
+  closeFunction: {
+    type: Function,
+    default: (done) => {
+      done(false);
+    },
+  },
 });
 
 const model = computed({
@@ -123,6 +142,68 @@ const model = computed({
   },
 });
 
+const drawerRef = ref(null);
+const hasScroll = ref(false);
+let resizeObserver = null;
+let mutationObserver = null;
+let drawerBodyEl = null;
+
+const getDrawerBody = () => {
+  const drawers = document.querySelectorAll('.el-drawer');
+  if (drawers.length === 0) return null;
+  const drawer = drawers[drawers.length - 1];
+  return drawer.querySelector('.el-drawer__body');
+};
+
+const checkScroll = () => {
+  if (!drawerBodyEl) return;
+  hasScroll.value = drawerBodyEl.scrollHeight > drawerBodyEl.clientHeight;
+};
+
+const setupObservers = () => {
+  drawerBodyEl = getDrawerBody();
+  if (!drawerBodyEl) return;
+
+  // Check initial state
+  checkScroll();
+
+  // Observe size changes
+  resizeObserver = new ResizeObserver(checkScroll);
+  resizeObserver.observe(drawerBodyEl);
+
+  // Observe content changes (children added/removed)
+  mutationObserver = new MutationObserver(checkScroll);
+  mutationObserver.observe(drawerBodyEl, { childList: true, subtree: true });
+};
+
+const cleanupObservers = () => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+  if (mutationObserver) {
+    mutationObserver.disconnect();
+    mutationObserver = null;
+  }
+  drawerBodyEl = null;
+  hasScroll.value = false;
+};
+
+watch(model, (visible) => {
+  if (visible) {
+    nextTick(() => {
+      // Wait for drawer animation to complete
+      setTimeout(setupObservers, 300);
+    });
+  } else {
+    cleanupObservers();
+  }
+}, { immediate: true });
+
+onUnmounted(() => {
+  cleanupObservers();
+});
+
 const onClose = () => {
   model.value = false;
   emit('close');
diff --git a/frontend/src/shared/form/array-input.vue b/frontend/src/shared/form/array-input.vue
index d21f8a093d..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 }"
-          @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" />
@@ -43,6 +46,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  inputClass: {
+    type: String,
+    default: '',
+  },
+  inputLabel: {
+    type: String,
+    default: '',
+  },
 });
 
 const rules = {
diff --git a/frontend/src/shared/modules/platform/types/Platform.ts b/frontend/src/shared/modules/platform/types/Platform.ts
index 0de85e56a0..ceff6b9841 100644
--- a/frontend/src/shared/modules/platform/types/Platform.ts
+++ b/frontend/src/shared/modules/platform/types/Platform.ts
@@ -24,4 +24,5 @@ export enum Platform {
     GITLAB = 'gitlab',
     JIRA = 'jira',
     GITHUB_NANGO = 'github-nango',
+    GERRIT = 'gerrit',
 }
diff --git a/frontend/src/ui-kit/button/button.scss b/frontend/src/ui-kit/button/button.scss
index c79b6d8df8..fa7493d1e5 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);
@@ -371,6 +400,40 @@
     --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-hover-text);
+    --lf-btn-hover-background: var(--lf-btn-outline-hover-background);
+    --lf-btn-hover-border: var(--lf-btn-outline-hover-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);
+
+    &.is-active{
+      --lf-btn-text: var(--lf-btn-outline-active-text);
+      --lf-btn-background: var(--lf-btn-outline-active-background);
+      --lf-btn-border: var(--lf-btn-outline-active-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..e10607fb46 100644
--- a/frontend/src/ui-kit/button/types/ButtonType.ts
+++ b/frontend/src/ui-kit/button/types/ButtonType.ts
@@ -6,9 +6,11 @@ export const buttonTypes = [
   'bordered',
   'primary-ghost',
   'secondary-ghost',
+  'danger-ghost',
   'secondary-ghost-light',
   'primary-link',
   'secondary-link',
+  'outline',
 ] as const;
 
-export type ButtonType = typeof buttonTypes[number];
+export type ButtonType = (typeof buttonTypes)[number]
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..4c1781c443
--- /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];
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 {
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 4787e63d16..dac7f04623 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -120,6 +120,18 @@ module.exports = {
           100: 'var(--lf-color-secondary-100)',
           50: 'var(--lf-color-secondary-50)',
         },
+        brand: {
+          900: 'var(--lf-color-brand-900)',
+          800: 'var(--lf-color-brand-800)',
+          700: 'var(--lf-color-brand-700)',
+          600: 'var(--lf-color-brand-600)',
+          500: 'var(--lf-color-brand-500)',
+          400: 'var(--lf-color-brand-400)',
+          300: 'var(--lf-color-brand-300)',
+          200: 'var(--lf-color-brand-200)',
+          100: 'var(--lf-color-brand-100)',
+          50: 'var(--lf-color-brand-50)',
+        },
         gray: {
           900: 'var(--lf-color-gray-900)',
           800: 'var(--lf-color-gray-800)',
@@ -133,6 +145,18 @@ module.exports = {
           100: 'var(--lf-color-gray-100)',
           50: 'var(--lf-color-gray-50)',
         },
+        neutral: {
+          900: 'var(--lf-color-neutral-900)',
+          800: 'var(--lf-color-neutral-800)',
+          700: 'var(--lf-color-neutral-700)',
+          600: 'var(--lf-color-neutral-600)',
+          500: 'var(--lf-color-neutral-500)',
+          400: 'var(--lf-color-neutral-400)',
+          300: 'var(--lf-color-neutral-300)',
+          200: 'var(--lf-color-neutral-200)',
+          100: 'var(--lf-color-neutral-100)',
+          50: 'var(--lf-color-neutral-50)',
+        },
         red: {
           900: 'var(--lf-color-red-900)',
           800: 'var(--lf-color-red-800)',
@@ -193,7 +217,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'],
diff --git a/services/libs/data-access-layer/src/segments/index.ts b/services/libs/data-access-layer/src/segments/index.ts
index 9174044baa..0d1ce81acc 100644
--- a/services/libs/data-access-layer/src/segments/index.ts
+++ b/services/libs/data-access-layer/src/segments/index.ts
@@ -351,6 +351,39 @@ export async function getMappedWithSegmentName(
   return result?.segment_name ?? null
 }
 
+export async function getMappedAllWithSegmentName(
+  qx: QueryExecutor,
+  segmentId: string,
+  platforms: PlatformType[],
+): Promise<{ segmentName: string; url: string }[]> {
+  if (platforms.length === 0) {
+    return []
+  }
+
+  const results = await qx.select(
+    `
+      SELECT DISTINCT s.name as segment_name, r.url
+      FROM public.repositories r
+      LEFT JOIN integrations i ON r."sourceIntegrationId" = i.id
+      LEFT JOIN segments s ON i."segmentId" = s.id
+      WHERE r."segmentId" = $(segmentId)
+        AND r."deletedAt" IS NULL
+        AND (
+          i.id IS NULL
+          OR (i.platform = ANY($(platforms)::text[]) AND i."segmentId" <> $(segmentId))
+        )
+    `,
+    { segmentId, platforms },
+  )
+
+  return results
+    .filter((r: { segment_name: string; url: string }) => r.segment_name)
+    .map((r: { segment_name: string; url: string }) => ({
+      segmentName: r.segment_name,
+      url: r.url,
+    }))
+}
+
 export interface ISegment {
   id: string
   name: string