diff --git a/src/components/projectgroupsettings.vue b/src/components/projectgroupsettings.vue
index 6c75431..c5353f7 100644
--- a/src/components/projectgroupsettings.vue
+++ b/src/components/projectgroupsettings.vue
@@ -11,12 +11,12 @@
               type="text"
               placeholder="Project Group Name"
               v-model="projectGroup.name"
-            >
+            />
           </div>
         </div>
         <div class="mb-4">
           <label class="checkbox">
-            <input type="checkbox" v-model="projectGroupIsPrivate">
+            <input type="checkbox" v-model="projectGroupIsPrivate" />
             Private
           </label>
         </div>
@@ -32,10 +32,17 @@
       </div>
     </div>
 
+    <div class="panel">
+      <p class="panel-title">Secrets</p>
+      <div class="p-4">
+        <projectsecrets :secrets="secrets" :allsecrets="allsecrets" type="projectgroup" />
+      </div>
+    </div>
+
     <div class="panel">
       <p class="panel-title">Variables</p>
       <div class="p-4">
-        <projectvars :variables="variables" :allvariables="allvariables"/>
+        <projectvars :variables="variables" :allvariables="allvariables" type="projectgroup" />
       </div>
     </div>
 
@@ -66,7 +73,7 @@
             v-model="projectGroupNameToDelete"
             type="email"
             placeholder="Project Group name to delete"
-          >
+          />
         </div>
         <button
           class="btn btn-red"
