diff --git a/src/main/client/app/pages/credentials/credentials-list.vue b/src/main/client/app/pages/credentials/credentials-list.vue
new file mode 100644
index 000000000..9e4b25fc0
--- /dev/null
+++ b/src/main/client/app/pages/credentials/credentials-list.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <b-button
+      :to="{ name: 'new_credentials' }"
+      title="Create new credentials"
+      variant="success"
+      class="mb-4"
+    >
+      <font-awesome-icon icon="plus" /> Create new credentials
+    </b-button>
+
+    <b-card-group deck>
+      <b-card
+        v-for="credentials in credentialsList"
+        :key="credentials.id"
+        :title="credentials.name"
+        style="max-width: 20rem;"
+        :header-class="credentials.provider"
+      >
+        <template v-slot:header>
+          <b-img
+            :src="imageUrl(credentials)"
+            class="rounded-logo"
+            rounded="circle"
+            width="80px"
+            height="80px"
+            left
+          />
+          <p class="providerName">
+            {{ providerName(credentials) }}
+          </p>
+        </template>
+
+        <b-button
+          :to="{ name: 'credentials', params: { credentialsId: credentials.id } }"
+          title="Edit this credentials"
+          variant="primary"
+          class="mr-1"
+        >
+          <font-awesome-icon icon="edit" />
+        </b-button>
+      </b-card>
+    </b-card-group>
+  </div>
+</template>
+
+<script>
+  import { getCredentialsList } from '@/shared/api/credentials-api';
+
+  export default {
+    name: 'Credentials',
+
+    data: function data() {
+      return {
+        credentialsList: [],
+      };
+    },
+
+    async created() {
+      this.credentialsList = await getCredentialsList();
+    },
+
+    methods: {
+      imageUrl(credentials) {
+        // eslint-disable-next-line global-require, import/no-dynamic-require
+        return require(`@/assets/images/providers/logos/${credentials.provider}.png`);
+      },
+
+      providerName(credentials) {
+        return {
+          aws: 'AWS',
+          google: 'GCP',
+          azurerm: 'Azure',
+        }[credentials.provider];
+      },
+    },
+
+  };
+</script>
+
+<style scoped>
+  .card-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .card-header img {
+    margin-right: 1rem;
+  }
+
+  .card-header.google {
+    background-color: #2f6fd8;
+  }
+
+  .card-header.aws {
+    background-color: #ea8c00;
+  }
+
+  .card-header.azurerm {
+    background-color: #007cc1;
+  }
+
+  .rounded-logo {
+    background-color: white;
+  }
+
+  .providerName {
+    color: white;
+    font-weight: bold;
+    font-size: x-large;
+  }
+</style>
diff --git a/src/main/client/app/pages/credentials/credentials-routes.js b/src/main/client/app/pages/credentials/credentials-routes.js
index 99da4388b..7274aab51 100644
--- a/src/main/client/app/pages/credentials/credentials-routes.js
+++ b/src/main/client/app/pages/credentials/credentials-routes.js
@@ -1,14 +1,25 @@
 const credentialsRoutes = [
   {
     path: '/credentials',
-    name: 'credentials',
-    component: () => import(/* webpackChunkName: "chunk-stacks" */ '@/pages/credentials/credentials.vue'),
+    name: 'credentialsList',
+    component: () => import(/* webpackChunkName: "chunk-credentials" */ '@/pages/credentials/credentials-list.vue'),
     meta: {
       authorities: ['ROLE_USER'],
       breadcrumb: [{ text: 'Credentials' }],
       title: 'Gaia - Credentials',
     },
   },
+  {
+    path: '/credentials/:credentialsId',
+    name: 'credentials',
+    component: () => import(/* webpackChunkName: "chunk-credentials" */ '@/pages/credentials/credentials.vue'),
+    props: true,
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Credentials', to: { name: 'credentialsList' } }, { text: 'Credentials edition' }],
+      title: 'Gaia - Credentials edition',
+    },
+  },
 ];
 
 export default credentialsRoutes;
diff --git a/src/main/client/app/pages/credentials/credentials.vue b/src/main/client/app/pages/credentials/credentials.vue
index 61ce8ef48..4dadc025d 100644
--- a/src/main/client/app/pages/credentials/credentials.vue
+++ b/src/main/client/app/pages/credentials/credentials.vue
@@ -1,72 +1,106 @@
 <template>
   <div>
-    <b-button
-      :to="{ name: 'new_credentials' }"
-      title="Create new credentials"
-      variant="success"
-      class="mb-4"
+    <b-card
+      v-if="credentials"
+      :header-class="credentials.provider"
     >
