diff --git a/packages/grafana-ui/src/components/Forms/Form.mdx b/packages/grafana-ui/src/components/Forms/Form.mdx
index 827a8daa04d..fdfcb66dec3 100644
--- a/packages/grafana-ui/src/components/Forms/Form.mdx
+++ b/packages/grafana-ui/src/components/Forms/Form.mdx
@@ -29,8 +29,8 @@ const defaultUser: Partial<UserDTO> = {
 >{({register, errors}) => {
   return (
     <Field>
-      <Forms.Input name="name" ref={register}/>
-      <Forms.Input type="email" name="email" ref={register({required: true})}/>
+      <Input name="name" ref={register}/>
+      <Input type="email" name="email" ref={register({required: true})}/>
       <Button type="submit">Create User</Button>
     </Field>
   )
@@ -46,13 +46,13 @@ const defaultUser: Partial<UserDTO> = {
 `register` allows to register form elements(inputs, selects, radios, etc) in the form. In order to do that you need to pass `register` as a `ref` property to the form input. For example:
 
 ```jsx
-<Forms.Input name="inputName" ref={register} />
+<Input name="inputName" ref={register} />
 ```
 
 Register accepts an object which describes validation rules for a given input:
 
 ```jsx
-<Forms.Input
+<Input
   name="inputName"
   ref={register({
     required: true,
@@ -70,7 +70,7 @@ See [Validation](#validation) for examples on validation and validation rules.
 
 ```jsx
 <Field label="Name" invalid={!!errors.name} error="Name is required">
-  <Forms.Input name="name" ref={register({ required: true })} />
+  <Input name="name" ref={register({ required: true })} />
 </Field>
 ```
 
@@ -179,7 +179,7 @@ const defaultValues: FormDto {
 <Form ...>{
   ({register}) => (
     <>
-      <Forms.Input defaultValue={default.name} name="name" ref={register} />
+      <Input defaultValue={default.name} name="name" ref={register} />
     </>
   )}
 </Form>
@@ -196,7 +196,7 @@ Validation can be performed either synchronously or asynchronously. What's impor
   ({register, errors}) => (
     <>
       <Field invalid={!!errors.name} error={errors.name && 'Name is required'}
-      <Forms.Input
+      <Input
         defaultValue={default.name}
         name="name"
         ref={register({ required: true })}
@@ -215,7 +215,7 @@ One important thing to note is that if you want to provide different error messa
   ({register, errors}) => (
     <>
       <Field invalid={!!errors.name} error={errors.name?.message }
-      <Forms.Input
+      <Input
         defaultValue={default.name}
         name="name"
         ref={register({
@@ -256,7 +256,7 @@ validateAsync = (newValue: string) => {
   ({register, errors}) => (
     <>
       <Field invalid={!!errors.name} error={errors.name?.message}
-      <Forms.Input
+      <Input
         defaultValue={default.name}
         name="name"
         ref={register({
diff --git a/public/app/core/components/PasswordInput/PasswordInput.tsx b/public/app/core/components/PasswordInput/PasswordInput.tsx
deleted file mode 100644
index a4a4f3bf873..00000000000
--- a/public/app/core/components/PasswordInput/PasswordInput.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { ChangeEvent, forwardRef } from 'react';
-import { LegacyForms, FormLabel } from '@grafana/ui';
-const { Input } = LegacyForms;
-
-export interface Props {
-  label: string;
-  value: string | undefined;
-  onChange: (value: string) => void;
-}
-
-export const PasswordInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
-  <>
-    <FormLabel className="width-8">{props.label}</FormLabel>
-    <Input
-      className="gf-form-input max-width-22"
-      type="password"
-      onChange={(event: ChangeEvent<HTMLInputElement>) => props.onChange(event.target.value)}
-      value={props.value}
-    />
-  </>
-));
diff --git a/public/app/features/profile/ChangePasswordForm.tsx b/public/app/features/profile/ChangePasswordForm.tsx
index 0aea8b14936..31ebd512797 100644
--- a/public/app/features/profile/ChangePasswordForm.tsx
+++ b/public/app/features/profile/ChangePasswordForm.tsx
@@ -1,75 +1,70 @@
-import React, { PureComponent, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import config from 'app/core/config';
-import { Button, LinkButton } from '@grafana/ui';
+import { Button, LinkButton, Form, Field, Input, HorizontalGroup } from '@grafana/ui';
 import { ChangePasswordFields } from 'app/core/utils/UserProvider';
-import { PasswordInput } from 'app/core/components/PasswordInput/PasswordInput';
+import { css } from 'emotion';
 
 export interface Props {
   isSaving: boolean;
   onChangePassword: (payload: ChangePasswordFields) => void;
 }
 
-export interface State {
-  oldPassword: string;
-  newPassword: string;
-  confirmNew: string;
-}
+export const ChangePasswordForm: FC<Props> = ({ onChangePassword, isSaving }) => {
+  const { ldapEnabled, authProxyEnabled } = config;
 
-export class ChangePasswordForm extends PureComponent<Props, State> {
-  state: State = {
-    oldPassword: '',
-    newPassword: '',
-    confirmNew: '',
-  };
-
-  onOldPasswordChange = (oldPassword: string) => {
-    this.setState({ oldPassword });
-  };
-
-  onNewPasswordChange = (newPassword: string) => {
-    this.setState({ newPassword });
-  };
-
-  onConfirmPasswordChange = (confirmNew: string) => {
-    this.setState({ confirmNew });
-  };
-
-  onSubmitChangePassword = (event: MouseEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    this.props.onChangePassword({ ...this.state });
-  };
-
-  render() {
-    const { oldPassword, newPassword, confirmNew } = this.state;
-    const { isSaving } = this.props;
-    const { ldapEnabled, authProxyEnabled } = config;
-
-    if (ldapEnabled || authProxyEnabled) {
-      return <p>You cannot change password when ldap or auth proxy authentication is enabled.</p>;
-    }
-
-    return (
-      <form name="userForm" className="gf-form-group">
-        <div className="gf-form max-width-30">
-          <PasswordInput label="Old Password" onChange={this.onOldPasswordChange} value={oldPassword} />
-        </div>
-        <div className="gf-form max-width-30">
-          <PasswordInput label="New Password" onChange={this.onNewPasswordChange} value={newPassword} />
-        </div>
-        <div className="gf-form max-width-30">
-          <PasswordInput label="Confirm Password" onChange={this.onConfirmPasswordChange} value={confirmNew} />
-        </div>
-        <div className="gf-form-button-row">
-          <Button variant="primary" onClick={this.onSubmitChangePassword} disabled={isSaving}>
-            Change Password
-          </Button>
-          <LinkButton variant="secondary" href={`${config.appSubUrl}/profile`}>
-            Cancel
-          </LinkButton>
-        </div>
-      </form>
-    );
+  if (ldapEnabled || authProxyEnabled) {
+    return <p>You cannot change password when ldap or auth proxy authentication is enabled.</p>;
   }
-}
+  return (
+    <div
+      className={css`
+        max-width: 400px;
+      `}
+    >
+      <Form onSubmit={onChangePassword}>
+        {({ register, errors, getValues }) => {
+          return (
+            <>
+              <Field label="Old password" invalid={!!errors.oldPassword} error={errors?.oldPassword?.message}>
+                <Input type="password" name="oldPassword" ref={register({ required: 'Old password is required' })} />
+              </Field>
 
-export default ChangePasswordForm;
+              <Field label="New password" invalid={!!errors.newPassword} error={errors?.newPassword?.message}>
+                <Input
+                  type="password"
+                  name="newPassword"
+                  ref={register({
+                    required: 'New password is required',
+                    validate: {
+                      confirm: v => v === getValues().confirmNew || 'Passwords must match',
+                      old: v => v !== getValues().oldPassword || `New password can't be the same as the old one.`,
+                    },
+                  })}
+                />
+              </Field>
+
+              <Field label="Confirm password" invalid={!!errors.confirmNew} error={errors?.confirmNew?.message}>
+                <Input
+                  type="password"
+                  name="confirmNew"
+                  ref={register({
+                    required: 'New password confirmation is required',
+                    validate: v => v === getValues().newPassword || 'Passwords must match',
+                  })}
+                />
+              </Field>
+              <HorizontalGroup>
+                <Button variant="primary" disabled={isSaving}>
+                  Change Password
+                </Button>
+                <LinkButton variant="secondary" href={`${config.appSubUrl}/profile`}>
+                  Cancel
+                </LinkButton>
+              </HorizontalGroup>
+            </>
+          );
+        }}
+      </Form>
+    </div>
+  );
+};