diff --git a/web/components.d.ts b/web/components.d.ts
index e8e2e378fe1..416f76038ba 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     AdminReposTab: typeof import('./src/components/admin/settings/AdminReposTab.vue')['default']
     AdminSecretsTab: typeof import('./src/components/admin/settings/AdminSecretsTab.vue')['default']
     AdminUsersTab: typeof import('./src/components/admin/settings/AdminUsersTab.vue')['default']
+    AdminVariablesTab: typeof import('./src/components/admin/settings/AdminVariablesTab.vue')['default']
     Badge: typeof import('./src/components/atomic/Badge.vue')['default']
     BadgeTab: typeof import('./src/components/repo/settings/BadgeTab.vue')['default']
     Button: typeof import('./src/components/atomic/Button.vue')['default']
@@ -112,6 +113,10 @@ declare module 'vue' {
     UserCLIAndAPITab: typeof import('./src/components/user/UserCLIAndAPITab.vue')['default']
     UserGeneralTab: typeof import('./src/components/user/UserGeneralTab.vue')['default']
     UserSecretsTab: typeof import('./src/components/user/UserSecretsTab.vue')['default']
+    UserVariablesTab: typeof import('./src/components/user/UserVariablesTab.vue')['default']
+    VariableEdit: typeof import('./src/components/variables/VariableEdit.vue')['default']
+    VariableList: typeof import('./src/components/variables/VariableList.vue')['default']
+    VariablesTab: typeof import('./src/components/repo/settings/VariablesTab.vue')['default']
     Warning: typeof import('./src/components/atomic/Warning.vue')['default']
   }
 }
diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 12333412751..b25ef0e4216 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -275,6 +275,9 @@
       "not_allowed": "You are not allowed to access this organization's settings",
       "secrets": {
         "desc": "Organization secrets can be passed to all organization's repository individual pipeline steps at runtime as environmental variables."
+      },
+      "variables": {
+        "desc": "Organization variables can be passed to all organization's repository individual pipeline steps at runtime as environmental variables."
       }
     }
   },
@@ -285,6 +288,10 @@
         "desc": "Global secrets can be passed to all repositories individual pipeline steps at runtime as environmental variables.",
         "warning": "These secrets will be available for all server users."
       },
+      "variables": {
+        "desc": "Global variables can be passed to all repositories individual pipeline steps at runtime as environmental variables.",
+        "warning": "These variables will be available for all server users."
+      },
       "agents": {
         "agents": "Agents",
         "desc": "Agents registered for this server",
@@ -406,8 +413,13 @@
         }
       },
       "secrets": {
+        "secrets": "Secrets",
         "desc": "User secrets can be passed to all user's repository individual pipeline steps at runtime as environmental variables."
       },
+      "variables": {
+        "variables": "Variables",
+        "desc": "User variables can be passed to all user's repository individual pipeline steps at runtime as environmental variables."
+      },
       "cli_and_api": {
         "cli_and_api": "CLI & API",
         "desc": "Personal Access Token, CLI and API usage",
@@ -423,6 +435,22 @@
     "internal_error": "Some internal error occurred",
     "access_denied": "You are not allowed to login"
   },