-      <font-awesome-icon icon="plus" /> Create new credentials
-    </b-button>
-
-    <b-card-group deck>
-      <b-card
-        v-for="credentials in credentialsList"
-        :key="credentials.id"
-        :title="credentials.name"
-        style="max-width: 20rem;"
-        :header-class="credentials.provider"
+      <b-card-title>
+        Credentials : {{ credentials.name }}
+      </b-card-title>
+
+      <template v-slot:header>
+        <b-img
+          :src="imageUrl"
+          class="rounded-logo"
+          rounded="circle"
+          width="80px"
+          height="80px"
+          left
+        />
+        <p class="providerName">
+          {{ providerName(credentials) }}
+        </p>
+      </template>
+
+      <b-form-group
+        label="Name"
+        description="The name of your credentials"
       >
-        <template v-slot:header>
-          <b-img
-            :src="imageUrl(credentials)"
-            class="rounded-logo"
-            rounded="circle"
-            width="80px"
-            height="80px"
-            left
-          />
-          <p class="providerName">
-            {{ providerName(credentials) }}
-          </p>
-        </template>
-
-        <b-button
-          :to="{ name: 'credentials', params: { credentialsId: credentials.id }}"
-          title="Edit this credentials"
-          variant="primary"
-          class="mr-1"
-        >
-          <font-awesome-icon icon="edit" />
-        </b-button>
-      </b-card>
-    </b-card-group>
+        <b-input
+          id="credentials.name"
+          v-model="credentials.name"
+          :state="notEmpty(credentials.name)"
+        />
+        <b-form-invalid-feedback>This field is mandatory</b-form-invalid-feedback>
+      </b-form-group>
+
+      <app-credentials-aws
+        v-if="credentials.provider === 'aws'"
+        :credentials="credentials"
+      />
+      <app-credentials-azurerm
+        v-if="credentials.provider === 'azurerm'"
+        :credentials="credentials"
+      />
+      <app-credentials-google
+        v-if="credentials.provider === 'google'"
+        :credentials="credentials"
+      />
+
+      <b-button
+        title="Save"
+        variant="success"
+        class="mb-4"
+        @click="save"
+      >
+        <font-awesome-icon icon="save" /> Save
+      </b-button>
+    </b-card>
   </div>
 </template>
 
 <script>
-  import { getCredentialsList } from '@/shared/api/credentials-api';
+  import { getCredentials, updateCredentials } from '@/shared/api/credentials-api';
+  import { displayNotification } from '@/shared/services/modal-service';
+
+  import AppCredentialsAws from '@/pages/credentials/providers/credentials-aws.vue';
+  import AppCredentialsAzurerm from '@/pages/credentials/providers/credentials-azurerm.vue';
+  import AppCredentialsGoogle from '@/pages/credentials/providers/credentials-google.vue';
 
   export default {
     name: 'Credentials',
 
+    components: {
+      AppCredentialsAws,
+      AppCredentialsAzurerm,
+      AppCredentialsGoogle,
+    },
+
+    props: {
+      credentialsId: {
+        type: String,
+        required: true,
+      },
+    },
+
     data: function data() {
       return {
-        credentialsList: [],
+        credentials: null,
       };
     },
 
+    computed: {
+      imageUrl() {
+        // eslint-disable-next-line global-require, import/no-dynamic-require
+        return require(`@/assets/images/providers/logos/${this.credentials.provider}.png`);
+      },
+    },
+
     async created() {
-      this.credentialsList = await getCredentialsList();
+      this.credentials = await getCredentials(this.credentialsId);
     },
 
     methods: {
-      imageUrl(credentials) {
-        console.log(`@/assets/images/providers/${JSON.stringify(credentials)}.png`);
-        // eslint-disable-next-line global-require, import/no-dynamic-require
-        return require(`@/assets/images/providers/logos/${credentials.provider}.png`);
-      },
-
       providerName(credentials) {
         return {
           aws: 'AWS',
@@ -74,6 +108,16 @@
           azurerm: 'Azure',
         }[credentials.provider];
       },
+
+      notEmpty(field) {
+        return typeof field !== 'undefined' && field !== null && field.trim() !== '';
+      },
+
+      async save() {
+        await updateCredentials(this.credentials)
+          .then(() => displayNotification(this, { message: 'Credentials saved', variant: 'success' }))
+          .catch(({ error, message }) => displayNotification(this, { title: error, message, variant: 'danger' }));
+      },
     },
 
   };
