diff --git a/web/modals/account/user-settings-modal.css b/web/modals/account/user-settings-modal.css
index 52f9938a2..5d8b88ba3 100644
--- a/web/modals/account/user-settings-modal.css
+++ b/web/modals/account/user-settings-modal.css
@@ -1,173 +1,167 @@
 div.modal-body {
   padding: 6px 6px;
   width: 100%;
   box-sizing: border-box;
   background-color: var(--modal-bg);
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
   flex: 1;
   display: flex;
   flex-direction: column;
 }
 div.resized-modal-body {
   min-height: 250px;
 }
 div.modal-body p {
   padding: 1px 3px 4px 3px;
   font-size: 14px;
   text-align: center;
 }
 div.modal-body p.form-pre-footer {
   padding-top: 5px;
   font-size: 12px;
   font-style: italic;
 }
-div.modal-body input,
 div.modal-body textarea {
   margin: 3px;
 }
-div.modal-body input[type='text'],
-div.modal-body input[type='password'],
 div.modal-body textarea {
   font-size: 14px;
   padding: 1px;
   width: 175px;
 }
-div.large-modal-container div.modal-body input[type='text'],
-div.large-modal-container div.modal-body input[type='password'],
 div.large-modal-container div.modal-body textarea {
   width: 275px;
 }
 div.modal-body input[type='submit'] {
   padding: 3px 9px;
   font-size: 12px;
   margin-right: 3px;
   border-radius: 3px;
   border: 1px solid var(--border-color);
   background-color: #f8f8f8;
   font-weight: 600;
   color: #444444;
   margin-top: 1px;
   cursor: pointer;
 }
 div.modal-body input[type='submit']:hover {
   text-decoration: underline;
 }
 div.modal-body input[type='submit']:disabled {
   cursor: initial;
   text-decoration: none;
   color: #999999;
 }
 div.modal-body p.confirm-account-password {
   padding: 3px 0px 5px 0px;
   font-style: italic;
   font-size: 13px;
   color: #777777;
 }
 div.modal-body div.form-footer {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   align-items: start;
   margin-top: 5px;
   border-top: 2px solid var(--border-color);
   min-height: 26px;
   padding: 7px 4px 4px 0;
 }
 div.modal-body div.form-footer div.modal-form-error {
   font-size: 12px;
   color: red;
   font-style: italic;
   padding-left: 6px;
   align-self: center;
 }
 div.modal-body div.form-footer div.modal-form-error ol {
   padding-left: 20px;
 }
 div.modal-body div.form-title {
   display: inline-block;
   text-align: right;
   padding-right: 5px;
   padding-top: 5px;
   font-size: 14px;
   font-weight: 600;
   vertical-align: top;
   width: 110px;
   color: var(--fg);
 }
 div.large-modal-container div.modal-body div.form-title {
   width: 140px;
 }
 div.modal-body div.form-content {
   display: inline-block;
   font-family: var(--font-stack);
-  font-size: 15px;
   color: var(--fg);
 }
 div.modal-body div.form-subtitle {
   font-size: 12px;
   padding-left: 4px;
   font-style: italic;
 }
 
 div.form-text {
   display: flex;
   align-items: baseline;
 }
 div.form-text > div.form-title {
   vertical-align: initial;
   flex-shrink: 0;
 }
 div.form-text > div.form-content {
   margin-left: 3px;
   margin-bottom: 3px;
   word-break: break-word;
 }
 
 div.form-text > div.form-float-title {
   float: left;
   text-align: right;
   padding-right: 5px;
   font-size: 14px;
   font-weight: 600;
   width: 110px;
 }
 div.form-text > div.form-float-content {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 14px;
   padding: 1px 20px 3px 4px;
   margin-top: 5px;
 }
 
 .italic {
   font-style: italic;
   color: var(--fg);
 }
 
 ul.tab-panel {
   background-color: var(--modal-bg);
   padding-left: 10px;
   padding-top: 5px;
 }
 ul.tab-panel > li {
   display: inline-block;
   list-style-type: none;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   padding: 3px 10px 3px 10px;
 }
 ul.tab-panel > li > a {
   color: #555555;
 }
 ul.tab-panel > li.delete-tab > a {
   color: #ff0000 !important;
 }
 
 div.user-settings-current-password {
   border-top: 2px solid var(--border-color);
   padding-top: 4px;
   margin-top: 5px;
 }
diff --git a/web/modals/input.css b/web/modals/input.css
new file mode 100644
index 000000000..2b4e85d32
--- /dev/null
+++ b/web/modals/input.css
@@ -0,0 +1,22 @@
+.label {
+  color: var(--fg);
+  font-weight: var(--bold);
+  font-size: var(--xl-font-20);
+  line-height: var(--line-height-text);
+}
+
+.input {
+  padding: 12px;
+  background: var(--modal-bg);
+  color: var(--fg);
+}
+
+.input[type='text'],
+.input[type='password'] {
+  border: 1px solid var(--border-color);
+  width: 100%;
+  font-size: var(--m-font-16);
+  line-height: var(--line-height-text);
+  color: var(--fg);
+  border-radius: 4px;
+}
diff --git a/web/modals/input.react.js b/web/modals/input.react.js
index eae674f07..862f3280b 100644
--- a/web/modals/input.react.js
+++ b/web/modals/input.react.js
@@ -1,35 +1,42 @@
 // @flow
 
 import * as React from 'react';
 
+import css from './input.css';
+
 type Props = {
   +type: string,
   +placeholder: string,
   +value: string,
   +onChange: (value: SyntheticEvent<HTMLInputElement>) => mixed,
   +disabled: boolean,
   +label?: string,
-  id?: string,
+  +id?: string,
 };
 
 function Input(props: Props, ref): React.Node {
-  const { label: labelProps, id, ...rest } = props;
+  const { label: labelProp, id, ...rest } = props;
+
   let label;
-  if (labelProps) {
-    label = <label htmlFor={id}>{labelProps}</label>;
+  if (labelProp) {
+    label = (
+      <label className={css.label} htmlFor={id}>
+        {labelProp}
+      </label>
+    );
   }
 
   return (
     <>
       {label}
-      <input id={id} {...rest} ref={ref} />
+      <input className={css.input} id={id} {...rest} ref={ref} />
     </>
   );
 }
 
 const ForwardedInput: React.AbstractComponent<
   Props,
   HTMLInputElement,
 > = React.forwardRef<Props, HTMLInputElement>(Input);
 
 export default ForwardedInput;