diff --git a/app/assets/javascripts/integrations/index/components/integrations_table.vue b/app/assets/javascripts/integrations/index/components/integrations_table.vue
index dd54c380da93840becc8c8776c8aabd37e23ff63..cb9bad18c96eb26802fc4f5108fd119ca178d4d4 100644
--- a/app/assets/javascripts/integrations/index/components/integrations_table.vue
+++ b/app/assets/javascripts/integrations/index/components/integrations_table.vue
@@ -1,19 +1,13 @@
 <script>
-import {
-  GlAvatarLabeled,
-  GlAvatarLink,
-  GlButton,
-  GlIcon,
-  GlTable,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlAvatar, GlAvatarLink, GlButton, GlIcon, GlTable, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
+import { visitUrl } from '~/lib/utils/url_utility';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
-    GlAvatarLabeled,
+    GlAvatar,
     GlAvatarLink,
     GlButton,
     GlIcon,
@@ -64,7 +58,7 @@ export default {
           key: 'title',
           label: __('Integration'),
           thClass: 'd-sm-table-cell',
-          tdClass: '!gl-border-b-0',
+          tdClass: '!gl-border-b-0 !gl-align-middle',
         },
       );
 
@@ -73,7 +67,7 @@ export default {
           key: 'updated_at',
           label: this.showUpdatedAt ? __('Last updated') : '',
           thAlignRight: true,
-          thClass: 'gl-hidden d-sm-table-cell',
+          thClass: 'gl-hidden d-sm-table-cell gl-w-20',
           tdClass: '!gl-border-b-0 gl-text-right gl-hidden d-sm-table-cell !gl-align-middle',
         });
       }
@@ -82,7 +76,7 @@ export default {
         key: 'edit_path',
         label: '',
         thClass: 'gl-w-15',
-        tdClass: '!gl-border-b-0',
+        tdClass: '!gl-border-b-0 gl-text-right !gl-align-middle',
       });
 
       return fields;
@@ -103,6 +97,9 @@ export default {
         status,
       });
     },
+    navigateToItemSettings({ edit_path }) {
+      return visitUrl(edit_path);
+    },
   },
 };
 </script>