diff --git a/src/main/client/app/pages/credentials/providers/credentials-aws.vue b/src/main/client/app/pages/credentials/providers/credentials-aws.vue
new file mode 100644
index 000000000..9541ccacc
--- /dev/null
+++ b/src/main/client/app/pages/credentials/providers/credentials-aws.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <b-form-group
+      label="Access Key Id"
+      description="Your AWS Access Key Id (AWS_ACCESS_KEY_ID)"
+    >
+      <b-input
+        id="credentials.name"
+        v-model="credentials.accessKey"
+        :state="notEmpty(credentials.accessKey)"
+      />
+      <b-form-invalid-feedback>This field is mandatory</b-form-invalid-feedback>
+    </b-form-group>
+    <b-form-group
+      label="Secret Access Key"
+      description="Your AWS Secret Access Key (AWS_SECRET_ACCESS_KEY)"
+    >
+      <b-input
+        id="credentials.name"
+        v-model="credentials.secretKey"
+        :state="notEmpty(credentials.secretKey)"
+      />
+      <b-form-invalid-feedback>This field is mandatory</b-form-invalid-feedback>
+    </b-form-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CredentialsAWS',
+
+    props: {
+      credentials: {
+        type: Object,
+        required: true,
+      },
+    },
+
+    methods: {
+      notEmpty(field) {
+        return typeof field !== 'undefined' && field !== null && field.trim() !== '';
+      },
+    },
+  };
+</script>
diff --git a/src/main/client/app/pages/credentials/providers/credentials-azurerm.vue b/src/main/client/app/pages/credentials/providers/credentials-azurerm.vue
new file mode 100644
index 000000000..9ac43c3d3
--- /dev/null
+++ b/src/main/client/app/pages/credentials/providers/credentials-azurerm.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <b-form-group
+      label="Client Id"
+      description="Your Azure Client Id (ARM_CLIENT_ID)"
+    >
+      <b-input
+        id="credentials.name"
+        v-model="credentials.clientId"
+        :state="notEmpty(credentials.clientId)"
+      />
+      <b-form-invalid-feedback>This field is mandatory</b-form-invalid-feedback>
+    </b-form-group>
+    <b-form-group
+      label="Client Secret"
+      description="Your Azure Client Secret (ARM_CLIENT_SECRET)"
+    >
+      <b-input
+        id="credentials.name"
+        v-model="credentials.clientSecret"
+        :state="notEmpty(credentials.clientSecret)"
+      />
+      <b-form-invalid-feedback>This field is mandatory</b-form-invalid-feedback>
+    </b-form-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CredentialsAWS',
+
+    props: {
+      credentials: {
+        type: Object,
+        required: true,
+      },
+    },
+
+    methods: {
+      notEmpty(field) {
+        return typeof field !== 'undefined' && field !== null && field.trim() !== '';
+      },
+    },
+  };
+</script>
diff --git a/src/main/client/app/pages/credentials/providers/credentials-google.vue b/src/main/client/app/pages/credentials/providers/credentials-google.vue
new file mode 100644
index 000000000..c0af165b1
--- /dev/null
+++ b/src/main/client/app/pages/credentials/providers/credentials-google.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <b-form-group
+      label="Service account key file"
+      description="Your service account key file contents (GOOGLE_CREDENTIALS)"
+    >
+      <b-input-group>
+        <b-input-group-text slot="append">
+          {json}
+        </b-input-group-text>
+        <b-form-textarea
+          v-model="credentials.serviceAccountJSONContents"
+          :state="notEmpty(credentials.serviceAccountJSONContents)"
+        />
+      </b-input-group>
+      <b-form-invalid-feedback>This field is mandatory</b-form-invalid-feedback>
+    </b-form-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CredentialsGoogle',
+
+    props: {
+      credentials: {
+        type: Object,
+        required: true,
+      },
+    },
+
+    methods: {
+      notEmpty(field) {
+        return typeof field !== 'undefined' && field !== null && field.trim() !== '';
+      },
+    },
+  };
+</script>
diff --git a/src/main/client/app/shared/components/sidebar/side-bar-links.vue b/src/main/client/app/shared/components/sidebar/side-bar-links.vue
index de5792513..890e6844a 100644
--- a/src/main/client/app/shared/components/sidebar/side-bar-links.vue
+++ b/src/main/client/app/shared/components/sidebar/side-bar-links.vue
@@ -36,7 +36,7 @@
           route: 'stacks', icon: 'layer-group', class: 'blue2_color', title: 'Stacks', roles: ['ROLE_USER'],
         },
         {
-          route: 'credentials', icon: 'lock', class: 'orange_color', title: 'Credentials', roles: ['ROLE_USER'],
+          route: 'credentialsList', icon: 'lock', class: 'orange_color', title: 'Credentials', roles: ['ROLE_USER'],
         },
         {
           route: 'settings', icon: 'cog', class: 'yellow_color', title: 'Settings', roles: ['ROLE_ADMIN'],
diff --git a/src/main/java/io/gaia_app/credentials/CredentialsRestController.java b/src/main/java/io/gaia_app/credentials/CredentialsRestController.java
index 92bd53784..d3d6e8d7f 100644
--- a/src/main/java/io/gaia_app/credentials/CredentialsRestController.java
+++ b/src/main/java/io/gaia_app/credentials/CredentialsRestController.java
@@ -21,6 +21,11 @@ public List<Credentials> getAllCredentials(){
         return this.credentialsRepository.findAll();
     }
 
+    @GetMapping("/{id}")
+    public Credentials getCredentials(@PathVariable String id){
+        return this.credentialsRepository.findById(id).orElse(null);
+    }
+
     @PostMapping
     public Credentials createCredentials(@RequestBody Credentials credentials){
         return this.credentialsRepository.save(credentials);