diff --git a/changelog/unreleased/enhancement-change-own-password b/changelog/unreleased/enhancement-change-own-password
new file mode 100644
index 00000000000..bfcd56da2f8
--- /dev/null
+++ b/changelog/unreleased/enhancement-change-own-password
@@ -0,0 +1,7 @@
+Enhancement: Add change own password dialog to the account info page
+
+We have added a new change own password dialog to the account info page,
+so the user has the possibility to change their own password.
+
+https://github.com/owncloud/web/pull/7206
+https://github.com/owncloud/web/issues/7183
diff --git a/packages/web-client/src/index.ts b/packages/web-client/src/index.ts
index 816a9f32a66..cc3d77bbe37 100644
--- a/packages/web-client/src/index.ts
+++ b/packages/web-client/src/index.ts
@@ -10,6 +10,7 @@ import {
   MeUserApiFactory,
   UsersApiFactory,
   GroupsApiFactory,
+  MeChangepasswordApiFactory,
   Group,
   CollectionOfGroup,
   CollectionOfUser,
@@ -28,6 +29,7 @@ export interface Graph {
     getUser: (userId: string) => AxiosPromise<User>
     createUser: (user: User) => AxiosPromise<User>
     getMe: () => AxiosPromise<User>
+    changeOwnPassword: (currentPassword: string, newPassword: string) => AxiosPromise<void>
     editUser: (userId: string, user: User) => AxiosPromise<User>
     deleteUser: (userId: string) => AxiosPromise<void>
     listUsers: (orderBy?: string) => AxiosPromise<CollectionOfUser>
@@ -50,6 +52,7 @@ const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
 
   const meDrivesApi = new MeDrivesApi(config, config.basePath, axiosClient)
   const meUserApiFactory = MeUserApiFactory(config, config.basePath, axiosClient)
+  const meChangepasswordApi = MeChangepasswordApiFactory(config, config.basePath, axiosClient)
   const userApiFactory = UserApiFactory(config, config.basePath, axiosClient)
   const usersApiFactory = UsersApiFactory(config, config.basePath, axiosClient)
   const groupApiFactory = GroupApiFactory(config, config.basePath, axiosClient)
@@ -72,6 +75,8 @@ const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
       getUser: (userId: string) => userApiFactory.getUser(userId),
       createUser: (user: User) => usersApiFactory.createUser(user),
       getMe: () => meUserApiFactory.meGet(),
+      changeOwnPassword: (currentPassword, newPassword) =>
+        meChangepasswordApi.changeOwnPassword({ currentPassword, newPassword }),
       editUser: (userId: string, user: User) => userApiFactory.updateUser(userId, user),
       deleteUser: (userId: string) => userApiFactory.deleteUser(userId),
       listUsers: (orderBy?: any) =>
diff --git a/packages/web-runtime/src/components/EditPasswordModal.vue b/packages/web-runtime/src/components/EditPasswordModal.vue
new file mode 100644
index 00000000000..ad86cb86594
--- /dev/null
+++ b/packages/web-runtime/src/components/EditPasswordModal.vue
@@ -0,0 +1,78 @@
+<template>
+  <oc-modal
+    :title="$gettext('Change password')"
+    :button-cancel-text="$gettext('Cancel')"
+    :button-confirm-text="$gettext('Confirm')"
+    :button-confirm-disabled="confirmButtonDisabled"
+    @confirm="editPassword"
+    @cancel="$emit('cancel')"
+  >
+    <template #content>
+      <oc-text-input
+        v-model="currentPassword"
+        :label="$gettext('Current password')"
+        type="password"
+        :fix-message-line="true"
+      />
+      <oc-text-input
+        v-model="newPassword"
+        :label="$gettext('New password')"
+        type="password"
+        :fix-message-line="true"
+        @change="validatePasswordConfirm"
+      />
+      <oc-text-input
+        v-model="newPasswordConfirm"
+        :label="$gettext('Repeat new password')"
+        type="password"
+        :fix-message-line="true"
+        :error-message="passwordConfirmErrorMessage"
+        @change="validatePasswordConfirm"
+      />
+    </template>
+  </oc-modal>
+</template>
+
+<script>
+export default {
+  name: 'EditPasswordModal',
+  data: function () {
+    return {
+      currentPassword: '',
+      newPassword: '',
+      newPasswordConfirm: '',
+      passwordConfirmErrorMessage: ''
+    }
+  },
+  computed: {
+    confirmButtonDisabled() {
+      return (
+        !this.currentPassword.trim().length ||
+        !this.newPassword.trim().length ||
+        this.newPassword !== this.newPasswordConfirm
+      )
+    }
+  },
+  methods: {
+    editPassword() {
+      this.$emit('confirm', this.currentPassword, this.newPassword)
+    },
+    validatePasswordConfirm() {
+      this.passwordConfirmErrorMessage = ''
+
+      if (
+        this.newPassword.trim().length &&
+        this.newPasswordConfirm.trim().length &&
+        this.newPassword !== this.newPasswordConfirm
+      ) {
+        this.passwordConfirmErrorMessage = this.$gettext(
+          'Password and password confirmation must be identical'
+        )
+        return false
+      }
+
+      return true
+    }
+  }
+}
+</script>
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index d7e370327dd..bcc3c82d146 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -3,6 +3,20 @@
     <div class="oc-flex oc-flex-between oc-flex-bottom oc-width-1-1 oc-border-b oc-py">
       <h1 id="account-page-title" class="oc-page-title oc-m-rm">{{ pageTitle }}</h1>
       <div>
+        <edit-password-modal
+          v-if="editPasswordModalOpen"
+          @cancel="closeEditPasswordModal"
+          @confirm="editPassword"
+        ></edit-password-modal>
+        <oc-button
+          v-if="isChangePasswordEnabled"
+          variation="primary"
+          data-testid="account-page-edit-url-btn"
+          @click="showEditPasswordModal"
+        >
+          <oc-icon name="lock" />
+          <translate>Change Password</translate>
+        </oc-button>
         <oc-button
           v-if="editUrl"
           variation="primary"
@@ -72,20 +86,38 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+import EditPasswordModal from '../components/EditPasswordModal.vue'
+import { clientService } from 'web-pkg/src/services'
+
 export default {
   name: 'Personal',
+  components: {
+    EditPasswordModal
+  },
   data() {
     return {
       loadingGroups: true,
-      groups: []
+      groups: [],
+      editPasswordModalOpen: false
     }
   },
   computed: {
-    ...mapGetters(['user', 'configuration', 'getNavItemsByExtension', 'apps']),
+    ...mapGetters([
+      'user',
+      'configuration',
+      'getNavItemsByExtension',
+      'apps',
+      'capabilities',
+      'getToken'
+    ]),
     isAccountEditingEnabled() {
       return !this.apps.settings
     },
+    isChangePasswordEnabled() {
+      // FIXME: spaces capability is not correct here, we need to retrieve an appropriate capability
+      return this.capabilities.spaces?.enabled
+    },
     pageTitle() {
       return this.$gettext(this.$route.meta.title)
     },
@@ -110,9 +142,34 @@ export default {
     this.loadGroups()
   },
   methods: {
+    ...mapActions(['showMessage']),
     async loadGroups() {
       this.groups = await this.$client.users.getUserGroups(this.user.id)
       this.loadingGroups = false
+    },
+    showEditPasswordModal() {
+      this.editPasswordModalOpen = true
+    },
+    closeEditPasswordModal() {
+      this.editPasswordModalOpen = false
+    },
+    editPassword(currentPassword, newPassword) {
+      const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken)
+      return graphClient.users
+        .changeOwnPassword(currentPassword.trim(), newPassword.trim())
+        .then(() => {
+          this.closeEditPasswordModal()
+          this.showMessage({
+            title: this.$gettext('Password was changed successfully')
+          })
+        })
+        .catch((error) => {
+          console.error(error)
+          this.showMessage({
+            title: this.$gettext('Failed to change password'),
+            status: 'danger'
+          })
+        })
     }
   }
 }
diff --git a/packages/web-runtime/tests/unit/components/EditPasswordModal.spec.js b/packages/web-runtime/tests/unit/components/EditPasswordModal.spec.js
new file mode 100644
index 00000000000..6bfc68884af
--- /dev/null
+++ b/packages/web-runtime/tests/unit/components/EditPasswordModal.spec.js
@@ -0,0 +1,60 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue } from '@vue/test-utils'
+import EditPasswordModal from '../../../src/components/EditPasswordModal'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+afterEach(() => jest.clearAllMocks())
+
+describe('EditPasswordModal', () => {
+  describe('computed method "confirmButtonDisabled"', () => {
+    it('should be true if any data set is invalid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.currentPassword = ''
+      expect(wrapper.vm.confirmButtonDisabled).toBeTruthy()
+    })
+    it('should be false if no data set is invalid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.currentPassword = 'password'
+      wrapper.vm.newPassword = 'newpassword'
+      wrapper.vm.newPasswordConfirm = 'newpassword'
+      expect(wrapper.vm.confirmButtonDisabled).toBeFalsy()
+    })
+  })
+
+  describe('method "validatePasswordConfirm"', () => {
+    it('should be true if passwords are identical', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.newPassword = 'newpassword'
+      wrapper.vm.newPasswordConfirm = 'newpassword'
+      expect(wrapper.vm.validatePasswordConfirm).toBeTruthy()
+    })
+    it('should be false if passwords are not identical', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.newPassword = 'newpassword'
+      wrapper.vm.newPasswordConfirm = 'anothernewpassword'
+      expect(wrapper.vm.validatePasswordConfirm).toBeTruthy()
+    })
+  })
+})
+
+function getWrapper() {
+  return mount(EditPasswordModal, {
+    localVue,
+    mocks: {
+      $gettext: jest.fn(),
+      $gettextInterpolate: jest.fn()
+    },
+    propsData: {
+      cancel: jest.fn(),
+      confirm: jest.fn(),
+      existingGroups: [
+        {
+          displayName: 'admins'
+        }
+      ]
+    },
+    stubs: { 'oc-modal': true, 'oc-text-input': true }
+  })
+}
diff --git a/packages/web-runtime/tests/unit/pages/account.spec.js b/packages/web-runtime/tests/unit/pages/account.spec.js
index 1a4251b51c3..fa22bc8d345 100644
--- a/packages/web-runtime/tests/unit/pages/account.spec.js
+++ b/packages/web-runtime/tests/unit/pages/account.spec.js
@@ -4,6 +4,7 @@ import Vuex from 'vuex'
 import { createStore } from 'vuex-extensions'
 import GetTextPlugin from 'vue-gettext'
 import VueCompositionAPI from '@vue/composition-api'