@@ -114,7 +111,10 @@ export default {
     :empty-text="emptyText"
     show-empty
     fixed
+    hover
     class="gl-mb-0"
+    tbody-tr-class="gl-cursor-pointer hover:!gl-bg-strong"
+    @row-clicked="navigateToItemSettings"
   >
     <template #cell(active)="{ item }">
       <gl-icon
@@ -123,33 +123,61 @@ export default {
         :name="item.active ? 'status-success' : 'status-paused'"
         :variant="item.active ? 'success' : 'subtle'"
         :title="getStatusTooltipTitle(item)"
+        data-testid="integration-active-icon"
       />
     </template>
 
     <template #cell(title)="{ item }">
-      <gl-avatar-link :href="item.edit_path" :title="item.title" :data-testid="`${item.name}-link`">
-        <gl-avatar-labeled
-          class="integration-logo"
-          :label="item.title"
-          :sub-label="item.description"
-          :entity-id="item.id"
-          :entity-name="item.title"
+      <gl-avatar-link
+        tabindex="-1"
+        :href="item.edit_path"
+        :title="item.title"
+        :data-testid="`${item.name}-link`"
+        class="gl-items-center gl-gap-x-4"
+      >
+        <gl-avatar
           :src="item.icon"
-          :size="32"
+          :entity-name="item.title"
+          :alt="item.title"
+          :size="48"
           shape="rect"
-          :label-link="item.edit_path"
+          class="integration-logo"
         />
+        <div class="gl-flex gl-flex-col gl-gap-2">
+          <h3 class="gl-heading-4 gl-my-1">{{ item.title }}</h3>
+          <p class="gl-mb-0 gl-text-subtle">{{ item.description }}</p>
+        </div>
       </gl-avatar-link>
     </template>
 
     <template #cell(updated_at)="{ item }">
-      <time-ago-tooltip v-if="showUpdatedAt && item.updated_at" :time="item.updated_at" />
+      <time-ago-tooltip
+        v-if="showUpdatedAt && item.updated_at"
+        :time="item.updated_at"
+        class="gl-text-subtle"
+      />
     </template>
 
     <template #cell(edit_path)="{ item }">
-      <gl-button :href="item.edit_path">
-        {{ __('Configure') }}
-      </gl-button>
+      <gl-button
+        v-if="inactive"
+        v-gl-tooltip
+        tabindex="-1"
+        :href="item.edit_path"
+        category="secondary"
+        icon="plus"
+        :title="s__('Integrations|Add integration')"
+        >{{ __('Add') }}</gl-button
+      >
+      <gl-button
+        v-else
+        v-gl-tooltip
+        tabindex="-1"
+        :href="item.edit_path"
+        category="secondary"
+        icon="settings"
+        :title="__('Configure')"
+      />
     </template>
   </gl-table>
 </template>
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index dda80caf37b3f5719fa18f89a14a1c6f889151a1..07db5563b76de3319889d8f6d09033796bb3a630 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -56,12 +56,12 @@ svg {
 }
 
 .integration-logo {
-  &[entity-name='Diffblue Cover'] img,
-  &[entity-name='Drone'] img,
-  &[entity-name='GitHub'] img,
-  &[entity-name='Mattermost notifications'] img,
-  &[entity-name='Mattermost slash commands'] img,
-  &[entity-name='Phorge'] img {
+  &[alt='Diffblue Cover'],
+  &[alt='Drone'],
+  &[alt='GitHub'],
+  &[alt='Mattermost notifications'],
+  &[alt='Mattermost slash commands'],
+  &[alt='Phorge'] {
     .gl-dark & {
       filter: invert(1) brightness(2);
     }
diff --git a/app/views/projects/settings/integrations/_form.html.haml b/app/views/projects/settings/integrations/_form.html.haml
index 0d7ce917a2fa7019b6837c889b81d33cd457cdaf..c42a3ad44600de8d75a7750407d175252f23800c 100644
--- a/app/views/projects/settings/integrations/_form.html.haml
+++ b/app/views/projects/settings/integrations/_form.html.haml
@@ -16,8 +16,8 @@
 
 = render ::Layouts::PageHeadingComponent.new(@integration.title) do |c|
   - c.with_heading do
-    .gl-flex.gl-items-center.gl-gap-4.integration-logo{ 'entity-name': integration.title }
-      = render Pajamas::AvatarComponent.new(integration, size: 48, alt: '')
+    .gl-flex.gl-items-center.gl-gap-4
+      = render Pajamas::AvatarComponent.new(integration, size: 48, alt: integration.title, class: 'integration-logo')
       = integration.title
       - if integration.operating?
         = render Pajamas::BadgeComponent.new(_('Active'), variant: 'success', icon: 'status-success', class: 'gl-pl-2')
diff --git a/app/views/shared/integrations/edit.html.haml b/app/views/shared/integrations/edit.html.haml
index 98ea676c7e2cedb1d6ecfa9dcbbde459ab1e35a6..5fd2a2287f678fe6d2602bb069b44961ceef85c7 100644
--- a/app/views/shared/integrations/edit.html.haml
+++ b/app/views/shared/integrations/edit.html.haml
@@ -5,7 +5,7 @@
 = render ::Layouts::PageHeadingComponent.new(@integration.title) do |c|
   - c.with_heading do
     .gl-flex.gl-items-center.gl-gap-4
-      = render Pajamas::AvatarComponent.new(@integration, size: 48, alt: '')
+      = render Pajamas::AvatarComponent.new(@integration, size: 48, alt: @integration.title, class: 'integration-logo')
       = @integration.title
 
 = render 'shared/integrations/tabs', integration: @integration, active_tab: 'edit' do
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 16bbcf42340e296413d18091922ae145621affac..2bdf5586fc2b864d48d6573f435f0a2971e44ae1 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -30312,6 +30312,9 @@ msgstr ""
 msgid "Integrations|Add exclusions"
 msgstr ""
 
+msgid "Integrations|Add integration"
+msgstr ""
+
 msgid "Integrations|All details"
 msgstr ""
 
diff --git a/spec/frontend/integrations/index/components/integrations_table_spec.js b/spec/frontend/integrations/index/components/integrations_table_spec.js
index 2f0c44d27ed2d9ad6848ac750d5451b4bce01f73..707890b5146f19c2d96d688180fc46be1d05da11 100644
--- a/spec/frontend/integrations/index/components/integrations_table_spec.js
+++ b/spec/frontend/integrations/index/components/integrations_table_spec.js
@@ -1,4 +1,4 @@
-import { GlTable, GlIcon, GlLink } from '@gitlab/ui';
+import { GlTable, GlLink, GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import IntegrationsTable from '~/integrations/index/components/integrations_table.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -37,16 +37,18 @@ describe('IntegrationsTable', () => {
   });
 
   describe.each`
-    scenario                          | integrations                     | shouldRenderActiveIcon
+    scenario                          | integrations                     | expectActiveIcon
     ${'when integration is active'}   | ${[mockActiveIntegrations[0]]}   | ${true}
     ${'when integration is inactive'} | ${[mockInactiveIntegrations[0]]} | ${false}
-  `('$scenario', ({ shouldRenderActiveIcon, integrations }) => {
+  `('$scenario', ({ expectActiveIcon, integrations }) => {
     beforeEach(() => {
       createComponent({ integrations });
     });
 
-    it(`${shouldRenderActiveIcon ? 'renders' : 'does not render'} icon in first column`, () => {
-      expect(findTable().findComponent(GlIcon).exists()).toBe(shouldRenderActiveIcon);
+    it(`${expectActiveIcon ? 'renders' : 'does not render'} icon in first column`, () => {
+      expect(findTable().find('[data-testid="integration-active-icon"]').exists()).toBe(
+        expectActiveIcon,
+      );
     });
   });
 
@@ -74,6 +76,8 @@ describe('IntegrationsTable', () => {
   });
 
   describe.each([true, false])('when integrations inactive property is %p', (inactive) => {
+    const findEditButton = () => findTable().findComponent(GlButton);
+
     beforeEach(() => {
       createComponent({ integrations: mockInactiveIntegrations, inactive });
     });
@@ -81,5 +85,16 @@ describe('IntegrationsTable', () => {
     it(`${inactive ? 'does not render' : 'render'} updated_at field`, () => {
       expect(findTable().find('[aria-label="Updated At"]').exists()).toBe(!inactive);
     });
+
+    if (inactive) {
+      it('renders Edit button as "Add integration"', () => {
+        expect(findEditButton().props('icon')).toBe('plus');
+        expect(findEditButton().text()).toBe('Add');
+      });
+    } else {
+      it('renders Edit button as "Configure"', () => {
+        expect(findEditButton().props('icon')).toBe('settings');
+      });
+    }
   });
 });