diff --git a/client/src/components/Tool/ToolCredentials.vue b/client/src/components/Tool/ToolCredentials.vue
index cb0c68679f75..b19cb56ed689 100644
--- a/client/src/components/Tool/ToolCredentials.vue
+++ b/client/src/components/Tool/ToolCredentials.vue
@@ -2,7 +2,14 @@
 import { BAlert, BButton, BModal } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
-import type { ToolCredentialsDefinition, UserCredentials } from "@/api/users";
+import { isRegisteredUser } from "@/api";
+import {
+    type CreateSourceCredentialsPayload,
+    type ServiceCredentialsDefinition,
+    type SourceCredentialsDefinition,
+    transformToSourceCredentials,
+    type UserCredentials,
+} from "@/api/users";
 import { useUserCredentialsStore } from "@/stores/userCredentials";
 import { useUserStore } from "@/stores/userStore";
 
@@ -12,38 +19,55 @@ import ManageToolCredentials from "@/components/User/Credentials/ManageToolCrede
 interface Props {
     toolId: string;
     toolVersion: string;
-    toolCredentialsDefinition: ToolCredentialsDefinition[];
+    toolCredentialsDefinition: ServiceCredentialsDefinition[];
 }
 
 const props = defineProps<Props>();
 
 const userStore = useUserStore();
-const userCredentialsStore = useUserCredentialsStore();
+const userCredentialsStore = useUserCredentialsStore(
+    isRegisteredUser(userStore.currentUser) ? userStore.currentUser.id : "anonymous"
+);
 
 const isBusy = ref(true);
 const busyMessage = ref<string>("");
 const userCredentials = ref<UserCredentials[] | undefined>(undefined);
 
