diff --git a/frontend/common/useInfiniteScroll.ts b/frontend/common/useInfiniteScroll.ts
index a10967cf4395..c3cd56b40338 100644
--- a/frontend/common/useInfiniteScroll.ts
+++ b/frontend/common/useInfiniteScroll.ts
@@ -4,6 +4,7 @@ import { PagedRequest } from './types/requests'
 import { PagedResponse } from './types/responses'
 import { QueryDefinition } from '@reduxjs/toolkit/query'
 import useThrottle from './useThrottle'
+import { SubscriptionOptions } from '@reduxjs/toolkit/src/query/core/apiState'
 
 const useInfiniteScroll = <
   REQ extends PagedRequest<{}>,
@@ -12,17 +13,24 @@ const useInfiniteScroll = <
   useGetDataListQuery: UseQuery<QueryDefinition<REQ, any, any, RES>>,
   queryParameters: REQ,
   throttle = 100,
+  queryOptions?: SubscriptionOptions & {
+    skip?: boolean
+    refetchOnMountOrArgChange?: boolean | number
+  },
 ) => {
   const [localPage, setLocalPage] = useState(1)
   const [combinedData, setCombinedData] = useState<RES | null>(null)
   const [loadingCombinedData, setLoadingCombinedData] = useState(false)
   const [q, setQ] = useState('')
 
-  const queryResponse = useGetDataListQuery({
-    ...queryParameters,
-    page: localPage,
-    q,
-  })
+  const queryResponse = useGetDataListQuery(
+    {
+      ...queryParameters,
+      page: localPage,
+      q,
+    },
+    queryOptions,
+  )
 
   useEffect(
     () => {
diff --git a/frontend/web/components/ExternalResourcesLinkTab.tsx b/frontend/web/components/ExternalResourcesLinkTab.tsx
index f3deb304f4f1..fffd7d99fa83 100644
--- a/frontend/web/components/ExternalResourcesLinkTab.tsx
+++ b/frontend/web/components/ExternalResourcesLinkTab.tsx
@@ -1,15 +1,11 @@
 import React, { FC, useState } from 'react'
-import MyRepositoriesSelect from './MyRepositoriesSelect'
 import ExternalResourcesTable, {
   ExternalResourcesTableBase,
 } from './ExternalResourcesTable'
 import { ExternalResource, GithubResource } from 'common/types/responses'
-import { GitHubResourceSelectProvider } from './GitHubResourceSelectProvider'
 import { useCreateExternalResourceMutation } from 'common/services/useExternalResource'
 import Constants from 'common/constants'
-import Button from './base/forms/Button'
 import GitHubResourcesSelect from './GitHubResourcesSelect'
-import _ from 'lodash'
 import AppActions from 'common/dispatcher/app-actions'
 
 type ExternalResourcesLinkTabType = {
@@ -21,170 +17,69 @@ type ExternalResourcesLinkTabType = {
 }
 
 type AddExternalResourceRowType = ExternalResourcesTableBase & {
-  linkedExternalResources?: ExternalResource[]
+  selectedResources?: ExternalResource[]
   environmentId: string
+  githubId: string
 }
 
-type GitHubStatusType = {
-  value: number
-  label: string
-}
-
-const AddExternalResourceRow: FC<AddExternalResourceRowType> = ({
+const ExternalResourcesLinkTab: FC<ExternalResourcesLinkTabType> = ({
   environmentId,
   featureId,
-  linkedExternalResources,
+  githubId,
   organisationId,
   projectId,
-  repoName,
-  repoOwner,
 }) => {
-  const [externalResourceType, setExternalResourceType] = useState<string>('')
-  const [featureExternalResource, setFeatureExternalResource] = useState<
-    GithubResource | undefined
-  >(undefined)
-  const [lastSavedResource, setLastSavedResource] = useState<
-    string | undefined
-  >(undefined)
-  const [createExternalResource] = useCreateExternalResourceMutation()
   const githubTypes = Object.values(Constants.resourceTypes).filter(
     (v) => v.type === 'GITHUB',
   )
-  return (
-    <div className='mt-4'>
-      <Flex style={{ maxWidth: '170px' }}>
-        <Select
-          size='select-md'
-          placeholder={'Select Type'}
-          onChange={(v: GitHubStatusType) => setExternalResourceType(v.label)}
-          options={githubTypes.map((e) => {
-            return { label: e.label, value: e.id }
-          })}
-        />
-      </Flex>
-      <Row className='mt-4'>
-        <Flex>
-          {externalResourceType && (
-            <GitHubResourceSelectProvider
-              lastSavedResource={lastSavedResource}
-              linkedExternalResources={linkedExternalResources!}
-              orgId={organisationId}
-              onChange={(v) => setFeatureExternalResource(v)}
-              repoOwner={repoOwner}
-              repoName={repoName}
-              githubResource={
-                (externalResourceType &&
-                  (
-                    _.find(_.values(Constants.resourceTypes), {
-                      label: externalResourceType!,
-                    }) as any
-                  ).resourceType) ||
-                ''
-              }
-            >
-              <GitHubResourcesSelect
-                onChange={(v) => setFeatureExternalResource(v)}
-                lastSavedResource={lastSavedResource}
-              />
-            </GitHubResourceSelectProvider>
-          )}
-        </Flex>
-        <div className='table-column text-center' style={{ width: '80px' }}>
-          <Button
-            className='text-right'
-            theme='primary'
-            disabled={!externalResourceType || !featureExternalResource}
-            onClick={() => {
-              const type = Object.keys(Constants.resourceTypes).find(
-                (key: string) =>
-                  Constants.resourceTypes[
-                    key as keyof typeof Constants.resourceTypes
-                  ].label === externalResourceType,
-              )
-              if (type && featureExternalResource) {
-                createExternalResource({
-                  body: {
-                    feature: parseInt(featureId),
-                    metadata: {
-                      'draft': featureExternalResource.draft,
-                      'merged': featureExternalResource.merged,
-                      'state': featureExternalResource.state,
-                      'title': featureExternalResource.title,
-                    },
-                    type: type,
-                    url: featureExternalResource.html_url,
-                  },
-                  feature_id: featureId,
-                  project_id: projectId,
-                }).then(() => {
-                  toast('External Resource Added')
-                  setLastSavedResource(featureExternalResource.html_url)
-                  AppActions.refreshFeatures(parseInt(projectId), environmentId)
-                })
-              } else {
-                throw new Error('Invalid External Resource Data')
-              }
-            }}
-          >
-            Save
-          </Button>
-        </div>
-      </Row>
-    </div>
-  )
-}
 
-const ExternalResourcesLinkTab: FC<ExternalResourcesLinkTabType> = ({
-  environmentId,
-  featureId,
-  githubId,
-  organisationId,
-  projectId,
-}) => {
-  const [repoName, setRepoName] = useState<string>('')
-  const [repoOwner, setRepoOwner] = useState<string>('')
+  const [createExternalResource] = useCreateExternalResourceMutation()
+  const [resourceType, setResourceType] = useState(githubTypes[0].resourceType)
   const [selectedResources, setSelectedResources] =
     useState<ExternalResource[]>()
 
+  const addResource = (featureExternalResource: GithubResource) => {
+    const type = Object.keys(Constants.resourceTypes).find(
+      (key: string) =>
+        Constants.resourceTypes[key as keyof typeof Constants.resourceTypes]
+          .resourceType === resourceType,
+    )
+    createExternalResource({
+      body: {
+        feature: parseInt(featureId),
+        metadata: {
+          'draft': featureExternalResource.draft,
+          'merged': featureExternalResource.merged,
+          'state': featureExternalResource.state,
+          'title': featureExternalResource.title,
+        },
+        type: type,
+        url: featureExternalResource.html_url,
+      },
+      feature_id: featureId,
+      project_id: projectId,
+    }).then(() => {
+      toast('External Resource Added')
+      AppActions.refreshFeatures(parseInt(projectId), environmentId)
+    })
+  }
   return (
     <>
-      <h5>GitHub Issues and Pull Requests linked</h5>
+      <GitHubResourcesSelect
+        githubId={githubId}
+        resourceType={resourceType}
+        setResourceType={setResourceType}
+        onChange={addResource as any}
+        value={selectedResources?.map((v) => v.url!)}
+        orgId={organisationId}
+      />
       <ExternalResourcesTable
         featureId={featureId}
         projectId={projectId}
-        organisationId={organisationId}
-        repoOwner={repoOwner}
-        repoName={repoName}
         setSelectedResources={(r: ExternalResource[]) =>
           setSelectedResources(r)
         }
       />
-      <label className='cols-sm-2 control-label mt-4'>
-        {' '}
-        Link new Issue / Pull Request{' '}
-      </label>
-      <FormGroup>
-        <MyRepositoriesSelect
-          githubId={githubId}
-          orgId={organisationId}
-          onChange={(v) => {
-            const repoData = v.split('/')
-            setRepoName(repoData[0])
-            setRepoOwner(repoData[1])
-          }}
-        />
-        {repoName && repoOwner && (
-          <AddExternalResourceRow
-            environmentId={environmentId}
-            featureId={featureId}
-            projectId={projectId}
-            organisationId={organisationId}
-            repoName={repoName}
-            repoOwner={repoOwner}
-            linkedExternalResources={selectedResources}
-          />
-        )}
-      </FormGroup>
     </>
   )
 }
diff --git a/frontend/web/components/ExternalResourcesTable.tsx b/frontend/web/components/ExternalResourcesTable.tsx
index e5b9b5ab9cff..9ea9964bc320 100644
--- a/frontend/web/components/ExternalResourcesTable.tsx
+++ b/frontend/web/components/ExternalResourcesTable.tsx
@@ -14,8 +14,6 @@ export type ExternalResourcesTableBase = {
   featureId: string
   projectId: string
   organisationId: string
-  repoName: string
-  repoOwner: string
 }
 
 export type ExternalResourcesTableType = ExternalResourcesTableBase & {
@@ -177,7 +175,7 @@ const ExternalResourcesTable: FC<ExternalResourcesTableType> = ({
           />
         )}
         renderNoResults={
-          <FormGroup className='text-center'>
+          <FormGroup className='text-center mt-4'>
             You have no external resources linked for this feature.
           </FormGroup>
         }
diff --git a/frontend/web/components/GitHubResourceSelectProvider.tsx b/frontend/web/components/GitHubResourceSelectProvider.tsx
deleted file mode 100644
index 9bf3109abb58..000000000000
--- a/frontend/web/components/GitHubResourceSelectProvider.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { createContext, useContext, FC, useEffect, useState } from 'react'
-import { useGetGithubResourcesQuery } from 'common/services/useGithub'
-import { ExternalResource, GithubResource, Res } from 'common/types/responses'
-import useInfiniteScroll from 'common/useInfiniteScroll'
-import { Req } from 'common/types/requests'
-
-type GitHubResourceSelectProviderType = {
-  children: React.ReactNode
-  githubResource: string
-  lastSavedResource: string | undefined
-  linkedExternalResources: ExternalResource[]
-  onChange: (v: string) => void
-  orgId: string
-  repoOwner: string
-  repoName: string
-}
-
-type GitHubResourceSelectContextType = {
-  count: number
-  githubResources?: GithubResource[]
-  isFetching: boolean
-  isLoading: boolean
-  loadMore: () => void
-  loadingCombinedData: boolean
-  nextPage?: string
-  searchItems: (search: string) => void
-  refresh: () => void
-}
-
-const GitHubResourceSelectContext = createContext<
-  GitHubResourceSelectContextType | undefined
->(undefined)
-
-export const GitHubResourceSelectProvider: FC<
-  GitHubResourceSelectProviderType
-> = ({ children, ...props }) => {
-  const [externalResourcesSelect, setExternalResourcesSelect] =
-    useState<GithubResource[]>()
-
-  const throttleDelay = 300
-
-  const {
-    data,
-    isFetching,
-    isLoading,
-    loadMore,
-    loadingCombinedData,
-    refresh,
-    searchItems,
-  } = useInfiniteScroll<Req['getGithubResources'], Res['githubResources']>(
-    useGetGithubResourcesQuery,
-    {
-      github_resource: props.githubResource,
-      organisation_id: props.orgId,
-      page_size: 100,
-      repo_name: props.repoName,
-      repo_owner: props.repoOwner,
-    },
-    throttleDelay,
-  )
-
-  const { count, next, results } = data || { results: [] }
-
-  useEffect(() => {
-    if (results && props.linkedExternalResources) {
-      setExternalResourcesSelect(
-        results.filter((i: GithubResource) => {
-          const same = props.linkedExternalResources?.some(
-            (r) => i.html_url === r.url,
-          )
-          return !same
-        }),
-      )
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, props.linkedExternalResources])
-
-  return (
-    <GitHubResourceSelectContext.Provider
-      value={{
-        ...props,
-        count: count || 0,
-        githubResources: externalResourcesSelect,
-        isFetching,
-        isLoading,
-        loadMore,
-        loadingCombinedData,
-        nextPage: next,
-        refresh,
-        searchItems,
-      }}
-    >
-      {children}
-    </GitHubResourceSelectContext.Provider>
-  )
-}
-
-export const useGitHubResourceSelectProvider = () => {
-  const context = useContext(GitHubResourceSelectContext)
-  if (!context) {
-    throw new Error(
-      'useGitHubResourceSelect must be used within a GitHubResourceSelectProvider',
-    )
-  }
-  return context
-}
diff --git a/frontend/web/components/GitHubResourcesSelect.tsx b/frontend/web/components/GitHubResourcesSelect.tsx
index 8b814ec62fb3..1ad4dc921f63 100644
--- a/frontend/web/components/GitHubResourcesSelect.tsx
+++ b/frontend/web/components/GitHubResourcesSelect.tsx
@@ -1,195 +1,136 @@
-import React, { FC, useEffect, useRef, useState } from 'react'
-import { GithubResource } from 'common/types/responses'
+import React, { FC, useEffect, useMemo, useState } from 'react'
+import { ExternalResource, GithubResource, Res } from 'common/types/responses'
 import Utils from 'common/utils/utils'
-import { FixedSizeList } from 'react-window'
-import InfiniteLoader from 'react-window-infinite-loader'
-import { useGitHubResourceSelectProvider } from './GitHubResourceSelectProvider'
-import { components } from 'react-select'
-import Button from './base/forms/Button'
-import Icon from './Icon'
-import Select from 'react-select'
-
-type MenuListType = {
-  children: React.ReactNode
-  searchText: (v: string) => void
-  selectProps: any
-  width: number
-  [key: string]: any
-}
-
-const MenuList: FC<MenuListType> = ({
-  children,
-  searchText,
-  selectProps,
-  width,
-  ...rest
-}) => {
-  const infiniteLoaderRef = useRef(null)
-  const hasMountedRef = useRef(false)
-  const childrenArray = React.Children.toArray(children)
-  const {
-    isFetching,
-    isLoading: parentIsLoading,
-    loadMore,
-    loadingCombinedData,
-    nextPage,
-  } = useGitHubResourceSelectProvider()
-  const [isLoading, setIsLoading] = useState(parentIsLoading)
-  const loadMoreItems =
-    isFetching || isLoading || !nextPage ? () => {} : loadMore
-  const isItemLoaded = (index: number) => childrenArray[index] !== undefined
-  const itemCount = childrenArray.length + (nextPage ? 1 : 0)
-  const itemSize = 60
-
-  const moreItems = async (
-    startIndex: number,
-    stopIndex: number,
-  ): Promise<void> => {
-    return loadMoreItems()
-  }
-
-  useEffect(() => {
-    setIsLoading(parentIsLoading || loadingCombinedData)
-  }, [parentIsLoading, loadingCombinedData])
-
-  useEffect(() => {
-    // Reset cached items when "searchText" changes.
-    if (hasMountedRef.current) {
-      if (infiniteLoaderRef.current) {
-        if (loadingCombinedData) {
-          ;(
-            infiniteLoaderRef.current as InfiniteLoader
-          ).resetloadMoreItemsCache()
-        }
-      }
-    }
-    hasMountedRef.current = true
-  }, [searchText, loadingCombinedData])
-
-  return isLoading ? (
-    <div>Loading...</div>
-  ) : !itemCount ? (
-    <div>No results found</div>
-  ) : (
-    <InfiniteLoader
-      isItemLoaded={isItemLoaded}
-      itemCount={itemCount}
-      loadMoreItems={moreItems}
-      threshold={40}
-    >
-      {({ onItemsRendered, ref }) => (
-        <FixedSizeList
-          {...rest}
-          height={Math.min(
-            itemCount * itemSize + 20,
-            selectProps.maxMenuHeight,
-          )}
-          itemCount={itemCount}
-          itemSize={itemSize}
-          onItemsRendered={onItemsRendered}
-          ref={ref}
-          width={width}
-        >
-          {({ index, isScrolling, style, ...rest }) => {
-            const child = childrenArray[index]
-            return (
-              <div {...rest} style={style}>
-                {isItemLoaded(index) ? (
-                  child
-                ) : (
-                  <div className='text-center'>
-                    <Loader />
-                  </div>
-                )}
-              </div>
-            )
-          }}
-        </FixedSizeList>
-      )}
-    </InfiniteLoader>
-  )
-}
-
-const CustomControl = ({
-  children,
-  ...props
-}: {
-  children: React.ReactNode
-}) => {
-  const { refresh } = useGitHubResourceSelectProvider()
-  return (
-    <components.Control {...props}>
-      {children}
-      <Button style={{ marginLeft: 'auto' }} theme='icon' onClick={refresh}>
-        <Icon name='refresh' />
-      </Button>
-    </components.Control>
-  )
-}
+import useInfiniteScroll from 'common/useInfiniteScroll'
+import { Req } from 'common/types/requests'
+import { useGetGithubResourcesQuery } from 'common/services/useGithub'
+import Constants from 'common/constants'
+import MyRepositoriesSelect from './MyRepositoriesSelect'
 
 export type GitHubResourcesSelectType = {
   onChange: (value: string) => void
-  lastSavedResource: string | undefined
+  linkedExternalResources: ExternalResource[] | undefined
+  orgId: string
+  githubId: string
+  resourceType: string
+  value: string[] | undefined // an array of resource URLs
+  setResourceType: (value: string) => void
 }
 
 type GitHubResourcesValueType = {
   value: string
 }
-
 const GitHubResourcesSelect: FC<GitHubResourcesSelectType> = ({
-  lastSavedResource,
+  githubId,
   onChange,
+  orgId,
+  resourceType,
+  setResourceType,
+  value,
 }) => {
-  const { githubResources, isFetching, isLoading, searchItems } =
-    useGitHubResourceSelectProvider()
+  const githubTypes = Object.values(Constants.resourceTypes).filter(
+    (v) => v.type === 'GITHUB',
+  )
+  const [repo, setRepo] = useState('')
+  const { repoName, repoOwner } = useMemo(() => {
+    if (!repo) {
+      return {}
+    }
+    const [repoName, repoOwner] = repo.split('/')
+    return { repoName, repoOwner }
+  }, [repo])
+
+  const { data, isFetching, isLoading, searchItems } = useInfiniteScroll<
+    Req['getGithubResources'],
+    Res['githubResources']
+  >(
+    useGetGithubResourcesQuery,
+    {
+      github_resource: resourceType,
+      organisation_id: orgId,
+      page_size: 100,
+      repo_name: `${repoName}`,
+      repo_owner: `${repoOwner}`,
+    },
+    100,
+    { skip: !resourceType || !orgId || !repoName || !repoOwner },
+  )
+
   const [selectedOption, setSelectedOption] =
     useState<GitHubResourcesValueType | null>(null)
   const [searchText, setSearchText] = React.useState('')
 
-  useEffect(() => {
-    if (selectedOption && selectedOption.value === lastSavedResource) {
-      setSelectedOption(null)
-    }
-  }, [lastSavedResource, selectedOption])
-
   return (
-    <div>
-      <Select
-        filterOption={(options: any[]) => {
-          return options
-        }}
-        value={selectedOption}
-        size='select-md'
-        placeholder={'Select Your Resource'}
-        onChange={(v: GitHubResourcesValueType) => {
-          setSelectedOption(v)
-          onChange(v?.value)
-        }}
-        isClearable={true}
-        options={githubResources?.map((i: GithubResource) => {
-          return {
-            label: `${i.title} #${i.number}`,
-            value: i,
-          }
-        })}
-        noOptionsMessage={() =>
-          isLoading
-            ? 'Loading...'
-            : isFetching
-            ? 'Refreshing data ...'
-            : 'No Results found'
-        }
-        onInputChange={(e: any) => {
-          setSearchText(e)
-          searchItems(Utils.safeParseEventValue(e))
-        }}
-        components={{
-          Control: CustomControl,
-          MenuList,
-        }}
-        data={{ searchText }}
-      />
-    </div>
+    <>
+      <label className='cols-sm-2 control-label'>
+        Link new Issue / Pull Request
+      </label>
+      <div className='d-flex gap-2 mb-2'>
+        <MyRepositoriesSelect
+          githubId={githubId}
+          orgId={orgId}
+          value={repo}
+          onChange={setRepo}
+        />
+        <div style={{ width: 200 }}>
+          <Select
+            autoSelect
+            className='w-100 react-select'
+            size='select-md'
+            placeholder={'Select Type'}
+            value={githubTypes.find((v) => v.resourceType === resourceType)}
+            onChange={(v: { resourceType: string }) =>
+              setResourceType(v.resourceType)
+            }
+            options={githubTypes.map((e) => {
+              return {
+                label: e.label,
+                resourceType: e.resourceType,
+                value: e.id,
+              }
+            })}
+          />
+        </div>
+      </div>
+      {!!repoName && !!repoOwner && (
+        <div>
+          <Select
+            filterOption={(options: any[]) => {
+              return options
+            }}
+            value={null}
+            size='select-md'
+            placeholder={'Select Your Resource'}
+            onChange={(v: GitHubResourcesValueType) => {
+              setSelectedOption(null)
+              onChange(v?.value)
+            }}
+            options={data?.results
+              .filter((v) => !value?.includes(v.html_url))
+              .map((i: GithubResource) => {
+                return {
+                  label: `${i.title} #${i.number}`,
+                  value: i,
+                }
+              })}
+            noOptionsMessage={() =>
+              isLoading || isFetching ? (
+                <div className='py-2'>
+                  <Loader />
+                </div>
+              ) : (
+                'No Results found'
+              )
+            }
+            onInputChange={(e: any) => {
+              setSearchText(e)
+              searchItems(Utils.safeParseEventValue(e))
+            }}
+            data={{ searchText }}
+          />
+        </div>
+      )}
+    </>
   )
 }
 
diff --git a/frontend/web/components/MyRepositoriesSelect.tsx b/frontend/web/components/MyRepositoriesSelect.tsx
index 36457bfb8129..8e6cbbde559c 100644
--- a/frontend/web/components/MyRepositoriesSelect.tsx
+++ b/frontend/web/components/MyRepositoriesSelect.tsx
@@ -5,6 +5,7 @@ import RepositoriesSelect from './RepositoriesSelect'
 type MyRepositoriesSelectType = {
   githubId: string
   orgId: string
+  value?: string
   onChange: (value: string) => void
 }
 
@@ -12,6 +13,7 @@ const MyRepositoriesSelect: FC<MyRepositoriesSelectType> = ({
   githubId,
   onChange,
   orgId,
+  value,
 }) => {
   const { data } = useGetGithubRepositoriesQuery({
     github_id: githubId,
@@ -27,16 +29,11 @@ const MyRepositoriesSelect: FC<MyRepositoriesSelectType> = ({
   }, [data])
 
   return (
-    <div className='mt-4'>
-      {!!data?.results.length && data?.results.length !== 1 && (
-        <>
-          <RepositoriesSelect
-            repositories={data?.results}
-            onChange={onChange}
-          />
-        </>
-      )}
-    </div>
+    <RepositoriesSelect
+      value={value}
+      repositories={data?.results}
+      onChange={onChange}
+    />
   )
 }
 
diff --git a/frontend/web/components/RepositoriesSelect.tsx b/frontend/web/components/RepositoriesSelect.tsx
index 02074c28ffd7..4faa6708a590 100644
--- a/frontend/web/components/RepositoriesSelect.tsx
+++ b/frontend/web/components/RepositoriesSelect.tsx
@@ -3,6 +3,7 @@ import { GithubRepository } from 'common/types/responses'
 
 export type RepositoriesSelectType = {
   disabled?: boolean
+  value?: string
   repositories: GithubRepository[] | undefined
   onChange: (value: string) => void
 }
@@ -11,22 +12,25 @@ const RepositoriesSelect: FC<RepositoriesSelectType> = ({
   disabled,
   onChange,
   repositories,
+  value,
 }) => {
+  const options = repositories?.map((i: GithubRepository) => {
+    return {
+      label: `${i.repository_name} - ${i.repository_owner}`,
+      value: `${i.repository_name}/${i.repository_owner}`,
+    }
+  })
   return (
-    <div>
-      <Select
-        size='select-md'
-        placeholder={'Select Your Repository'}
-        disabled={disabled}
-        onChange={(v: any) => onChange(v?.value)}
-        options={repositories?.map((i: GithubRepository) => {
-          return {
-            label: `${i.repository_name} - ${i.repository_owner}`,
-            value: `${i.repository_name}/${i.repository_owner}`,
-          }
-        })}
-      />
-    </div>
+    <Select
+      autoSelect
+      className='react-select w-100'
+      size='select-md full-width'
+      placeholder={'Select Your Repository'}
+      disabled={disabled}
+      onChange={(v: any) => onChange(v?.value)}
+      options={options}
+      value={options?.find((v) => v.value === value)}
+    />
   )
 }
 
diff --git a/frontend/web/project/project-components.js b/frontend/web/project/project-components.js
index 4b25d4c2548a..651d539e0c74 100644
--- a/frontend/web/project/project-components.js
+++ b/frontend/web/project/project-components.js
@@ -100,6 +100,16 @@ const Option = (props) => {
 global.Select = class extends PureComponent {
   static displayName = 'Select'
 
+  componentDidUpdate() {
+    if (
+      this.props.autoSelect &&
+      this.props.options?.length &&
+      !this.props.value
+    ) {
+      this.props.onChange(this.props.options[0])
+    }
+  }
+
   render() {
     const props = this.props
     return E2E ? (
@@ -131,6 +141,7 @@ global.Select = class extends PureComponent {
       </div>
     ) : (
       <div
+        className={props.className}
         onClick={(e) => {
           e.stopPropagation()
         }}