diff --git a/frontend/config/styles/components/button.scss b/frontend/config/styles/components/button.scss
index 2a1bda5ab5..c4b5eb305c 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,23 @@
   --lf-btn-secondary-link-loading-text: var(--lf-color-gray-400);
   --lf-btn-secondary-link-loading-background: var(--lf-color-transparent);
   --lf-btn-secondary-link-loading-border: var(--lf-color-transparent);
+
+  /* Outline */
+  --lf-btn-outline-text: var(--lf-color-gray-900);
+  --lf-btn-outline-background: var(--lf-color-white);
+  --lf-btn-outline-border: var(--lf-color-gray-200);
+  --lf-btn-outline-shadow: var(--shadow-none);
+  // Active
+  --lf-btn-outline-active-text: var(--lf-color-gray-900);
+  --lf-btn-outline-active-background: var(--lf-color-white);
+  --lf-btn-outline-active-border: var(--lf-color-gray-200);
+  // Disabled
+  --lf-btn-outline-disabled-text: var(--lf-color-gray-400);
+  --lf-btn-outline-disabled-background: var(--lf-color-white);
+  --lf-btn-outline-disabled-border: var(--lf-color-gray-200);
+  // Loading
+  --lf-btn-outline-loading-text: var(--lf-color-gray-400);
+  --lf-btn-outline-loading-background: var(--lf-color-white);
+  --lf-btn-outline-loading-border: var(--lf-color-gray-200);
+
 }
diff --git a/frontend/config/styles/components/switch.scss b/frontend/config/styles/components/switch.scss
index 8cfdf9d97e..d04e92358f 100644
--- a/frontend/config/styles/components/switch.scss
+++ b/frontend/config/styles/components/switch.scss
@@ -24,19 +24,9 @@
 
   // Disabled Unchecked
   --lf-switch-disabled-unchecked-handle: var(--lf-color-white);
-
-  // Disabled Checked
+  --lf-switch-disabled-background: var(--lf-color-gray-200);
   --lf-switch-disabled-checked-handle: var(--lf-color-white);
-
-  /* ---------------------------------- *\
-           Switch sizes
-  \* ---------------------------------- */
-
-  /* Tiny */
-  --lf-switch-tiny-height: #{rem(16)};
-  --lf-switch-tiny-width: #{rem(30)};
-  --lf-switch-tiny-font-size: #{rem(12)};
-  --lf-switch-tiny-line-height: #{rem(15)};
+  --lf-switch-disabled-checked-background: var(--lf-color-primary-500);
 
   /* Small */
   --lf-switch-small-height: #{rem(20)};
diff --git a/frontend/src/assets/scss/drawer.scss b/frontend/src/assets/scss/drawer.scss
index f667a657b8..6808653249 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,8 @@
   }
 
   &__footer {
-    @apply p-6 bg-gray-50 border-t border-gray-200;
+    @apply px-6 py-5 bg-gray-50 border-t border-gray-100 bg-white;
+    box-shadow: 0 -4px 20px 0 rgba(0, 0, 0, 0.05);
   }
 
   &__close-btn {
diff --git a/frontend/src/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..458e274b8c 100644
--- a/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
+++ b/frontend/src/config/integrations/confluence/components/confluence-settings-drawer.vue
@@ -10,6 +10,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Confluence logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="confluence" />
+    </template>
     <template #content>
       <div class="text-gray-900 text-sm font-medium">
         Authentication
@@ -112,8 +115,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -123,7 +125,7 @@
         <lf-button
           id="confluenceConnect"
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="$v.$invalid || loading"
           :loading="loading"
           @click="connect"
@@ -153,6 +155,7 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfButton from '@/ui-kit/button/Button.vue';
 import AppArrayInput from '@/shared/form/array-input.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
diff --git a/frontend/src/config/integrations/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..e650bf2ebb 100644
--- a/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
+++ b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
@@ -10,6 +10,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="DEV logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="devto" />
+    </template>
     <template #content>
       <el-form class="form integration-devto-form" @submit.prevent>
         <app-form-item
@@ -167,8 +170,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -178,7 +180,7 @@
         <lf-button
           id="devConnect"
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="
             connectDisabled || loading || !isAPIConnectionValid || isValidating
           "
@@ -214,6 +216,7 @@ import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/ev
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const { doDevtoConnect } = mapActions('integration');
 
diff --git a/frontend/src/config/integrations/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..ea94d97e5e 100644
--- a/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
+++ b/frontend/src/config/integrations/discourse/components/discourse-settings-drawer.vue
@@ -16,6 +16,9 @@
         alt="Discourse logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="discourse" />
+    </template>
     <template #content>
       <el-form
         label-position="top"
@@ -191,8 +194,7 @@
     <template #footer>
       <div style="flex: auto">
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-3"
           :disabled="loading"
           @click="handleCancel"
@@ -201,7 +203,7 @@
         </lf-button>
         <lf-button
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="
             $v.$invalid
               || !hasFormChanged || loading"
@@ -235,6 +237,7 @@ import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfCard from '@/ui-kit/card/Card.vue';
 import { ToastStore } from '@/shared/message/notification';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const { trackEvent } = useProductTracking();
 
diff --git a/frontend/src/config/integrations/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..8aaa5e88bd 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
@@ -10,92 +10,119 @@
     <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-blue-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-blue-500" :size="16" />
+        </div>
+        <div class="text-xs text-blue-800">
+          Connected repositories are also synced through Git, which automatically mirrors your
+          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>
 
-      <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)"
+            <div class="flex-shrink-0">
+              <lf-switch
+                v-model="form.enableAllRepos"
+                :size="'small'"
+                :disabled="form.orgURL.length === 0"
+                :class="{ 'opacity-50': form.orgURL.length === 0 }"
+              >
+                <template #default>
+                  <span class="text-gray-900 text-small mr-2">All remote URLs</span>
+                </template>
+              </lf-switch>
+            </div>
+          </div>
+        </div>
+
+        <hr class="w-full border border-solid border-gray-200" />
+
+        <template v-if="!form.enableAllRepos">
+          <lf-button
+            type="primary-link"
+            size="medium"
+            :disabled="form.orgURL.length === 0"
+            :class="{ 'opacity-50': form.orgURL.length === 0 }"
+            @click="addRepoName()"
+          >
+            + Add 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>
+      <div class="flex justify-end gap-3">
         <lf-button
-          type="secondary-gray"
-          class="mr-4"
+          type="outline"
           :disabled="loading"
           @click="cancel"
         >
           Cancel
         </lf-button>
-        <lf-button
-          id="gerritConnect"
-          type="primary"
-          :disabled="$v.$invalid || !hasFormChanged || loading"
-          :loading="loading"
-          @click="connect"
+        <lf-tooltip
+          content="Please enter the organization URL, and at least 1 remote URL, in order to connect Gerrit"
+          content-class="!w-50"
+          placement="top-end"
+          :disabled="!($v.$invalid || !hasFormChanged || loading)"
         >
-          Connect
-        </lf-button>
+          <lf-button
+            id="gerritConnect"
+            type="primary"
+            class="!rounded-full"
+            :disabled="$v.$invalid || !hasFormChanged || loading"
+            :loading="loading"
+            @click="connect"
+          >
+            Connect
+          </lf-button>
+        </lf-tooltip>
       </div>
     </template>
   </app-drawer>
@@ -103,8 +130,9 @@
 
 <script setup lang="ts">
 import useVuelidate from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import {
-  computed, defineProps, onMounted, reactive, ref,
+  computed, onMounted, reactive, ref,
 } from 'vue';
 import gerrit from '@/config/integrations/gerrit/config';
 import formChangeDetector from '@/shared/form/form-change';
