diff --git a/label_studio/users/templates/users/user_account.html b/label_studio/users/templates/users/user_account.html
index c20eca96f139..e533221d6ddb 100644
--- a/label_studio/users/templates/users/user_account.html
+++ b/label_studio/users/templates/users/user_account.html
@@ -1,374 +1,2 @@
 {% extends 'base.html' %}
 {% load static %}
-
-{% block head %}
-<link rel="stylesheet" href="{{ settings.HOSTNAME }}{% static 'css/uikit.css' %}">
-<link rel="stylesheet" href="{{ settings.HOSTNAME }}{% static 'css/users.css' %}">
-{% endblock %}
-
-{% block divider %}
-{% endblock %}
-
-{% block frontend_settings %}
-  {
-    breadcrumbs: [
-      {
-        title: "Account & Settings"
-      }
-    ],
-  }
-{% endblock %}
-
-{% block content %}
-<script>
-  // Take closest form (or form by id) and submit it,
-  // optional: prevent page refresh if done passed as function
-  function smart_submit(done, form_id) {
-    // use form id or take closest form to the event target
-    var f = typeof form_id === 'string' ? $(form_id) : $(event.target).closest('form');
-    console.log('smart_submit found form to use', f);
-
-    if (typeof f === 'undefined') {
-      console.log('smart_submit event target', event.target);
-      alert("Closest form not found for smart_submit")
-    }
-    console.log('YYYYYYY' +  $(f).serialize());
-    var params = {
-      url: $(f).attr('action'),
-      type: $(f).attr('method'),
-      data: $(f).serialize(),
-
-      error: function (result, textStatus, errorThrown) {
-        console.log('smart_submit ajax error', result);
-
-        // call done function if it's defined and ignore all the rest
-        if (typeof done === "function") {
-          done(result)
-        }
-        // default error handle
-        else {
-          if (typeof result.responseText !== 'undefined') {
-            alert("Error: " + message_from_response(result));
-          } else {
-            alert("Request error: " + errorThrown);
-          }
-          window.location.reload();
-        }
-      },
-
-      success: function (data, textStatus, result) {
-        // call done function if it's defined and ignore all the rest
-        if (typeof done === "function") {
-          done(result)
-        }
-        // default success handle
-        else {
-          window.location.reload();
-        }
-      }
-    };
-
-    console.log('smart_submit ajax params', params);
-    $.ajax(params);
-    event.preventDefault();
-    return false;
-  }
-
-  function message_from_response(result) {
-    console.log(result);
-
-    // result is dict
-    if (result.hasOwnProperty('detail') && result.detail)
-      return result.detail;
-
-    // result is object from XHR, check responseText first, it is always presented
-    if (!result.responseText)
-      return 'Critical error on server';
-
-    // grab responseJSON detail
-    else if (result.responseJSON && result.responseJSON.hasOwnProperty('detail'))
-      return result.responseJSON['detail'];
-
-    // something strange inside of responseJSON
-    else if (result.responseJSON)
-      return JSON.stringify(result.responseJSON);
-
-    else
-      return JSON.stringify(result)
-  }
-</script>
-
-<div class="full_content">
-  <div class="account-page">
-    <form action="{% url 'user-detail' pk=user.pk %}" method="patch" class="user__info">
-      <input type="hidden" name="_method" value="patch"/>
-
-      <header>Account info</header>
-      <ul>
-        <li class="field">
-          <label for="">E-mail</label>
-          <input type="text" class="lsf-input-ls" value="{{user.email}}" disabled />
-        </li>
-        <li class="field">
-          <label for="">First Name</label>
-          <input type="text" class="lsf-input-ls" name="first_name" value="{{user.first_name}}" />
-        </li>
-        <li class="field">
-          <label for="">Last Name</label>
-          <input type="text" class="lsf-input-ls" name="last_name" value="{{user.last_name}}" />
-        </li>
-        <li class="field">
-          <label for="">Phone</label>
-          <input type="text" class="lsf-input-ls" name="phone" value="{{user.phone}}" />
-          <!-- <span>We'll send you sms with code if you change your number</span>
-          <span class="error">Incorrect phone number!</span> -->
-        </li>
-      </ul>
-      <div class="user-some-actions">
-
-        <div class="user-pic {{ user.avatar|yesno:'can_delete,can_upload' }}">
-          <div class="userpic userpic--big">
-            {% if user.avatar %}
-              <img src="{{user.avatar_url}}" alt="User photo" width="92" />
-            {% endif %}
-
-            {% if user.get_initials %}
-              <span>{{user.get_initials}}</span>
-            {% else %}
-              <span>{{user.username}}</span>
-            {% endif %}
-          </div>
-
-          <button class="lsf-button-ls lsf-button-ls_look_danger" name="delete-avatar" type="button">
-            Delete
-          </button>
-
-          <input class="file-input" type="file" name="avatar" value="Choose"
-                accept="image/png, image/jpeg, image/jpg"/>
-        </div>
-
-        <!-- <div class="user-activity">
-          <p>Inspect all your actions<br/>performed on the platform</p>
-          <button type="button">Activity Log<img src="" /></button>
-        </div> -->
-      </div>
-      <footer>
-        <p class="secondary">Registered {{ user.date_joined|date:"M j, Y" }}, user ID {{ user.id }}</p>
-        <button class="lsf-button-ls lsf-button-ls_look_primary" onclick="smart_submit()">Save</button>
-      </footer>
-    </form>
-
-    <!-- Token -->
-    <form action="" class="access_token__info">
-      <header>Access Token</header>
-      <div class="field field--wide">
-        <label for="access_token">Use this token to authenticate with our API:</label>
-        <input id="access_token" class="lsf-input-ls" name="access_token" type="text" value="{{token}}" readonly />
-        <p class="actions">
-          <button type="button" class="blinking-status lsf-button-ls" data-copy="access_token">Copy</button>
-          <button type="button" class="blinking-status lsf-button-ls" name="renew">Renew</button>
-        </p>
-      </div>
-      <!-- Example -->
-      <div class="field field--wide">
-        <label for="example_fetch">Example fetch projects data:</label>
-        <textarea id="example_fetch" class="example_code ls-textarea" type="text" readonly
-                  style="height: 92px; font-size: 14px">
-          {% if settings.HOSTNAME %}
-            curl -X GET {{ settings.HOSTNAME }}/api/projects/ -H 'Authorization: Token {{token}}'
-          {% else %}
-          curl -X GET {{ request.scheme }}://{{ request.get_host }}/api/projects/ -H 'Authorization: Token {{token}}'
-          {% endif %}
-        </textarea>
-        <p class="actions">
-          <button type="button" class="blinking-status lsf-button-ls" data-copy="example_fetch">Copy</button>
-
-          {% block api_docs %}
-          <a
-            class="lsf-button-ls"
-            href="https://labelstud.io/guide/api.html"
-            target="_blank"
-          >
-            Documentation
-          </a>
-          {% endblock %}
-        </p>
-      </div>
-    </form>
-
-
-    <!-- Organization -->
-    <form action="" class="organization block-info" id="organization">
-      <header>
-        {{ user.active_organization.title }}
-        <br>
-        <sub>Your active organization</sub>
-      </header>
-
-      <table>
-        {% with user.get_pretty_role as role %}
-          {% if role %}
-            <tr><td>Your role</td><td>{{ user.get_pretty_role }}</td></tr>
-          {% endif %}
-        {% endwith %}
-        <tr><td>Annotations completed by you</td><td>{{ user.active_organization_annotations.count }}</td></tr>
-        <tr><td>Projects contributed by you</td><td>{{ user.active_organization_contributed_project_number }}</td></tr>
-        <tr><td></td><td></td></tr>
-        <tr><td style="min-width: 75px">Organization ID</td><td>{{ user.active_organization.id }}</td></tr>
-        <tr><td>Organization owner</td><td>{{ user.active_organization.created_by }}</td></tr>
-        <tr><td>Organization created at</td><td>{{ user.active_organization.created_at }}</td></tr>
-      </table>
-
-    </form>
-
-    <!-- Notifications -->
-    {% block notifications %}
-    <form action="{% url 'user-detail' pk=user.pk %}?update-notifications=1" method="patch" class="notifications block-info" id="notifications">
-      <header>
-        Notifications
-        <br>
-        <sub>Email and other notifications</sub>
-      </header>
-
-      <table>
-        <tr><td style="{% if user.allow_newsletters is None %}border: 1px red solid; border-radius: 5px{% endif %}">
-
-          <input name="allow_newsletters" type="hidden"
-                 value="{% if user.allow_newsletters is None %}true{% else %}{{ user.allow_newsletters|yesno:"false,true" }}{% endif %}">
-
-          <input name="allow_newsletters_visual" id="allow_newsletters_visual" type="checkbox"
-                 style="width: auto;"
-                 {% if user.allow_newsletters %}checked="true"{% endif %}
-                 onclick="smart_submit()">
-
-          <label for="allow_newsletters_visual" style="display: inline-block; cursor: pointer; margin-top: -10px">
-            Get the latest news & tips from Heidi
-            <img src="{{ settings.HOSTNAME }}{% static 'images/heidi.png' %}" alt="Heidi"
-                 width="25" style="display: inline; margin: 0; position: relative; top: 5px; left: 0">
-          </label>
-
-        </td></tr>
-      </table>
-
-    </form>
-    {% endblock %}
-
-
-  </div>
-
-  <script>
-    (() => {
-      {% if settings.HOSTNAME %}
-      const hostname = '{{ settings.HOSTNAME }}';
-      {% else %}
-      const hostname = '{{ request.scheme }}://{{ request.get_host }}';
-      {% endif %}
-
-      document.querySelectorAll('[data-copy]').forEach(button => {
-        button.onclick = e => {
-          const input = document.getElementById(e.target.dataset.copy);
-          input.select();
-          document.execCommand("copy");
-          input.setSelectionRange(0, 0);
-          input.blur();
-          button.classList.add('blink');
-          setTimeout(() => button.classList.remove('blink'))
-        }
-      });
-
-      document.querySelector('[name=renew]').onclick = e => {
-        const button = e.target;
-        const input = document.getElementById("access_token");
-        const example = document.getElementById("example_fetch");
-
-        fetch("{% url 'current-user-reset-token' %}", { method: "POST" })
-          .then(res => res.json())
-          .then(res => {
-            input.value = res.token;
-            example.value = `curl -X GET ${hostname}/api/projects/ -H 'Authorization: Token ${res.token}'`
-            button.classList.add('blink');
-            setTimeout(() => button.classList.remove('blink'))
-          });
-      };
-
-      $('[name=avatar]').on('change', async (e) => {
-        const formData = new FormData;
-
-        formData.append(e.target.name, e.target.files[0]);
-
-        try {
-          const response = await fetch("{% url 'user-avatar' pk=user.pk %}", {
-            method: "post",
-            body: formData
-          });
-
-          if (!response.ok) {
-            handleResponseError(response)
-          } else {
-            updateAvatar(true)
-          }
-        } catch (err) {
-          console.error(err)
-        }
-      });
-
-      $('[name=delete-avatar]').on('click', async (e) => {
-        try {
-          const response = await fetch("{% url 'user-avatar' pk=user.pk %}", {
-            method: "delete"
-          })
-
-          if (!response.ok) {
-            handleResponseError(response)
-          } else {
-            updateAvatar(false)
-          }
-        } catch (err) {
-          console.err(err)
-        }
-      })
-
-      /**
-        * @param {Response} response
-        */
-      const handleResponseError = (response) => {
-        response.json().then(data => {
-          alert(message_from_response(data));
-        })
-      }
-
-      const updateAvatar = async (setAvatar = true) => {
-        if (setAvatar) {
-          const response = await fetch("{% url 'current-user-whoami' %}")
-
-          if (response.ok) {
-            const {avatar} = await response.json()
-            const userpic = document.querySelector('.userpic')
-
-            let userpicImage = userpic.querySelector('img')
-
-            if (!userpicImage) {
-              userpicImage = document.createElement('img')
-              userpic.insertBefore(userpicImage, userpic.firstChild);
-            }
-
-            userpicImage.src = avatar
-
-            const userpicRoot = document.querySelector('.user-pic');
-            userpicRoot.classList.remove('can_delete', 'can_upload')
-            userpicRoot.classList.add('can_delete')
-          }
-        } else {
-          const userpic = document.querySelector('.user-pic')
-          const userpicImage = userpic.querySelector('img')
-          if (userpicImage) userpicImage.remove();
-
-          userpic.classList.remove('can_delete', 'can_upload')
-          userpic.classList.add('can_upload')
-        }
-      }
-    })();
-  </script>
-</div>
-
-{% endblock %}
diff --git a/web/apps/labelstudio/src/app/App.jsx b/web/apps/labelstudio/src/app/App.jsx
index c5581b515447..89823367aca6 100644
--- a/web/apps/labelstudio/src/app/App.jsx
+++ b/web/apps/labelstudio/src/app/App.jsx
@@ -18,6 +18,7 @@ import ErrorBoundary from "./ErrorBoundary";
 import { RootPage } from "./RootPage";
 import { FF_OPTIC_2, FF_UNSAVED_CHANGES, isFF } from "../utils/feature-flags";
 import { ToastProvider, ToastViewport } from "@humansignal/ui";