+  "variables": {
+    "variables": "Variables",
+    "desc": "Variables can be passed to individual pipeline steps at runtime as environmental variables.",
+    "none": "There are no variables yet.",
+    "add": "Add variable",
+    "save": "Save variable",
+    "show": "Show variables",
+    "name": "Name",
+    "value": "Value",
+    "delete_confirm": "Do you really want to delete this variable?",
+    "deleted": "Variable deleted",
+    "created": "Variable created",
+    "saved": "Variable saved",
+    "edit": "Edit variable",
+    "delete": "Delete variable"
+  },
   "secrets": {
     "secrets": "Secrets",
     "desc": "Secrets can be passed to individual pipeline steps at runtime as environmental variables.",
diff --git a/web/src/components/admin/settings/AdminVariablesTab.vue b/web/src/components/admin/settings/AdminVariablesTab.vue
new file mode 100644
index 00000000000..0d67c845ad8
--- /dev/null
+++ b/web/src/components/admin/settings/AdminVariablesTab.vue
@@ -0,0 +1,100 @@
+<template>
+  <Settings
+    :title="$t('variables.variables')"
+    :desc="$t('admin.settings.variables.desc')"
+    docs-url="docs/usage/variables"
+    :warning="$t('admin.settings.variables.warning')"
+  >
+    <template #titleActions>
+      <Button
+        v-if="selectedVariable"
+        :text="$t('variables.show')"
+        start-icon="back"
+        @click="selectedVariable = undefined"
+      />
+      <Button v-else :text="$t('variables.add')" start-icon="plus" @click="showAddVariable" />
+    </template>
+
+    <VariableList
+      v-if="!selectedVariable"
+      v-model="variables"
+      :is-deleting="isDeleting"
+      @edit="editVariable"
+      @delete="deleteVariable"
+    />
+
+    <VariableEdit
+      v-else
+      v-model="selectedVariable"
+      :is-saving="isSaving"
+      @save="createVariable"
+      @cancel="selectedVariable = undefined"
+    />
+  </Settings>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from '~/components/atomic/Button.vue';
+import Settings from '~/components/layout/Settings.vue';
+import VariableEdit from '~/components/variables/VariableEdit.vue';
+import VariableList from '~/components/variables/VariableList.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { useAsyncAction } from '~/compositions/useAsyncAction';
+import useNotifications from '~/compositions/useNotifications';
+import { usePagination } from '~/compositions/usePaginate';
+import { Variable } from '~/lib/api/types';
+
+const emptyVariable: Partial<Variable> = {
+  name: '',
+  value: '',
+};
+
+const apiClient = useApiClient();
+const notifications = useNotifications();
+const i18n = useI18n();
+
+const selectedVariable = ref<Partial<Variable>>();
+const isEditingVariable = computed(() => !!selectedVariable.value?.id);
+
+async function loadVariables(page: number): Promise<Variable[] | null> {
+  return apiClient.getGlobalSecretList({ page });
+}
+
+const { resetPage, data: variables } = usePagination(loadVariables, () => !selectedVariable.value);
+
+const { doSubmit: createVariable, isLoading: isSaving } = useAsyncAction(async () => {
+  if (!selectedVariable.value) {
+    throw new Error("Unexpected: Can't get variable");
+  }
+
+  if (isEditingVariable.value) {
+    await apiClient.updateGlobalSecret(selectedVariable.value);
+  } else {
+    await apiClient.createGlobalSecret(selectedVariable.value);
+  }
+  notifications.notify({
+    title: i18n.t(isEditingVariable.value ? 'variables.saved' : 'variables.created'),
+    type: 'success',
+  });
+  selectedVariable.value = undefined;
+  resetPage();
+});
+
+const { doSubmit: deleteVariable, isLoading: isDeleting } = useAsyncAction(async (_variable: Variable) => {
+  await apiClient.deleteGlobalSecret(_variable.name);
+  notifications.notify({ title: i18n.t('variables.deleted'), type: 'success' });
+  resetPage();
+});
+
+function editVariable(variable: Variable) {
+  selectedVariable.value = cloneDeep(variable);
+}
+
+function showAddVariable() {
+  selectedVariable.value = cloneDeep(emptyVariable);
+}
+</script>
diff --git a/web/src/components/repo/settings/VariablesTab.vue b/web/src/components/repo/settings/VariablesTab.vue
new file mode 100644
index 00000000000..5415302a425
--- /dev/null
+++ b/web/src/components/repo/settings/VariablesTab.vue
@@ -0,0 +1,148 @@
+<template>
+  <Settings :title="$t('variables.variables')" :desc="$t('variables.desc')" docs-url="docs/usage/variables">
+    <template #titleActions>
+      <Button
+        v-if="selectedVariable"
+        :text="$t('variables.show')"
+        start-icon="back"
+        @click="selectedVariable = undefined"
+      />
+      <Button v-else :text="$t('variables.add')" start-icon="plus" @click="showAddVariable" />
+    </template>
+
+    <VariableList
+      v-if="!selectedVariable"
+      :model-value="variables"
+      :is-deleting="isDeleting"
+      @edit="editVariable"
+      @delete="deleteSecret"
+    />
+
+    <VariableEdit
+      v-else
+      v-model="selectedVariable"
+      :is-saving="isSaving"
+      @save="createSecret"
+      @cancel="selectedVariable = undefined"
+    />
+  </Settings>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash';
+import { computed, inject, Ref, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from '~/components/atomic/Button.vue';
+import Settings from '~/components/layout/Settings.vue';
+import VariableEdit from '~/components/variables/VariableEdit.vue';
+import VariableList from '~/components/variables/VariableList.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { useAsyncAction } from '~/compositions/useAsyncAction';
+import useNotifications from '~/compositions/useNotifications';
+import { usePagination } from '~/compositions/usePaginate';
+import { Repo, Variable } from '~/lib/api/types';
+
+const emptyVariable: Partial<Variable> = {
+  name: '',
+  value: '',
+};
+
+const apiClient = useApiClient();
+const notifications = useNotifications();
+const i18n = useI18n();
+
+const repo = inject<Ref<Repo>>('repo');
+const selectedVariable = ref<Partial<Variable>>();
+const isEditingVariable = computed(() => !!selectedVariable.value?.id);
+
+async function loadVariables(page: number, level: 'repo' | 'org' | 'global'): Promise<Variable[] | null> {
+  if (!repo?.value) {
+    throw new Error("Unexpected: Can't load repo");
+  }
+
+  switch (level) {
+    case 'repo':
+      return apiClient.getSecretList(repo.value.id, { page });
+    case 'org':
+      return apiClient.getOrgSecretList(repo.value.org_id, { page });
+    case 'global':
+      return apiClient.getGlobalSecretList({ page });
+    default:
+      throw new Error(`Unexpected level: ${level}`);
+  }
+}
+
+const { resetPage, data: _variables } = usePagination(loadVariables, () => !selectedVariable.value, {
+  each: ['repo', 'org', 'global'],
+  pageSize: 50,
+});
+const variables = computed(() => {
+  const variablesList: Record<string, Variable & { edit?: boolean; level: 'repo' | 'org' | 'global' }> = {};
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const level of ['repo', 'org', 'global']) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const variable of _variables.value) {
+      if (
+        ((level === 'repo' && variable.repo_id !== 0 && variable.org_id === 0) ||
+          (level === 'org' && variable.repo_id === 0 && variable.org_id !== 0) ||
+          (level === 'global' && variable.repo_id === 0 && variable.org_id === 0)) &&
+        !variablesList[variable.name]
+      ) {
+        variablesList[variable.name] = { ...variable, edit: variable.repo_id !== 0, level };
+      }
+    }
+  }
+
+  const levelsOrder = {
+    global: 0,
+    org: 1,
+    repo: 2,
+  };
+
+  return Object.values(variablesList)
+    .toSorted((a, b) => a.name.localeCompare(b.name))
+    .toSorted((a, b) => levelsOrder[b.level] - levelsOrder[a.level]);
+});
+
+const { doSubmit: createSecret, isLoading: isSaving } = useAsyncAction(async () => {
+  if (!repo?.value) {
+    throw new Error("Unexpected: Can't load repo");
+  }
+
+  if (!selectedVariable.value) {
+    throw new Error("Unexpected: Can't get variable");
+  }
+
+  if (isEditingVariable.value) {
+    await apiClient.updateSecret(repo.value.id, selectedVariable.value);
+  } else {
+    await apiClient.createSecret(repo.value.id, selectedVariable.value);
+  }
+  notifications.notify({
+    title: i18n.t(isEditingVariable.value ? 'variables.saved' : 'variables.created'),
+    type: 'success',
+  });
+  selectedVariable.value = undefined;
+  await resetPage();
+});
+
+const { doSubmit: deleteSecret, isLoading: isDeleting } = useAsyncAction(async (_variable: Variable) => {
+  if (!repo?.value) {
+    throw new Error("Unexpected: Can't load repo");
+  }
+
+  await apiClient.deleteSecret(repo.value.id, _variable.name);
+  notifications.notify({ title: i18n.t('variables.deleted'), type: 'success' });
+  await resetPage();
+});
+
+function editVariable(variable: Variable) {
+  selectedVariable.value = cloneDeep(variable);
+}
+
+function showAddVariable() {
+  selectedVariable.value = cloneDeep(emptyVariable);
+}
+</script>
diff --git a/web/src/components/user/UserSecretsTab.vue b/web/src/components/user/UserSecretsTab.vue
index 1288a5a8cad..21583a3b5d4 100644
--- a/web/src/components/user/UserSecretsTab.vue
+++ b/web/src/components/user/UserSecretsTab.vue
@@ -11,17 +11,16 @@
       <Button
         v-if="selectedSecret"
         class="ml-auto"
