diff --git a/src/pages/account/account.js b/src/pages/account/account.js
new file mode 100644
index 0000000..d3401a5
--- /dev/null
+++ b/src/pages/account/account.js
@@ -0,0 +1,113 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import { useState } from "react";
+import IconButton from "../../common/buttons/icon-button";
+import { Form, Row, Col } from 'react-bootstrap';
+import EditOwnUserDialog from "./edit-own-user";
+import { currentUser } from "../../localStorage";
+import NotificationsFactory from "../../common/data-managers/notifications-factory";
+import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
+import { useUpdateUserMutation } from "../../store/apiSlice";
+
+const Account = () => {
+
+    const [isEditModalOpened, setIsEditModalOpened] = useState(false);
+    const [updateUser] = useUpdateUserMutation();
+
+    const buttonStyle = {
+      marginLeft: '10px',
+    }
+  
+    const iconStyle = {
+      height: '30px',
+      width: '30px'
+    }
+
+    const handleEdit = async (data) => {
+        if(data){
+            try {
+                await updateUser(data);
+            } catch (err) {
+                if(err.data){
+                    notificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR(err.data.message));
+                } else {
+                    console.log('Error', err);
+                }
+            }
+        }
+        setIsEditModalOpened(false);
+    }
+
+    return (
+        <div>
+          <h1>Account
+            <span className='icon-button'>
+              <IconButton
+                childKey={0}
+                tooltip='Edit Account'
+                onClick={() => setIsEditModalOpened(true)}
+                icon='edit'
+                buttonStyle={buttonStyle}
+                iconStyle={iconStyle}
+              />
+            </span>
+          </h1>
+  
+          {currentUser ?
+            <>
+              <Form>
+                <Form.Group as={Row} controlId="username">
+                  <Form.Label column sm={2}>Username</Form.Label>
+                  <Col sm={10}>
+                    <Form.Control plaintext readOnly value={currentUser.username} />
+                  </Col>
+                </Form.Group>
+                <Form.Group as={Row} controlId="mail">
+                  <Form.Label column sm={2}>E-mail</Form.Label>
+                  <Col sm={10}>
+                    <Form.Control plaintext readOnly value={currentUser.mail} type="email" />
+                  </Col>
+                </Form.Group>
+                <Form.Group as={Row} controlId="role">
+                  <Form.Label column sm={2}>Role</Form.Label>
+                  <Col sm={10}>
+                    <Form.Control plaintext readOnly value={currentUser.role} />
+                  </Col>
+                </Form.Group>
+                <Form.Group as={Row} controlId="formBasicEmail">
+                  <Form.Label column sm={2}>Created at</Form.Label>
+                  <Col sm={10}>
+                    <Form.Control plaintext readOnly value={currentUser.createdAt} />
+                  </Col>
+                </Form.Group>
+  
+              </Form>
+  
+              <EditOwnUserDialog
+                show={isEditModalOpened}
+                onClose={(data) => handleEdit(data)}
+                user={currentUser}
+              />
+            </>
+            : <div/>
+          }
+        </div>
+      );
+}
+
+export default Account;
diff --git a/src/pages/account/edit-own-user.js b/src/pages/account/edit-own-user.js
new file mode 100644
index 0000000..fd9351c
--- /dev/null
+++ b/src/pages/account/edit-own-user.js
@@ -0,0 +1,113 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { Form, Col } from 'react-bootstrap';
+import Dialog from '../../common/dialogs/dialog';
+import NotificationsDataManager from "../../common/data-managers/notifications-data-manager";
+import NotificationsFactory from "../../common/data-managers/notifications-factory";
+
+
+class EditOwnUserDialog extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: "",
+      mail: this.props.user.mail,
+      password: '',
+      oldPassword: '',
+      confirmPassword: ''
+    }
+  }
+
+  onClose(canceled) {
+    if (canceled === false) {
+
+      let user = {};
+      user.id = this.props.user.id;
+      user.password = this.state.password;
+      user.oldPassword = this.state.oldPassword;
+      user.confirmPassword = this.state.confirmPassword
+
+      if (this.state.username != null && this.state.username !== this.props.user.username){
+        user.username = this.state.username;
+      }
+
+      if (this.state.mail != null && this.state.mail !== this.props.user.mail){
+        user.mail = this.state.mail;
+      }
+
+      if (this.state.password !== '' && this.state.oldPassword !== '' && this.state.password === this.state.confirmPassword ) {
+        user.password = this.state.password;
+        user.oldPassword = this.state.oldPassword;
+      } else if (this.state.password !== '' && this.state.password !== this.state.confirmPassword) {
+        NotificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR('New password not correctly confirmed'));
+      }
+
+      this.props.onClose(user);
+    } else {
+      this.props.onClose();
+    }
+  }
+
+  handleChange(e) {
+    this.setState({ [e.target.id]: e.target.value });
+  }
+
+  resetState() {
+    this.setState({
+      username: this.props.user.username,
+      mail: this.props.user.mail,
+      oldPassword: '',
+      confirmPassword: '',
+      password: '',
+    });
+  }
+
+  render() {
+    return (
+      <Dialog show={this.props.show} title="Edit user" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={true}>
+        <Form>
+          <Form.Group as={Col} controlId="username" style={{marginBottom: '15px'}}>
+            <Form.Label>Username</Form.Label>
+            <Form.Control type="text" placeholder={this.props.user.username} value={this.state.username} onChange={(e) => this.handleChange(e)} autoComplete="username" />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group as={Col} controlId="mail" style={{marginBottom: '15px'}}>
+            <Form.Label>E-mail</Form.Label>
+            <Form.Control type="text" placeholder={this.props.user.mail} value={this.state.mail} onChange={(e) => this.handleChange(e)} autoComplete="email" />
+          </Form.Group>
+          <Form.Group  as={Col} controlId="oldPassword" style={{marginBottom: '15px'}}>
+            <Form.Label>Old Password</Form.Label>
+            <Form.Control type="password" placeholder="Enter current password" value={this.state.oldPassword} onChange={(e) => this.handleChange(e)} autoComplete="current-password" />
+          </Form.Group>
+          <Form.Group as={Col} controlId="password" style={{marginBottom: '15px'}}>
+            <Form.Label>New Password</Form.Label>
+            <Form.Control type="password" placeholder="Enter new password" value={this.state.password} onChange={(e) => this.handleChange(e)} autoComplete="new-password" />
+          </Form.Group>
+          <Form.Group as={Col} controlId="confirmPassword">
+            <Form.Label>Confirm New Password</Form.Label>
+            <Form.Control type="password" placeholder="Repeat new password" value={this.state.confirmPassword} onChange={(e) => this.handleChange(e)} autoComplete="new-password" />
+          </Form.Group>
+        </Form>
+      </Dialog>
+    );
+  }
+}
+
+export default EditOwnUserDialog;