diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9be2dffdf..0875f8a52 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,11 @@ All notable changes to this project will be documented in this file. The format
 
 - New key results are now given a start value of 0, a target value of 100, and
   percentage as unit of measurement by default.
+- The API authorization mechanism has been reworked. The API now accepts a pair
+  of `okr-client-id` and `okr-client-secret` headers to authorize clients.
+  The interface for managing client credentials can be found in the item
+  navigation bar. The existing `okr-team-secret` header is considered deprecated
+  and will continue to work for existing clients until migrated.
 
 ### Fixed
 
diff --git a/firestore.rules b/firestore.rules
index 8d391cf01..c9ac22e9c 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -31,7 +31,7 @@ service cloud.firestore {
 
       // Check if the document the user tries to access has an organization - this means that is is a product or department
       let hasOrgProperty = 'organization' in request.resource.data;
-      let isAdminFromOrgOfProdOrDep = userIsAdmin && hasOrgProperty && getAfter(request.resource.data.organization).data.id in userDoc.data.admin;
+      let isAdminFromOrgOfProdOrDep = userIsAdmin && hasOrgProperty && getAfter(request.resource.data.organization).id in userDoc.data.admin;
 
       // Check if the user has access to the document which is an organization (given that the first check is false)
       let isAdminOfOrg = userIsAdmin && request.resource.data.id in userDoc.data.admin;
@@ -216,6 +216,16 @@ service cloud.firestore {
       allow delete: if isSuperAdmin() || isMemberOfParent(document, 'kpis') || isAdminOfParent(document, 'kpis');
     }
 
+    match /apiClients/{document} {
+      allow read: if isSignedIn();
+      allow write: if isSuperAdmin() || isMemberOfParent(document, 'apiClients') || isAdminOfParent(document, 'apiClients');
+
+      match /secrets/{key} {
+        allow read: if false;
+        allow write: if isSuperAdmin() || isMemberOfParent(document, 'apiClients') || isAdminOfParent(document, 'apiClients');
+      }
+    }
+
     match /slugs/{document} {
       allow read: if true;
       allow write: if false;
diff --git a/functions/api/helpers.js b/functions/api/helpers.js
index 5807213b3..36465b6a6 100644
--- a/functions/api/helpers.js
+++ b/functions/api/helpers.js
@@ -1,3 +1,4 @@
+import crypto from 'crypto';
 import { FieldValue, getFirestore } from 'firebase-admin/firestore';
 import { endOfDay, startOfDay, setHours, isWithinInterval, sub } from 'date-fns';
 
@@ -209,3 +210,82 @@ function isKPIStale(updateFrequency, progressRecord) {
     return null;
   }
 }
+
+/**
+ * Return true if the client is authorized to perform the requested API
+ * operation. Set response data and return false in case the client is not
+ * authorized based on provided request parameters.
+ *
+ * `parentRef` is the item to check API authorization against.
+ * `req` is the HTTP request object.
+ * `res` is the HTTP response object.
+ */
+export async function checkApiAuth(parentRef, req, res) {
+  const parentData = await parentRef.get().then((snapshot) => snapshot.data());
+
+  const {
+    'okr-client-id': clientId,
+    'okr-client-secret': clientSecret,
+    'okr-team-secret': teamSecret,
+  } = req.matchedData;
+
+  if (clientId && clientSecret) {
+    const db = getFirestore();
+    const apiClientRef = await db
+      .collection('apiClients')
+      .where('parent', '==', parentRef)
+      .where('clientId', '==', clientId)
+      .where('archived', '==', false)
+      .limit(1)
+      .get()
+      .then((snapshot) => (!snapshot.empty ? snapshot.docs[0].ref : null));
+
+    if (!apiClientRef) {
+      const { name: parentName } = parentData;
+      res.status(401).json({
+        message:
+          `No API client \`${clientId}\` exists for '${parentName}'. Please ` +
+          'create one in the OKR Tracker integrations admin.',
+      });
+      return false;
+    }
+
+    const apiClientSecret = await apiClientRef
+      .collection('secrets')
+      .where('archived', '==', false)
+      .orderBy('created', 'desc')
+      .limit(1)
+      .get()
+      .then((snapshot) => (!snapshot.empty ? snapshot.docs[0].data() : null));
+
+    const hashedSecret = crypto.createHash('sha256').update(clientSecret).digest('hex');
+
+    if (!apiClientSecret || apiClientSecret.secret !== hashedSecret) {
+      res.status(401).json({
+        message:
+          `Invalid client secret provided for API client \`${clientId}\`. ` +
+          'Check the OKR Tracker integrations admin for how to rotate the secret.',
+      });
+      return false;
+    }
+
+    await apiClientRef.update({ used: FieldValue.serverTimestamp() });
+    return true;
+  }
+
+  if (!parentData.secret) {
+    res.status(401).json({
+      message:
+        `'${parentData.name}' is not set up for API usage. Please set ` +
+        'a secret through the OKR Tracker integrations admin.',
+    });
+    return false;
+  }
+
+  if (parentData.secret !== teamSecret) {
+    res.status(401).json({ message: 'Wrong `okr-team-secret`' });
+    return false;
+  }
+
+  return true;
+}
diff --git a/functions/api/index.js b/functions/api/index.js
index 3ebe920b9..ed0b9985b 100644
--- a/functions/api/index.js
+++ b/functions/api/index.js
@@ -1,6 +1,7 @@
 import functions from 'firebase-functions';
 
 import express from 'express';
+import rateLimit from 'express-rate-limit';
 import cors from 'cors';
 import morgan from 'morgan';
 
@@ -12,9 +13,16 @@ import kpiRoutes from './routes/kpi.js';
 import statusRoutes from './routes/status.js';
 import userRoutes from './routes/user.js';
 
+const apiLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // max 100 requests per window
+  message: 'Too many requests, please try again later.',
+});
+
 const app = express();
 
 app.use(cors());
+app.use(apiLimiter);
 app.use(express.json());
 app.use(morgan('combined'));
 
diff --git a/functions/api/routes/keyres.js b/functions/api/routes/keyres.js
index 83b552598..f5260bd01 100644
--- a/functions/api/routes/keyres.js
+++ b/functions/api/routes/keyres.js
@@ -2,37 +2,30 @@ import express from 'express';
 import validator from 'express-validator';
 
 import { getFirestore } from 'firebase-admin/firestore';
+import { checkApiAuth } from '../helpers.js';
 import {
   commentValidator,
   idValidator,
   progressValidator,
-  teamSecretValidator,
+  clientSecretValidator,
 } from '../validators.js';
+import validateRules from '../validateRules.js';
 