+const credentialsDefinition = computed<SourceCredentialsDefinition>(() => {
+    return transformToSourceCredentials(props.toolId, props.toolCredentialsDefinition);
+});
+
 const hasUserProvidedRequiredCredentials = computed<boolean>(() => {
-    if (!userCredentials.value) {
+    if (!userCredentials.value || userCredentials.value.length === 0) {
         return false;
     }
-    return userCredentials.value.every((credentials) => credentials.optional || areSetByUser(credentials));
+
+    return userCredentials.value.every((credentials) => areOptional(credentials) || areSetByUser(credentials));
 });
 
 const hasUserProvidedAllCredentials = computed<boolean>(() => {
-    if (!userCredentials.value) {
+    if (!userCredentials.value || userCredentials.value.length === 0) {
         return false;
     }
     return userCredentials.value.every(areSetByUser);
 });
 
 const hasSomeOptionalCredentials = computed<boolean>(() => {
-    return props.toolCredentialsDefinition.some((credentials) => credentials.optional);
+    for (const credentials of credentialsDefinition.value.services.values()) {
+        if (credentials.optional) {
+            return true;
+        }
+    }
+    return false;
 });
 
 const hasSomeRequiredCredentials = computed<boolean>(() => {
-    return props.toolCredentialsDefinition.some((credentials) => !credentials.optional);
+    for (const credentials of credentialsDefinition.value.services.values()) {
+        if (!credentials.optional) {
+            return true;
+        }
+    }
+    return false;
 });
 
 const provideCredentialsButtonTitle = computed(() => {
@@ -75,10 +99,7 @@ async function checkUserCredentials(providedCredentials?: UserCredentials[]) {
         if (!providedCredentials) {
             providedCredentials =
                 userCredentialsStore.getAllUserCredentialsForTool(props.toolId) ??
-                (await userCredentialsStore.fetchAllUserCredentialsForTool(
-                    props.toolId,
-                    props.toolCredentialsDefinition
-                ));
+                (await userCredentialsStore.fetchAllUserCredentialsForTool(props.toolId));
         }
 
         userCredentials.value = providedCredentials;
@@ -91,25 +112,29 @@ async function checkUserCredentials(providedCredentials?: UserCredentials[]) {
 }
 
 function areSetByUser(credentials: UserCredentials): boolean {
-    return (
-        credentials.variables.every((variable) => variable.value) &&
-        credentials.secrets.every((secret) => secret.alreadySet)
-    );
+    return Object.values(credentials.groups).every((set) => {
+        return set.variables.every((variable) => variable.value) && set.secrets.every((secret) => secret.already_set);
+    });
+}
+
+function areOptional(credentials: UserCredentials): boolean {
+    const matchingDefinition = credentialsDefinition.value.services.get(credentials.reference);
+    if (!matchingDefinition) {
+        return false;
+    }
+    return matchingDefinition.optional;
 }
 
 function provideCredentials() {
     showModal.value = true;
 }
 
-async function onSavedCredentials(providedCredentials: UserCredentials[]) {
+async function onSavedCredentials(providedCredentials: CreateSourceCredentialsPayload) {
     showModal.value = false;
     busyMessage.value = "Saving your credentials...";
     try {
         isBusy.value = true;
-        userCredentials.value = await userCredentialsStore.saveUserCredentialsForTool(
-            props.toolId,
-            providedCredentials
-        );
+        userCredentials.value = await userCredentialsStore.saveUserCredentialsForTool(providedCredentials);
     } catch (error) {
         // TODO: Implement error handling.
         console.error("Error saving user credentials", error);
@@ -170,7 +195,8 @@ checkUserCredentials();
             <ManageToolCredentials
                 :tool-id="props.toolId"
                 :tool-version="props.toolVersion"
-                :credentials="userCredentials"
+                :tool-credentials-definition="credentialsDefinition"
+                :user-tool-credentials="userCredentials"
                 @save-credentials="onSavedCredentials" />
         </BModal>
     </div>
diff --git a/client/src/components/User/Credentials/CredentialsInput.vue b/client/src/components/User/Credentials/CredentialsInput.vue
deleted file mode 100644
index 178c16b88382..000000000000
--- a/client/src/components/User/Credentials/CredentialsInput.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { BBadge, BCard } from "bootstrap-vue";
-
-import type { UserCredentials } from "@/api/users";
-
-interface Props {
-    credential: UserCredentials;
-}
-
-defineProps<Props>();
-</script>
-
-<template>
-    <BCard>
-        <h3>
-            {{ credential.label || credential.name }}
-            <BBadge
-                v-if="credential.optional"
-                variant="secondary"
-                class="optional-credentials"
-                title="These credentials are optional. If you do not provide them, the tool will use default values or
-                    anonymous access.">
-                Optional
-            </BBadge>
-            <BBadge
-                v-else
-                variant="danger"
-                class="required-credentials"
-                title="These credentials are required. You must provide them to use the tool.">
-                Required
-            </BBadge>
-        </h3>
-        <p>{{ credential.description }}</p>
-        <div v-for="variable in credential.variables" :key="variable.name">
-            <label :for="variable.name">{{ variable.label || variable.name }}</label>
-            <input :id="variable.name" v-model="variable.value" type="text" autocomplete="off" />
-        </div>
-        <div v-for="secret in credential.secrets" :key="secret.name" class="secret-input">
-            <label :for="secret.name">{{ secret.label || secret.name }}</label>
-            <input :id="secret.name" v-model="secret.value" type="password" autocomplete="off" />
-            <span v-if="secret.alreadySet" class="tick-icon">✔️</span>
-        </div>
-    </BCard>
-</template>
-
-<style scoped>
-.secret-input {
-    display: flex;
-    align-items: center;
-}
-.tick-icon {
-    color: green;
-    margin-left: 0.5em;
-}
-</style>
diff --git a/client/src/components/User/Credentials/ManageToolCredentials.vue b/client/src/components/User/Credentials/ManageToolCredentials.vue
index d4902cc5b12d..09e5e6c883ed 100644
--- a/client/src/components/User/Credentials/ManageToolCredentials.vue
+++ b/client/src/components/User/Credentials/ManageToolCredentials.vue
@@ -1,31 +1,116 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import type { UserCredentials } from "@/api/users";
+import type {
+    CreateSourceCredentialsPayload,
+    ServiceCredentialPayload,
+    ServiceCredentialsDefinition,
+    ServiceGroupPayload,
+    SourceCredentialsDefinition,
+    UserCredentials,
+} from "@/api/users";
 
-import CredentialsInput from "@/components/User/Credentials/CredentialsInput.vue";
+import ServiceCredentials from "@/components/User/Credentials/ServiceCredentials.vue";
 
 interface ManageToolCredentialsProps {
     toolId: string;
     toolVersion: string;
-    credentials?: UserCredentials[];
+    toolCredentialsDefinition: SourceCredentialsDefinition;
+    userToolCredentials?: UserCredentials[];
 }
 
-const props = defineProps<ManageToolCredentialsProps>();
+const props = withDefaults(defineProps<ManageToolCredentialsProps>(), {
+    userToolCredentials: () => [],
+});
 
-const providedCredentials = ref<UserCredentials[]>(initializeCredentials());
+const providedCredentials = ref<CreateSourceCredentialsPayload>(initializeCredentials());
 
 const emit = defineEmits<{
-    (e: "save-credentials", credentials: UserCredentials[]): void;
+    (e: "save-credentials", credentials: CreateSourceCredentialsPayload): void;
 }>();
 
 function saveCredentials() {
     emit("save-credentials", providedCredentials.value);
 }
 
-function initializeCredentials(): UserCredentials[] {
-    // If credentials are provided, clone them to avoid modifying the original data
-    return props.credentials ? JSON.parse(JSON.stringify(props.credentials)) : [];
+function initializeCredentials(): CreateSourceCredentialsPayload {
+    const serviceCredentials = [];
+    for (const reference of props.toolCredentialsDefinition.services.keys()) {
+        const userProvidedCredentialForService = props.userToolCredentials.find((c) => c.reference === reference);
+        const currentGroup = userProvidedCredentialForService?.current_group_name ?? "default";
+        const definition = getServiceCredentialsDefinition(reference);
+        const groups = buildGroupsFromUserCredentials(definition, userProvidedCredentialForService);
+        const credential: ServiceCredentialPayload = {
+            reference,
+            current_group: currentGroup,
+            groups,
+        };
+        serviceCredentials.push(credential);
+    }
+
+    const providedCredentials: CreateSourceCredentialsPayload = {
+        source_type: "tool",
+        source_id: props.toolId,
+        credentials: serviceCredentials,
+    };
+    return providedCredentials;
+}
+
+function buildGroupsFromUserCredentials(
+    definition: ServiceCredentialsDefinition,
+    userCredentials?: UserCredentials
+): ServiceGroupPayload[] {
+    const groups: ServiceGroupPayload[] = [];
+    if (userCredentials) {
+        const existingGroups = Object.values(userCredentials.groups);
+        for (const group of existingGroups) {
+            const newGroup: ServiceGroupPayload = {
+                name: group.name,
+                variables: group.variables,
+                secrets: group.secrets.map((secret) => ({
+                    name: secret.name,
+                    value: null,
+                })),
+            };
+            groups.push(newGroup);
+        }
+    } else {
+        const defaultGroup: ServiceGroupPayload = {
+            name: "default",
+            variables: definition.variables.map((variable) => ({
+                name: variable.name,
+                value: null,
+            })),
+            secrets: definition.secrets.map((secret) => ({
+                name: secret.name,
+                value: null,
+            })),
+        };
+        groups.push(defaultGroup);
+    }
+    return groups;
+}
+
+function onNewCredentialsSet(credential: ServiceCredentialPayload, newSet: ServiceGroupPayload) {
+    const credentialFound = providedCredentials.value.credentials.find((c) => c.reference === credential.reference);
+    if (credentialFound) {
+        credentialFound.groups.push(newSet);
+    }
+}
+
+function onCurrentSetChange(credential: ServiceCredentialPayload, newSet: ServiceGroupPayload) {
+    const credentialFound = providedCredentials.value.credentials.find((c) => c.reference === credential.reference);
+    if (credentialFound) {
+        credentialFound.current_group = newSet.name;
+    }
+}
+
+function getServiceCredentialsDefinition(reference: string): ServiceCredentialsDefinition {
+    const definition = props.toolCredentialsDefinition.services.get(reference);
+    if (!definition) {
+        throw new Error(`No definition found for credential reference ${reference} in tool ${props.toolId}`);
+    }
+    return definition;
 }
 </script>
 
@@ -33,12 +118,16 @@ function initializeCredentials(): UserCredentials[] {
     <div>
         <p>
             Here you can manage your credentials for the tool <strong>{{ toolId }}</strong> version
-            <strong> {{ toolVersion }} </strong>.
+            <strong> {{ toolVersion }}</strong
+            >.
         </p>
-        <CredentialsInput
-            v-for="credential in providedCredentials"
+        <ServiceCredentials
+            v-for="credential in providedCredentials.credentials"
             :key="credential.reference"
-            :credential="credential" />
+            :credential-definition="getServiceCredentialsDefinition(credential.reference)"
+            :credential-payload="credential"
+            @new-credentials-set="onNewCredentialsSet"
+            @update-current-set="onCurrentSetChange" />
         <button @click="saveCredentials">Save Credentials</button>
     </div>
 </template>
diff --git a/client/src/components/User/Credentials/ServiceCredentials.vue b/client/src/components/User/Credentials/ServiceCredentials.vue
new file mode 100644
index 000000000000..e9d558a8d05e
--- /dev/null
+++ b/client/src/components/User/Credentials/ServiceCredentials.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { BBadge, BCard } from "bootstrap-vue";
+import { computed, ref } from "vue";
+import Multiselect from "vue-multiselect";
+
+import type {
+    ServiceCredentialPayload,
+    ServiceCredentialsDefinition,
+    ServiceGroupPayload,
+    ServiceVariableDefinition,
+} from "@/api/users";
+
+import FormElement from "@/components/Form/FormElement.vue";
+
+type CredentialType = "variable" | "secret";
+
+interface Props {
+    credentialDefinition: ServiceCredentialsDefinition;
+    credentialPayload: ServiceCredentialPayload;
+}
+
+const props = defineProps<Props>();
+
+const selectedSet = ref<ServiceGroupPayload | undefined>(
+    props.credentialPayload.groups.find((group) => group.name === props.credentialPayload.current_group)
+);
+const availableSets = computed<ServiceGroupPayload[]>(() => Object.values(props.credentialPayload.groups));
+const newSetName = ref<string>("");
+const canCreateNewSet = computed<boolean>(() => newSetName.value.trim() !== "");
+
+const emit = defineEmits<{
+    (e: "new-credentials-set", credential: ServiceCredentialPayload, newSet: ServiceGroupPayload): void;
+    (e: "update-current-set", credential: ServiceCredentialPayload, newSet: ServiceGroupPayload): void;
+}>();
+
+function onCreateNewSet() {
+    const newSet: ServiceGroupPayload = {
+        name: generateUniqueName(newSetName.value, props.credentialPayload.groups),
+        variables: selectedSet.value?.variables.map((variable) => ({ ...variable, value: null })) || [],
+        secrets: selectedSet.value?.secrets.map((secret) => ({ ...secret, value: null, alreadySet: false })) || [],
+    };
+    emit("new-credentials-set", props.credentialPayload, newSet);
+    selectedSet.value = newSet;
+}
+
+function onCurrentSetChange(selectedSet: ServiceGroupPayload) {
+    emit("update-current-set", props.credentialPayload, selectedSet);
+}
+
+function generateUniqueName(template: string, sets: ServiceGroupPayload[]): string {
+    let name = template;
+    let counter = 1;
+    while (sets.some((set) => set.name === name)) {
+        name = `${template} ${counter}`;
+        counter++;
+    }
+    return name;
+}
+
+function getVariableDefinition(name: string, type: CredentialType): ServiceVariableDefinition {
+    const definition = props.credentialDefinition[type === "variable" ? "variables" : "secrets"].find(
+        (variable) => variable.name === name
+    );
+    if (!definition) {
+        throw new Error(`Variable definition not found for variable ${name}`);
+    }
+    return definition;
+}
+
+function getVariableTitle(name: string, type: CredentialType): string {
+    return getVariableDefinition(name, type).label || name;
+}
+
+function getVariableDescription(name: string, type: CredentialType): string | undefined {
+    return getVariableDefinition(name, type).description;
+}
+</script>
+
+<template>
+    <BCard>
+        <h3>
+            {{ credentialDefinition.label || credentialDefinition.name }}
+            <BBadge
+                v-if="credentialDefinition.optional"
+                variant="secondary"
+                class="optional-credentials"
+                title="These credentials are optional. If you do not provide them, the tool will use default values or
+                    anonymous access.">
+                Optional
+            </BBadge>
+            <BBadge
+                v-else
+                variant="danger"
+                class="required-credentials"
+                title="These credentials are required. You must provide them to use the tool.">
+                Required
+            </BBadge>
+            <BBadge
+                v-if="credentialDefinition.multiple"
+                variant="info"
+                title="You can provide multiple sets of credentials for this tool.">
+                Multiple
+            </BBadge>
+        </h3>
+        <p>{{ credentialDefinition.description }}</p>
+        <div v-if="selectedSet">
+            <h4 v-if="credentialDefinition.multiple">
+                Select a set of credentials:
+                <Multiselect
+                    v-model="selectedSet"
+                    :options="availableSets"
+                    :allow-empty="false"
+                    :show-labels="false"
+                    track-by="name"
+                    label="name"
+                    @select="onCurrentSetChange" />
+
+                <label for="newSetName">Or create new set:</label>
+                <input id="newSetName" v-model="newSetName" type="text" placeholder="New set name" />
+                <button :disabled="!canCreateNewSet" @click="onCreateNewSet">Create</button>
+            </h4>
+
+            <div v-for="variable in selectedSet.variables" :key="variable.name">
+                <!-- TODO Use new component here? -->
+                <FormElement
+                    :id="variable.name"
+                    v-model="variable.name"
+                    type="text"
+                    :title="getVariableTitle(variable.name, 'variable')"
+                    :optional="credentialDefinition.optional"
+                    :help="getVariableDescription(variable.name, 'variable')" />
+            </div>
+            <div v-for="secret in selectedSet.secrets" :key="secret.name" class="secret-input">
+                <!-- TODO Use VaultSecret component here or similar? -->
+                <FormElement
+                    :id="secret.name"
+                    v-model="secret.name"
+                    type="password"
+                    :title="getVariableTitle(secret.name, 'secret')"
+                    :optional="credentialDefinition.optional"
+                    :help="getVariableDescription(secret.name, 'secret')" />
+            </div>
+        </div>
+    </BCard>
+</template>
+
+<style scoped>
+.secret-input {
+    display: flex;
+    align-items: center;
+}
+.tick-icon {
+    color: green;
+    margin-left: 0.5em;
+}
+</style>