+import { CurrentUserProvider } from "../providers/CurrentUser";
 
 const baseURL = new URL(APP_SETTINGS.hostname || location.origin);
 export const UNBLOCK_HISTORY_MESSAGE = "UNBLOCK_HISTORY";
@@ -61,6 +62,7 @@ const App = ({ content }) => {
             <RoutesProvider key="rotes" />,
             <ProjectProvider key="project" />,
             <ToastProvider key="toast" />,
+            <CurrentUserProvider key="current-user" />,
           ]}
         >
           <AsyncPage>
diff --git a/web/apps/labelstudio/src/assets/icons/index.js b/web/apps/labelstudio/src/assets/icons/index.js
index b8755e330d33..762572f0f0e2 100644
--- a/web/apps/labelstudio/src/assets/icons/index.js
+++ b/web/apps/labelstudio/src/assets/icons/index.js
@@ -29,5 +29,6 @@ export { ReactComponent as IconSparkGrey } from "./spark-grey.svg";
 export { ReactComponent as IconPredictions } from "./predictions.svg";
 export { ReactComponent as IconEmptyPredictions } from "./empty-predictions.svg";
 export { ReactComponent as IconSpark } from "./spark.svg";
+export { ReactComponent as IconLaunch } from "./launch.svg";
 export { ReactComponent as IconModel } from "./model.svg";
 export { ReactComponent as IconModels } from "./models.svg";
