diff --git a/components/forms/UserPasswordForm.js b/components/forms/UserPasswordForm.js
index 83eaaa81..ff474608 100644
--- a/components/forms/UserPasswordForm.js
+++ b/components/forms/UserPasswordForm.js
@@ -1,16 +1,15 @@
 import { useRef } from 'react';
 import { Form, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
 import useApi from 'hooks/useApi';
-import { useMutation } from '@tanstack/react-query';
 import styles from './UserPasswordForm.module.css';
 import useUser from 'hooks/useUser';
 
-export default function UserPasswordForm({ onSave, userId }) {
+export default function UserPasswordForm({ onSave, onClose, userId }) {
   const user = useUser();
 
   const isCurrentUser = !userId || user?.id === userId;
   const url = isCurrentUser ? `/users/${user?.id}/password` : `/users/${user?.id}`;
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post(url, data));
   const ref = useRef(null);
 
@@ -65,9 +64,10 @@ export default function UserPasswordForm({ onSave, userId }) {
         <PasswordField autoComplete="off" />
       </FormInput>
       <FormButtons flex>
-        <Button type="submit" disabled={isLoading}>
+        <Button type="submit" variant="primary" disabled={isLoading}>
           Save
         </Button>
+        <Button onClick={onClose}>Close</Button>
       </FormButtons>
     </Form>
   );
diff --git a/components/pages/Dashboard.js b/components/pages/Dashboard.js
index e1c948af..c979c130 100644
--- a/components/pages/Dashboard.js
+++ b/components/pages/Dashboard.js
@@ -1,9 +1,9 @@
 import { useState } from 'react';
+import { Button, Loading } from 'react-basics';
 import { defineMessages, useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import WebsiteList from 'components/pages/WebsiteList';
-import { Button, Loading } from 'react-basics';
+import WebsiteChartList from 'components/pages/WebsiteChartList';
 import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
 import useApi from 'hooks/useApi';
 import useDashboard from 'store/dashboard';
@@ -42,7 +42,7 @@ export default function Dashboard({ userId }) {
         {!editing && <DashboardSettingsButton />}
       </PageHeader>
       {editing && <DashboardEdit websites={data} />}
-      {!editing && <WebsiteList websites={data} showCharts={showCharts} limit={max} />}
+      {!editing && <WebsiteChartList websites={data} showCharts={showCharts} limit={max} />}
       {max < data.length && (
         <Button className={styles.button} onClick={handleMore}>
           {formatMessage(messages.more)}
diff --git a/components/pages/ProfileSettings.js b/components/pages/ProfileSettings.js
index ab6dbb8a..44b93f05 100644
--- a/components/pages/ProfileSettings.js
+++ b/components/pages/ProfileSettings.js
@@ -2,15 +2,26 @@ import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import ProfileDetails from 'components/settings/ProfileDetails';
 import { useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
+import { Breadcrumbs, Icon, Item, Tabs, useToast, Modal, Button } from 'react-basics';
 import UserPasswordForm from 'components/forms/UserPasswordForm';
+import Pen from 'assets/pen.svg';
 
 export default function ProfileSettings() {
+  const [edit, setEdit] = useState(false);
   const [tab, setTab] = useState('general');
   const { toast, showToast } = useToast();
 
   const handleSave = () => {
     showToast({ message: 'Saved successfully.', variant: 'success' });
+    setEdit(false);
+  };
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleClose = () => {
+    setEdit(false);
   };
 
   return (
@@ -20,13 +31,22 @@ export default function ProfileSettings() {
         <Breadcrumbs>
           <Item>Profile</Item>
         </Breadcrumbs>
+        <Button onClick={handleAdd}>
+          <Icon>
+            <Pen />
+          </Icon>
+          Change Password
+        </Button>
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
         <Item key="general">General</Item>
-        <Item key="password">Password</Item>
       </Tabs>
       {tab === 'general' && <ProfileDetails />}
-      {tab === 'password' && <UserPasswordForm onSave={handleSave} />}
+      {edit && (
+        <Modal title="Add website" onClose={handleClose}>
+          {close => <UserPasswordForm onSave={handleSave} onClose={close} />}
+        </Modal>
+      )}
     </Page>
   );
 }
diff --git a/components/pages/UserSettings.js b/components/pages/UserSettings.js
index 52f2d9d8..32edcb48 100644
--- a/components/pages/UserSettings.js
+++ b/components/pages/UserSettings.js
@@ -8,9 +8,11 @@ import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
+import { Breadcrumbs, Item, Icon, Tabs, useToast, Modal, Button } from 'react-basics';
+import Pen from 'assets/pen.svg';
 
 export default function UserSettings({ userId }) {
+  const [edit, setEdit] = useState(false);
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('general');
   const { get } = useApi();
@@ -31,6 +33,18 @@ export default function UserSettings({ userId }) {
     if (data) {
       setValues(state => ({ ...state, ...data }));
     }
+
+    if (edit) {
+      setEdit(false);
+    }
+  };
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleClose = () => {
+    setEdit(false);
   };
 
   const handleDelete = async () => {
@@ -54,15 +68,26 @@ export default function UserSettings({ userId }) {
           </Item>
           <Item>{values?.username}</Item>
         </Breadcrumbs>
+        <Button onClick={handleAdd}>
+          <Icon>
+            <Pen />
+          </Icon>
+          Change Password
+        </Button>
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
         <Item key="general">General</Item>
-        <Item key="password">Password</Item>
         <Item key="delete">Danger Zone</Item>
       </Tabs>
       {tab === 'general' && <UserEditForm userId={userId} data={values} onSave={handleSave} />}
-      {tab === 'password' && <UserPasswordForm userId={userId} data={values} onSave={handleSave} />}
       {tab === 'delete' && <UserDelete userId={userId} onSave={handleDelete} />}
+      {edit && (
+        <Modal title="Add website" onClose={handleClose}>
+          {close => (
+            <UserPasswordForm userId={userId} data={values} onSave={handleSave} onClose={close} />
+          )}
+        </Modal>
+      )}
     </Page>
   );
 }
diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteChartList.js
similarity index 100%
rename from components/pages/WebsiteList.js
rename to components/pages/WebsiteChartList.js
diff --git a/components/settings/ProfileDetails.js b/components/settings/ProfileDetails.js
index bc6b5c0b..c0aaf0e6 100644
--- a/components/settings/ProfileDetails.js
+++ b/components/settings/ProfileDetails.js
@@ -4,7 +4,7 @@ import useUser from 'hooks/useUser';
 import { FormattedMessage } from 'react-intl';
 import DateRangeSetting from './DateRangeSetting';
 import LanguageSetting from './LanguageSetting';
-import styles from './ProfileSettings.module.css';
+import styles from './ProfileDetails.module.css';
 import ThemeSetting from './ThemeSetting';
 
 export default function ProfileDetails() {
diff --git a/components/settings/ProfileSettings.module.css b/components/settings/ProfileDetails.module.css
similarity index 100%
rename from components/settings/ProfileSettings.module.css
rename to components/settings/ProfileDetails.module.css