@@ -88,6 +95,7 @@
 <script>
 import {
   fetchProjectGroup,
+  fetchSecrets,
   fetchVariables,
   updateProjectGroup,
   deleteProjectGroup
@@ -95,10 +103,11 @@ import {
 
 import { projectGroupLink } from "@/util/link.js";
 
+import projectsecrets from "@/components/projectsecrets";
 import projectvars from "@/components/projectvars";
 
 export default {
-  components: { projectvars },
+  components: { projectsecrets, projectvars },
   name: "projectgroupsettings",
   props: {
     ownertype: String,
@@ -111,6 +120,8 @@ export default {
       deleteProjectGroupError: null,
       projectGroup: null,
       projectGroupIsPrivate: false,
+      secrets: [],
+      allsecrets: [],
       variables: [],
       allvariables: [],
       projectGroupNameToDelete: ""
@@ -198,6 +209,28 @@ export default {
     this.projectGroup = data;
     this.projectGroupIsPrivate = this.projectGroup.visibility == "private";
 
+    ({ data, error } = await fetchSecrets(
+      "projectgroup",
+      projectgroupref,
+      false
+    ));
+    if (error) {
+      this.$store.dispatch("setError", error);
+      return;
+    }
+    this.secrets = data;
+
+    ({ data, error } = await fetchSecrets(
+      "projectgroup",
+      projectgroupref,
+      true
+    ));
+    if (error) {
+      this.$store.dispatch("setError", error);
+      return;
+    }
+    this.allsecrets = data;
+
     ({ data, error } = await fetchVariables(
       "projectgroup",
       projectgroupref,
diff --git a/src/components/projectsecrets.vue b/src/components/projectsecrets.vue
new file mode 100644
index 0000000..d7e0087
--- /dev/null
+++ b/src/components/projectsecrets.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h5 class="text-2xl">{{ typetitle }} Secrets</h5>
+    <secrets v-if="secrets.length" :secrets="secrets" />
+    <span v-else>No secrets</span>
+
+    <hr class="my-6 border-t" />
+
+    <h5 class="text-2xl">All secrets (local and inherited)</h5>
+    <secrets v-if="allsecrets.length" :secrets="allsecrets" :showparentpath="true" />
+    <span v-else>No secrets</span>
+  </div>
+</template>
+
+<script>
+import secrets from "@/components/secrets";
+
+export default {
+  components: { secrets },
+  name: "projectsecrets",
+  props: {
+    secrets: Array,
+    allsecrets: Array,
+    type: String
+  },
+  computed: {
+    typetitle() {
+      if (this.type == "project") return "Project";
+      if (this.type == "projectgroup") return "Project group";
+      return "";
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+</style>
+
+
diff --git a/src/components/projectsettings.vue b/src/components/projectsettings.vue
index c221605..f919c18 100644
--- a/src/components/projectsettings.vue
+++ b/src/components/projectsettings.vue
@@ -10,11 +10,11 @@
             type="text"
             placeholder="Project Name"
             v-model="project.name"
-          >
+          />
         </div>
         <div class="mb-4">
           <label class="checkbox">
-            <input type="checkbox" v-model="projectIsPrivate">
+            <input type="checkbox" v-model="projectIsPrivate" />
             Private
           </label>
         </div>
@@ -29,10 +29,17 @@
       </div>
     </div>
 
+    <div class="panel">
+      <p class="panel-title">Secrets</p>
+      <div class="p-4">
+        <projectsecrets :secrets="secrets" :allsecrets="allsecrets" type="project" />
+      </div>
+    </div>
+
     <div class="panel">
       <p class="panel-title">Variables</p>
       <div class="p-4">
-        <projectvars :variables="variables" :allvariables="allvariables"/>
+        <projectvars :variables="variables" :allvariables="allvariables" type="project" />
       </div>
     </div>
 
@@ -63,7 +70,7 @@
             v-model="projectNameToDelete"
             type="email"
             placeholder="Project name to delete"
-          >
+          />
         </div>
         <button
           class="btn btn-red"
@@ -104,6 +111,7 @@
 <script>
 import {
   fetchProject,
+  fetchSecrets,
   fetchVariables,
   updateProject,
   deleteProject,
@@ -112,10 +120,11 @@ import {
 
 import { projectGroupLink } from "@/util/link.js";
 
+import projectsecrets from "@/components/projectsecrets";
 import projectvars from "@/components/projectvars";
 
 export default {
-  components: { projectvars },
+  components: { projectsecrets, projectvars },
   name: "projectsettings",
   props: {
     ownertype: String,
@@ -129,6 +138,8 @@ export default {
       updateRepoLinkedAccountError: null,
       project: null,
       projectIsPrivate: false,
+      secrets: [],
+      allsecrets: [],
       variables: [],
       allvariables: [],
       projectNameToDelete: ""
@@ -227,6 +238,20 @@ export default {
     this.project = data;
     this.projectIsPrivate = this.project.visibility == "private";
 
+    ({ data, error } = await fetchSecrets("project", projectref, false));
+    if (error) {
+      this.$store.dispatch("setError", error);
+      return;
+    }
+    this.secrets = data;
+
+    ({ data, error } = await fetchSecrets("project", projectref, true));
+    if (error) {
+      this.$store.dispatch("setError", error);
+      return;
+    }
+    this.allsecrets = data;
+
     ({ data, error } = await fetchVariables("project", projectref, false));
     if (error) {
       this.$store.dispatch("setError", error);
diff --git a/src/components/projectvars.vue b/src/components/projectvars.vue
index 98e8f86..3eb0aed 100644
--- a/src/components/projectvars.vue
+++ b/src/components/projectvars.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <h5 class="text-2xl">Local variables</h5>
-    <vars v-if="allvariables.length" :variables="variables"/>
+    <h5 class="text-2xl">{{ typetitle }} Variables</h5>
+    <vars v-if="variables.length" :variables="variables" />
     <span v-else>No variables</span>
 
-    <hr class="my-6 border-t">
+    <hr class="my-6 border-t" />
 
-    <h5 class="text-2xl">All variables</h5>
-    <vars v-if="allvariables.length" :variables="allvariables" :showparentpath="true"/>
+    <h5 class="text-2xl">All variables (local and inherited)</h5>
+    <vars v-if="allvariables.length" :variables="allvariables" :showparentpath="true" />
     <span v-else>No variables</span>
   </div>
 </template>
@@ -20,7 +20,15 @@ export default {
   name: "projectvars",
   props: {
     variables: Array,
-    allvariables: Array
+    allvariables: Array,
+    type: String
+  },
+  computed: {
+    typetitle() {
+      if (this.type == "project") return "Project";
+      if (this.type == "projectgroup") return "Project group";
+      return "";
+    }
   }
 };
 </script>
diff --git a/src/components/secrets.vue b/src/components/secrets.vue
new file mode 100644
index 0000000..8c97545
--- /dev/null
+++ b/src/components/secrets.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="my-3 flex font-bold">
+      <div class="w-2/12">Name</div>
+    </div>
+    <div class="flex" v-for="secret in secrets" v-bind:key="secret.id">
+      <div class="w-2/12">
+        <span class="name">{{secret.name}}</span>
+        <div v-if="showparentpath" class="text-sm font-light">from {{secret.parent_path}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  name: "secrets",
+  props: {
+    secrets: Array,
+    showparentpath: Boolean
+  }
+};
+</script>
+
+<style scoped lang="scss">
+</style>
+
+
+
diff --git a/src/util/data.js b/src/util/data.js
index d51d86a..7c8e8b9 100644
--- a/src/util/data.js
+++ b/src/util/data.js
@@ -146,6 +146,21 @@ export async function fetchProject(ref) {
     return await fetch(apiurl(path));
 }
 
+export async function fetchSecrets(ownertype, ref, all) {
+    let path
+    if (ownertype == "project") {
+        path = "/projects/"
+    } else if (ownertype == "projectgroup") {
+        path = "/projectgroups/"
+    }
+    path += encodeURIComponent(ref);
+    path += "/secrets";
+    if (all) {
+        path += "?tree&removeoverridden";
+    }
+    return await fetch(apiurl(path));
+}
+
 export async function fetchVariables(ownertype, ref, all) {
     let path
     if (ownertype == "project") {