-        :text="$t('user.settings.secrets.show')"
+        :text="$t('secrets.show')"
         start-icon="back"
         @click="selectedSecret = undefined"
       />
-      <Button v-else class="ml-auto" :text="$t('user.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
+      <Button v-else class="ml-auto" :text="$t('secrets.add')" start-icon="plus" @click="showAddSecret" />
     </div>
 
     <SecretList
       v-if="!selectedSecret"
       v-model="secrets"
-      i18n-prefix="user.settings.secrets."
       :is-deleting="isDeleting"
       @edit="editSecret"
       @delete="deleteSecret"
@@ -30,7 +29,6 @@
     <SecretEdit
       v-else
       v-model="selectedSecret"
-      i18n-prefix="user.settings.secrets."
       :is-saving="isSaving"
       @save="createSecret"
       @cancel="selectedSecret = undefined"
diff --git a/web/src/components/user/UserVariablesTab.vue b/web/src/components/user/UserVariablesTab.vue
new file mode 100644
index 00000000000..7f53b3a36a6
--- /dev/null
+++ b/web/src/components/user/UserVariablesTab.vue
@@ -0,0 +1,113 @@
+<template>
+  <Panel>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
+      <div class="ml-2">
+        <h1 class="text-xl text-wp-text-100">{{ $t('user.settings.variables.variables') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
+          {{ $t('user.settings.variables.desc') }}
+          <DocsLink :topic="$t('user.settings.variables.variables')" url="docs/usage/variables" />
+        </p>
+      </div>
+      <Button
+        v-if="selectedVariable"
+        class="ml-auto"
+        :text="$t('variables.show')"
+        start-icon="back"
+        @click="selectedVariable = undefined"
+      />
+      <Button v-else class="ml-auto" :text="$t('variables.add')" start-icon="plus" @click="showAddVariable" />
+    </div>
+
+    <VariableList
+      v-if="!selectedVariable"
+      v-model="variables"
+      :is-deleting="isDeleting"
+      @edit="editVariable"
+      @delete="deleteVariable"
+    />
+
+    <VariableEdit
+      v-else
+      v-model="selectedVariable"
+      :is-saving="isSaving"
+      @save="createVariable"
+      @cancel="selectedVariable = undefined"
+    />
+  </Panel>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from '~/components/atomic/Button.vue';
+import DocsLink from '~/components/atomic/DocsLink.vue';
+import Panel from '~/components/layout/Panel.vue';
+import VariableEdit from '~/components/variables/VariableEdit.vue';
+import VariableList from '~/components/variables/VariableList.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { useAsyncAction } from '~/compositions/useAsyncAction';
+import useAuthentication from '~/compositions/useAuthentication';
+import useNotifications from '~/compositions/useNotifications';
+import { usePagination } from '~/compositions/usePaginate';
+import { Variable } from '~/lib/api/types';
+
+const emptyVariable: Partial<Variable> = {
+  name: '',
+  value: '',
+};
+
+const apiClient = useApiClient();
+const notifications = useNotifications();
+const i18n = useI18n();
+
+const { user } = useAuthentication();
+if (!user) {
+  throw new Error('Unexpected: Unauthenticated');
+}
+const selectedVariable = ref<Partial<Variable>>();
+const isEditingVariable = computed(() => !!selectedVariable.value?.id);
+
+async function loadVariables(page: number): Promise<Variable[] | null> {
+  if (!user) {
+    throw new Error('Unexpected: Unauthenticated');
+  }
+
+  return apiClient.getOrgVariablesList(user.org_id, { page });
+}
+
+const { resetPage, data: variables } = usePagination(loadVariables, () => !selectedVariable.value);
+
+const { doSubmit: createVariable, isLoading: isSaving } = useAsyncAction(async () => {
+  if (!selectedVariable.value) {
+    throw new Error("Unexpected: Can't get variable");
+  }
+
+  if (isEditingVariable.value) {
+    await apiClient.updateOrgVariable(user.org_id, selectedVariable.value);
+  } else {
+    await apiClient.createOrgVariable(user.org_id, selectedVariable.value);
+  }
+  notifications.notify({
+    title: i18n.t(isEditingVariable.value ? 'user.settings.variables.saved' : 'user.settings.variables.created'),
+    type: 'success',
+  });
+  selectedVariable.value = undefined;
+  resetPage();
+});
+
+const { doSubmit: deleteVariable, isLoading: isDeleting } = useAsyncAction(async (_variable: Variable) => {
+  await apiClient.deleteOrgVariable(user.org_id, _variable.name);
+  notifications.notify({ title: i18n.t('user.settings.variables.deleted'), type: 'success' });
+  resetPage();
+});
+
+function editVariable(variable: Variable) {
+  selectedVariable.value = cloneDeep(variable);
+}
+
+function showAddVariable() {
+  selectedVariable.value = cloneDeep(emptyVariable);
+}
+</script>
diff --git a/web/src/components/variables/VariableEdit.vue b/web/src/components/variables/VariableEdit.vue
new file mode 100644
index 00000000000..9542ae44adc
--- /dev/null
+++ b/web/src/components/variables/VariableEdit.vue
@@ -0,0 +1,72 @@
+<template>
+  <div v-if="innerValue" class="space-y-4">
+    <form @submit.prevent="save">
+      <InputField v-slot="{ id }" :label="$t('variables.name')">
+        <TextField
+          :id="id"
+          v-model="innerValue.name"
+          :placeholder="$t('variables.name')"
+          required
+          :disabled="isEditingVariable"
+        />
+      </InputField>
+
+      <InputField v-slot="{ id }" :label="$t('variables.value')">
+        <TextField
+          :id="id"
+          v-model="innerValue.value"
+          :placeholder="$t('variables.value')"
+          :lines="5"
+          :required="!isEditingVariable"
+        />
+      </InputField>
+
+      <div class="flex gap-2">
+        <Button type="button" color="gray" :text="$t('cancel')" @click="$emit('cancel')" />
+        <Button
+          type="submit"
+          color="green"
+          :is-loading="isSaving"
+          :text="isEditingVariable ? $t('variables.save') : $t('variables.add')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRef } from 'vue';
+
+import Button from '~/components/atomic/Button.vue';
+import InputField from '~/components/form/InputField.vue';
+import TextField from '~/components/form/TextField.vue';
+import { Variable } from '~/lib/api/types';
+
+const props = defineProps<{
+  modelValue: Partial<Variable>;
+  isSaving: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: Partial<Variable> | undefined): void;
+  (event: 'save', value: Partial<Variable>): void;
+  (event: 'cancel'): void;
+}>();
+
+const modelValue = toRef(props, 'modelValue');
+const innerValue = computed({
+  get: () => modelValue.value,
+  set: (value) => {
+    emit('update:modelValue', value);
+  },
+});
+const isEditingVariable = computed(() => !!innerValue.value?.id);
+
+function save() {
+  if (!innerValue.value) {
+    return;
+  }
+
+  emit('save', innerValue.value);
+}
+</script>
diff --git a/web/src/components/variables/VariableList.vue b/web/src/components/variables/VariableList.vue
new file mode 100644
index 00000000000..e3e357085f2
--- /dev/null
+++ b/web/src/components/variables/VariableList.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="space-y-4 text-wp-text-100">
+    <ListItem
+      v-for="variable in variables"
+      :key="variable.id"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+    >
+      <span>{{ variable.name }}</span>
+      <Badge
+        v-if="variable.edit === false"
+        class="ml-2"
+        :label="variable.org_id === 0 ? $t('global_level_variable') : $t('org_level_variable')"
+      />
+      <template v-if="variable.edit !== false">
+        <IconButton
+          icon="edit"
+          class="ml-2 <md:ml-auto w-8 h-8"
+          :title="$t('variables.edit')"
+          @click="editVariable(variable)"
+        />
+        <IconButton
+          icon="trash"
+          class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
+          :is-loading="isDeleting"
+          :title="$t('variables.delete')"
+          @click="deleteVariable(variable)"
+        />
+      </template>
+    </ListItem>
+
+    <div v-if="variables?.length === 0" class="ml-2">{{ $t('variables.none') }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Badge from '~/components/atomic/Badge.vue';
+import IconButton from '~/components/atomic/IconButton.vue';
+import ListItem from '~/components/atomic/ListItem.vue';
+import { Variable } from '~/lib/api/types';
+
+const props = defineProps<{
+  modelValue: (Variable & { edit?: boolean })[];
+  isDeleting: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: 'edit', variable: Variable): void;
+  (event: 'delete', variable: Variable): void;
+}>();
+
+const i18n = useI18n();
+
+const variables = toRef(props, 'modelValue');
+
+function editVariable(variable: Variable) {
+  emit('edit', variable);
+}
+
+function deleteVariable(variable: Variable) {
+  // TODO: use proper dialog
+  // eslint-disable-next-line no-alert, no-restricted-globals
+  if (!confirm(i18n.t('repo.settings.variables.delete_confirm'))) {
+    return;
+  }
+  emit('delete', variable);
+}
+</script>
diff --git a/web/src/lib/api/index.ts b/web/src/lib/api/index.ts
index 13fdde5ccf8..cf931d2d651 100644
--- a/web/src/lib/api/index.ts
+++ b/web/src/lib/api/index.ts
@@ -16,6 +16,7 @@ import {
   RepoSettings,
   Secret,
   User,
+  Variable,
 } from './types';
 
 type RepoListOptions = {
@@ -148,6 +149,25 @@ export default class WoodpeckerClient extends ApiClient {
     return this._delete(`/api/repos/${repoId}/logs/${pipeline}/${step}`);
   }
 
+  getVariablesList(repoId: number, opts?: PaginationOptions): Promise<Variable[] | null> {
+    const query = encodeQueryString(opts);
+    return this._get(`/api/repos/${repoId}/variables?${query}`) as Promise<Variable[] | null>;
+  }
+
+  createVariable(repoId: number, variable: Partial<Variable>): Promise<unknown> {
+    return this._post(`/api/repos/${repoId}/variables`, variable);
+  }
+
+  updateVariable(repoId: number, variable: Partial<Variable>): Promise<unknown> {
+    const variableName = encodeURIComponent(variable.name ?? '');
+    return this._patch(`/api/repos/${repoId}/variables/${variableName}`, variable);
+  }
+
+  deleteVariable(repoId: number, variableName: string): Promise<unknown> {
+    const name = encodeURIComponent(variableName);
+    return this._delete(`/api/repos/${repoId}/variables/${name}`);
+  }
+
   getSecretList(repoId: number, opts?: PaginationOptions): Promise<Secret[] | null> {
     const query = encodeQueryString(opts);
     return this._get(`/api/repos/${repoId}/secrets?${query}`) as Promise<Secret[] | null>;
@@ -217,6 +237,25 @@ export default class WoodpeckerClient extends ApiClient {
     return this._get(`/api/orgs/${orgId}/permissions`) as Promise<OrgPermissions>;
   }
 
+  getOrgVariablesList(orgId: number, opts?: PaginationOptions): Promise<Variable[] | null> {
+    const query = encodeQueryString(opts);
+    return this._get(`/api/orgs/${orgId}/variables?${query}`) as Promise<Variable[] | null>;
+  }
+
+  createOrgVariable(orgId: number, variable: Partial<Variable>): Promise<unknown> {
+    return this._post(`/api/orgs/${orgId}/variables`, variable);
+  }
+
+  updateOrgVariable(orgId: number, variable: Partial<Variable>): Promise<unknown> {
+    const variableName = encodeURIComponent(variable.name ?? '');
+    return this._patch(`/api/orgs/${orgId}/variables/${variableName}`, variable);
+  }
+
+  deleteOrgVariable(orgId: number, variableName: string): Promise<unknown> {
+    const name = encodeURIComponent(variableName);
+    return this._delete(`/api/orgs/${orgId}/variables/${name}`);
+  }
+
   getOrgSecretList(orgId: number, opts?: PaginationOptions): Promise<Secret[] | null> {
     const query = encodeQueryString(opts);
     return this._get(`/api/orgs/${orgId}/secrets?${query}`) as Promise<Secret[] | null>;
@@ -236,6 +275,25 @@ export default class WoodpeckerClient extends ApiClient {
     return this._delete(`/api/orgs/${orgId}/secrets/${name}`);
   }
 
+  getGlobalVariableList(opts?: PaginationOptions): Promise<Variable[] | null> {
+    const query = encodeQueryString(opts);
+    return this._get(`/api/variables?${query}`) as Promise<Variable[] | null>;
+  }
+
+  createGlobalVariable(variable: Partial<Variable>): Promise<unknown> {
+    return this._post(`/api/variables`, variable);
+  }
+
+  updateGlobalVariable(variable: Partial<Variable>): Promise<unknown> {
+    const variableName = encodeURIComponent(variable.name ?? '');
+    return this._patch(`/api/variables/${variableName}`, variable);
+  }
+
+  deleteGlobalVariable(variableName: string): Promise<unknown> {
+    const name = encodeURIComponent(variableName);
+    return this._delete(`/api/variables/${name}`);
+  }
+
   getGlobalSecretList(opts?: PaginationOptions): Promise<Secret[] | null> {
     const query = encodeQueryString(opts);
     return this._get(`/api/secrets?${query}`) as Promise<Secret[] | null>;
diff --git a/web/src/lib/api/types/index.ts b/web/src/lib/api/types/index.ts
index 7918c24d775..53c73906539 100644
--- a/web/src/lib/api/types/index.ts
+++ b/web/src/lib/api/types/index.ts
@@ -9,4 +9,5 @@ export * from './registry';
 export * from './repo';
 export * from './secret';
 export * from './user';
+export * from './variable';
 export * from './webhook';
diff --git a/web/src/lib/api/types/variable.ts b/web/src/lib/api/types/variable.ts
new file mode 100644
index 00000000000..f144a432090
--- /dev/null
+++ b/web/src/lib/api/types/variable.ts
@@ -0,0 +1,7 @@
+export type Variable = {
+  id: string;
+  repo_id: number;
+  org_id: number;
+  name: string;
+  value: string;
+};
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index 50e5210e1bb..fe66653c368 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -5,6 +5,9 @@
     <Tab id="general" :title="$t('user.settings.general.general')">
       <UserGeneralTab />
     </Tab>
+    <Tab id="variables" :title="$t('user.settings.variables.variables')">
+      <UserVariablesTab />
+    </Tab>
     <Tab id="secrets" :title="$t('user.settings.secrets.secrets')">
       <UserSecretsTab />
     </Tab>
@@ -20,6 +23,7 @@ import Tab from '~/components/layout/scaffold/Tab.vue';
 import UserCLIAndAPITab from '~/components/user/UserCLIAndAPITab.vue';
 import UserGeneralTab from '~/components/user/UserGeneralTab.vue';
 import UserSecretsTab from '~/components/user/UserSecretsTab.vue';
+import UserVariablesTab from '~/components/user/UserVariablesTab.vue';
 import useConfig from '~/compositions/useConfig';
 
 const address = `${window.location.protocol}//${window.location.host}${useConfig().rootPath}`; // port is included in location.host
diff --git a/web/src/views/admin/AdminSettings.vue b/web/src/views/admin/AdminSettings.vue
index 9fbfa74647e..c0668c9d2bd 100644
--- a/web/src/views/admin/AdminSettings.vue
+++ b/web/src/views/admin/AdminSettings.vue
@@ -6,6 +6,9 @@
     <Tab id="info" :title="$t('info')">
       <AdminInfoTab />
     </Tab>
+    <Tab id="variables" :title="$t('variables.variables')">
+      <AdminVariablesTab />
+    </Tab>
     <Tab id="secrets" :title="$t('secrets.secrets')">
       <AdminSecretsTab />
     </Tab>
@@ -39,6 +42,7 @@ import AdminQueueTab from '~/components/admin/settings/AdminQueueTab.vue';
 import AdminReposTab from '~/components/admin/settings/AdminReposTab.vue';
 import AdminSecretsTab from '~/components/admin/settings/AdminSecretsTab.vue';
 import AdminUsersTab from '~/components/admin/settings/AdminUsersTab.vue';
+import AdminVariablesTab from '~/components/admin/settings/AdminVariablesTab.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
 import useAuthentication from '~/compositions/useAuthentication';
diff --git a/web/src/views/repo/RepoSettings.vue b/web/src/views/repo/RepoSettings.vue
index bcc070c5d7a..0a41bf29544 100644
--- a/web/src/views/repo/RepoSettings.vue
+++ b/web/src/views/repo/RepoSettings.vue
@@ -17,6 +17,9 @@
     <Tab id="general" :title="$t('repo.settings.general.general')">
       <GeneralTab />
     </Tab>
+    <Tab id="variables" :title="$t('variables.variables')">
+      <VariablesTab />
+    </Tab>
     <Tab id="secrets" :title="$t('secrets.secrets')">
       <SecretsTab />
     </Tab>
@@ -48,6 +51,7 @@ import CronTab from '~/components/repo/settings/CronTab.vue';
 import GeneralTab from '~/components/repo/settings/GeneralTab.vue';
 import RegistriesTab from '~/components/repo/settings/RegistriesTab.vue';
 import SecretsTab from '~/components/repo/settings/SecretsTab.vue';
+import VariablesTab from '~/components/repo/settings/VariablesTab.vue';
 import useNotifications from '~/compositions/useNotifications';
 import { useRouteBack } from '~/compositions/useRouteBack';
 import { Repo, RepoPermissions } from '~/lib/api/types';