diff --git a/scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js b/scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js
new file mode 100644
index 0000000000..b577955a34
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js
@@ -0,0 +1,51 @@
+//@flow
+import * as React from "react";
+import {Link, Route} from "react-router-dom";
+
+type Props = {
+  to: string,
+  label: string,
+  activeOnlyWhenExact?: boolean,
+  activeWhenMatch?: (route: any) => boolean,
+  children?: React.Node
+};
+
+class SubNavigation extends React.Component<Props> {
+  static defaultProps = {
+    activeOnlyWhenExact: false
+  };
+
+  isActive(route: any) {
+    const { activeWhenMatch } = this.props;
+    return route.match || (activeWhenMatch && activeWhenMatch(route));
+  }
+
+  renderLink = (route: any) => {
+    const { to, label } = this.props;
+
+    let children = null;
+    if(this.isActive(route)) {
+      children = (
+        <ul>{this.props.children}</ul>
+      );
+    }
+
+    return (
+      <li>
+        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+          {label}
+        </Link>
+        {children}
+      </li>
+    );
+  };
+
+  render() {
+    const { to, activeOnlyWhenExact } = this.props;
+    return (
+      <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />
+    );
+  }
+}
+
+export default SubNavigation;
diff --git a/scm-ui-components/packages/ui-components/src/navigation/index.js b/scm-ui-components/packages/ui-components/src/navigation/index.js
index ca82073b56..b696f98328 100644
--- a/scm-ui-components/packages/ui-components/src/navigation/index.js
+++ b/scm-ui-components/packages/ui-components/src/navigation/index.js
@@ -3,6 +3,7 @@
 export { default as NavAction } from "./NavAction.js";
 export { default as NavLink } from "./NavLink.js";
 export { default as Navigation } from "./Navigation.js";
+export { default as SubNavigation } from "./SubNavigation.js";
 export { default as PrimaryNavigation } from "./PrimaryNavigation.js";
 export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink.js";
 export { default as Section } from "./Section.js";
diff --git a/scm-ui/public/locales/en/commons.json b/scm-ui/public/locales/en/commons.json
index 3453ffc5ad..a1a7ce7028 100644
--- a/scm-ui/public/locales/en/commons.json
+++ b/scm-ui/public/locales/en/commons.json
@@ -46,6 +46,7 @@
     "navigationLabel": "Profile Navigation",
     "informationNavLink": "Information",
     "changePasswordNavLink": "Change password",
+    "settingsNavLink": "Settings",
     "username": "Username",
     "displayName": "Display Name",
     "mail": "E-Mail",
diff --git a/scm-ui/src/containers/Profile.js b/scm-ui/src/containers/Profile.js
index b28a8cd705..e603a565e8 100644
--- a/scm-ui/src/containers/Profile.js
+++ b/scm-ui/src/containers/Profile.js
@@ -12,6 +12,7 @@ import {
   ErrorPage,
   Page,
   Navigation,
+  SubNavigation,
   Section,
   NavLink
 } from "@scm-manager/ui-components";
@@ -63,18 +64,26 @@ class Profile extends React.Component<Props, State> {
           <div className="column is-three-quarters">
             <Route path={url} exact render={() => <ProfileInfo me={me} />} />
             <Route
-              path={`${url}/password`}
+              path={`${url}/settings/password`}
               render={() => <ChangeUserPassword me={me} />}
             />
           </div>
           <div className="column">
             <Navigation>
               <Section label={t("profile.navigationLabel")}>
-                <NavLink to={`${url}`} label={t("profile.informationNavLink")} />
                 <NavLink
-                  to={`${url}/password`}
-                  label={t("profile.changePasswordNavLink")}
+                  to={`${url}`}
+                  label={t("profile.informationNavLink")}
                 />
+                <SubNavigation
+                  to={`${url}/settings/password`}
+                  label={t("profile.settingsNavLink")}
+                >
+                  <NavLink
+                    to={`${url}/settings/password`}
+                    label={t("profile.changePasswordNavLink")}
+                  />
+                </SubNavigation>
               </Section>
             </Navigation>
           </div>