+import mockAxios from 'jest-mock-axios'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -123,6 +124,50 @@ describe('account page', () => {
       })
     })
   })
+
+  describe('method "editPassword"', () => {
+    it('should show message on success', async () => {
+      mockAxios.request.mockImplementationOnce(() => {
+        return Promise.resolve()
+      })
+      const store = getStore({ server: 'https://example.com' })
+      const wrapper = getWrapper(store)
+
+      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
+
+      await wrapper.vm.editPassword('password', 'newPassword')
+
+      expect(showMessageStub).toHaveBeenCalled()
+    })
+
+    it('should show message on error', async () => {
+      mockAxios.request.mockImplementationOnce(() => {
+        return Promise.reject(new Error())
+      })
+      const store = getStore({ server: 'https://example.com' })
+      const wrapper = getWrapper(store)
+
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
+
+      await wrapper.vm.editPassword('password', 'newPassword')
+
+      expect(showMessageStub).toHaveBeenCalled()
+    })
+  })
+
+  describe('computed method "isChangePasswordEnabled"', () => {
+    it('should be true if capability is enabled', () => {
+      const store = getStore({ capabilities: { spaces: { enabled: true } } })
+      const wrapper = getWrapper(store)
+      expect(wrapper.vm.isChangePasswordEnabled).toBeTruthy()
+    })
+    it('should be false if capability is not enabled', () => {
+      const store = getStore()
+      const wrapper = getWrapper(store)
+      expect(wrapper.vm.isChangePasswordEnabled).toBeFalsy()
+    })
+  })
 })
 
 function getWrapper(store = getStore()) {
@@ -149,14 +194,25 @@ function getStore({
   user = {},
   server = '',
   getNavItemsByExtension = jest.fn(() => []),
-  isAccountEditingEnabled = true
+  isAccountEditingEnabled = true,
+  capabilities = {}
 } = {}) {
   return createStore(Vuex.Store, {
+    actions: {
+      createModal: jest.fn(),
+      hideModal: jest.fn(),
+      showMessage: jest.fn(),
+      setModalInputErrorMessage: jest.fn()
+    },
     getters: {
       user: () => user,
       configuration: () => ({
         server: server
       }),
+      getToken: () => 'token',
+      capabilities: () => {
+        return capabilities
+      },
       getNavItemsByExtension: () => getNavItemsByExtension,
       apps: () => ({
         ...(isAccountEditingEnabled || { settings: {} })