diff --git a/web/apps/labelstudio/src/assets/icons/launch.svg b/web/apps/labelstudio/src/assets/icons/launch.svg
new file mode 100644
index 000000000000..c48173687ac9
--- /dev/null
+++ b/web/apps/labelstudio/src/assets/icons/launch.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 19H5V5H12V3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V12H19V19ZM14 3V5H17.59L7.76 14.83L9.17 16.24L19 6.41V10H21V3H14Z" fill="currentColor"/>
+</svg>
diff --git a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx
index 7f13680a47fe..955dc58849a8 100644
--- a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx
+++ b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx
@@ -27,6 +27,7 @@ import "./MenuContent.scss";
 import "./MenuSidebar.scss";
 import { ModelsPage } from "../../pages/Organization/Models/ModelsPage";
 import { FF_DIA_835, isFF } from "../../utils/feature-flags";
+import { AccountSettingsPage } from "../../pages/AccountSettings/AccountSettings";
 
 export const MenubarContext = createContext();
 
@@ -148,13 +149,13 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
             align="right"
             content={
               <Menu>
-                <Menu.Item icon={<LsSettings />} label="Account &amp; Settings" href="/user/account" data-external />
+                <Menu.Item icon={<LsSettings />} label="Account &amp; Settings" href={AccountSettingsPage.path} />
                 {/* <Menu.Item label="Dark Mode"/> */}
                 <Menu.Item icon={<LsDoor />} label="Log Out" href={absoluteURL("/logout")} data-external />
                 {showNewsletterDot && (
                   <>
                     <Menu.Divider />
-                    <Menu.Item className={cn("newsletter-menu-item")} href="/user/account" data-external>
+                    <Menu.Item className={cn("newsletter-menu-item")} href={AccountSettingsPage.path}>
                       <span>Please check new notification settings in the Account & Settings page</span>
                       <span className={cn("newsletter-menu-badge")} />
                     </Menu.Item>
diff --git a/web/apps/labelstudio/src/pages/AccountSettings/AccountSettings.scss b/web/apps/labelstudio/src/pages/AccountSettings/AccountSettings.scss
new file mode 100644
index 000000000000..1697c3ec4174
--- /dev/null
+++ b/web/apps/labelstudio/src/pages/AccountSettings/AccountSettings.scss
@@ -0,0 +1,11 @@
+.datamanager {
+  height: calc(100vh - var(--header-height));
+
+  #label-studio-dm [class*="Annotations_annotation_selected"] {
+    background: var(--grape_0);
+  }
+}
+
+.datamanager * {
+  font-family: var(--font-sans) !important;
+}
diff --git a/web/apps/labelstudio/src/pages/AccountSettings/AccountSettings.tsx b/web/apps/labelstudio/src/pages/AccountSettings/AccountSettings.tsx
new file mode 100644
index 000000000000..bc59800e0d86
--- /dev/null
+++ b/web/apps/labelstudio/src/pages/AccountSettings/AccountSettings.tsx
@@ -0,0 +1,49 @@
+import React, { useMemo, useState } from "react";
+import { Redirect } from "react-router-dom";
+import { useAPI } from "../../providers/ApiProvider";
+import { SidebarMenu } from "../../components/SidebarMenu/SidebarMenu";
+import "./AccountSettings.scss";
+import { useCurrentUser } from "../../providers/CurrentUser";
+import { accountSettingsSections } from "./sections";
+
+export const AccountSettingsPage = () => {
+  const api = useAPI();
+  const { user } = useCurrentUser();
+  // const abortController = useAbortController();
+
+  console.log("user", api, user, accountSettingsSections);
+
+  return (
+    <div className="account-settings">
+      
+      {accountSettingsSections?.map(({component: Section, id}: any) => (
+        <Section key={id} />
+      ))}
+    </div>
+  );
+};
+
+
+const MenuLayout = ({ children, ...routeProps }: { children: any, routeProps: any}) => {
+  const menuItems = useMemo(() => accountSettingsSections.map(({title, id}) => ({title, path: `#${id}`})), [accountSettingsSections]);
+
+  return <SidebarMenu menuItems={menuItems} path={routeProps.match.url} children={children} />;
+};
+
+AccountSettingsPage.title = "My Account";
+AccountSettingsPage.path = "/user/account";
+AccountSettingsPage.exact = true;
+AccountSettingsPage.routes = () => [
+  {
+    title: () => 'My Account',
+    exact: true,
+    component: () => {
+      return <Redirect to={AccountSettingsPage.path} />;
+    },
+    layout: MenuLayout,
+    // pages: {
+    //   DataManagerPage,
+    //   SettingsPage,
+    // },
+  },
+];
diff --git a/web/apps/labelstudio/src/pages/AccountSettings/sections/EmailPreferences.jsx b/web/apps/labelstudio/src/pages/AccountSettings/sections/EmailPreferences.jsx
new file mode 100644
index 000000000000..8c6d5c6c59a3
--- /dev/null
+++ b/web/apps/labelstudio/src/pages/AccountSettings/sections/EmailPreferences.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Checkbox } from "@humansignal/ui";
+
+export const EmailPreferences = () => {
+  return (
+    <>
+      <a id="email-preferences" />
+      <div className="">
+        <h2>Email Preferences</h2>
+        <Checkbox label="Subscribe to HumanSignal news and tips from Heidi" />
+      </div>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/web/apps/labelstudio/src/pages/AccountSettings/sections/MembershipInfo.jsx b/web/apps/labelstudio/src/pages/AccountSettings/sections/MembershipInfo.jsx
new file mode 100644
index 000000000000..d73e071e4edf
--- /dev/null
+++ b/web/apps/labelstudio/src/pages/AccountSettings/sections/MembershipInfo.jsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { Divider } from "../../../components/Divider/Divider";
+export const MembershipInfo = () => {
+  return (
+    <>
+      <a id="membership-info" />
+      <div className="">
+        <h2>Membership Info</h2>
+        <div className="">
+          <div>User ID</div>
+          <div></div>
+        </div>
+
+        <div className="">
+          <div>Registration date</div>
+          <div></div>
+        </div>
+
+        <div className="">
+          <div>Annotations submitted</div>
+          <div></div>
+        </div>
+
+        <div className="">
+          <div>Projects contributed to</div>
+          <div></div>
+        </div>
+
+        <Divider height="1px"/>
+        <div className="">
+          <div>Organization</div>
+          <div></div>
+        </div>
+
+        <div className="">
+          <div>My role</div>
+          <div></div>
+        </div>
+
+        <div className="">
+          <div>Organization ID</div>
+          <div></div>
+        </div>
+
+        <div className="">
+          <div>Owner</div>
+          <div></div>
+        </div>
+
+        <div className="">
+          <div>Created</div>
+          <div></div>
+        </div>
+      </div>
+    </>
+  )
+};
\ No newline at end of file
diff --git a/web/apps/labelstudio/src/pages/AccountSettings/sections/PersonalAccessToken.jsx b/web/apps/labelstudio/src/pages/AccountSettings/sections/PersonalAccessToken.jsx
new file mode 100644
index 000000000000..d329d11f187e
--- /dev/null
+++ b/web/apps/labelstudio/src/pages/AccountSettings/sections/PersonalAccessToken.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Input, TextArea } from '../../../components/Form';
+import { Button } from '../../../components/Button/Button';
+import { IconLaunch } from 'apps/labelstudio/src/assets/icons';
+
+export const PersonalAccessToken = () => {
+  return (
+    <>
+      
+      <a id="personal-access-token" />
+      <div className="">
+        <h2>Personal Access Token</h2>
+        <p>Authenticate with our API using your personal access token.
+          {!APP_SETTINGS?.whitelabel_is_active && (
+            <>See <a href='https://labelstud.io/guide/api.html' target="_blank">Docs <IconLaunch /></a></>
+          )}
+        </p> 
+        <div className="">
+          <Input label="Access Token" name="token" />
+          <Button look="primary" size="compact">Generate</Button>
+        </div>
+        <div className="">
+          <TextArea label="Example CURL Request" name="example-curl" readOnly />
+        </div>
+      </div>
+      
+    </>
+  );
+};
\ No newline at end of file
diff --git a/web/apps/labelstudio/src/pages/AccountSettings/sections/PersonalInfo.jsx b/web/apps/labelstudio/src/pages/AccountSettings/sections/PersonalInfo.jsx
new file mode 100644
index 000000000000..278db1e1f5e6
--- /dev/null
+++ b/web/apps/labelstudio/src/pages/AccountSettings/sections/PersonalInfo.jsx
@@ -0,0 +1,28 @@
+import { Button } from "apps/labelstudio/src/components";
+import { Input } from "apps/labelstudio/src/components/Form/Elements";
+import { Userpic } from "apps/labelstudio/src/components/Userpic/Userpic";
+import React from "react";
+
+export const PersonalInfo = () => {
+  return (
+    <div className="">
+      <a id="personal-info" />
+      <h2>Personal Info</h2>
+      <div className="">
+        <Userpic />
+        <Input className="file-input" type="file" name="avatar" accept="image/png, image/jpeg, image/jpg"/>
+      </div>
+      <div className="">
+        <Input label="First Name" name="fname" />
+        <Input label="Last Name" name="lname"/>
+      </div>
+      <div className="">
+        <Input label="E-mail" name="email" type="email" />
+        <Input label="Phone" name="phone" type="phone"/>
+      </div>
+      <div className="">
+        <Button look="primary" size="compact">Save</Button>
+      </div>
+    </div>
+  )
+};
\ No newline at end of file
diff --git a/web/apps/labelstudio/src/pages/AccountSettings/sections/index.jsx b/web/apps/labelstudio/src/pages/AccountSettings/sections/index.jsx
new file mode 100644
index 000000000000..14a90f92ce63
--- /dev/null
+++ b/web/apps/labelstudio/src/pages/AccountSettings/sections/index.jsx
@@ -0,0 +1,32 @@
+import { PersonalInfo } from "./PersonalInfo";
+import { EmailPreferences } from "./EmailPreferences";
+import React from "react";
+import { PersonalAccessToken } from "./PersonalAccessToken";
+import { MembershipInfo } from "./MembershipInfo";
+// type SectionType = {
+//   title: string;
+//   id: string;
+//   component: React.ReactNode;
+// }
+export const accountSettingsSections = [
+  {
+    title: "Personal Info",
+    id: "personal-info",
+    component: PersonalInfo,
+  },
+  {
+    title: "Email Preferences",
+    id: "email-preferences",
+    component: EmailPreferences,
+  },
+  {
+    title: "Personal Access Token",
+    id: "personal-access-token",
+    component: PersonalAccessToken,
+  },
+  {
+    title: "Membership Info",
+    id: "membership-info",
+    component: MembershipInfo,
+  }
+]
\ No newline at end of file
diff --git a/web/apps/labelstudio/src/pages/index.js b/web/apps/labelstudio/src/pages/index.js
index 0c35f0e157f7..8d48cc1ddace 100644
--- a/web/apps/labelstudio/src/pages/index.js
+++ b/web/apps/labelstudio/src/pages/index.js
@@ -1,5 +1,6 @@
 import { ProjectsPage } from "./Projects/Projects";
 import { OrganizationPage } from "./Organization";
 import { ModelsPage } from "./Organization/Models/ModelsPage";
+import { AccountSettingsPage } from "./AccountSettings/AccountSettings";
 
-export const Pages = [ProjectsPage, OrganizationPage, ModelsPage];
+export const Pages = [ProjectsPage, OrganizationPage, ModelsPage, AccountSettingsPage];
diff --git a/web/apps/labelstudio/src/providers/CurrentUser.d.ts b/web/apps/labelstudio/src/providers/CurrentUser.d.ts
index 60ba7025a625..dccb23e3278a 100644
--- a/web/apps/labelstudio/src/providers/CurrentUser.d.ts
+++ b/web/apps/labelstudio/src/providers/CurrentUser.d.ts
@@ -2,4 +2,5 @@ import type { APIFullUser } from "../../types/User";
 
 declare const useCurrentUser: () => {
   user: APIFullUser;
+  fetch: () => Promise<void>;
 };