diff --git a/src/components/RemoteBranchSelector.tsx b/src/components/RemoteBranchSelector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..489cfc19bb9d1d5a0b50bebdeb831c610180794e
--- /dev/null
+++ b/src/components/RemoteBranchSelector.tsx
@@ -0,0 +1,37 @@
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import { Dispatch, SetStateAction } from "react";
+
+const options = ['master', 'fix_16126'];
+
+//const GET_BRANCHES = gql`
+//`
+//query GetBranches($group: ID!) {
+//project(fullPath: $group) {
+//id
+//repository {
+//rootRef
+//branchNames(searchPattern: "*", offset: 0, limit: 200)
+//}
+//}
+//}
+
+export default function RemoteBranchSelector({
+  branch, setBranch, label, project, disabled
+} : {
+  branch: string, setBranch: Dispatch<string>,
+  label: string, project: string,
+  disabled: boolean,
+}) {
+  return (
+    <Autocomplete
+      disablePortal
+      options={options}
+      disabled={disabled}
+      value={branch}
+      renderInput={(params) => <TextField {...params} label={label} />}
+      onChange={(e, newVal: string | null) => setBranch(newVal || 'master')}
+      sx={{ minWidth: 300 }}
+    />
+  );
+}
diff --git a/src/components/TestImagesTabContent.tsx b/src/components/TestImagesTabContent.tsx
index 24cb6aef2a28dcf9fe8253d95d9a2c15b5183022..6ba1786687c0f9342b007805eb1a9bd487698a22 100644
--- a/src/components/TestImagesTabContent.tsx
+++ b/src/components/TestImagesTabContent.tsx
@@ -24,6 +24,7 @@ import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import WarningIcon from '@mui/icons-material/Warning';
+import RemoteBranchSelector from './RemoteBranchSelector';
 
 interface Namable {
   name: string
@@ -238,16 +239,6 @@ function computeClustersPerArch(clustersInfo: ClusterById) {
   }, {} as ClustersByArch);
 }
 
-//query GetBranches($group: ID!) {
-//project(fullPath: $group) {
-//id
-//repository {
-//rootRef
-//branchNames(searchPattern: "*", offset: 0, limit: 200)
-//}
-//}
-//}
-
 function Legend() {
   return (
     <Stack direction="row" spacing={1} sx={{ mb: 2 }}>
@@ -300,24 +291,28 @@ export default function TestImagesTabContent({
 
   return (
     <Box>
-      {refApiData.sitesInfo.data && (
-        <Box sx={{ mb: 2 }}>
-          got it
-          <button onClick={() => setBranch('fix_16126')}>
-            set to fix_16126
-          </button>
-          <button onClick={() => setBranch('master')}>
-            set to master
-          </button>
-        </Box>
-      )}
       {refApiData.sitesInfo.error && (
         <ShowError error={refApiData.sitesInfo.error} />
       )}
       {refApiData.clustersInfo.error && (
         <ShowError error={refApiData.clustersInfo.error} />
       )}
-      <Legend />
+      <Stack
+        direction="row"
+        sx={{
+          minWidth: '300px', mb: 2, alignItems: 'center'
+        }}
+        spacing={2}
+      >
+        <RemoteBranchSelector
+          project="grid5000/reference-repository"
+          branch={branch}
+          disabled={clustersByArch === undefined}
+          setBranch={setBranch}
+          label="Ref API branch"
+        />
+        <Legend />
+      </Stack>
       {clustersByArch && clustersBySite && clustersById && Object.keys(clustersByArch).map(a => (
         <ClustersAccordion
           apiClustersByArch={clustersByArch}