@@ -118,10 +146,13 @@ 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 LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
@@ -144,7 +175,12 @@ const form = reactive({
 });
 
 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,6 +192,7 @@ const isVisible = computed({
   },
 });
 const logoUrl = gerrit.image;
+const showEmptyState = ref(!props.integration?.settings?.remote?.orgURL);
 
 onMounted(() => {
   if (props.integration?.settings?.remote) {
diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-settings-empty.vue b/frontend/src/config/integrations/gerrit/components/gerrit-settings-empty.vue
new file mode 100644
index 0000000000..379aa42e5f
--- /dev/null
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-empty.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="flex justify-center">
+    <div class="pt-10 flex flex-col items-center w-full max-w-100 gap-4">
+      <lf-icon name="book" type="regular" :size="50" class="text-gray-400" />
+      <h6 class="text-center">
+        Sync Gerrit repositories
+      </h6>
+      <div class="flex flex-col gap-4">
+        <div class="text-small text-gray-600 text-center">
+          Add a remote URL for each Gerrit repository you want to connect
+        </div>
+      </div>
+      <lf-button type="primary-ghost" @click="emit('add')">
+        <lf-icon name="plus" type="regular" />
+        Add remote URL
+      </lf-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LfButton from '@/ui-kit/button/Button.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const emit = defineEmits<{(e: 'add'): void }>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfGerritSettingsEmpty',
+};
+</script>
diff --git a/frontend/src/config/integrations/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..9ede4ae819 100644
--- a/frontend/src/config/integrations/git/components/git-params.vue
+++ b/frontend/src/config/integrations/git/components/git-params.vue
@@ -1,47 +1,83 @@
 <template>
-  <div>
-    <div class="flex items-center gap-1">
-      <el-popover trigger="hover" placement="top" popper-class="!w-72">
-        <template #reference>
-          <div
-            class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
-          >
-            <lf-svg name="git-repository" class="w-4 h-4 !text-gray-600 mr-1 flex items-center" />
-            {{ repositories.length }}
-            {{ repositories.length !== 1 ? "remote URLs" : "remote URL" }}
-          </div>
-        </template>
-
-        <p class="text-gray-400 text-[13px] font-semibold mb-4">
-          Git Remote URLs
-        </p>
-        <div class="max-h-44 overflow-auto -my-1 px-1">
-          <article
-            v-for="repository of repositories"
-            :key="repository"
-            class="flex items-center flex-nowrap mb-4 last:mb-0"
+  <div class="flex items-center gap-1">
+    <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+
+    <el-popover v-if="nativeRepos.length > 0" trigger="hover" placement="top" popper-class="!w-72">
+      <template #reference>
+        <div
+          class="text-gray-600 text-2xs flex items-center leading-5 font-medium underline decoration-dashed cursor-default"
+        >
+          {{ 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"
           >
-            <lf-svg name="git-repository" class="w-4 h-4 mr-1 flex items-center" />
-
-            <a
-              :href="repository"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-gray-900 text-[13px] max-w-3xs truncate hover:underline"
-            >
-              {{ removeProtocolAndDomain(repository) }}
-            </a>
-          </article>
+            {{ removeProtocolAndDomain(repository) }}
+          </a>
+        </article>
+      </div>
+    </el-popover>
+
+    <span v-if="mirroredRepoUrls.length > 0 && nativeRepos.length > 0">/</span>
+
+    <el-popover v-if="mirroredRepoUrls.length > 0" trigger="hover" placement="top" popper-class="!w-72">
+      <template #reference>
+        <div
+          class="text-gray-600 text-2xs flex items-center leading-5 font-medium underline decoration-dashed cursor-default"
+        >
+          {{ pluralize('repository', mirroredRepoUrls.length, true) }} (via GitHub)
         </div>
-      </el-popover>
-    </div>
+      </template>
+
+      <p class="text-gray-400 text-[13px] font-semibold mb-4">
+        Repositories
+      </p>
+      <div class="max-h-44 overflow-auto -my-1 px-1">
+        <article
+          v-for="repository of mirroredRepoUrls"
+          :key="repository"
+          class="flex items-center flex-nowrap mb-4 last:mb-0"
+        >
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+
+          <a
+            :href="repository"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-gray-900 text-[13px] max-w-3xs truncate hover:underline"
+          >
+            {{ removeProtocolAndDomain(repository) }}
+          </a>
+        </article>
+      </div>
+    </el-popover>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
-import LfSvg from '@/shared/svg/svg.vue';
+import {
+  ref, onMounted, watch, computed,
+} from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
+import pluralize from 'pluralize';
 
 const props = defineProps({
   integration: {
@@ -52,16 +88,26 @@ const props = defineProps({
 
 const repositories = ref<string[]>([]);
 
+// Track mirrored repos (sourceIntegrationId != gitIntegrationId)
+const mirroredRepoUrls = ref<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 || [])];
+
+      mirroredRepoUrls.value = res
+        .filter((r) => r.sourceIntegrationId !== r.gitIntegrationId)
+        .map((r) => r.url);
     })
     .catch(() => {
       // Fallback to settings.remotes if API fails
       repositories.value = props.integration.settings?.remotes || [];
+      mirroredRepoUrls.value = [];
     });
 };
 
diff --git a/frontend/src/config/integrations/git/components/git-settings-drawer.vue b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
index 4d29bb9c54..3b8ec77ea5 100644
--- a/frontend/src/config/integrations/git/components/git-settings-drawer.vue
+++ b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
@@ -10,76 +10,124 @@
     <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"
             :disabled="isMirroredRepo(remote)"
           >
             <template #after>
               <lf-button
-                type="primary-link"
+                type="secondary-link"
                 size="medium"
                 class="w-10 h-10"
                 :disabled="isMirroredRepo(remote)"
                 :class="{ 'opacity-50 cursor-not-allowed': isMirroredRepo(remote) }"
                 @click="!isMirroredRepo(remote) && removeRemote(ii)"
               >
-                <lf-icon name="trash-can" :size="20" />
+                <lf-icon name="circle-xmark" :size="20" />
               </lf-button>
             </template>
           </app-array-input>
-        </el-tooltip>
-      </el-form>
+        </el-form>
 
-      <lf-button
-        type="primary-link"
-        size="medium"
-        @click="addRemote()"
-      >
-        + Add remote URL
-      </lf-button>
+        <div v-if="mirroredRepos.length > 0" class="flex flex-col gap-3 border-t border-gray-200 pt-5">
+          <div class="text-xs flex flex-col gap-1 mb-2">
+            <div class="text-gray-900 font-semibold">
+              Repositories managed by a different integration
+            </div>
+            <div class="text-gray-600">
+              Repositories synced via GitHub, GitLab, or Gerrit, are automatically mirrored by Git integration.
+            </div>
+          </div>
+
+          <div v-for="mirroredRepo of mirroredRepos" :key="mirroredRepo.url" class="text-gray-900 text-small flex items-center gap-2">
+            <lf-icon name="book" :size="16" class="text-gray-400" />
+            {{ mirroredRepo.url }}
+          </div>
+        </div>
+      </div>
     </template>
 
     <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"
+      <div
+        class="flex gap-4"
+        :class="{ 'justify-between': integration?.settings?.remotes?.length, 'justify-end': !integration?.settings?.remotes?.length }"
+      >
+        <lf-tooltip
+          content="Git can’t be disconnected while it’s mirroring repositories from GitHub, GitLab, or Gerrit integrations."
+          :disabled="mirroredRepos.length === 0"
+          placement="top"
+          class="font-primary font-semibold"
+          content-class="!w-100"
         >
-          {{ integration?.settings?.remotes?.length ? 'Update' : 'Connect' }}
-        </lf-button>
+          <lf-button
+            v-if="integration?.settings?.remotes?.length"
+            type="danger-ghost"
+            :disabled="mirroredRepos.length > 0"
+            @click="isDisconnectIntegrationModalOpen = true"
+          >
+            Disconnect
+          </lf-button>
+        </lf-tooltip>
+        <span class="flex gap-3">
+          <lf-button
+            v-if="!integration?.settings?.remotes?.length"
+            type="secondary-gray"
+            size="medium"
+            class="mr-4"
+            :disabled="loading"
+            @click="cancel"
+          >
+            Cancel
+          </lf-button>
+          <lf-button
+            v-if="hasFormChanged && props.integration"
+            type="outline"
+            @click="revertChanges()"
+          >
+            <lf-icon name="arrow-rotate-left" :size="16" />
+            Revert changes
+          </lf-button>
+          <lf-button
+            id="gitConnect"
+            type="primary"
+            size="medium"
+            :disabled="$v.$invalid || !hasFormChanged || loading"
+            :loading="loading"
+            @click="connect"
+          >
+            <lf-icon v-if="!integration?.settings?.remotes?.length" name="link-simple" :size="16" />
+            {{ integration?.settings?.remotes?.length ? 'Update' : 'Connect' }}
+          </lf-button>
+        </span>
       </div>
     </template>
   </app-drawer>
+
+  <integration-confirmation-modal
+    v-if="props.integration"
+    v-model="isDisconnectIntegrationModalOpen"
+    :platform="Platform.GIT"
+    :integration-id="props.integration.id"
+  />
 </template>
 
 <script setup>
@@ -98,6 +146,11 @@ 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 IntegrationConfirmationModal from '@/modules/admin/modules/integration/components/integration-confirmation-modal.vue';
+import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
+import AppDrawer from '@/shared/drawer/drawer.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -126,8 +179,12 @@ const form = reactive({
   remotes: [''],
 });
 
+const showEmptyState = ref(!props.integration?.settings?.remotes?.length);
+const isDisconnectIntegrationModalOpen = ref(false);
+
 // Track mirrored repos (sourceIntegrationId != gitIntegrationId)
-const mirroredRepoUrls = ref(new Set());
+const mirroredRepos = ref([]);
+const mirroredRepoUrls = computed(() => new Set(mirroredRepos.value.map((r) => r.url)));
 
 // Track original form state for change detection
 const originalRemotes = ref([]);
@@ -164,23 +221,21 @@ const fetchRepoMappings = () => {
   IntegrationService.fetchGitMappings(props.integration)
     .then((repos) => {
       // Find repos where sourceIntegrationId != gitIntegrationId (mirrored from other platforms)
-      const mirrored = repos
-        .filter((r) => r.sourceIntegrationId !== r.gitIntegrationId)
-        .map((r) => r.url);
-      mirroredRepoUrls.value = new Set(mirrored);
-
-      // Populate form with all repos (both native and mirrored)
-      const allRepoUrls = repos.map((r) => r.url);
-      if (allRepoUrls.length > 0) {
-        form.remotes = allRepoUrls;
-      } else if (!props.integration?.settings?.remotes?.length) {
+      mirroredRepos.value = repos
+        .filter((r) => r.sourceIntegrationId !== r.gitIntegrationId);
+
+      // Populate native remotes
+      const nativeRepoUrls = repos.filter((r) => r.sourceIntegrationId === r.gitIntegrationId).map((r) => r.url);
+      if (nativeRepoUrls.length > 0) {
+        form.remotes = nativeRepoUrls;
+      } else {
         form.remotes = [''];
       }
       formSnapshot();
     })
     .catch(() => {
       // Fallback to settings.remotes if API fails
-      mirroredRepoUrls.value = new Set();
+      mirroredRepos.value = [];
       if (props.integration?.settings?.remotes?.length) {
         form.remotes = [...props.integration.settings.remotes];
       }
@@ -253,6 +308,10 @@ const errorHandler = (error) => {
       });
   }
 };
+
+const revertChanges = () => {
+  form.remotes = [...originalRemotes.value];
+};
 </script>
 
 <script>
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..ef5b540778 100644
--- a/frontend/src/config/integrations/github-nango/components/github-params.vue
+++ b/frontend/src/config/integrations/github-nango/components/github-params.vue
@@ -1,76 +1,31 @@
 <template>
-  <div class="flex items-center gap-1">
-    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
-      <template #reference>
-        <div v-if="!isInProgress" class="text-gray-600 text-2xs flex items-center leading-5">
-          <lf-svg
-            name="git-repository"
-            class="w-4 h-4 !text-gray-600 mr-1 flex items-center"
-          />
-          <span class="font-semibold">
-            {{ pluralize('repository', Object.keys(mappings).length, true) }}
-          </span>
-        </div>
-        <span v-else class="text-gray-600 text-2xs flex items-center leading-5 font-semibold">
-          {{ mappedRepositories.length }} out of
-          {{ allRepositoriesNames.length }} repositories connected
-        </span>
-      </template>
-
-      <p class="text-gray-400 text-sm font-semibold mb-4">
-        {{ isInProgress ? 'Connected GitHub repositories' : 'GitHub repositories' }}
-      </p>
-      <div class="-my-1 px-1 max-h-44 overflow-auto">
-        <article
-          v-for="mapping of mappedRepositories"
-          :key="mapping.url"
-          class="py-2 flex items-center flex-nowrap"
-        >
-          <lf-svg
-            name="git-repository"
-            class="w-4 h-4 mr-2 flex items-center"
-          />
-          <a
-            :href="mapping.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
-          >
-            /{{ repoNameFromUrl(mapping.url) }}
-          </a>
-          <lf-icon
-            name="arrow-right"
-            :size="16"
-            class="text-gray-400 mx-2 flex items-center"
-          />
-          <div class="text-xs leading-5 max-w-3xs truncate">
-            {{ mapping.segment.name }}
-          </div>
-        </article>
-      </div>
-    </el-popover>
-  </div>
+  <lf-github-mappings-display v-if="!isInProgress" :mappings="mappings" />
+  <lf-github-mappings-display v-else :mappings="mappedRepositories">
+    <template #trigger>
+      <span
+        class="text-gray-600 text-xs flex items-center leading-5 font-semibold underline decoration-dashed cursor-default"
+      >
+        {{ mappedRepositories.length }} out of
+        {{ allRepositoriesNames.length }} repositories connected
+      </span>
+    </template>
+    <template #popupTitle>
+      Connected GitHub repositories
+    </template>
+  </lf-github-mappings-display>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
-import pluralize from 'pluralize';
-import LfSvg from '@/shared/svg/svg.vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
+import LfGithubMappingsDisplay from '@/config/integrations/github/components/github-mappings-display.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
 
 const props = defineProps<{
   integration: any;
 }>();
 
-const mappings = ref<
-  {
-    url: string;
-    segment: {
-      id: string;
-      name: string;
-    };
-  }[]
+const mappings = ref<IntegrationMapping[]
 >([]);
 
 const repoNameFromUrl = (url: string) => url.split('/').at(-1);
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index 2938e2d8ac..e646c35d2f 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -1,38 +1,41 @@
 <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
+  >
+    <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-blue-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-blue-500" :size="16" />
+        </div>
+        <div class="text-xs text-blue-800">
+          Connected repositories are also synced through Git, which automatically mirrors your
+          GitHub settings for adding, updating, and deleting repositories.
         </div>
-        <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>
       <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 +45,54 @@
           />
         </div>
       </div>
+    </template>
+
+    <template #footer>
       <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)"
+        class="flex gap-4"
+        :class="{ 'justify-between': props.integration, 'justify-end': !props.integration }"
       >
         <lf-button
-          type="secondary-ghost-light"
-          @click="isDrawerVisible = false"
+          v-if="props.integration"
+          type="danger-ghost"
+          @click="isDisconnectIntegrationModalOpen = true"
         >
-          Cancel
+          Disconnect
         </lf-button>
-        <span>
+        <span class="flex gap-3">
+          <lf-button
+            v-if="!props.integration"
+            type="outline"
+            @click="isDrawerVisible = false"
+          >
+            Cancel
+          </lf-button>
+          <lf-button
+            v-if="hasChanges && props.integration"
+            type="outline"
+            @click="revertChanges()"
+          >
+            <lf-icon name="arrow-rotate-left" :size="16" />
+            Revert changes
+          </lf-button>
+
           <lf-button
             type="primary"
+            class="!rounded-full"
             :disabled="
               $v.$invalid
                 || !repositories.length
             "
             @click="connect()"
           >
-            {{ props.integration ? 'Update settings' : 'Connect' }}
+            <lf-icon v-if="!props.integration" name="link-simple" :size="16" />
+            {{ props.integration ? 'Update' : 'Connect' }}
           </lf-button>
         </span>
       </div>
-    </div>
-  </lf-drawer>
+    </template>
+    <!-- </div> -->
+  </app-drawer>
   <lf-github-settings-add-repository-modal
     v-if="isAddRepositoryModalOpen"
     v-model="isAddRepositoryModalOpen"
@@ -74,14 +100,20 @@
     v-model:repositories="repositories"
     :integration="props.integration"
   />
+  <integration-confirmation-modal
+    v-if="props.integration"
+    v-model="isDisconnectIntegrationModalOpen"
+    :platform="Platform.GITHUB"
+    :integration-id="props.integration.id"
+  />
 </template>
 
 <script lang="ts" setup>
 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';
@@ -99,6 +131,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 +140,9 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import { showIntegrationProgressNotification } from '@/modules/integration/helpers/integration-progress-notification';
 import { dateHelper } from '@/shared/date-helper/date-helper';
 import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
+import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
+import IntegrationConfirmationModal from '@/modules/admin/modules/integration/components/integration-confirmation-modal.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const props = defineProps<{
   modelValue: boolean;
@@ -126,7 +162,13 @@ const subprojects = ref([]);
 const organizations = ref<GitHubOrganization[]>([]);
 const repositories = ref<GitHubSettingsRepository[]>([]);
 const repoMappings = ref<Record<string, string>>({});
+const initialRepositories = ref<GitHubSettingsRepository[]>([]);
+const initialOrganizations = ref<GitHubOrganization[]>([]);
 const initialRepoMappings = ref<Record<string, string>>({});
+const isDisconnectIntegrationModalOpen = ref(false);
+
+const hasChanges = computed(() => repositories.value.length !== initialRepositories.value.length
+    || !isEqual(repoMappings.value, initialRepoMappings.value));
 
 // Drawer visibility
 const isDrawerVisible = computed({
@@ -246,6 +288,12 @@ const errorHandler = (error: any) => {
   }
 };
 
+const revertChanges = () => {
+  repositories.value = [...initialRepositories.value];
+  organizations.value = [...initialOrganizations.value];
+  repoMappings.value = { ...initialRepoMappings.value };
+};
+
 const fetchGithubMappings = () => {
   if (!props.integration) return;
   IntegrationService.fetchGitHubMappings(props.integration).then(
@@ -293,6 +341,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..019b1e9ae9 100644
--- a/frontend/src/config/integrations/github/components/github-connect.vue
+++ b/frontend/src/config/integrations/github/components/github-connect.vue
@@ -1,38 +1,111 @@
 <template>
   <div>
-    <div class="flex items-center gap-4">
-      <!--      <lf-button v-if="!props.hideDetails" type="secondary-ghost" class="!text-gray-500" @click="isDetailsModalOpen = true">-->
-      <!--        <lf-icon name="circle-info" type="regular" />-->
-      <!--        Details-->
-      <!--      </lf-button>-->
-      <lf-button type="secondary" @click="isSettingsDrawerOpen = true">
-        <lf-icon name="link-simple" />
-        <slot>Connect</slot>
-      </lf-button>
-    </div>
-    <lf-github-settings-drawer
-      v-if="isSettingsDrawerOpen"
-      v-model="isSettingsDrawerOpen"
-      :integration="props.integration"
-      :segment-id="props.segmentId"
-      :grandparent-id="props.grandparentId"
-    />
+    <lfx-dropdown
+      placement="bottom-end"
+      width="20rem"
+    >
+      <template #trigger>
+        <lf-button type="outline">
+          <lf-icon name="link-simple" />
+          <slot>Connect</slot>
+        </lf-button>
+      </template>
+
+      <lfx-dropdown-item @click="isV2SettingsDrawerOpen = true">
+        <div class="flex items-start gap-2">
+          <lf-github-version-tag version="v2" />
+          <div>
+            <div class="text-sm text-gray-900">
+              GitHub - New integration
+            </div>
+            <p class="text-xs text-gray-500">
+              Sync repositories from multiple GitHub organizations. Doesn’t require organization admin permissions.
+            </p>
+          </div>
+        </div>
+      </lfx-dropdown-item>
+      <lfx-dropdown-item @click="isV1SettingsDrawerOpen = true">
+        <div class="flex items-start gap-2">
+          <lf-github-version-tag version="v1" />
+          <div>
+            <div class="text-sm text-gray-900">
+              GitHub - Old integration
+            </div>
+            <p class="text-xs text-gray-500">
+              Sync repositories from a GitHub organization. Requires organization admin permissions.
+            </p>
+          </div>
+        </div>
+      </lfx-dropdown-item>
+    </lfx-dropdown>
   </div>
+
+  <!-- V2 Settings Drawer -->
+  <lf-github-nango-settings-drawer
+    v-if="isV2SettingsDrawerOpen"
+    v-model="isV2SettingsDrawerOpen"
+    :integration="props.integration"
+    :segment-id="props.segmentId"
+    :grandparent-id="props.grandparentId"
+  />
+
+  <!-- V1 Settings Drawer -->
+  <lf-github-connect-modal
+    v-if="isV1SettingsDrawerOpen"
+    v-model="isV1SettingsDrawerOpen"
+  />
+  <lf-github-connect-finishing-modal v-model="isFinishingModalOpen" />
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
-import LfGithubSettingsDrawer from '@/config/integrations/github/components/settings/github-settings-drawer.vue';
+import LfxDropdown from '@/ui-kit/lfx/dropdown/dropdown.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfGithubNangoSettingsDrawer from '@/config/integrations/github-nango/components/settings/github-settings-drawer.vue';
+import LfGithubConnectModal from '@/config/integrations/github/components/connect/github-connect-modal.vue';
+import LfGithubConnectFinishingModal from '@/config/integrations/github/components/connect/github-connect-finishing-modal.vue';
+import { mapActions } from '@/shared/vuex/vuex.helpers';
+import { useRoute } from 'vue-router';
+import LfGithubVersionTag from '@/config/integrations/github/components/github-version-tag.vue';
 
+const route = useRoute();
 const props = defineProps<{
   integration: any,
   segmentId: string | null;
   grandparentId: string | null;
 }>();
 
-const isSettingsDrawerOpen = ref(false);
+const isV2SettingsDrawerOpen = ref(false);
+const isV1SettingsDrawerOpen = ref(false);
+
+const isFinishingModalOpen = ref(false);
+
+const { doGithubConnect } = mapActions('integration');
+
+const 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..90c8f8bf64 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,48 @@
   <!-- 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-gray-600 text-2xs flex items-center leading-5 font-semibold">
+      Syncing GitHub data from <span class="font-bold px-1"> {{ mappedReposWithOtherProject.project }} project </span>
+      for&nbsp;
 
-      <p class="text-gray-400 text-sm font-semibold mb-4">
-        Mapped GitHub repositories
-      </p>
-      <div class="-my-1 px-1 max-h-44 overflow-auto">
-        <article
-          v-for="repo of mappedReposWithOtherProject.repositories"
-          :key="repo.url"
-          class="py-2 flex items-center flex-nowrap"
-        >
-          <lf-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"
+      <el-popover trigger="hover" placement="top" popper-class="!w-auto">
+        <template #reference>
+          <span class="underline decoration-dashed cursor-default">
+            {{ pluralize('repository', mappedReposWithOtherProject.repositories.length, true) }}
+          </span>.
+        </template>
+
+        <p class="text-gray-400 text-sm font-semibold mb-4">
+          Mapped GitHub repositories
+        </p>
+        <div class="-my-1 px-1 max-h-44 overflow-auto">
+          <article
+            v-for="repo of mappedReposWithOtherProject.repositories"
+            :key="repo.url"
+            class="py-2 flex items-center flex-nowrap"
           >
-            /{{ repoNameFromUrl(repo.url) }}
-          </a>
-        </article>
-      </div>
-    </el-popover>
+            <lf-icon name="book" :size="16" class="text-gray-600 mr-2" />
+            <a
+              :href="repo.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+            >
+              /{{ repoNameFromUrl(repo.url) }}
+            </a>
+          </article>
+        </div>
+      </el-popover>
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
-import LfSvg from '@/shared/svg/svg.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import pluralize from 'pluralize';
 
 const props = defineProps<{
@@ -67,6 +68,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..e7def66a8a
--- /dev/null
+++ b/frontend/src/config/integrations/github/components/github-mappings-display.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="flex items-center gap-1">
+    <el-popover trigger="hover" placement="top" popper-class="!w-auto">
+      <template #reference>
+        <slot name="trigger">
+          <div
+            class="text-gray-600 text-2xs flex items-center leading-5"
+          >
+            <lf-icon name="book" :size="16" class="text-gray-600 mr-1" />
+            <span class="font-semibold underline decoration-dashed cursor-default">
+              {{ pluralize("repository", Object.keys(mappings).length, true) }}
+            </span>
+          </div>
+        </slot>
+      </template>
+
+      <p class="text-gray-400 text-sm font-semibold mb-4">
+        <slot name="popupTitle">
+          GitHub repositories
+        </slot>
+      </p>
+      <div class="-my-1 px-1 max-h-44 overflow-auto">
+        <article
+          v-for="mapping of mappings"
+          :key="mapping.url"
+          class="py-2 flex items-center flex-nowrap"
+        >
+          <lf-icon name="book" :size="16" class="text-gray-600 mr-2" />
+          <a
+            :href="mapping.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-xs leading-5 max-w-3xs truncate hover:underline !text-black"
+          >
+            /{{ repoNameFromUrl(mapping.url) }}
+          </a>
+          <lf-icon name="arrow-right" :size="16" class="text-gray-400 mx-2 flex items-center" />
+          <div class="text-xs leading-5 max-w-3xs truncate">
+            {{ mapping.segment.name }}
+          </div>
+        </article>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import pluralize from 'pluralize';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationMapping } from '@/modules/admin/modules/integration/types/Integration';
+
+defineProps<{
+  mappings: IntegrationMapping[];
+}>();
+
+const repoNameFromUrl = (url: string) => url.split('/').at(-1);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfGithubMappingsDisplay',
+};
+</script>
diff --git a/frontend/src/config/integrations/github/components/github-params.vue b/frontend/src/config/integrations/github/components/github-params.vue
index 275c1af234..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..b9f5c8071b 100644
--- a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
@@ -15,7 +15,19 @@
         alt="GitHub logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="github" />
+    </template>
     <template #content>
+      <div class="flex gap-2 bg-blue-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-blue-500" :size="16" />
+        </div>
+        <div class="text-xs text-blue-800">
+          Connected repositories are also synced through Git, which automatically mirrors your
+          GitHub settings for adding, updating, and deleting repositories.
+        </div>
+      </div>
       <div>
         <!-- Connected organization info -->
         <section
@@ -85,6 +97,7 @@
             v-model="search"
             clearable
             placeholder="Search repositories..."
+            class="is-rounded"
           >
             <template #prefix>
               <lf-icon name="magnifying-glass" class="text-gray-400" />
@@ -117,7 +130,7 @@
               class="py-1.5 flex items-center"
             >
               <div class="w-1/2 flex items-center pr-4">
-                <lf-svg name="git-repository" class="w-4 h-4 mr-2" />
+                <lf-icon name="book" :size="16" class="text-gray-400 mr-2" />
                 <p class="text-2xs leading-5 flex-grow truncate">
                   /{{ repo.name }}
                 </p>
@@ -134,7 +147,7 @@
                   <el-select
                     v-model="form[repo.url]"
                     placeholder="Select sub-project"
-                    class="w-full"
+                    class="w-full el-select--pill"
                     placement="bottom-end"
                     filterable
                     @blur="$v[repo.url].$touch"
@@ -171,8 +184,7 @@
     <template #footer>
       <div style="flex: auto">
         <lf-button
-          type="bordered"
-          size="medium"
+          type="outline"
           class="mr-3"
           @click="isDrawerVisible = false"
         >
@@ -180,11 +192,12 @@
         </lf-button>
         <lf-button
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="sending || $v.$invalid"
           :loading="sending"
           @click="connect()"
         >
+          <lf-icon name="link-simple" :size="16" />
           Connect
         </lf-button>
       </div>
@@ -220,11 +233,12 @@ 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';
 
 const props = defineProps<{
   modelValue: boolean;
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-settings-drawer.vue b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
index dc8a00357a..4954c7851f 100644
--- a/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
+++ b/frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue
@@ -11,7 +11,19 @@
     <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-blue-50 -mt-5 -mx-6 py-3 px-6 mb-5">
+        <div>
+          <lf-icon name="circle-info" type="solid" class="text-blue-500" :size="16" />
+        </div>
+        <div class="text-xs text-blue-800">
+          Connected repositories are also synced through Git, which automatically mirrors your
+          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">
@@ -157,7 +169,7 @@
 
     <template #footer>
       <div style="flex: auto">
-        <lf-button type="bordered" size="medium" class="mr-3" @click="isDrawerVisible = false">
+        <lf-button type="outline" class="mr-3" @click="isDrawerVisible = false">
           Cancel
         </lf-button>
         <el-tooltip
@@ -168,7 +180,7 @@
           <span>
             <lf-button
               type="primary"
-              size="medium"
+              class="!rounded-full"
               :disabled="sending || $v.$invalid || !hasSelectedRepos"
               :loading="sending"
               @click="connect()"
@@ -209,6 +221,7 @@ 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 AppGitlabSettingsBulkSelect from './gitlab-settings-bulk-select.vue';
 
 const props = defineProps<{
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..1fc1147b1e 100644
--- a/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
+++ b/frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue
@@ -12,6 +12,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Groups.io logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="groupsio" />
+    </template>
     <template #content>
       <div class="w-full flex flex-col mb-6">
         <p class="text-[16px] font-semibold">
@@ -243,8 +246,7 @@
     <template #footer>
       <div style="flex: auto">
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-3"
           :disabled="loading"
           @click="handleCancel"
@@ -253,7 +255,7 @@
         </lf-button>
         <lf-button
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="cantConnect || !hasSelectedGroups"
           :loading="loading"
           @click="connect()"
@@ -287,6 +289,7 @@ import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfSwitch from '@/ui-kit/switch/Switch.vue';
 import LfCheckbox from '@/ui-kit/checkbox/Checkbox.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const { doGroupsioConnect } = mapActions('integration');
 
diff --git a/frontend/src/config/integrations/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..99c4e4094b 100644
--- a/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
+++ b/frontend/src/config/integrations/hackernews/components/hackernews-settings-drawer.vue
@@ -3,6 +3,7 @@
     v-model="isVisible"
     custom-class="integration-hackerNews-drawer"
     title="Hacker News"
+    size="600px"
     pre-title="Integration"
     has-border
     @close="cancel"
@@ -10,6 +11,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Hacker News logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="hackernews" />
+    </template>
     <template #content>
       <div class="flex flex-col gap-2 items-start mb-2">
         <span class="text-xs font-light mb-2 text-gray-900">
@@ -81,8 +85,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -92,7 +95,7 @@
         <lf-button
           id="devConnect"
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="connectDisabled || loading"
           :loading="loading"
           @click="save"
@@ -116,12 +119,16 @@ import {
 } from '@/shared/modules/monitoring/types/event';
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfButton from '@/ui-kit/button/Button.vue';
+import AppDrawer from '@/shared/drawer/drawer.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 export default {
   name: 'LfHackernewsSettingsDrawer',
   components: {
     LfIcon,
     LfButton,
+    AppDrawer,
+    DrawerDescription,
   },
   props: {
     integration: {
diff --git a/frontend/src/config/integrations/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..5ca0e98f03 100644
--- a/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
+++ b/frontend/src/config/integrations/jira/components/jira-settings-drawer.vue
@@ -12,6 +12,9 @@
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Jira logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="jira" />
+    </template>
     <template #content>
       <div class="w-full flex flex-col mb-6">
         <p class="text-[16px] font-semibold">
@@ -128,8 +131,7 @@
     <template #footer>
       <div>
         <lf-button
-          type="secondary-gray"
-          size="medium"
+          type="outline"
           class="mr-4"
           :disabled="loading"
           @click="cancel"
@@ -139,7 +141,7 @@
         <lf-button
           id="jiraConnect"
           type="primary"
-          size="medium"
+          class="!rounded-full"
           :disabled="$v.$invalid || !hasFormChanged || loading"
           :loading="loading"
           @click="connect"
@@ -166,6 +168,7 @@ import AppDrawer from '@/shared/drawer/drawer.vue';
 import AppFormItem from '@/shared/form/form-item.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 // import elementChangeDetector from '@/shared/form/element-change';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
diff --git a/frontend/src/config/integrations/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..2defdfed67 100644
--- a/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
+++ b/frontend/src/config/integrations/linkedin/components/linkedin-settings-drawer.vue
@@ -15,6 +15,9 @@
         alt="LinkedIn logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="linkedin" />
+    </template>
     <template #content>
       <div
         class="flex flex-col gap-2 items-start mb-2"
@@ -80,15 +83,14 @@
         </lf-button>
         <div class="flex gap-4">
           <lf-button
-            type="secondary-gray"
-            size="medium"
+            type="outline"
             @click="isVisible = false"
           >
             Cancel
           </lf-button>
           <lf-button
             type="primary"
-            size="medium"
+            class="!rounded-full"
             :disabled="!hasFormChanged || loading"
             :loading="loading"
             @click="hasFormChanged ? connect() : undefined"
@@ -120,6 +122,7 @@ import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/ev
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const store = useStore();
 
diff --git a/frontend/src/config/integrations/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..e443d332e4 100644
--- a/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
+++ b/frontend/src/config/integrations/reddit/components/reddit-settings-drawer.vue
@@ -15,6 +15,9 @@
         alt="Git logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="reddit" />
+    </template>
     <template #content>
       <div
         class="flex flex-col gap-2 items-start mb-2"
@@ -90,15 +93,14 @@
         </lf-button>
         <div class="flex gap-4">
           <lf-button
-            type="secondary-gray"
-            size="medium"
+            type="outline"
             @click="isVisible = false"
           >
             Cancel
           </lf-button>
           <lf-button
             type="primary"
-            size="medium"
+            class="!rounded-full"
             :disabled="!hasFormChanged || connectDisabled"
             @click="hasFormChanged ? connect() : undefined"
           >
@@ -134,6 +136,7 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import reddit from '@/config/integrations/reddit/config';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const store = useStore();
 
diff --git a/frontend/src/config/integrations/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..74284bb224 100644
--- a/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
+++ b/frontend/src/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue
@@ -15,6 +15,9 @@
         alt="Stack Overflow logo"
       />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="stackoverflow" />
+    </template>
     <template #content>
       <el-form
         label-position="top"
@@ -133,8 +136,7 @@
       >
         <lf-button
           v-if="hasFormChanged"
-          type="primary-link"
-          size="medium"
+          type="outline"
           @click="doReset"
         >
           <lf-icon name="arrow-turn-left" :size="16" />
@@ -142,15 +144,14 @@
         </lf-button>
         <div class="flex gap-4">
           <lf-button
-            type="secondary-gray"
-            size="medium"
+            type="outline"
             @click="doCancel"
           >
             Cancel
           </lf-button>
           <lf-button
             type="primary"
-            size="medium"
+            class="!rounded-full"
             :disabled="!hasFormChanged || connectDisabled"
             :loading="isVolumeUpdating"
             @click="
@@ -173,7 +174,7 @@
 
 <script setup>
 import {
-  computed, defineEmits, defineProps, ref, watch,
+  computed, ref, watch,
 } from 'vue';
 import { useThrottleFn } from '@vueuse/core';
 import { useStore } from 'vuex';
@@ -187,6 +188,7 @@ import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/ev
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const MAX_STACK_OVERFLOW_QUESTIONS_PER_TAG = 350000;
 const MAX_STACK_OVERFLOW_QUESTIONS_FOR_KEYWORDS = 1100;
diff --git a/frontend/src/config/integrations/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..66896176cd 100644
--- a/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
+++ b/frontend/src/config/integrations/twitter/components/twitter-settings-drawer.vue
@@ -9,6 +9,9 @@
     pre-title-img-alt="X/Twitter logo"
     @close="isVisible = false"
   >
+    <template #belowTitle>
+      <drawer-description integration-key="twitter" />
+    </template>
     <template #content>
       <el-form label-position="top" class="form integration-twitter-form" @submit.prevent>
         <el-form-item :label="hashtagField.label">
@@ -34,8 +37,7 @@
       >
         <lf-button
           v-if="hasFormChanged"
-          type="primary-link"
-          size="medium"
+          type="outline"
           @click="doReset"
         >
           <lf-icon name="arrow-turn-left" :size="16" />
@@ -43,15 +45,14 @@
         </lf-button>
         <div class="flex gap-4">
           <lf-button
-            type="bordered"
-            size="medium"
+            type="outline"
             @click="isVisible = false"
           >
             Cancel
           </lf-button>
           <lf-button
             type="primary"
-            size="medium"
+            class="!rounded-full"
             :disabled="!hasFormChanged"
             :href="hasFormChanged
               ? computedConnectUrl
@@ -79,6 +80,7 @@ import twitter from '@/config/integrations/twitter/config';
 import LfButton from '@/ui-kit/button/Button.vue';
 import config from '@/config';
 import { AuthService } from '@/modules/auth/services/auth.service';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
 
 const props = defineProps({
   modelValue: {
diff --git a/frontend/src/config/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..8e6b9045a7
--- /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.crowd.dev/docs/getting-started/integrations',
+  integrationLinks: {
+    github: 'https://docs.crowd.dev/docs/getting-started/integrations/github-integration',
+    git: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    groupsio: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    confluence: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    jira: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    slack: 'https://docs.crowd.dev/docs/getting-started/integrations/slack-integration',
+    discord: 'https://docs.crowd.dev/docs/getting-started/integrations/discord-integration',
+    linkedin: 'https://docs.crowd.dev/docs/getting-started/integrations/linkedin-integration',
+    twitter: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    reddit: 'https://docs.crowd.dev/docs/getting-started/integrations/reddit-integration',
+    hackernews: 'https://docs.crowd.dev/docs/getting-started/integrations/hacker-news-integration',
+    stackoverflow:
+      'https://docs.crowd.dev/docs/getting-started/integrations/stack-overflow-integration',
+    gitlab: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    gerrit: 'https://docs.crowd.dev/docs/getting-started/integrations',
+    discourse: 'https://docs.crowd.dev/docs/getting-started/integrations/discourse-integration',
+    devto: 'https://docs.crowd.dev/docs/getting-started/integrations/dev-integration',
+  },
+};
diff --git a/frontend/src/modules/admin/modules/integration/components/drawer-description.vue b/frontend/src/modules/admin/modules/integration/components/drawer-description.vue
new file mode 100644
index 0000000000..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/integration-confirmation-modal.vue b/frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue
new file mode 100644
index 0000000000..fdc7383af6
--- /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="secondary-ghost-light" @click="isModalOpen = false">
+          Cancel
+        </lf-button>
+        <lf-button type="danger" :disabled="disconnectConfirm !== 'DISCONNECT'" @click="disconnectIntegration()">
+          Disconnect integration
+        </lf-button>
+      </div>
+    </template>
+  </lf-modal>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, 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..be34a152bf 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-list-item.vue
@@ -1,9 +1,9 @@
 <template>
   <article
     v-if="props.config"
-    class="border border-gray-200 shadow-sm rounded-lg"
+    class="border border-gray-200 shadow-xs rounded-xl overflow-hidden"
   >
-    <div class="py-4 pl-4 pr-5 flex justify-between items-center">
+    <div class="p-5 pr-5 flex justify-between items-center">
       <!-- Info -->
       <div class="flex items-center gap-4">
         <div class=" h-12 w-12 border border-gray-200 rounded-md flex items-center justify-center">
@@ -12,8 +12,9 @@
           </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">
             {{ props.config.description }}
@@ -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-gray-500">
+              <span v-if="props.config.connectedParamsComponent" class="font-semibold">&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+              Last data check completed {{ lastDataCheckCompleted }}
+            </p>
+          </div>
           <component
-            :is="props.config.statusComponent"
-            v-else-if="!isComplete && props.config.statusComponent"
-            :integration="integration"
+            :is="props.config.mappedReposComponent"
+            v-if="props.config.mappedReposComponent"
             :segment-id="route.params.id"
-            :grandparent-id="route.params.grandparentId"
+            class="!px-0 !pt-3 !pb-0"
           />
-          <p v-if="isComplete && integration.lastProcessedAt" class="text-small text-gray-500">
-            <span v-if="props.config.connectedParamsComponent" class="font-semibold">&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-            Last data check completed {{ lastDataCheckCompleted }}
-          </p>
         </div>
-
         <div class="flex items-center gap-4">
           <component
             :is="props.config.actionComponent"
@@ -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..21df30d416 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-list.page.vue
@@ -2,7 +2,7 @@
   <div class="mx-auto max-w-254">
     <div class="sticky -top-5 -mt-5 z-10 bg-white border-b border-b-white">
       <!-- Back button -->
-      <div class="border-b border-gray-100 py-3.5">
+      <div class="pt-6 flex items-center gap-1 text-xs">
         <router-link
           :to="{
             name: 'adminProjects',
@@ -11,52 +11,70 @@
             },
           }"
         >
-          <lf-button type="secondary-ghost">
-            <lf-icon name="angle-left" type="regular" />
-            {{ getSegmentName(grandparentId) || subproject?.grandparentName }}
-          </lf-button>
+          {{ getSegmentName(grandparentId) || subproject?.grandparentName }}
         </router-link>
+        <p v-if="subproject" class="text-gray-600">
+          >
+          {{ subproject?.name }}
+        </p>
+        <p v-if="subproject" class="text-gray-600">
+          (Integrations)
+        </p>
       </div>
 
       <!-- Header -->
-      <div class="py-6">
-        <p v-if="subproject" class="text-small text-gray-500 pb-2">
-          {{ subproject?.name }}
-        </p>
-        <h4 class="pb-2">
+      <div class="py-5">
+        <h4 class="pb-1">
           Integrations
         </h4>
         <p class="text-small text-gray-500">
           Connect with the data sources where interactions happen within your
           community.
+          <a
+            aria-label="Question"
+            class="btn btn-link btn-link--primary hover:no-underline gap-1 "
+            :href="links.integrations"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <lf-icon name="book-open" :size="16" />
+            Learn more
+          </a>
         </p>
       </div>
 
       <!-- Tabs -->
       <section>
-        <div class="w-full bg-white">
-          <lf-tabs v-model="tab">
-            <lf-tab v-model="tab" name="all">
+        <div class="w-full bg-white mb-8">
+          <lfx-tabs v-model="tab">
+            <lfx-tab v-model="tab" name="all">
               All integrations
-            </lf-tab>
-            <lf-tab
+            </lfx-tab>
+            <lfx-tab
               v-for="(status, key) in lfIntegrationStatusesTabs"
               :key="key"
               v-model="tab"
               :name="key"
             >
               <div class="flex items-center gap-1.5">
+                <lf-icon
+                  v-if="status.chipStatus?.icon || status.status.icon"
+                  :name="status.chipStatus?.icon || status.status.icon"
+                  :type="tab === key ? 'solid' : 'light'"
+                  :class="tab === key ? status.chipStatus?.color || status.status.color : 'text-gray-500'"
+                  :size="20"
+                />
                 <span>{{ status.tabs.text }}</span>
                 <div
                   v-if="getIntegrationCountPerStatus[key] > 0"
-                  class="rounded py-0.5 px-1 text-tiny text-black"
+                  class="rounded-full py-0.5 px-1 text-tiny text-black"
                   :class="status.tabs.badge"
                 >
                   {{ getIntegrationCountPerStatus[key] }}
                 </div>
               </div>
-            </lf-tab>
-          </lf-tabs>
+            </lfx-tab>
+          </lfx-tabs>
         </div>
         <div
           class="w-full h-8 bg-gradient-to-b from-white to-transparent pl-10"
@@ -67,32 +85,10 @@
     <section v-loading="loadingFetch">
       <app-integration-progress-wrapper
         v-if="!loadingFetch"
-        :segments="[route.params.id]"
+        :segments="[route.params.id as string]"
       >
         <template #default="{ progress, progressError }">
           <div v-if="platformsByStatus.length > 0" class="flex flex-col gap-6">
-            <lf-tooltip
-              v-if="isTeamUser"
-              class="ml-auto"
-              placement="top"
-              content-class="!max-w-76 !p-3 !text-start"
-              :disabled="!isGithubConnected"
-              content="Please disconnect the existing integration to be able to select the GitHub version"
-            >
-              <lf-switch
-                v-model="useGitHubNango"
-                :size="'small'"
-                :disabled="isGithubConnected"
-              >
-                <template #inactive>
-                  <span class="text-gray-500 text-small mr-2">Use old GitHub integration</span>
-                </template>
-                <template #default>
-                  <span class="text-gray-500 text-small">Use new GitHub integration</span>
-                </template>
-              </lf-switch>
-            </lf-tooltip>
-
             <lf-integration-list-item
               v-for="key in platformsByStatus"
               :key="key"
@@ -118,22 +114,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,10 +162,6 @@ const platformsByStatus = computed(() => {
   return all.filter((platform) => matching.includes(platform));
 });
 
-const isGithubConnected = computed(() => array.value.some(
-  (integration: any) => integration.platform === 'github',
-));
-
 const getIntegrationCountPerStatus = computed<Record<string, number>>(() => {
   const statusCount: any = {};
   Object.entries(lfIntegrationStatusesTabs).forEach(([key, statusConfig]) => {
@@ -190,8 +180,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..c2d94d4720 100644
--- a/frontend/src/modules/admin/modules/integration/types/Integration.ts
+++ b/frontend/src/modules/admin/modules/integration/types/Integration.ts
@@ -1,5 +1,15 @@
-export interface Integration<Settings>{
-  id: string;
-  status: string;
-  settings: Settings;
+export interface Integration<Settings> {
+  id: string
+  status: string
+  settings: Settings
+}
+
+export interface IntegrationMapping {
+  gitIntegrationId?: string
+  sourceIntegrationId?: string
+  url: string
+  segment: {
+    id: string
+    name: string
+  }
 }
diff --git a/frontend/src/shared/drawer/drawer.vue b/frontend/src/shared/drawer/drawer.vue
index ce65d74b29..1564a96c6d 100644
--- a/frontend/src/shared/drawer/drawer.vue
+++ b/frontend/src/shared/drawer/drawer.vue
@@ -15,42 +15,45 @@
       @close="onClose"
     >
       <template #header="{ close, titleId, titleClass }">
-        <div class="flex grow justify-between items-start">
-          <slot name="header">
-            <div class="h-fit">
-              <div
-                v-if="preTitle"
-                class="text-gray-600 text-2xs"
-              >
-                {{ preTitle }}
-              </div>
-              <div class="flex items-center">
-                <slot name="beforeTitle" />
-                <h5
-                  :id="titleId"
-                  class="text-black"
-                  :class="titleClass"
+        <div class="flex flex-col gap-1">
+          <div class="flex grow justify-between items-start">
+            <slot name="header">
+              <div class="h-fit">
+                <div
+                  v-if="preTitle"
+                  class="text-gray-600 text-2xs"
                 >
-                  {{ title }}
-                </h5>
+                  {{ preTitle }}
+                </div>
+                <div class="flex items-center">
+                  <slot name="beforeTitle" />
+                  <h5
+                    :id="titleId"
+                    class="text-black grow-0"
+                    :style="{ textWrap: 'nowrap' }"
+                    :class="titleClass"
+                  >
+                    {{ title }}
+                  </h5>
+                  <slot name="afterTitle" />
+                </div>
               </div>
-              <slot name="belowTitle" />
-            </div>
-          </slot>
+            </slot>
 
-          <div class="flex gap-3 items-center">
-            <slot name="header-label" />
-            <div class="ml-3">
-              <lf-button
-                type="primary-link"
-                size="tiny"
-                class="w-8 !h-8 hover:!no-underline group"
-                @click="close"
-              >
-                <lf-icon name="xmark" :size="20" class="text-gray-400 group-hover:text-primary-500" />
-              </lf-button>
+            <div class="flex gap-3 items-center">
+              <slot name="header-label" />
+              <div class="ml-3">
+                <lf-button
+                  type="outline"
+                  icon-only
+                  @click="close"
+                >
+                  <lf-icon name="xmark" :size="20" class="text-gray-900 group-hover:text-primary-500" />
+                </lf-button>
+              </div>
             </div>
           </div>
+          <slot name="belowTitle" />
         </div>
       </template>
 
@@ -65,7 +68,7 @@
 </template>
 
 <script setup>
-import { defineProps, computed, defineEmits } from 'vue';
+import { computed } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import { number } from 'yup';
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/ui-kit/button/button.scss b/frontend/src/ui-kit/button/button.scss
index c79b6d8df8..a2f09b6ff9 100644
--- a/frontend/src/ui-kit/button/button.scss
+++ b/frontend/src/ui-kit/button/button.scss
@@ -262,6 +262,35 @@
     --lf-btn-loading-border: var(--lf-btn-secondary-ghost-loading-border);
   }
 
+  &--danger-ghost {
+    --lf-btn-text: var(--lf-btn-danger-ghost-text);
+    --lf-btn-background: var(--lf-btn-danger-ghost-background);
+    --lf-btn-border: var(--lf-btn-danger-ghost-border);
+    --lf-btn-shadow: var(--lf-btn-danger-ghost-shadow);
+
+    // Hover
+    --lf-btn-hover-text: var(--lf-btn-danger-ghost-hover-text);
+    --lf-btn-hover-background: var(--lf-btn-danger-ghost-hover-background);
+    --lf-btn-hover-border: var(--lf-btn-danger-ghost-hover-border);
+
+    // Active
+    --lf-btn-active-text: var(--lf-btn-danger-ghost-active-text);
+    --lf-btn-active-background: var(--lf-btn-danger-ghost-active-background);
+    --lf-btn-active-border: var(--lf-btn-danger-ghost-active-border);
+
+    // Disabled
+    --lf-btn-disabled-text: var(--lf-btn-danger-ghost-disabled-text);
+    --lf-btn-disabled-background: var(--lf-btn-danger-ghost-disabled-background);
+    --lf-btn-disabled-border: var(--lf-btn-danger-ghost-disabled-border);
+
+    // Loading
+    --lf-btn-loading-text: var(--lf-btn-danger-ghost-loading-text);
+    --lf-btn-loading-background: var(--lf-btn-danger-ghost-loading-background);
+    --lf-btn-loading-border: var(--lf-btn-danger-ghost-loading-border);
+
+    @apply rounded-full;
+  }
+
   &--secondary-gray {
     --lf-btn-text: var(--lf-btn-secondary-gray-text);
     --lf-btn-background: var(--lf-btn-secondary-gray-background);
@@ -371,6 +400,34 @@
     --lf-btn-loading-background: var(--lf-btn-secondary-link-loading-background);
     --lf-btn-loading-border: var(--lf-btn-secondary-link-loading-border);
   }
+
+  &--outline {
+    @apply rounded-full;
+    --lf-btn-text: var(--lf-btn-outline-text);
+    --lf-btn-background: var(--lf-btn-outline-background);
+    --lf-btn-border: var(--lf-btn-outline-border);
+    --lf-btn-shadow: var(--lf-btn-outline-shadow);
+
+    // Hover
+    --lf-btn-hover-text: var(--lf-btn-outline-text);
+    --lf-btn-hover-background: var(--lf-btn-outline-background);
+    --lf-btn-hover-border: var(--lf-btn-outline-border);
+
+    // Active
+    --lf-btn-active-text: var(--lf-btn-outline-active-text);
+    --lf-btn-active-background: var(--lf-btn-outline-active-background);
+    --lf-btn-active-border: var(--lf-btn-outline-active-border);
+
+    // Disabled
+    --lf-btn-disabled-text: var(--lf-btn-outline-disabled-text);
+    --lf-btn-disabled-background: var(--lf-btn-outline-disabled-background);
+    --lf-btn-disabled-border: var(--lf-btn-outline-disabled-border);
+
+    // Loading
+    --lf-btn-loading-text: var(--lf-btn-outline-loading-text);
+    --lf-btn-loading-background: var(--lf-btn-outline-loading-background);
+    --lf-btn-loading-border: var(--lf-btn-outline-loading-border);
+  }
 }
 
 .c-btn-group{
diff --git a/frontend/src/ui-kit/button/types/ButtonType.ts b/frontend/src/ui-kit/button/types/ButtonType.ts
index 0a43c93dfe..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..6c7f7a85eb 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -193,7 +193,7 @@ module.exports = {
         lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
         xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
         '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-        xs: '0 1px 2px -1px rgba(0, 0, 0, 0.10), 0 1px 3px 0 rgba(0, 0, 0, 0.10)',
+        xs: '0 1px 2px 0 rgba(0, 0, 0, 0.02)',
       },
       fontSize: {
         '4xs': ['0.5rem'],