-const { param, matchedData, validationResult } = validator;
+const { param, matchedData } = validator;
 const router = express.Router();
 
 router.post(
   '/:id',
-  teamSecretValidator,
+  clientSecretValidator,
   idValidator,
   progressValidator,
   commentValidator,
+  validateRules,
   async (req, res) => {
-    const result = validationResult(req);
-
-    if (!result.isEmpty()) {
-      res.status(400).json({
-        message: 'Invalid request data',
-        errors: result.mapped(),
-      });
-      return;
-    }
-
-    const { 'okr-team-secret': teamSecret, id, progress, comment } = matchedData(req);
+    const { id, progress, comment } = req.matchedData;
 
     const db = getFirestore();
-    const collection = await db.collection('keyResults');
+    const collection = db.collection('keyResults');
     let keyRes;
 
     try {
@@ -47,19 +40,7 @@ router.post(
 
       const { parent } = keyRes.data();
 
-      const parentData = await parent.get().then((snapshot) => snapshot.data());
-
-      if (!parentData.secret) {
-        res
-          .status(401)
-          .send(
-            `'${parentData.name}' is not set up for API usage. Please set ` +
-              'a secret using the OKR Tracker admin interface.'
-          );
-        return;
-      }
-      if (parentData.secret !== teamSecret) {
-        res.status(401).send('Wrong okr-team-secret');
+      if (!(await checkApiAuth(parent, req, res))) {
         return;
       }
 
diff --git a/functions/api/routes/kpi.js b/functions/api/routes/kpi.js
index 5784e879a..24dfa589b 100644
--- a/functions/api/routes/kpi.js
+++ b/functions/api/routes/kpi.js
@@ -8,38 +8,30 @@ import {
   isArchived,
   refreshKPILatestValue,
   updateKPIProgressionValue,
+  checkApiAuth,
 } from '../helpers.js';
 import {
   commentValidator,
   dateValidator,
   idValidator,
   progressValidator,
-  teamSecretValidator,
+  clientSecretValidator,
   valueValidator,
 } from '../validators.js';
+import validateRules from '../validateRules.js';
 
-const { matchedData, validationResult } = validator;
+const { matchedData } = validator;
 const router = express.Router();
 
 router.post(
   '/:id',
-  teamSecretValidator,
+  clientSecretValidator,
   idValidator,
   progressValidator,
   commentValidator,
+  validateRules,
   async (req, res) => {
-    const result = validationResult(req);
-
-    if (!result.isEmpty()) {
-      res.status(400).json({
-        message: 'Invalid request data',
-        errors: result.mapped(),
-      });
-      return;
-    }
-
-    const { 'okr-team-secret': teamSecret, id, progress, comment } = matchedData(req);
-
+    const { id, progress, comment } = req.matchedData;
     const db = getFirestore();
 
     try {
@@ -54,19 +46,7 @@ router.post(
 
       const { parent } = kpi.data();
 
-      const parentData = await parent.get().then((snapshot) => snapshot.data());
-
-      if (!parentData.secret) {
-        res
-          .status(401)
-          .send(
-            `'${parentData.name}' is not set up for API usage. Please set ` +
-              'a secret using the OKR Tracker admin interface.'
-          );
-        return;
-      }
-      if (parentData.secret !== teamSecret) {
-        res.status(401).send('Wrong okr-team-secret');
+      if (!(await checkApiAuth(parent, req, res))) {
         return;
       }
 
@@ -188,25 +168,15 @@ router.get('/:id/values', idValidator, async (req, res) => {
 
 router.put(
   '/:id/values/:date',
-  teamSecretValidator,
+  clientSecretValidator,
   idValidator,
   dateValidator,
   valueValidator,
   commentValidator,
+  validateRules,
   async (req, res) => {
-    const result = validationResult(req);
-
-    if (!result.isEmpty()) {
-      res.status(400).json({
-        message: 'Invalid request data',
-        errors: result.mapped(),
-      });
-      return;
-    }
-
-    const { 'okr-team-secret': teamSecret, id, date, value, comment } = matchedData(req);
+    const { id, date, value, comment } = req.matchedData;
     const formattedDate = format(date, 'yyyy-MM-dd');
-
     const db = getFirestore();
 
     try {
@@ -220,18 +190,8 @@ router.put(
       }
 
       const { parent } = kpi.data();
-      const parentData = await parent.get().then((snapshot) => snapshot.data());
 
-      if (!parentData.secret) {
-        res.status(401).json({
-          message:
-            `'${parentData.name}' is not set up for API usage. Please set ` +
-            'a secret using the OKR Tracker admin interface.',
-        });
-        return;
-      }
-      if (parentData.secret !== teamSecret) {
-        res.status(401).json({ message: 'Wrong okr-team-secret' });
+      if (!(await checkApiAuth(parent, req, res))) {
         return;
       }
 
@@ -250,21 +210,12 @@ router.put(
 
 router.delete(
   '/:id/values/:date',
-  teamSecretValidator,
+  clientSecretValidator,
   idValidator,
   dateValidator,
+  validateRules,
   async (req, res) => {
-    const result = validationResult(req);
-
-    if (!result.isEmpty()) {
-      res.status(400).json({
-        message: 'Invalid request data',
-        errors: result.mapped(),
-      });
-      return;
-    }
-
-    const { 'okr-team-secret': teamSecret, id, date } = matchedData(req);
+    const { id, date } = req.matchedData;
     const formattedDate = format(date, 'yyyy-MM-dd');
 
     const db = getFirestore();
@@ -280,18 +231,8 @@ router.delete(
       }
 
       const { parent } = kpi.data();
-      const parentData = await parent.get().then((snapshot) => snapshot.data());
 
-      if (!parentData.secret) {
-        res.status(401).json({
-          message:
-            `'${parentData.name}' is not set up for API usage. Please set ` +
-            'a secret using the OKR Tracker admin interface.',
-        });
-        return;
-      }
-      if (parentData.secret !== teamSecret) {
-        res.status(401).json({ message: 'Wrong okr-team-secret' });
+      if (!(await checkApiAuth(parent, req, res))) {
         return;
       }
 
diff --git a/functions/api/validateRules.js b/functions/api/validateRules.js
new file mode 100644
index 000000000..9c0599d85
--- /dev/null
+++ b/functions/api/validateRules.js
@@ -0,0 +1,17 @@
+import { matchedData, validationResult } from 'express-validator';
+
+const validateRules = (req, res, next) => {
+  const errors = validationResult(req);
+
+  if (errors.isEmpty()) {
+    req.matchedData = matchedData(req);
+    return next();
+  }
+
+  return res.status(400).json({
+    message: 'Invalid request data',
+    errors: errors.mapped(),
+  });
+};
+
+export default validateRules;
diff --git a/functions/api/validators.js b/functions/api/validators.js
index de9ccff7c..29edc886c 100644
--- a/functions/api/validators.js
+++ b/functions/api/validators.js
@@ -1,11 +1,31 @@
 import validator from 'express-validator';
 
-const { body, header, param } = validator;
+const { body, header, param, oneOf } = validator;
 
-export const teamSecretValidator = header('okr-team-secret')
-  .not()
-  .isEmpty()
-  .withMessage('The `okr-team-secret` header is required');
+// Allow usage of the `okr-team-secret` header for now, until
+// all existing clients are migrated.
+export const clientSecretValidator = oneOf(
+  [
+    header('okr-team-secret')
+      .not()
+      .isEmpty()
+      .withMessage('The `okr-team-secret` header is required'),
+    [
+      header('okr-client-id')
+        .not()
+        .isEmpty()
+        .withMessage('The `okr-client-id` header is required'),
+      header('okr-client-secret')
+        .not()
+        .isEmpty()
+        .withMessage('The `okr-client-secret` header is required'),
+    ],
+  ],
+  {
+    message:
+      'A pair of `okr-client-id`/`okr-client-secret` headers or an `okr-team-secret` header is required',
+  }
+);
 
 export const adminSecretValidator = header('okr-admin-secret')
   .not()
diff --git a/functions/package-lock.json b/functions/package-lock.json
index 42d6a4f08..8e68077c1 100644
--- a/functions/package-lock.json
+++ b/functions/package-lock.json
@@ -14,7 +14,7 @@
         "date-fns": "^2.27.0",
         "express": "^4.18.2",
         "express-rate-limit": "^6.4.0",
-        "express-validator": "^6.14.0",
+        "express-validator": "^7.0.1",
         "firebase-admin": "^11.4.1",
         "firebase-functions": "^3.24.1",
         "google-auth-library": "^7.11.0",
@@ -1406,12 +1406,12 @@
       }
     },
     "node_modules/express-validator": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-6.14.0.tgz",
-      "integrity": "sha512-ZWHJfnRgePp3FKRSKMtnZVnD1s8ZchWD+jSl7UMseGIqhweCo1Z9916/xXBbJAa6PrA3pUZfkOvIsHZG4ZtIMw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-7.0.1.tgz",
+      "integrity": "sha512-oB+z9QOzQIE8FnlINqyIFA8eIckahC6qc8KtqLdLJcU3/phVyuhXH3bA4qzcrhme+1RYaCSwrq+TlZ/kAKIARA==",
       "dependencies": {
         "lodash": "^4.17.21",
-        "validator": "^13.7.0"
+        "validator": "^13.9.0"
       },
       "engines": {
         "node": ">= 8.0.0"
@@ -3307,9 +3307,9 @@
       }
     },
     "node_modules/validator": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz",
-      "integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==",
+      "version": "13.11.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
+      "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==",
       "engines": {
         "node": ">= 0.10"
       }
@@ -4562,12 +4562,12 @@
       "requires": {}
     },
     "express-validator": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-6.14.0.tgz",
-      "integrity": "sha512-ZWHJfnRgePp3FKRSKMtnZVnD1s8ZchWD+jSl7UMseGIqhweCo1Z9916/xXBbJAa6PrA3pUZfkOvIsHZG4ZtIMw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-7.0.1.tgz",
+      "integrity": "sha512-oB+z9QOzQIE8FnlINqyIFA8eIckahC6qc8KtqLdLJcU3/phVyuhXH3bA4qzcrhme+1RYaCSwrq+TlZ/kAKIARA==",
       "requires": {
         "lodash": "^4.17.21",
-        "validator": "^13.7.0"
+        "validator": "^13.9.0"
       }
     },
     "extend": {
@@ -5999,9 +5999,9 @@
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "validator": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz",
-      "integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw=="
+      "version": "13.11.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
+      "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ=="
     },
     "vary": {
       "version": "1.1.2",
diff --git a/functions/package.json b/functions/package.json
index 599b74454..50e407d82 100644
--- a/functions/package.json
+++ b/functions/package.json
@@ -22,7 +22,7 @@
     "date-fns": "^2.27.0",
     "express": "^4.18.2",
     "express-rate-limit": "^6.4.0",
-    "express-validator": "^6.14.0",
+    "express-validator": "^7.0.1",
     "firebase-admin": "^11.4.1",
     "firebase-functions": "^3.24.1",
     "google-auth-library": "^7.11.0",
diff --git a/public/openapi.yaml b/public/openapi.yaml
index 4d42731f6..ccf7d7606 100644
--- a/public/openapi.yaml
+++ b/public/openapi.yaml
@@ -21,7 +21,7 @@ x-google-backend:
   path_translation: APPEND_PATH_TO_ADDRESS
   protocol: h2
 security:
-  - api_key: []
+  - apiKey: []
 
 paths:
   /kpi:
@@ -60,7 +60,9 @@ paths:
       summary: Post KPI progression.
       operationId: postKPI
       security:
-        - api_key: []
+        - apiKey: []
+          apiClientId: []
+          apiClientSecret: []
       parameters:
         - name: id
           in: path
@@ -81,10 +83,6 @@ paths:
             example:
               progress: 123
               comment: A fine measurement
-        - name: okr-team-secret
-          in: header
-          description: Identify yourself with the secret you chose in your Team's settings
-          type: string
       responses:
         '200':
           description: A successful response
@@ -131,13 +129,13 @@ paths:
         required: true
         type: string
         format: date
-      - name: okr-team-secret
-        in: header
-        description: Identify yourself with the secret you chose in your Team's settings
-        type: string
     put:
       summary: Create or update KPI progression value.
       operationId: updateKPIProgressionValue
+      security:
+        - apiKey: []
+          apiClientId: []
+          apiClientSecret: []
       parameters:
         - name: value
           in: body
@@ -170,6 +168,10 @@ paths:
     delete:
       summary: Delete KPI progression value.
       operationId: deleteKPIProgressionValue
+      security:
+        - apiKey: []
+          apiClientId: []
+          apiClientSecret: []
       responses:
         200:
           description: A successful response
@@ -188,8 +190,6 @@ paths:
     get:
       summary: Get key result.
       operationId: getKeyRes
-      security:
-        - api_key: []
       parameters:
         - name: id
           in: path
@@ -209,7 +209,9 @@ paths:
       summary: Post key result progression.
       operationId: postKeyRes
       security:
-        - api_key: []
+        - apiKey: []
+          apiClientId: []
+          apiClientSecret: []
       parameters:
         - name: id
           in: path
@@ -262,7 +264,8 @@ paths:
       summary: Update user details.
       operationId: patchUser
       security:
-        - api_key: []
+        - apiKey: []
+          okrAdminSecret: []
       parameters:
         - name: id
           in: path
@@ -283,10 +286,6 @@ paths:
             example:
               displayName: Foo Bar
               position: director
-        - name: okr-admin-secret
-          in: header
-          description: OKR Tracker admin secret value
-          type: string
       responses:
         '200':
           description: A successful response
@@ -303,10 +302,24 @@ paths:
           $ref: '#/responses/Unavailable'
 
 securityDefinitions:
-  api_key:
-    type: "apiKey"
-    name: "x-api-key"
-    in: "header"
+  apiKey:
+    type: apiKey
+    name: x-api-key
+    in: header
+  apiClientId:
+    type: apiKey
+    name: okr-client-id
+    in: header
+    description: Identify yourself with the identifier of your API client
+  apiClientSecret:
+    type: apiKey
+    name: okr-client-secret
+    in: header
+    description: Identify yourself with the secret of your API client
+  okrAdminSecret:
+    type: apiKey
+    name: okr-admin-secret
+    in: header
 
 definitions:
   Keyres:
diff --git a/src/components/ApiClientCard.vue b/src/components/ApiClientCard.vue
new file mode 100644
index 000000000..d7507bd7e
--- /dev/null
+++ b/src/components/ApiClientCard.vue
@@ -0,0 +1,311 @@
+<template>
+  <div class="api-client-card">
+    <pkt-icon name="crane" class="api-client-card__icon pkt-show-tablet-up" />
+
+    <div class="api-client-card__content">
+      <header class="api-client-card__title">
+        <span class="pkt-txt-18-medium">{{ client.name }}</span>
+        <div class="api-client-card__actions">
+          <pkt-button
+            v-tooltip="{
+              hideOnTargetClick: true,
+              content: $t('integration.action.edit'),
+            }"
+            size="small"
+            skin="tertiary"
+            variant="icon-only"
+            icon-name="edit"
+            :disabled="loading"
+            @onClick="$emit('edit', client)"
+          />
+          <btn-delete
+            v-tooltip="{
+              hideOnTargetClick: true,
+              content: $t('integration.action.delete'),
+            }"
+            size="small"
+            :confirm-text="$t('integration.warning.delete')"
+            variant="icon-only"
+            :disabled="loading"
+            @click="$emit('delete', client)"
+          />
+        </div>
+      </header>
+
+      <div class="api-client-card__body">
+        <div class="api-client-card__credentials mb-size-16">
+          <div class="api-client-card__credential">
+            <label :for="`${client.id}_clientId`">
+              <pkt-icon name="cogwheel" /> {{ $t('integration.clientId') }}
+            </label>
+            <div>
+              <input
+                :id="`${client.id}_clientId`"
+                type="text"
+                :value="client.clientId"
+                :readonly="true"
+              />
+              <pkt-button
+                v-tooltip="{
+                  hideOnTargetClick: true,
+                  content: $t('tooltip.copyToClipboard'),
+                }"
+                size="small"
+                skin="tertiary"
+                variant="icon-only"
+                icon-name="copy"
+                @onClick="copyCredential(`${client.id}_clientId`)"
+              />
+            </div>
+          </div>
+
+          <div
+            :class="[
+              'api-client-card__credential',
+              {
+                'api-client-card__credential--new': visibleSecret,
+              },
+            ]"
+          >
+            <label :for="`${client.id}_clientSecret`">
+              <pkt-icon name="lock-locked" /> {{ $t('integration.clientSecret') }}
+            </label>
+            <div>
+              <input
+                :id="`${client.id}_clientSecret`"
+                type="text"
+                :value="visibleSecret || '∗'.repeat(36)"
+                :readonly="true"
+                :disabled="!visibleSecret"
+              />
+              <pkt-button
+                v-if="visibleSecret"
+                v-tooltip="{
+                  hideOnTargetClick: true,
+                  content: $t('tooltip.copyToClipboard'),
+                }"
+                size="small"
+                skin="tertiary"
+                variant="icon-only"
+                icon-name="copy"
+                @onClick="copyCredential(`${client.id}_clientSecret`)"
+              />
+              <btn-delete
+                v-else
+                v-tooltip="{
+                  hideOnTargetClick: true,
+                  content: $t('integration.action.rotate'),
+                }"
+                size="small"
+                :confirm-label="$t('integration.action.confirmRotate')"
+                :confirm-text="$t('integration.warning.rotate')"
+                variant="icon-only"
+                icon="arrow-circle"
+                :disabled="loading"
+                @click="$emit('rotate', client)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <pkt-alert v-if="visibleSecret" skin="warning" class="mb-size-16">
+          <i18n path="integration.warning.secret" tag="p">
+            <template #closeLink>
+              <a href="#" @click="$emit('hide-secret')">{{
+                $t('integration.warning.secretCloseText')
+              }}</a>
+            </template>
+          </i18n>
+        </pkt-alert>
+
+        <div v-if="client.description" class="api-client-card__description">
+          {{ client.description }}
+        </div>
+
+        <div class="api-client-card__tags">
+          <api-client-tag
+            icon="edit"
+            :i18n-key="`integration.tag.${client.edited ? 'edited' : 'created'}`"
+            :timestamp="client.edited ? client.edited : client.created"
+            :user="client.edited ? client.editedBy : client.createdBy"
+          />
+          <api-client-tag
+            v-if="client.rotated"
+            icon="arrow-circle"
+            i18n-key="integration.tag.lastRotated"
+            :timestamp="client.rotated"
+            :user="client.rotatedBy"
+            time-as-distance
+          />
+          <api-client-tag
+            icon="heart"
+            :i18n-key="`integration.tag.${client.used ? 'lastActivity' : 'noActivity'}`"
+            :timestamp="client.used"
+            time-as-distance
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
+import { BtnDelete } from '@/components/generic/form';
+import ApiClientTag from '@/components/ApiClientTag.vue';
+
+export default {
+  name: 'ApiClientCard',
+
+  components: {
+    PktAlert,
+    PktButton,
+    BtnDelete,
+    ApiClientTag,
+  },
+
+  props: {
+    client: {
+      type: Object,
+      required: true,
+    },
+    visibleSecret: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  methods: {
+    copyCredential(elementId) {
+      const inputElement = document.getElementById(elementId);
+      if (inputElement) {
+        navigator.clipboard.writeText(inputElement.value).then(() => {
+          this.$toasted.show(this.$t('toaster.action.copiedToClipboard'));
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.api-client-card {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  padding: 1rem;
+  border: 4px solid var(--color-gray);
+
+  &__icon {
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    margin-top: 0.5rem;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+  }
+
+  &__title {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+
+    > :first-child {
+      flex-grow: 1;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  &__body {
+    @include bp('tablet-up') {
+      padding-right: 2.5rem;
+    }
+  }
+
+  &__credentials {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__credential {
+    width: 100%;
+    margin-right: auto;
+    padding: 1rem;
+    background-color: var(--color-gray);
+
+    &--new {
+      background-color: var(--color-green-light);
+    }
+
+    @include bp('tablet-up') {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+    label {
+      display: flex;
+      flex-grow: 1;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    > div {
+      display: flex;
+    }
+
+    input {
+      box-sizing: content-box;
+      min-width: 36ch;
+      font-family: monospace;
+      background-color: transparent;
+      border: 0;
+      outline: 0;
+      @include get-text('pkt-txt-14-medium');
+
+      @include bp('phablet-up') {
+        @include get-text('pkt-txt-16-medium');
+      }
+
+      @include bp('tablet-up') {
+        @include get-text('pkt-txt-18-medium');
+      }
+    }
+
+    button:hover {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  &__description {
+    margin: 0.5rem 0 1rem 0;
+  }
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 0.5rem;
+  }
+}
+</style>
diff --git a/src/components/ApiClientTag.vue b/src/components/ApiClientTag.vue
new file mode 100644
index 000000000..a7e4c70b3
--- /dev/null
+++ b/src/components/ApiClientTag.vue
@@ -0,0 +1,107 @@
+<template>
+  <span v-tooltip="tooltip" class="api-client-tag">
+    <pkt-icon v-if="icon" :name="icon" />
+    <span>{{ formattedTagText }}</span>
+  </span>
+</template>
+
+<script>
+import { format, formatDistanceStrict } from 'date-fns';
+import { dateTimeShort } from '@/util';
+
+export default {
+  name: 'ApiClientTag',
+
+  props: {
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    i18nKey: {
+      type: String,
+      required: true,
+    },
+    timestamp: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    user: {
+      type: [Object, String],
+      required: false,
+      default: null,
+    },
+    timeAsDistance: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  data: () => ({
+    timerId: null,
+    now: null,
+  }),
+
+  computed: {
+    formattedTagText() {
+      return this.$t(this.i18nKey, {
+        when: this.datetime,
+        name: this.userName,
+      });
+    },
+    datetime() {
+      if (!this.timestamp) {
+        return this.$t('general.unknown');
+      }
+      if (this.timeAsDistance && this.now) {
+        return formatDistanceStrict(this.timestamp.toDate(), this.now, {
+          addSuffix: true,
+        });
+      }
+      return dateTimeShort(this.timestamp.toDate());
+    },
+    userName() {
+      return this.user?.displayName || this.user?.id || this.$t('general.unknown');
+    },
+    tooltip() {
+      return this.timestamp && this.timeAsDistance
+        ? format(this.timestamp.toDate(), 'P - ppp')
+        : false;
+    },
+  },
+
+  mounted() {
+    if (this.timeAsDistance) {
+      this.now = new Date();
+      this.timerId = setInterval(() => {
+        this.now = new Date();
+      }, 1000);
+    }
+  },
+
+  beforeDestroy() {
+    clearInterval(this.timerId);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.api-client-tag {
+  display: flex;
+  gap: 0.25em;
+  align-items: center;
+  color: var(--color-grayscale-60);
+  @include get-text('pkt-txt-14');
+
+  .pkt-icon {
+    --fg-color: var(--color-grayscale-60);
+    min-width: 1em;
+    min-height: 1em;
+    margin-top: -0.1rem;
+  }
+}
+</style>
diff --git a/src/components/Navigation/SiteHeader.vue b/src/components/Navigation/SiteHeader.vue
index 49734fe15..b38643d61 100644
--- a/src/components/Navigation/SiteHeader.vue
+++ b/src/components/Navigation/SiteHeader.vue
@@ -15,18 +15,27 @@
       </nav-menu>
 
       <!-- Item tabs -->
-      <nav-menu v-if="activeItem && $route.params?.slug" tabs>
+      <nav-menu v-if="activeItem && $route.params?.slug" class="item-menu" tabs>
         <nav-menu-item
           v-for="(itemMenuTab, index) in itemTabs"
           :key="`item_tabs_${index}`"
+          v-tooltip.bottom="itemMenuTab.tooltip"
+          :class="['item-menu__item', `item-menu__item--${itemMenuTab.pull || 'left'}`]"
           :route="itemMenuTab.route"
           :active="itemMenuTab.active"
         >
           <template #text>
-            <span class="pkt-show-tablet-big-up">{{ itemMenuTab.label }}</span>
-            <span class="pkt-hide-tablet-big-up">
-              {{ itemMenuTab.shortLabel || itemMenuTab.label }}
-            </span>
+            <pkt-icon
+              v-if="itemMenuTab.icon"
+              class="nav-menu-item__icon"
+              :name="itemMenuTab.icon"
+            />
+            <template v-if="itemMenuTab.label">
+              <span class="pkt-show-tablet-big-up">{{ itemMenuTab.label }}</span>
+              <span class="pkt-hide-tablet-big-up">
+                {{ itemMenuTab.shortLabel || itemMenuTab.label }}
+              </span>
+            </template>
           </template>
         </nav-menu-item>
       </nav-menu>
@@ -47,7 +56,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import i18n from '@/locale/i18n';
 import SiteMenuDropdown from '@/components/Navigation/SiteMenuDropdown.vue';
 import getActiveItemType from '@/util/getActiveItemType';
@@ -70,6 +79,7 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['hasEditRights']),
     ...mapState(['activeItem', 'activeKeyResult', 'activeObjective', 'user']),
 
     siteMenuLabel() {
@@ -88,6 +98,7 @@ export default {
         (parts.includes('ItemHome') ||
           parts.includes('ItemMeasurements') ||
           parts.includes('ItemAbout') ||
+          parts.includes('ItemIntegrations') ||
           parts.includes('KeyResultHome') ||
           parts.includes('ObjectiveHome')) &&
         this.activeItem
@@ -99,7 +110,7 @@ export default {
     },
 
     itemTabs() {
-      return [
+      const items = [
         {
           route: { name: 'ItemHome' },
           label: this.$t('general.OKRsLong'),
@@ -116,6 +127,15 @@ export default {
           shortLabel: this.$t('about.about'),
         },
       ];
+      if (this.hasEditRights) {
+        items.push({
+          route: { name: 'ItemIntegrations' },
+          icon: 'crane',
+          tooltip: this.$t('general.integrations'),
+          pull: 'right',
+        });
+      }
+      return items;
     },
 
     aboutLabel() {
@@ -171,6 +191,14 @@ export default {
   }
 }
 
+.item-menu {
+  flex: 1;
+
+  &__item--right {
+    margin-left: auto;
+  }
+}
+
 .user-menu {
   margin-left: auto;
 
diff --git a/src/components/Navigation/UserMenuDropdown.vue b/src/components/Navigation/UserMenuDropdown.vue
index 56a87d645..4e01f49c2 100644
--- a/src/components/Navigation/UserMenuDropdown.vue
+++ b/src/components/Navigation/UserMenuDropdown.vue
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import { db, auth } from '@/config/firebaseConfig';
 import User from '@/db/User';
 import { PktButton } from '@oslokommune/punkt-vue2';
@@ -104,6 +104,8 @@ export default {
   }),
 
   computed: {
+    ...mapState(['activeItem']),
+
     me() {
       return this.$store.state.user?.id === this.user?.id;
     },
@@ -120,7 +122,7 @@ export default {
         {
           key: 'api',
           text: this.$t('general.api'),
-          icon: 'crane',
+          icon: 'document-code',
           route: { name: 'Api' },
         },
         {
@@ -250,12 +252,11 @@ $-dropdown-max-height: calc(100vh - 3.5rem);
   &__footer {
     display: flex;
     gap: 1rem;
-    justify-content: flex-end;
     padding: 1rem;
     border-top: 1px solid var(--color-grayscale-20);
 
-    button[name='admin'] {
-      margin-right: auto;
+    button:nth-last-child(2) {
+      margin-left: auto;
     }
   }
 }
diff --git a/src/components/drawers/EditItemDrawer.vue b/src/components/drawers/EditItemDrawer.vue
index dbb7612e0..d5c0f4ae6 100644
--- a/src/components/drawers/EditItemDrawer.vue
+++ b/src/components/drawers/EditItemDrawer.vue
@@ -91,15 +91,15 @@
             </v-select>
           </div>
 
-          <form-component
-            v-model="thisItem.secret"
-            input-type="input"
-            name="secret"
-            :disabled="thisItem?.archived"
-            :label="$t('fields.secret')"
-          >
-            <template #help><span v-html="$t('admin.apiSecret')" /></template>
-          </form-component>
+          <pkt-alert v-if="thisItem.secret" skin="warning" class="mb-size-32">
+            {{ $t('integration.warning.deprecation') }}
+            <input
+              class="pkt-form-input mt-size-16"
+              :value="thisItem.secret"
+              :disabled="true"
+              :readonly="true"
+            />
+          </pkt-alert>
         </template>
 
         <template v-if="!thisItem?.archived" #actions="{ handleSubmit, submitDisabled }">
@@ -259,7 +259,7 @@ export default {
 
         try {
           const { id: itemId } = this.item;
-          const { name, missionStatement, targetAudience, secret } = this.thisItem;
+          const { name, missionStatement, targetAudience } = this.thisItem;
 
           const team = this.thisItem.team.map((user) =>
             db.collection('users').doc(user.id)
@@ -270,7 +270,6 @@ export default {
             team,
             missionStatement,
             targetAudience: targetAudience === undefined ? '' : targetAudience,
-            secret: secret === undefined ? '' : secret,
           };
 
           if (this.type === 'organization') {
diff --git a/src/components/generic/form/buttons/BtnDelete.vue b/src/components/generic/form/buttons/BtnDelete.vue
index 835333d9a..86ef92f6e 100644
--- a/src/components/generic/form/buttons/BtnDelete.vue
+++ b/src/components/generic/form/buttons/BtnDelete.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-popover offset="0" placement="top">
+  <v-popover ref="popover" offset="0" placement="top" :disabled="disabled">
     <pkt-button
       type="button"
       skin="tertiary"
@@ -10,8 +10,17 @@
       :disabled="disabled"
     />
 
-    <template slot="popover">
-      <pkt-button type="button" :text="confirmLabel" @onClick="$emit('click', $event)" />
+    <template v-if="!disabled" slot="popover">
+      <div data-mode="dark">
+        <p v-if="confirmText" class="mb-size-16">{{ confirmText }}</p>
+        <pkt-button
+          type="button"
+          skin="secondary"
+          :text="confirmLabel"
+          :size="size"
+          @onClick="confirm"
+        />
+      </div>
     </template>
   </v-popover>
 </template>
@@ -45,6 +54,11 @@ export default {
         return this.$t('btn.confirmDelete');
       },
     },
+    confirmText: {
+      type: String,
+      required: false,
+      default: null,
+    },
     size: {
       type: String,
       required: false,
@@ -60,6 +74,18 @@ export default {
       required: false,
       default: 'trash-can',
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  methods: {
+    confirm(e) {
+      this.$emit('click', e);
+      this.$refs.popover.hide();
+    },
   },
 };
 </script>
diff --git a/src/components/modals/ApiClientModal.vue b/src/components/modals/ApiClientModal.vue
new file mode 100644
index 000000000..b10c504da
--- /dev/null
+++ b/src/components/modals/ApiClientModal.vue
@@ -0,0 +1,87 @@
+<template>
+  <modal-wrapper @close="close">
+    <template #header>
+      {{ $t(`integration.action.${client ? 'edit' : 'add'}`) }}
+    </template>
+
+    <form-section :hide-errors="true">
+      <form-component
+        v-model="name"
+        input-type="input"
+        name="name"
+        :label="$t('fields.name')"
+        type="text"
+        rules="required"
+      />
+
+      <form-component
+        v-model="description"
+        input-type="textarea"
+        name="description"
+        :rows="2"
+        :label="$t('fields.description')"
+      />
+
+      <template #actions="{ handleSubmit, submitDisabled }">
+        <btn-save :disabled="submitDisabled" @click="handleSubmit(save)" />
+      </template>
+    </form-section>
+  </modal-wrapper>
+</template>
+
+<script>
+import { FormSection, BtnSave } from '@/components/generic/form';
+import ModalWrapper from './ModalWrapper.vue';
+
+export default {
+  name: 'ApiClientModal',
+
+  components: {
+    ModalWrapper,
+    FormSection,
+    BtnSave,
+  },
+
+  props: {
+    client: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+
+  data: () => ({
+    name: null,
+    description: null,
+  }),
+
+  watch: {
+    client: {
+      immediate: true,
+      async handler(client) {
+        if (client) {
+          this.name = client.name;
+          this.description = client.description;
+        } else {
+          this.name = this.$t('integration.placeholderTitle');
+          this.description = '';
+        }
+      },
+    },
+  },
+
+  methods: {
+    save() {
+      this.$emit('save', this.client, {
+        name: this.name,
+        description: this.description,
+      });
+      this.close();
+    },
+
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
diff --git a/src/db/ApiClient/ApiClient.js b/src/db/ApiClient/ApiClient.js
new file mode 100644
index 000000000..679915c63
--- /dev/null
+++ b/src/db/ApiClient/ApiClient.js
@@ -0,0 +1,101 @@
+import { db, auth, serverTimestamp } from '@/config/firebaseConfig';
+import props from './props';
+import {
+  validateCreateProps,
+  validateUpdateProps,
+  createDocument,
+  updateDocument,
+} from '../common';
+
+const collection = db.collection('apiClients');
+
+const create = async (data) => {
+  data = {
+    ...data,
+    clientId: crypto.randomUUID(),
+  };
+  if (!validateCreateProps(props, data)) {
+    throw new Error('Invalid data');
+  }
+  return createDocument(collection, data);
+};
+
+const update = async (clientRef, data) => {
+  if (!clientRef) {
+    throw new Error('Missing client reference');
+  }
+  data.description = data.description || '';
+  validateUpdateProps(props, data);
+  return updateDocument(clientRef, data);
+};
+
+const archive = async (clientRef) => {
+  if (!clientRef) {
+    throw new Error('Missing client reference');
+  }
+  try {
+    return updateDocument(clientRef, { archived: true });
+  } catch (error) {
+    throw new Error(`Could not archive client ${clientRef.id}`);
+  }
+};
+
+const remove = async (clientRef) => {
+  if (!clientRef) {
+    throw new Error('Missing client reference');
+  }
+  try {
+    return clientRef.delete();
+  } catch (error) {
+    throw new Error(`Could not delete client ${clientRef.id}`);
+  }
+};
+
+const createSecret = async (clientRef) => {
+  if (!clientRef) {
+    throw new Error('Missing client reference');
+  }
+  try {
+    const secret = crypto.randomUUID();
+    const encoder = new TextEncoder();
+    const dataBuffer = encoder.encode(secret);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hashedSecret = hashArray
+      .map((byte) => byte.toString(16).padStart(2, '0'))
+      .join('');
+    await createDocument(clientRef.collection('secrets'), {
+      secret: hashedSecret,
+    });
+    return secret;
+  } catch (error) {
+    throw new Error(`Could not create secret for client ${clientRef.id}`);
+  }
+};
+
+const rotateSecret = async (clientRef) => {
+  if (!clientRef) {
+    throw new Error('Missing client reference');
+  }
+  try {
+    const secret = await createSecret(clientRef);
+    await clientRef.update({
+      rotated: serverTimestamp(),
+      rotatedBy: db.collection('users').doc(auth.currentUser.email),
+    });
+    return secret;
+  } catch (error) {
+    console.log(error);
+    throw new Error(`Could not rotate secret for client ${clientRef.id}`);
+  }
+};
+
+export default {
+  collection,
+  create,
+  update,
+  archive,
+  remove,
+  createSecret,
+  rotateSecret,
+};
diff --git a/src/db/ApiClient/index.js b/src/db/ApiClient/index.js
new file mode 100644
index 000000000..3c88cdba1
--- /dev/null
+++ b/src/db/ApiClient/index.js
@@ -0,0 +1,3 @@
+import ApiClient from './ApiClient';
+
+export default ApiClient;
diff --git a/src/db/ApiClient/props.js b/src/db/ApiClient/props.js
new file mode 100644
index 000000000..ca5e68dc6
--- /dev/null
+++ b/src/db/ApiClient/props.js
@@ -0,0 +1,18 @@
+export default {
+  parent: {
+    type: 'reference',
+    required: true,
+  },
+  clientId: {
+    type: 'string',
+    required: true,
+  },
+  name: {
+    type: 'string',
+    required: true,
+  },
+  description: {
+    type: 'string',
+    required: false,
+  },
+};
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index c2fc94be1..b84f3e119 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -121,7 +121,6 @@
     "organization": "Organization",
     "date": "Date",
     "password": "Password",
-    "secret": "API Secret",
     "comment": "Comment",
     "format": "Display",
     "timestamp": "Timestamp",
@@ -196,7 +195,8 @@
     "frontPage": "Front page",
     "signIn": "Please sign in",
     "orgs": "Organizations",
-    "api": "API",
+    "api": "API documentation",
+    "integrations": "Integrations",
     "resultIndicator": "Result indicator",
     "keyFigures": "Key figures",
     "otherMeasurements": "Other measurements",
@@ -212,7 +212,7 @@
     "step": "Step {step} of {steps}",
     "or": "or",
     "shortcuts": "Shortcuts",
-    "error": "Error"
+    "unknown": "unknown"
   },
   "home": {
     "welcome": "Welcome to {appName}!",
@@ -449,8 +449,6 @@
       "change": "Edit measurement",
       "delete": "Delete measurement"
     },
-    "apiSecret": "If you are using the API to update key results and/or measurements, you need to write an API Secret UUID here for the API call header (okr-team-secret)",
-    "apiDocs": "API documentation",
     "department": {
       "picture": "Image",
       "create": "Create new department",
@@ -667,6 +665,50 @@
       "csv": "Download raw data (.csv)"
     }
   },
+  "integration": {
+    "info": "Our API offers endpoints to automate updating of key results and measurements. In order to make use of the API, an API client must be created. For each client, a unique ID and secret is generated which must be added as request headers ({clientIdHeader}, {clientSecretHeader}) to each API call. This in addition to a separate API key ({apiKeyHeader}). It is recommended to create a separate client for each application that integrates with the API. This makes it easier to keep track of each application and secrets in use.",
+    "placeholderTitle": "New client",
+    "clientId": "Client ID",
+    "clientSecret": "Secret",
+    "action": {
+      "add": "Create new client",
+      "edit": "Edit client",
+      "delete": "Delete client",
+      "rotate": "Rotate secret",
+      "confirmRotate": "Confirm rotate"
+    },
+    "tag": {
+      "created": "Created {when} by {name}",
+      "edited": "Last edited {when} by {name}",
+      "lastRotated": "Last rotated {when}",
+      "lastActivity": "Last active {when}",
+      "noActivity": "No activity seen yet"
+    },
+    "empty": {
+      "heading": "No clients",
+      "body": "Add one or more clients here in order to make use of our API. This makes it easy to automate updating of key results and/or measurements."
+    },
+    "toast": {
+      "add": "New client created",
+      "addError": "Could not create new client",
+      "update": "The client was updated",
+      "updateError": "Could not update the client",
+      "delete": "The client was deleted",
+      "deleteError": "Could not delete the client",
+      "rotate": "The secret was rotated",
+      "rotateError": "Could not rotate the secret"
+    },
+    "warning": {
+      "secret": "The secret above must be copied and stored in a safe location. It's only shown this one time. It's OK, {closeLink}!",
+      "secretCloseText": "I'm done",
+      "delete": "When deleting, all running applications which uses this client will stop working.",
+      "rotate": "When rotating, all running applications which uses the old secret will stop working.",
+      "deprecation": "It is no longer possible to add/edit the API secret here. Please visit the 'integrations' tab in the menu to create a new API client. The old secret will still work for the time being:"
+    },
+    "error": {
+      "loading": "Could not fetch clients: {error}."
+    }
+  },
   "languages": {
     "en-US": "English",
     "nb-NO": "Norwegian"
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 56eb6319c..1553147d8 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -121,7 +121,6 @@
     "organization": "Organisasjon",
     "date": "Dato",
     "password": "Passord",
-    "secret": "API Hemmelighet",
     "comment": "Kommentar",
     "format": "Visning",
     "timestamp": "Timestamp",
@@ -196,7 +195,8 @@
     "frontPage": "Forside",
     "signIn": "Vennligst logg inn",
     "orgs": "Virksomheter",
-    "api": "API",
+    "api": "API-dokumentasjon",
+    "integrations": "Integrasjoner",
     "resultIndicator": "Resultatindikator",
     "keyFigures": "Nøkkeltall",
     "otherMeasurements": "Andre målinger",
@@ -212,7 +212,7 @@
     "step": "Steg {step} av {steps}",
     "or": "eller",
     "shortcuts": "Snarveier",
-    "error": "Feil"
+    "unknown": "ukjent"
   },
   "home": {
     "welcome": "Velkommen til {appName}!",
@@ -449,8 +449,6 @@
       "change": "Rediger måling",
       "delete": "Slett måling"
     },
-    "apiSecret": "Hvis du har tenkt til å bruke API-et for å oppdatere nøkkelresultater og/eller målinger, så trenger du å skrive inn en streng her som legges inn i headeren til kallet (okr-team-secret)",
-    "apiDocs": "API-dokumentasjon",
     "department": {
       "picture": "Bilde",
       "create": "Opprett nytt produktområde",
@@ -667,6 +665,50 @@
       "csv": "Last ned rådata (.csv)"
     }
   },
+  "integration": {
+    "info": "Vårt API tilbyr funksjonalitet for blant annet å oppdatere nøkkelresultater og/eller målinger maskinelt. For å ta i bruk API-et må man opprette en klient. For hver klient genereres en klient-ID og en hemmelighet som legges inn i headeren til kallet ({clientIdHeader}, {clientSecretHeader}). Dette kommer i tillegg til en egen API-nøkkel ({apiKeyHeader}). Det anbefales å opprette en separat klient for hver enkelt applikasjon man kobler på API-et. Dette gjør det blant annet enklere å holde styr på hvilke hemmeligheter som er i bruk.",
+    "placeholderTitle": "Ny klient",
+    "clientId": "Klient ID",
+    "clientSecret": "Hemmelighet",
+    "action": {
+      "add": "Legg til klient",
+      "edit": "Rediger klient",
+      "delete": "Slett klient",
+      "rotate": "Roter hemmelighet",
+      "confirmRotate": "Bekreft rotering"
+    },
+    "tag": {
+      "created": "Opprettet {when} av {name}",
+      "edited": "Sist endret {when} av {name}",
+      "lastRotated": "Sist rotert for {when}",
+      "lastActivity": "Sist aktiv for {when}",
+      "noActivity": "Ingen aktivitet registrert enda"
+    },
+    "empty": {
+      "heading": "Ingen klienter",
+      "body": "Legg til en eller flere klienter her for å ta i bruk API-et. Dette gjør det enkelt å oppdatere nøkkelresultater og/eller målinger maskinelt."
+    },
+    "toast": {
+      "add": "Opprettet ny klient",
+      "addError": "Kunne ikke opprette ny klient",
+      "update": "Klienten ble endret",
+      "updateError": "Kunne ikke endre klienten",
+      "delete": "Klienten ble slettet",
+      "deleteError": "Kunne ikke slette klient",
+      "rotate": "Hemmeligheten ble rotert",
+      "rotateError": "Kunne ikke rotere hemmelighet"
+    },
+    "warning": {
+      "secret": "Hemmeligheten over må kopieres og oppbevares et trygt sted. Den vises kun denne ene gangen. Den er grei, {closeLink}!",
+      "secretCloseText": "jeg er ferdig",
+      "delete": "Ved sletting vil alle kjørende applikasjoner som benytter denne klienten slutte å fungere.",
+      "rotate": "Ved rotering vil alle kjørende applikasjoner som benytter gammel hemmelighet slutte å fungere.",
+      "deprecation": "Det er ikke lenger mulig å legge til eller endre API-hemmelighet her. Besøk fanen 'integrasjoner' i toppmenyen for å opprette en API-klient. Den gamle hemmeligheten fungerer enn så lenge:"
+    },
+    "error": {
+      "loading": "Kunne ikke hente ut klienter: {error}."
+    }
+  },
   "languages": {
     "en-US": "Engelsk",
     "nb-NO": "Norsk"
diff --git a/src/router/index.js b/src/router/index.js
index 44af5eddb..2968c6260 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,12 @@ const routes = [
         name: 'ItemAbout',
         component: ItemAbout,
       },
+      {
+        path: 'integrations',
+        name: 'ItemIntegrations',
+        component: () => import('@/views/Item/ItemIntegrations.vue'),
+        beforeEnter: routerGuards.itemIntegrations,
+      },
       {
         path: 'k/:keyResultId',
         name: 'KeyResultHome',
diff --git a/src/router/router-guards/index.js b/src/router/router-guards/index.js
index 3737abbdb..733dbdf55 100644
--- a/src/router/router-guards/index.js
+++ b/src/router/router-guards/index.js
@@ -3,6 +3,7 @@ export { default as home } from './home';
 export { default as itemCommon } from './itemCommon';
 export { default as itemMeasurements } from './itemMeasurements';
 export { default as itemOKRs } from './itemOKRs';
+export { default as itemIntegrations } from './itemIntegrations';
 export { default as keyResultHome } from './keyResultHome';
 export { default as login } from './login';
 export { default as objectiveHome } from './objectiveHome';
diff --git a/src/router/router-guards/itemIntegrations.js b/src/router/router-guards/itemIntegrations.js
new file mode 100644
index 000000000..223faac5a
--- /dev/null
+++ b/src/router/router-guards/itemIntegrations.js
@@ -0,0 +1,27 @@
+import store from '@/store';
+
+/**
+ * Router guard for the API integration admin. Checks if the user is an admin or
+ * a member of the team before allowing access to the page.
+ */
+export default async function itemAdmin(to, from, next) {
+  const {
+    state: {
+      activeItem: { team, organization, id: activeItemId },
+      user: { id: userId, superAdmin, admin },
+    },
+  } = store;
+
+  const isAdminOfOrganization = organization
+    ? admin && admin.includes(organization.id)
+    : admin && admin.includes(activeItemId);
+
+  const isMemberOfTeam = team && team.map(({ id }) => id).includes(userId);
+
+  if (isMemberOfTeam || superAdmin || isAdminOfOrganization) {
+    next();
+  } else {
+    console.error('Access denied');
+    next({ name: 'Forbidden' });
+  }
+}
diff --git a/src/styles/_tooltip.scss b/src/styles/_tooltip.scss
index caeb07ed1..ff47d02f0 100644
--- a/src/styles/_tooltip.scss
+++ b/src/styles/_tooltip.scss
@@ -100,6 +100,7 @@
 
   .tooltip-inner {
     font-size: 1rem !important;
+    text-align: center;
   }
 }
 
diff --git a/src/views/Item/ItemIntegrations.vue b/src/views/Item/ItemIntegrations.vue
new file mode 100644
index 000000000..de55aaa19
--- /dev/null
+++ b/src/views/Item/ItemIntegrations.vue
@@ -0,0 +1,251 @@
+<template>
+  <page-layout breakpoint="tablet-big" class="integrations-page">
+    <header class="integrations-page__header mb-size-24">
+      <h1 class="pkt-txt-24-medium">{{ $t('general.integrations') }}</h1>
+      <router-link :to="{ name: 'Api' }">
+        {{ $t('general.api') }}
+        <pkt-icon name="chevron-right" />
+      </router-link>
+    </header>
+
+    <i18n path="integration.info" tag="p" class="mb-size-24">
+      <template #clientIdHeader>
+        <code>okr-client-id</code>
+      </template>
+      <template #clientSecretHeader>
+        <code>okr-client-secret</code>
+      </template>
+      <template #apiKeyHeader>
+        <code>x-api-key</code>
+      </template>
+    </i18n>
+
+    <div v-if="dataLoading"><loading-small /> {{ $t('general.loading') }}</div>
+
+    <pkt-alert v-if="dataLoadingError" skin="error">
+      {{ $t('integration.error.loading', { error: dataLoadingError }) }}
+    </pkt-alert>
+
+    <template v-else-if="apiClients.length">
+      <div class="mb-size-32">
+        <pkt-button
+          skin="primary"
+          size="small"
+          variant="icon-left"
+          icon-name="plus-sign"
+          :disabled="loading"
+          @onClick="openClientModal(null)"
+        >
+          {{ $t('integration.action.add') }}
+        </pkt-button>
+      </div>
+
+      <api-client-card
+        v-for="client in apiClients"
+        :key="client.id"
+        class="mb-size-24"
+        :client="client"
+        :loading="loading"
+        :visible-secret="client.id === updatedClientId ? updatedClientSecret : null"
+        @hide-secret="hideSecret"
+        @edit="openClientModal"
+        @rotate="rotate"
+        @delete="archive"
+      />
+    </template>
+
+    <empty-state
+      v-else
+      :heading="$t('integration.empty.heading')"
+      :body="$t('integration.empty.body')"
+    >
+      <div data-mode="dark">
+        <pkt-button
+          skin="primary"
+          variant="icon-left"
+          icon-name="plus-sign"
+          @onClick="openClientModal(null)"
+        >
+          {{ $t('integration.action.add') }}
+        </pkt-button>
+      </div>
+    </empty-state>
+
+    <api-client-modal
+      v-if="showClientModal"
+      :client="chosenClient"
+      @save="saveClientMetadata"
+      @close="closeClientModal"
+    />
+  </page-layout>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex';
+import { db } from '@/config/firebaseConfig';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import ApiClient from '@/db/ApiClient';
+
+export default {
+  name: 'ItemIntegrations',
+
+  components: {
+    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    EmptyState: () => import('@/components/EmptyState.vue'),
+    LoadingSmall: () => import('@/components/LoadingSmall.vue'),
+    ApiClientCard: () => import('@/components/ApiClientCard.vue'),
+    ApiClientModal: () => import('@/components/modals/ApiClientModal.vue'),
+    PktButton,
+  },
+
+  data: () => ({
+    apiClients: [],
+    dataLoading: false,
+    dataLoadingError: null,
+    loading: false,
+    showClientModal: false,
+    chosenClient: null,
+    updatedClientId: null,
+    updatedClientSecret: null,
+  }),
+
+  computed: {
+    ...mapState(['activeItem', 'activeItemRef']),
+    ...mapGetters(['isAdmin', 'hasEditRights']),
+  },
+
+  watch: {
+    activeItemRef: {
+      immediate: true,
+      async handler(activeItemRef) {
+        this.dataLoading = true;
+        this.dataLoadingError = null;
+        await this.$bind(
+          'apiClients',
+          db
+            .collection('apiClients')
+            .where('parent', '==', activeItemRef)
+            .where('archived', '==', false)
+            .orderBy('created', 'desc')
+        ).catch((error) => {
+          this.dataLoadingError = error.code ? error.code : error;
+        });
+        this.dataLoading = false;
+      },
+    },
+  },
+
+  methods: {
+    async saveClientMetadata(client, data) {
+      if (client) {
+        await this.update(client, data);
+      } else {
+        await this.create(data);
+      }
+    },
+
+    async create({ name, description }) {
+      try {
+        this.loading = true;
+
+        const clientRef = await ApiClient.create({
+          parent: this.activeItemRef,
+          name,
+          description,
+        });
+
+        try {
+          const secret = await ApiClient.createSecret(clientRef);
+          this.updatedClientId = clientRef.id;
+          this.updatedClientSecret = secret;
+        } catch (error) {
+          await ApiClient.remove(clientRef);
+          throw error;
+        }
+
+        this.$toasted.show(this.$t('integration.toast.add'));
+      } catch (error) {
+        console.log(error);
+        this.$toasted.error(this.$t('integration.toast.addError'));
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async update(client, data) {
+      try {
+        this.loading = true;
+        const clientRef = ApiClient.collection.doc(client.id);
+        await ApiClient.update(clientRef, data);
+        this.$toasted.show(this.$t('integration.toast.update'));
+      } catch (error) {
+        console.log(error);
+        this.$toasted.error(this.$t('integration.toast.updateError'));
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async archive(client) {
+      try {
+        this.loading = true;
+        const clientRef = ApiClient.collection.doc(client.id);
+        await ApiClient.archive(clientRef);
+        this.$toasted.show(this.$t('integration.toast.delete'));
+      } catch (error) {
+        console.log(error);
+        this.$toasted.error(this.$t('integration.toast.deleteError'));
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async rotate(client) {
+      try {
+        this.loading = true;
+        const clientRef = ApiClient.collection.doc(client.id);
+        const secret = await ApiClient.rotateSecret(clientRef);
+        this.updatedClientId = clientRef.id;
+        this.updatedClientSecret = secret;
+        this.$toasted.show(this.$t('integration.toast.rotate'));
+      } catch (error) {
+        console.log(error);
+        this.$toasted.error(this.$t('integration.toast.rotateError'));
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    hideSecret() {
+      this.updatedClientId = null;
+      this.updatedClientSecret = null;
+    },
+
+    openClientModal(client) {
+      this.showClientModal = true;
+      this.chosenClient = client;
+    },
+
+    closeClientModal() {
+      this.showClientModal = false;
+      this.chosenClient = null;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.integrations-page {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    a {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+  }
+}
+</style>
diff --git a/tests/firebase/firestore.test.js b/tests/firebase/firestore.test.js
index 6efe0880b..e4ffdaca0 100644
--- a/tests/firebase/firestore.test.js
+++ b/tests/firebase/firestore.test.js
@@ -30,6 +30,7 @@ describe('Test Firestore rules', () => {
       const db = context.firestore();
       const users = db.collection('users');
       const organizations = db.collection('organizations');
+      const apiClients = db.collection('apiClients');
 
       await users
         .doc('superadmin@example.com')
@@ -40,6 +41,15 @@ describe('Test Firestore rules', () => {
       await organizations
         .doc('organization')
         .set({ name: 'Organization', team: [users.doc('user@example.com')] });
+
+      await apiClients
+        .doc('organization-api-client')
+        .set({ parent: organizations.doc('organization'), clientId: 'foo' });
+      await apiClients
+        .doc('organization-api-client')
+        .collection('secrets')
+        .doc('organization-api-client-secret')
+        .set({ secret: 'bar' });
     });
   });
 
@@ -53,8 +63,7 @@ describe('Test Firestore rules', () => {
   test('users can read user other profiles', async () => {
     await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
       const user = db.collection('users').doc('user2@example.com');
-      const result = await user.get();
-      expectGetSucceeds(result);
+      const result = await expectGetSucceeds(user.get());
       expect(result.data().name).toBe('User 2');
     });
   });
@@ -105,6 +114,71 @@ describe('Test Firestore rules', () => {
       await expectPermissionDenied(organizations.add({ foo: 'bar' }));
     });
   });
+
+  test('anonymous users cannot read api clients', async () => {
+    await withUnauthenticatedUser(testEnv, async (db) => {
+      const clients = db.collection('apiClients');
+      await expectPermissionDenied(clients.get());
+    });
+
+    await withUnauthenticatedUser(testEnv, async (db) => {
+      const client = db.collection('apiClients').doc('organization-api-client');
+      await expectPermissionDenied(client.get());
+    });
+  });
+
+  test('signed in users can read api clients', async () => {
+    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
+      const orgRef = db.collection('organizations').doc('organization');
+      const clients = db.collection('apiClients').where('parent', '==', orgRef);
+      const result = await expectGetSucceeds(clients.get());
+      expect(result).toHaveProperty('size', 1);
+    });
+  });
+
+  test('members can write own api clients and secrets', async () => {
+    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
+      const apiClientRef = db.collection('apiClients').doc('organization-api-client');
+      await expectUpdateSucceeds(apiClientRef.update({ name: 'foo' }));
+      const apiClientSnap = await apiClientRef.get();
+      expect(apiClientSnap.data().name).toBe('foo');
+      const secrets = apiClientRef.collection('secrets');
+      await expectUpdateSucceeds(secrets.doc('foo').set({ foo: 'bar' }));
+    });
+
+    await withAuthenticatedUser(testEnv, 'user2@example.com', async (db) => {
+      const apiClientRef = db.collection('apiClients').doc('organization-api-client');
+      await expectPermissionDenied(apiClientRef.update({ name: 'foo' }));
+    });
+  });
+
+  test('super admin can write any api client', async () => {
+    await withAuthenticatedUser(testEnv, 'superadmin@example.com', async (db) => {
+      const clients = db.collection('apiClients');
+      const apiClientRef = clients.doc('organization-api-client');
+      await expectUpdateSucceeds(apiClientRef.update({ name: 'foo' }));
+      const secrets = apiClientRef.collection('secrets');
+      await expectUpdateSucceeds(secrets.doc('foo').set({ foo: 'bar' }));
+    });
+  });
+
+  test('no one can read api client secrets', async () => {
+    async function readApiClientSecrets(db) {
+      const apiClients = db.collection('apiClients');
+      const apiClientRef = apiClients.doc('organization-api-client');
+      const apiClientSecrets = apiClientRef.collection('secrets');
+      await expectPermissionDenied(apiClientSecrets.get());
+
+      const apiClientSecretRef = apiClientRef
+        .collection('secrets')
+        .doc('organization-api-client-secret');
+      await expectPermissionDenied(apiClientSecretRef.get());
+    }
+
+    await withUnauthenticatedUser(testEnv, readApiClientSecrets);
+    await withAuthenticatedUser(testEnv, 'user@example.com', readApiClientSecrets);
+    await withAuthenticatedUser(testEnv, 'superadmin@example.com', readApiClientSecrets);
+  });
 });
 
 afterAll(async () => {
diff --git a/tests/firebase/utils.js b/tests/firebase/utils.js
index de92018c9..d06d63c43 100644
--- a/tests/firebase/utils.js
+++ b/tests/firebase/utils.js
@@ -21,5 +21,7 @@ export async function expectUpdateSucceeds(promise) {
 }
 
 export async function expectGetSucceeds(promise) {
-  expect(assertSucceeds(promise)).not.toBeUndefined();
+  const successResult = await assertSucceeds(promise);
+  expect(successResult).not.toBeUndefined();
+  return successResult;
 }