diff --git a/app/assets/javascripts/token_access/components/inbound_token_access.vue b/app/assets/javascripts/token_access/components/inbound_token_access.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1a225550c95e208fbe65fe14a8be95f7620b0d71
--- /dev/null
+++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue
@@ -0,0 +1,258 @@
+<script>
+import {
+  GlAlert,
+  GlButton,
+  GlCard,
+  GlFormInput,
+  GlLink,
+  GlLoadingIcon,
+  GlSprintf,
+  GlToggle,
+} from '@gitlab/ui';
+import { createAlert } from '~/flash';
+import { __, s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import inboundAddProjectCIJobTokenScopeMutation from '../graphql/mutations/inbound_add_project_ci_job_token_scope.mutation.graphql';
+import inboundRemoveProjectCIJobTokenScopeMutation from '../graphql/mutations/inbound_remove_project_ci_job_token_scope.mutation.graphql';
+import inboundUpdateCIJobTokenScopeMutation from '../graphql/mutations/inbound_update_ci_job_token_scope.mutation.graphql';
+import inboundGetCIJobTokenScopeQuery from '../graphql/queries/inbound_get_ci_job_token_scope.query.graphql';
+import inboundGetProjectsWithCIJobTokenScopeQuery from '../graphql/queries/inbound_get_projects_with_ci_job_token_scope.query.graphql';
+import TokenProjectsTable from './token_projects_table.vue';
+
+export default {
+  i18n: {
+    toggleLabelTitle: s__('CICD|Allow access to this project with a CI_JOB_TOKEN'),
+    toggleHelpText: s__(
+      `CICD|Manage which projects can use their CI_JOB_TOKEN to access this project. It is a security risk to disable this feature, because unauthorized projects might attempt to retrieve an active token and access the API. %{linkStart}Learn more.%{linkEnd}`,
+    ),
+    cardHeaderTitle: s__(
+      'CICD|Allow CI job tokens from the following projects to access this project',
+    ),
+    settingDisabledMessage: s__(
+      'CICD|Enable feature to allow job token access by the following projects.',
+    ),
+    addProject: __('Add project'),
+    cancel: __('Cancel'),
+    addProjectPlaceholder: __('Paste project path (i.e. gitlab-org/gitlab)'),
+    projectsFetchError: __('There was a problem fetching the projects'),
+    scopeFetchError: __('There was a problem fetching the job token scope value'),
+  },
+  fields: [
+    {
+      key: 'project',
+      label: __('Project with access'),
+      thClass: 'gl-border-t-none!',
+      columnClass: 'gl-w-40p',
+    },
+    {
+      key: 'namespace',
+      label: __('Namespace'),
+      thClass: 'gl-border-t-none!',
+      columnClass: 'gl-w-40p',
+    },
+    {
+      key: 'actions',
+      label: '',
+      tdClass: 'gl-text-right',
+      thClass: 'gl-border-t-none!',
+      columnClass: 'gl-w-10p',
+    },
+  ],
+  components: {
+    GlAlert,
+    GlButton,
+    GlCard,
+    GlFormInput,
+    GlLink,
+    GlLoadingIcon,
+    GlSprintf,
+    GlToggle,
+    TokenProjectsTable,
+  },
+  inject: {
+    fullPath: {
+      default: '',
+    },
+  },
+  apollo: {
+    inboundJobTokenScopeEnabled: {
+      query: inboundGetCIJobTokenScopeQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update({ project }) {
+        return project.ciCdSettings.inboundJobTokenScopeEnabled;
+      },
+      error() {
+        createAlert({ message: this.$options.i18n.scopeFetchError });
+      },
+    },
+    projects: {
+      query: inboundGetProjectsWithCIJobTokenScopeQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update({ project }) {
+        return project?.ciJobTokenScope?.inboundAllowlist?.nodes ?? [];
+      },
+      error() {
+        createAlert({ message: this.$options.i18n.projectsFetchError });
+      },
+    },
+  },
+  data() {
+    return {
+      inboundJobTokenScopeEnabled: null,
+      targetProjectPath: '',
+      projects: [],
+    };
+  },
+  computed: {
+    isProjectPathEmpty() {
+      return this.targetProjectPath === '';
+    },
+    ciJobTokenHelpPage() {
+      return helpPagePath('ci/jobs/ci_job_token');
+    },
+  },
+  methods: {
+    async updateCIJobTokenScope() {
+      try {
+        const {
+          data: {
+            ciCdSettingsUpdate: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: inboundUpdateCIJobTokenScopeMutation,
+          variables: {
+            input: {
+              fullPath: this.fullPath,
+              inboundJobTokenScopeEnabled: this.inboundJobTokenScopeEnabled,
+            },
+          },
+        });
+
+        if (errors.length) {
+          throw new Error(errors[0]);
+        }
+      } catch (error) {
+        this.inboundJobTokenScopeEnabled = !this.inboundJobTokenScopeEnabled;
+        createAlert({ message: error.message });
+      }
+    },
+    async addProject() {
+      try {
+        const {
+          data: {
+            ciJobTokenScopeAddProject: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: inboundAddProjectCIJobTokenScopeMutation,
+          variables: {
+            projectPath: this.fullPath,
+            targetProjectPath: this.targetProjectPath,
+          },
+        });
+
+        if (errors.length) {
+          throw new Error(errors[0]);
+        }
+      } catch (error) {
+        createAlert({ message: error.message });
+      } finally {
+        this.clearTargetProjectPath();
+        this.getProjects();
+      }
+    },
+    async removeProject(removeTargetPath) {
+      try {
+        const {
+          data: {
+            ciJobTokenScopeRemoveProject: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: inboundRemoveProjectCIJobTokenScopeMutation,
+          variables: {
+            projectPath: this.fullPath,
+            targetProjectPath: removeTargetPath,
+          },
+        });
+
+        if (errors.length) {
+          throw new Error(errors[0]);
+        }
+      } catch (error) {
+        createAlert({ message: error.message });
+      } finally {
+        this.getProjects();
+      }
+    },
+    clearTargetProjectPath() {
+      this.targetProjectPath = '';
+    },
+    getProjects() {
+      this.$apollo.queries.projects.refetch();
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-loading-icon v-if="$apollo.loading" size="lg" class="gl-mt-5" />
+    <template v-else>
+      <gl-toggle
+        v-model="inboundJobTokenScopeEnabled"
+        :label="$options.i18n.toggleLabelTitle"
+        @change="updateCIJobTokenScope"
+      >
+        <template #help>
+          <gl-sprintf :message="$options.i18n.toggleHelpText">
+            <template #link="{ content }">
+              <gl-link :href="ciJobTokenHelpPage" class="inline-link" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </template>
+      </gl-toggle>
+
+      <div>
+        <gl-card class="gl-mt-5 gl-mb-3">
+          <template #header>
+            <h5 class="gl-my-0">{{ $options.i18n.cardHeaderTitle }}</h5>
+          </template>
+          <template #default>
+            <gl-form-input
+              v-model="targetProjectPath"
+              :placeholder="$options.i18n.addProjectPlaceholder"
+            />
+          </template>
+          <template #footer>
+            <gl-button variant="confirm" :disabled="isProjectPathEmpty" @click="addProject">
+              {{ $options.i18n.addProject }}
+            </gl-button>
+            <gl-button @click="clearTargetProjectPath">{{ $options.i18n.cancel }}</gl-button>
+          </template>
+        </gl-card>
+        <gl-alert
+          v-if="!inboundJobTokenScopeEnabled"
+          class="gl-mb-3"
+          variant="warning"
+          :dismissible="false"
+          :show-icon="false"
+        >
+          {{ $options.i18n.settingDisabledMessage }}
+        </gl-alert>
+        <token-projects-table
+          :projects="projects"
+          :table-fields="$options.fields"
+          @removeProject="removeProject"
+        />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/token_access/components/token_access.vue b/app/assets/javascripts/token_access/components/outbound_token_access.vue
similarity index 91%
rename from app/assets/javascripts/token_access/components/token_access.vue
rename to app/assets/javascripts/token_access/components/outbound_token_access.vue
index 527f01f0a6fdc87524c688c66ba21e14931fbec1..47ec0910a7bd005e39688d92a44265dbe1d4d8ab 100644
--- a/app/assets/javascripts/token_access/components/token_access.vue
+++ b/app/assets/javascripts/token_access/components/outbound_token_access.vue
@@ -17,7 +17,6 @@ import removeProjectCIJobTokenScopeMutation from '../graphql/mutations/remove_pr
 import updateCIJobTokenScopeMutation from '../graphql/mutations/update_ci_job_token_scope.mutation.graphql';
 import getCIJobTokenScopeQuery from '../graphql/queries/get_ci_job_token_scope.query.graphql';
 import getProjectsWithCIJobTokenScopeQuery from '../graphql/queries/get_projects_with_ci_job_token_scope.query.graphql';
-import OptInJwt from './opt_in_jwt.vue';
 import TokenProjectsTable from './token_projects_table.vue';
 
 export default {
@@ -36,6 +35,27 @@ export default {
     projectsFetchError: __('There was a problem fetching the projects'),
     scopeFetchError: __('There was a problem fetching the job token scope value'),
   },
+  fields: [
+    {
+      key: 'project',
+      label: __('Project that can be accessed'),
+      thClass: 'gl-border-t-none!',
+      columnClass: 'gl-w-40p',
+    },
+    {
+      key: 'namespace',
+      label: __('Namespace'),
+      thClass: 'gl-border-t-none!',
+      columnClass: 'gl-w-40p',
+    },
+    {
+      key: 'actions',
+      label: '',
+      tdClass: 'gl-text-right',
+      thClass: 'gl-border-t-none!',
+      columnClass: 'gl-w-10p',
+    },
+  ],
   components: {
     GlAlert,
     GlButton,
@@ -45,7 +65,6 @@ export default {
     GlLoadingIcon,
     GlSprintf,
     GlToggle,
-    OptInJwt,
     TokenProjectsTable,
   },
   inject: {
@@ -230,9 +249,12 @@ export default {
         >
           {{ $options.i18n.settingDisabledMessage }}
         </gl-alert>
-        <token-projects-table :projects="projects" @removeProject="removeProject" />
+        <token-projects-table
+          :projects="projects"
+          :table-fields="$options.fields"
+          @removeProject="removeProject"
+        />
       </div>
-      <opt-in-jwt />
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/token_access/components/token_access_app.vue b/app/assets/javascripts/token_access/components/token_access_app.vue
new file mode 100644
index 0000000000000000000000000000000000000000..410a6267dc89b488a657e8eb73ac4d94bfc022f1
--- /dev/null
+++ b/app/assets/javascripts/token_access/components/token_access_app.vue
@@ -0,0 +1,27 @@
+<script>
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import OutboundTokenAccess from './outbound_token_access.vue';
+import InboundTokenAccess from './inbound_token_access.vue';
+import OptInJwt from './opt_in_jwt.vue';
+
+export default {
+  components: {
+    OutboundTokenAccess,
+    InboundTokenAccess,
+    OptInJwt,
+  },
+  mixins: [glFeatureFlagMixin()],
+  computed: {
+    inboundTokenAccessEnabled() {
+      return this.glFeatures.ciInboundJobTokenScope;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <outbound-token-access />
+    <inbound-token-access v-if="inboundTokenAccessEnabled" class="gl-pt-5" />
+    <opt-in-jwt />
+  </div>
+</template>
diff --git a/app/assets/javascripts/token_access/components/token_projects_table.vue b/app/assets/javascripts/token_access/components/token_projects_table.vue
index ce33478cbeecee71e020cc7aac55d9f02f39e8ce..c00dd8828955d3621c315b808ab3cc6f9f816655 100644
--- a/app/assets/javascripts/token_access/components/token_projects_table.vue
+++ b/app/assets/javascripts/token_access/components/token_projects_table.vue
@@ -1,32 +1,11 @@
 <script>
 import { GlButton, GlTable } from '@gitlab/ui';
-import { __, s__ } from '~/locale';
+import { s__ } from '~/locale';
 
 export default {
   i18n: {
     emptyText: s__('CI/CD|No projects have been added to the scope'),
   },
-  fields: [
-    {
-      key: 'project',
-      label: __('Projects that can be accessed'),
-      thClass: 'gl-border-t-none!',
-      columnClass: 'gl-w-40p',
-    },
-    {
-      key: 'namespace',
-      label: __('Namespace'),
-      thClass: 'gl-border-t-none!',
-      columnClass: 'gl-w-40p',
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'gl-text-right',
-      thClass: 'gl-border-t-none!',
-      columnClass: 'gl-w-10p',
-    },
-  ],
   components: {
     GlButton,
     GlTable,
@@ -41,6 +20,10 @@ export default {
       type: Array,
       required: true,
     },
+    tableFields: {
+      type: Array,
+      required: true,
+    },
   },
   methods: {
     removeProject(project) {
@@ -52,7 +35,7 @@ export default {
 <template>
   <gl-table
     :items="projects"
-    :fields="$options.fields"
+    :fields="tableFields"
     :tbody-tr-attr="{ 'data-testid': 'projects-token-table-row' }"
     :empty-text="$options.i18n.emptyText"
     show-empty
diff --git a/app/assets/javascripts/token_access/graphql/mutations/inbound_add_project_ci_job_token_scope.mutation.graphql b/app/assets/javascripts/token_access/graphql/mutations/inbound_add_project_ci_job_token_scope.mutation.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..f030a892af2ca2b27cbbaaaeb444e534ad11e817
--- /dev/null
+++ b/app/assets/javascripts/token_access/graphql/mutations/inbound_add_project_ci_job_token_scope.mutation.graphql
@@ -0,0 +1,7 @@
+mutation inboundAddProjectCIJobTokenScope($projectPath: ID!, $targetProjectPath: ID!) {
+  ciJobTokenScopeAddProject(
+    input: { projectPath: $projectPath, targetProjectPath: $targetProjectPath, direction: INBOUND }
+  ) {
+    errors
+  }
+}
diff --git a/app/assets/javascripts/token_access/graphql/mutations/inbound_remove_project_ci_job_token_scope.mutation.graphql b/app/assets/javascripts/token_access/graphql/mutations/inbound_remove_project_ci_job_token_scope.mutation.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..cc6736bb80d9f13aafb98a04a18361608dc5280c
--- /dev/null
+++ b/app/assets/javascripts/token_access/graphql/mutations/inbound_remove_project_ci_job_token_scope.mutation.graphql
@@ -0,0 +1,7 @@
+mutation inboundRemoveProjectCIJobTokenScope($projectPath: ID!, $targetProjectPath: ID!) {
+  ciJobTokenScopeRemoveProject(
+    input: { projectPath: $projectPath, targetProjectPath: $targetProjectPath, direction: INBOUND }
+  ) {
+    errors
+  }
+}
diff --git a/app/assets/javascripts/token_access/graphql/mutations/inbound_update_ci_job_token_scope.mutation.graphql b/app/assets/javascripts/token_access/graphql/mutations/inbound_update_ci_job_token_scope.mutation.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..aac9feab2377fb99e0f2fb046ba08e287b5eaf9f
--- /dev/null
+++ b/app/assets/javascripts/token_access/graphql/mutations/inbound_update_ci_job_token_scope.mutation.graphql
@@ -0,0 +1,8 @@
+mutation inboundUpdateCIJobTokenScope($input: CiCdSettingsUpdateInput!) {
+  ciCdSettingsUpdate(input: $input) {
+    ciCdSettings {
+      inboundJobTokenScopeEnabled
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/token_access/graphql/queries/inbound_get_ci_job_token_scope.query.graphql b/app/assets/javascripts/token_access/graphql/queries/inbound_get_ci_job_token_scope.query.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..68d506a6c413993e1a739abf382df2e5be332f15
--- /dev/null
+++ b/app/assets/javascripts/token_access/graphql/queries/inbound_get_ci_job_token_scope.query.graphql
@@ -0,0 +1,8 @@
+query inboundGetCIJobTokenScope($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    ciCdSettings {
+      inboundJobTokenScopeEnabled
+    }
+  }
+}
diff --git a/app/assets/javascripts/token_access/graphql/queries/inbound_get_projects_with_ci_job_token_scope.query.graphql b/app/assets/javascripts/token_access/graphql/queries/inbound_get_projects_with_ci_job_token_scope.query.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..c51bdcbf7d2ece38c34804704a018375e91f541e
--- /dev/null
+++ b/app/assets/javascripts/token_access/graphql/queries/inbound_get_projects_with_ci_job_token_scope.query.graphql
@@ -0,0 +1,18 @@
+query inboundGetProjectsWithCIJobTokenScope($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    ciJobTokenScope {
+      inboundAllowlist {
+        nodes {
+          id
+          name
+          namespace {
+            id
+            fullPath
+          }
+          fullPath
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/token_access/index.js b/app/assets/javascripts/token_access/index.js
index 6a29883290ae346671391611105790105fd40cca..0253abe393e93a30eba2914df3bdc34e87044fc3 100644
--- a/app/assets/javascripts/token_access/index.js
+++ b/app/assets/javascripts/token_access/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
-import TokenAccess from './components/token_access.vue';
+import TokenAccessApp from './components/token_access_app.vue';
 
 Vue.use(VueApollo);
 
@@ -25,7 +25,7 @@ export const initTokenAccess = (containerId = 'js-ci-token-access-app') => {
       fullPath,
     },
     render(createElement) {
-      return createElement(TokenAccess);
+      return createElement(TokenAccessApp);
     },
   });
 };
diff --git a/app/controllers/projects/settings/ci_cd_controller.rb b/app/controllers/projects/settings/ci_cd_controller.rb
index 5ec1f606ef2120c46168c3b822311c0dd6c0e090..5ba0bd67f4d339589d8563fd7ec2850470a91d20 100644
--- a/app/controllers/projects/settings/ci_cd_controller.rb
+++ b/app/controllers/projects/settings/ci_cd_controller.rb
@@ -14,6 +14,7 @@ class CiCdController < Projects::ApplicationController
 
       before_action do
         push_frontend_feature_flag(:ci_remove_character_limitation_raw_masked_var, type: :development)
+        push_frontend_feature_flag(:ci_inbound_job_token_scope, @project)
       end
 
       helper_method :highlight_badge
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index f267026ea441126712eb355db5c56d7bc2a26d38..f1cb441f5c13b912b989f9c640e8f20306f9ceba 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7765,6 +7765,12 @@ msgstr ""
 msgid "CICD|Add an existing project to the scope"
 msgstr ""
 
+msgid "CICD|Allow CI job tokens from the following projects to access this project"
+msgstr ""
+
+msgid "CICD|Allow access to this project with a CI_JOB_TOKEN"
+msgstr ""
+
 msgid "CICD|An error occurred while update the setting. Please try again."
 msgstr ""
 
@@ -7789,6 +7795,9 @@ msgstr ""
 msgid "CICD|Deployment strategy"
 msgstr ""
 
+msgid "CICD|Enable feature to allow job token access by the following projects."
+msgstr ""
+
 msgid "CICD|Enable feature to limit job token access to the following projects."
 msgstr ""
 
@@ -7804,6 +7813,9 @@ msgstr ""
 msgid "CICD|Limit JSON Web Token (JWT) access"
 msgstr ""
 
+msgid "CICD|Manage which projects can use their CI_JOB_TOKEN to access this project. It is a security risk to disable this feature, because unauthorized projects might attempt to retrieve an active token and access the API. %{linkStart}Learn more.%{linkEnd}"
+msgstr ""
+
 msgid "CICD|Select the projects that can be accessed by API requests authenticated with this project's CI_JOB_TOKEN CI/CD variable. It is a security risk to disable this feature, because unauthorized projects might attempt to retrieve an active token and access the API. %{linkStart}Learn more.%{linkEnd}"
 msgstr ""
 
@@ -32996,6 +33008,9 @@ msgstr ""
 msgid "Project slug"
 msgstr ""
 
+msgid "Project that can be accessed"
+msgstr ""
+
 msgid "Project uploads"
 msgstr ""
 
@@ -33008,6 +33023,9 @@ msgstr ""
 msgid "Project was not found or you do not have permission to add this project to Security Dashboards."
 msgstr ""
 
+msgid "Project with access"
+msgstr ""
+
 msgid "Project: %{name}"
 msgstr ""
 
@@ -33872,9 +33890,6 @@ msgstr ""
 msgid "Projects shared with %{group_name}"
 msgstr ""
 
-msgid "Projects that can be accessed"
-msgstr ""
-
 msgid "Projects to index"
 msgstr ""
 
diff --git a/spec/frontend/token_access/inbound_token_access_spec.js b/spec/frontend/token_access/inbound_token_access_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..fcd1a33fa680ed5adc32f4150366f4cfa6366c9d
--- /dev/null
+++ b/spec/frontend/token_access/inbound_token_access_spec.js
@@ -0,0 +1,311 @@
+import { GlAlert, GlFormInput, GlToggle, GlLoadingIcon } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createAlert } from '~/flash';
+import InboundTokenAccess from '~/token_access/components/inbound_token_access.vue';
+import inboundAddProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/inbound_add_project_ci_job_token_scope.mutation.graphql';
+import inboundRemoveProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/inbound_remove_project_ci_job_token_scope.mutation.graphql';
+import inboundUpdateCIJobTokenScopeMutation from '~/token_access/graphql/mutations/inbound_update_ci_job_token_scope.mutation.graphql';
+import inboundGetCIJobTokenScopeQuery from '~/token_access/graphql/queries/inbound_get_ci_job_token_scope.query.graphql';
+import inboundGetProjectsWithCIJobTokenScopeQuery from '~/token_access/graphql/queries/inbound_get_projects_with_ci_job_token_scope.query.graphql';
+import {
+  inboundJobTokenScopeEnabledResponse,
+  inboundJobTokenScopeDisabledResponse,
+  inboundProjectsWithScopeResponse,
+  inboundAddProjectSuccessResponse,
+  inboundRemoveProjectSuccess,
+  inboundUpdateScopeSuccessResponse,
+} from './mock_data';
+
+const projectPath = 'root/my-repo';
+const message = 'An error occurred';
+const error = new Error(message);
+
+Vue.use(VueApollo);
+
+jest.mock('~/flash');
+
+describe('TokenAccess component', () => {
+  let wrapper;
+
+  const inboundJobTokenScopeEnabledResponseHandler = jest
+    .fn()
+    .mockResolvedValue(inboundJobTokenScopeEnabledResponse);
+  const inboundJobTokenScopeDisabledResponseHandler = jest
+    .fn()
+    .mockResolvedValue(inboundJobTokenScopeDisabledResponse);
+  const inboundProjectsWithScopeResponseHandler = jest
+    .fn()
+    .mockResolvedValue(inboundProjectsWithScopeResponse);
+  const inboundAddProjectSuccessResponseHandler = jest
+    .fn()
+    .mockResolvedValue(inboundAddProjectSuccessResponse);
+  const inboundRemoveProjectSuccessHandler = jest
+    .fn()
+    .mockResolvedValue(inboundRemoveProjectSuccess);
+  const inboundUpdateScopeSuccessResponseHandler = jest
+    .fn()
+    .mockResolvedValue(inboundUpdateScopeSuccessResponse);
+  const failureHandler = jest.fn().mockRejectedValue(error);
+
+  const findToggle = () => wrapper.findComponent(GlToggle);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findAddProjectBtn = () => wrapper.findByRole('button', { name: 'Add project' });
+  const findCancelBtn = () => wrapper.findByRole('button', { name: 'Cancel' });
+  const findProjectInput = () => wrapper.findComponent(GlFormInput);
+  const findRemoveProjectBtn = () => wrapper.findByRole('button', { name: 'Remove access' });
+  const findTokenDisabledAlert = () => wrapper.findComponent(GlAlert);
+
+  const createMockApolloProvider = (requestHandlers) => {
+    return createMockApollo(requestHandlers);
+  };
+
+  const createComponent = (requestHandlers, mountFn = shallowMountExtended) => {
+    wrapper = mountFn(InboundTokenAccess, {
+      provide: {
+        fullPath: projectPath,
+      },
+      apolloProvider: createMockApolloProvider(requestHandlers),
+      data() {
+        return {
+          targetProjectPath: 'root/test',
+        };
+      },
+    });
+  };
+
+  describe('loading state', () => {
+    it('shows loading state while waiting on query to resolve', async () => {
+      createComponent([
+        [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+        [inboundGetProjectsWithCIJobTokenScopeQuery, inboundProjectsWithScopeResponseHandler],
+      ]);
+
+      expect(findLoadingIcon().exists()).toBe(true);
+
+      await waitForPromises();
+
+      expect(findLoadingIcon().exists()).toBe(false);
+    });
+  });
+
+  describe('fetching projects and scope', () => {
+    it('fetches projects and scope correctly', () => {
+      const expectedVariables = {
+        fullPath: 'root/my-repo',
+      };
+
+      createComponent([
+        [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+        [inboundGetProjectsWithCIJobTokenScopeQuery, inboundProjectsWithScopeResponseHandler],
+      ]);
+
+      expect(inboundJobTokenScopeEnabledResponseHandler).toHaveBeenCalledWith(expectedVariables);
+      expect(inboundProjectsWithScopeResponseHandler).toHaveBeenCalledWith(expectedVariables);
+    });
+
+    it('handles fetch projects error correctly', async () => {
+      createComponent([
+        [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+        [inboundGetProjectsWithCIJobTokenScopeQuery, failureHandler],
+      ]);
+
+      await waitForPromises();
+
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'There was a problem fetching the projects',
+      });
+    });
+
+    it('handles fetch scope error correctly', async () => {
+      createComponent([
+        [inboundGetCIJobTokenScopeQuery, failureHandler],
+        [inboundGetProjectsWithCIJobTokenScopeQuery, inboundProjectsWithScopeResponseHandler],
+      ]);
+
+      await waitForPromises();
+
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'There was a problem fetching the job token scope value',
+      });
+    });
+  });
+
+  describe('toggle', () => {
+    it('the toggle is on and the alert is hidden', async () => {
+      createComponent([
+        [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+        [inboundGetProjectsWithCIJobTokenScopeQuery, inboundProjectsWithScopeResponseHandler],
+      ]);
+
+      await waitForPromises();
+
+      expect(findToggle().props('value')).toBe(true);
+      expect(findTokenDisabledAlert().exists()).toBe(false);
+    });
+
+    it('the toggle is off and the alert is visible', async () => {
+      createComponent([
+        [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeDisabledResponseHandler],
+        [inboundGetProjectsWithCIJobTokenScopeQuery, inboundProjectsWithScopeResponseHandler],
+      ]);
+
+      await waitForPromises();
+
+      expect(findToggle().props('value')).toBe(false);
+      expect(findTokenDisabledAlert().exists()).toBe(true);
+    });
+
+    describe('update ci job token scope', () => {
+      it('calls inboundUpdateCIJobTokenScopeMutation mutation', async () => {
+        createComponent(
+          [
+            [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+            [inboundUpdateCIJobTokenScopeMutation, inboundUpdateScopeSuccessResponseHandler],
+          ],
+          mountExtended,
+        );
+
+        await waitForPromises();
+
+        expect(findToggle().props('value')).toBe(true);
+
+        findToggle().vm.$emit('change', false);
+
+        await waitForPromises();
+
+        expect(findToggle().props('value')).toBe(false);
+        expect(inboundUpdateScopeSuccessResponseHandler).toHaveBeenCalledWith({
+          input: {
+            fullPath: 'root/my-repo',
+            inboundJobTokenScopeEnabled: false,
+          },
+        });
+      });
+
+      it('handles update scope error correctly', async () => {
+        createComponent(
+          [
+            [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeDisabledResponseHandler],
+            [inboundUpdateCIJobTokenScopeMutation, failureHandler],
+          ],
+          mountExtended,
+        );
+
+        await waitForPromises();
+
+        expect(findToggle().props('value')).toBe(false);
+
+        findToggle().vm.$emit('change', true);
+
+        await waitForPromises();
+
+        expect(findToggle().props('value')).toBe(false);
+        expect(createAlert).toHaveBeenCalledWith({ message });
+      });
+    });
+  });
+
+  describe('add project', () => {
+    it('calls add project mutation', async () => {
+      createComponent(
+        [
+          [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+          [inboundGetProjectsWithCIJobTokenScopeQuery, inboundProjectsWithScopeResponseHandler],
+          [inboundAddProjectCIJobTokenScopeMutation, inboundAddProjectSuccessResponseHandler],
+        ],
+        mountExtended,
+      );
+
+      await waitForPromises();
+
+      findAddProjectBtn().trigger('click');
+
+      expect(inboundAddProjectSuccessResponseHandler).toHaveBeenCalledWith({
+        projectPath,
+        targetProjectPath: 'root/test',
+      });
+    });
+
+    it('add project handles error correctly', async () => {
+      createComponent(
+        [
+          [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+          [inboundGetProjectsWithCIJobTokenScopeQuery, inboundProjectsWithScopeResponseHandler],
+          [inboundAddProjectCIJobTokenScopeMutation, failureHandler],
+        ],
+        mountExtended,
+      );
+
+      await waitForPromises();
+
+      findAddProjectBtn().trigger('click');
+
+      await waitForPromises();
+
+      expect(createAlert).toHaveBeenCalledWith({ message });
+    });
+
+    it('clicking cancel clears target path', async () => {
+      createComponent(
+        [
+          [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+          [inboundGetProjectsWithCIJobTokenScopeQuery, inboundProjectsWithScopeResponseHandler],
+        ],
+        mountExtended,
+      );
+
+      await waitForPromises();
+
+      expect(findProjectInput().element.value).toBe('root/test');
+
+      await findCancelBtn().trigger('click');
+
+      expect(findProjectInput().element.value).toBe('');
+    });
+  });
+
+  describe('remove project', () => {
+    it('calls remove project mutation', async () => {
+      createComponent(
+        [
+          [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+          [inboundGetProjectsWithCIJobTokenScopeQuery, inboundProjectsWithScopeResponseHandler],
+          [inboundRemoveProjectCIJobTokenScopeMutation, inboundRemoveProjectSuccessHandler],
+        ],
+        mountExtended,
+      );
+
+      await waitForPromises();
+
+      findRemoveProjectBtn().trigger('click');
+
+      expect(inboundRemoveProjectSuccessHandler).toHaveBeenCalledWith({
+        projectPath,
+        targetProjectPath: 'root/ci-project',
+      });
+    });
+
+    it('remove project handles error correctly', async () => {
+      createComponent(
+        [
+          [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+          [inboundGetProjectsWithCIJobTokenScopeQuery, inboundProjectsWithScopeResponseHandler],
+          [inboundRemoveProjectCIJobTokenScopeMutation, failureHandler],
+        ],
+        mountExtended,
+      );
+
+      await waitForPromises();
+
+      findRemoveProjectBtn().trigger('click');
+
+      await waitForPromises();
+
+      expect(createAlert).toHaveBeenCalledWith({ message });
+    });
+  });
+});
diff --git a/spec/frontend/token_access/mock_data.js b/spec/frontend/token_access/mock_data.js
index fff5a0ad4d0dace8128e9b23398d027ef69d5e87..ab04735b9853bc1ebc66fd651e67f402fa89c162 100644
--- a/spec/frontend/token_access/mock_data.js
+++ b/spec/frontend/token_access/mock_data.js
@@ -106,6 +106,21 @@ export const mockProjects = [
   },
 ];
 
+export const mockFields = [
+  {
+    key: 'project',
+    label: 'Project with access',
+  },
+  {
+    key: 'namespace',
+    label: 'Namespace',
+  },
+  {
+    key: 'actions',
+    label: '',
+  },
+];
+
 export const optInJwtQueryResponse = (optInJwt) => ({
   data: {
     project: {
@@ -131,3 +146,84 @@ export const optInJwtMutationResponse = (optInJwt) => ({
     },
   },
 });
+
+export const inboundJobTokenScopeEnabledResponse = {
+  data: {
+    project: {
+      id: '1',
+      ciCdSettings: {
+        inboundJobTokenScopeEnabled: true,
+        __typename: 'ProjectCiCdSetting',
+      },
+      __typename: 'Project',
+    },
+  },
+};
+
+export const inboundJobTokenScopeDisabledResponse = {
+  data: {
+    project: {
+      id: '1',
+      ciCdSettings: {
+        inboundJobTokenScopeEnabled: false,
+        __typename: 'ProjectCiCdSetting',
+      },
+      __typename: 'Project',
+    },
+  },
+};
+
+export const inboundProjectsWithScopeResponse = {
+  data: {
+    project: {
+      __typename: 'Project',
+      id: '1',
+      ciJobTokenScope: {
+        __typename: 'CiJobTokenScopeType',
+        inboundAllowlist: {
+          __typename: 'ProjectConnection',
+          nodes: [
+            {
+              __typename: 'Project',
+              fullPath: 'root/ci-project',
+              id: 'gid://gitlab/Project/23',
+              name: 'ci-project',
+              namespace: { id: 'gid://gitlab/Namespaces::UserNamespace/1', fullPath: 'root' },
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const inboundAddProjectSuccessResponse = {
+  data: {
+    ciJobTokenScopeAddProject: {
+      errors: [],
+      __typename: 'CiJobTokenScopeAddProjectPayload',
+    },
+  },
+};
+
+export const inboundRemoveProjectSuccess = {
+  data: {
+    ciJobTokenScopeRemoveProject: {
+      errors: [],
+      __typename: 'CiJobTokenScopeRemoveProjectPayload',
+    },
+  },
+};
+
+export const inboundUpdateScopeSuccessResponse = {
+  data: {
+    ciCdSettingsUpdate: {
+      ciCdSettings: {
+        inboundJobTokenScopeEnabled: false,
+        __typename: 'ProjectCiCdSetting',
+      },
+      errors: [],
+      __typename: 'CiCdSettingsUpdatePayload',
+    },
+  },
+};
diff --git a/spec/frontend/token_access/token_access_spec.js b/spec/frontend/token_access/outbound_token_access_spec.js
similarity index 92%
rename from spec/frontend/token_access/token_access_spec.js
rename to spec/frontend/token_access/outbound_token_access_spec.js
index 62f546463a1f569dc135adc5590e5c8fde8a14ef..893a021197fe635230d5ef24213080fd569fceeb 100644
--- a/spec/frontend/token_access/token_access_spec.js
+++ b/spec/frontend/token_access/outbound_token_access_spec.js
@@ -5,8 +5,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/flash';
-import OptInJwt from '~/token_access/components/opt_in_jwt.vue';
-import TokenAccess from '~/token_access/components/token_access.vue';
+import OutboundTokenAccess from '~/token_access/components/outbound_token_access.vue';
 import addProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/add_project_ci_job_token_scope.mutation.graphql';
 import removeProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/remove_project_ci_job_token_scope.mutation.graphql';
 import updateCIJobTokenScopeMutation from '~/token_access/graphql/mutations/update_ci_job_token_scope.mutation.graphql';
@@ -41,7 +40,6 @@ describe('TokenAccess component', () => {
   const failureHandler = jest.fn().mockRejectedValue(error);
 
   const findToggle = () => wrapper.findComponent(GlToggle);
-  const findOptInJwt = () => wrapper.findComponent(OptInJwt);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAddProjectBtn = () => wrapper.findByRole('button', { name: 'Add project' });
   const findRemoveProjectBtn = () => wrapper.findByRole('button', { name: 'Remove access' });
@@ -52,7 +50,7 @@ describe('TokenAccess component', () => {
   };
 
   const createComponent = (requestHandlers, mountFn = shallowMountExtended) => {
-    wrapper = mountFn(TokenAccess, {
+    wrapper = mountFn(OutboundTokenAccess, {
       provide: {
         fullPath: projectPath,
       },
@@ -65,10 +63,6 @@ describe('TokenAccess component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('loading state', () => {
     it('shows loading state while waiting on query to resolve', async () => {
       createComponent([
@@ -84,21 +78,6 @@ describe('TokenAccess component', () => {
     });
   });
 
-  describe('template', () => {
-    beforeEach(async () => {
-      createComponent([
-        [getCIJobTokenScopeQuery, enabledJobTokenScopeHandler],
-        [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScopeHandler],
-      ]);
-
-      await waitForPromises();
-    });
-
-    it('renders the opt in jwt component', () => {
-      expect(findOptInJwt().exists()).toBe(true);
-    });
-  });
-
   describe('fetching projects and scope', () => {
     it('fetches projects and scope correctly', () => {
       const expectedVariables = {
diff --git a/spec/frontend/token_access/token_access_app_spec.js b/spec/frontend/token_access/token_access_app_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..7f269ee5fda4e3977b8709a43589cd6b0643e556
--- /dev/null
+++ b/spec/frontend/token_access/token_access_app_spec.js
@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import OutboundTokenAccess from '~/token_access/components/outbound_token_access.vue';
+import InboundTokenAccess from '~/token_access/components/inbound_token_access.vue';
+import OptInJwt from '~/token_access/components/opt_in_jwt.vue';
+import TokenAccessApp from '~/token_access/components/token_access_app.vue';
+
+describe('TokenAccessApp component', () => {
+  let wrapper;
+
+  const findOutboundTokenAccess = () => wrapper.findComponent(OutboundTokenAccess);
+  const findInboundTokenAccess = () => wrapper.findComponent(InboundTokenAccess);
+  const findOptInJwt = () => wrapper.findComponent(OptInJwt);
+
+  const createComponent = (flagState = false) => {
+    wrapper = shallowMount(TokenAccessApp, {
+      provide: {
+        glFeatures: { ciInboundJobTokenScope: flagState },
+      },
+    });
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the opt in jwt component', () => {
+      expect(findOptInJwt().exists()).toBe(true);
+    });
+
+    it('renders the outbound token access component', () => {
+      expect(findOutboundTokenAccess().exists()).toBe(true);
+    });
+
+    it('does not render the inbound token access component', () => {
+      expect(findInboundTokenAccess().exists()).toBe(false);
+    });
+  });
+
+  describe('with feature flag enabled', () => {
+    it('renders the inbound token access component', () => {
+      createComponent(true);
+
+      expect(findInboundTokenAccess().exists()).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/token_access/token_projects_table_spec.js b/spec/frontend/token_access/token_projects_table_spec.js
index 0fa1a2453f7bafe719b827dde0cf7fb4e074e088..b51d8b3cceaba91f2c5970e26001c907e9118f36 100644
--- a/spec/frontend/token_access/token_projects_table_spec.js
+++ b/spec/frontend/token_access/token_projects_table_spec.js
@@ -1,7 +1,7 @@
 import { GlTable, GlButton } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import TokenProjectsTable from '~/token_access/components/token_projects_table.vue';
-import { mockProjects } from './mock_data';
+import { mockProjects, mockFields } from './mock_data';
 
 describe('Token projects table', () => {
   let wrapper;
@@ -12,6 +12,7 @@ describe('Token projects table', () => {
         fullPath: 'root/ci-project',
       },
       propsData: {
+        tableFields: mockFields,
         projects: mockProjects,
       },
     });
@@ -28,10 +29,6 @@ describe('Token projects table', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays a table', () => {
     expect(findTable().exists()).toBe(true);
   });