diff --git a/src/api/index.ts b/src/api/index.ts
index 98170fd..96d9183 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -62,18 +62,15 @@ export async function handleRequestError(
   dispatch: AppDispatch,
   onErrorAction: ActionCreatorWithPayload<unknown>
 ): Promise<void> {
-  if (!(response instanceof Error)) {
-    const { status } = response;
-    if (status === 403) {
-      dispatch(
-        updateAuth({
-          username: '',
-          password: '',
-          isAuthenticated: false,
-          error: 'Your token is no longer valid.',
-        })
-      );
-    }
+  if (!(response instanceof Error) && response.status === 403) {
+    dispatch(
+      updateAuth({
+        username: '',
+        password: '',
+        isAuthenticated: false,
+        error: 'Your token is no longer valid.',
+      })
+    );
   } else {
     dispatch(onErrorAction(await getRequestFailMessage(response)));
   }
diff --git a/src/components/routes/MainRoute/WebRoute/WebSections.tsx b/src/components/routes/MainRoute/WebRoute/WebSections.tsx
index 119db0c..063f56f 100644
--- a/src/components/routes/MainRoute/WebRoute/WebSections.tsx
+++ b/src/components/routes/MainRoute/WebRoute/WebSections.tsx
@@ -1,6 +1,4 @@
-import { PivotItem, PivotLinkSize, ScreenWidthMinLarge } from '@fluentui/react';
 import React, { useState } from 'react';
-import { useMediaQuery } from 'react-responsive';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import { PivotRoutes } from '../../../ui/PivotRoutes/PivotRoutes';
 import { WebDomainsList } from '../../../ui/WebDomainsList/WebDomainsList';
@@ -9,21 +7,19 @@ import { WebInstructions } from '../../../ui/WebInstructions/WebInstructions';
 export const WebSections: React.FunctionComponent = () => {
   const { path, url } = useRouteMatch();
   const openedGroupsState = useState<string[]>([]);
-  const isMinLargeScreen = useMediaQuery({
-    minWidth: ScreenWidthMinLarge,
-  });
-  const pivotProps = {
-    linkSize: isMinLargeScreen ? PivotLinkSize.large : PivotLinkSize.normal,
-  };
+  const pivotItems = [
+    {
+      itemKey: url,
+      headerText: 'Domains',
+    },
+    {
+      itemKey: `${url}/instructions`,
+      headerText: 'Uploading Instructions',
+    },
+  ];
   return (
     <>
-      <PivotRoutes {...pivotProps}>
-        <PivotItem itemKey={url} headerText="Domains" />
-        <PivotItem
-          itemKey={`${url}/instructions`}
-          headerText="Uploading Instructions"
-        />
-      </PivotRoutes>
+      <PivotRoutes items={pivotItems} />
       <Switch>
         <Route exact path={path}>
           <WebDomainsList openedGroupsState={openedGroupsState} />
diff --git a/src/components/routes/MainRoute/mail/MailUsersRoute/MailUsersSections.tsx b/src/components/routes/MainRoute/mail/MailUsersRoute/MailUsersSections.tsx
index 29c35b1..168f497 100644
--- a/src/components/routes/MainRoute/mail/MailUsersRoute/MailUsersSections.tsx
+++ b/src/components/routes/MainRoute/mail/MailUsersRoute/MailUsersSections.tsx
@@ -1,13 +1,6 @@
-import {
-  MessageBar,
-  MessageBarType,
-  PivotItem,
-  PivotLinkSize,
-  ScreenWidthMinLarge,
-} from '@fluentui/react';
+import { MessageBar, MessageBarType } from '@fluentui/react';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useMediaQuery } from 'react-responsive';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import { getUsers } from '../../../../../features/usersSlice';
 import { RootState } from '../../../../../store';
@@ -26,13 +19,16 @@ export const MailUsersSections: React.FunctionComponent = () => {
 
   const dispatch = useDispatch();
 
-  const isMinLargeScreen = useMediaQuery({
-    minWidth: ScreenWidthMinLarge,
-  });
-
-  const pivotProps = {
-    linkSize: isMinLargeScreen ? PivotLinkSize.large : PivotLinkSize.normal,
-  };
+  const pivotItems = [
+    {
+      itemKey: url,
+      headerText: 'Mail Users',
+    },
+    {
+      itemKey: `${url}/add`,
+      headerText: 'Add a Mail User',
+    },
+  ];
 
   useEffect(() => {
     if (!users.length) {
@@ -41,10 +37,7 @@ export const MailUsersSections: React.FunctionComponent = () => {
   }, [dispatch, users.length]);
   return (
     <>
-      <PivotRoutes {...pivotProps}>
-        <PivotItem itemKey={url} headerText="Mail Users" />
-        <PivotItem itemKey={`${url}/add`} headerText="Add a Mail User" />
-      </PivotRoutes>
+      <PivotRoutes items={pivotItems} />
       <Switch>
         <Route exact path={path}>
           <LoadingOverlayContainer>
diff --git a/src/components/routes/MainRoute/system/BackupsRoute/BackupsRoute.tsx b/src/components/routes/MainRoute/system/BackupsRoute/BackupsRoute.tsx
index c5251e6..5dd894d 100644
--- a/src/components/routes/MainRoute/system/BackupsRoute/BackupsRoute.tsx
+++ b/src/components/routes/MainRoute/system/BackupsRoute/BackupsRoute.tsx
@@ -4,13 +4,13 @@ import {
   DialogFooter,
   DialogType,
   MessageBarType,
-  PivotItem,
   PrimaryButton,
   ProgressIndicator,
   Stack,
   Text,
 } from '@fluentui/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import {
@@ -32,13 +32,23 @@ const BackupSections: React.FunctionComponent = () => {
   const [isDialogHidden, setIsDialogHidden] = useState<boolean>(true);
   const { backups, unmatchedFileSize, error } = status;
 
-  const onDialogClose = useCallback(
+  const onDialogClose = useConstCallback(
     (_event: React.MouseEvent<BaseButton, MouseEvent>): void => {
       setIsDialogHidden(true);
-    },
-    []
+    }
   );
 
+  const pivotItems = [
+    {
+      itemKey: url,
+      headerText: 'Backup Status',
+    },
+    {
+      itemKey: `${url}/config`,
+      headerText: 'Backup Configuration',
+    },
+  ];
+
   useEffect(() => {
     if (error) {
       setIsDialogHidden(false);
@@ -68,13 +78,7 @@ const BackupSections: React.FunctionComponent = () => {
           <PrimaryButton text="OK" onClick={onDialogClose} />
         </DialogFooter>
       </Dialog>
-      <PivotRoutes>
-        <PivotItem itemKey={url} headerText="Backup Status" />
-        <PivotItem
-          itemKey={`${url}/config`}
-          headerText="Backup Configuration"
-        />
-      </PivotRoutes>
+      <PivotRoutes items={pivotItems} />
       <Switch>
         <Route exact path={path}>
           {backups && backups.length > 0 && (
@@ -142,22 +146,24 @@ export const BackupsRoute: React.FunctionComponent & {
           ]}
         />
       </Stack>
-      <BodyPanel>
-        <Text>
-          The box makes an incremental backup each night. By default the backup
-          is stored on the machine itself, but you can also have it stored on
-          Amazon S3.
-        </Text>
-      </BodyPanel>
-      <BodyPanel>
-        {error && (
-          <MessageBar messageBarType={MessageBarType.error} isMultiline>
-            {error}
-          </MessageBar>
-        )}
-        {isLoading && <ProgressIndicator label="Checking backup status..." />}
-        {!isLoading && !error && <BackupSections />}
-      </BodyPanel>
+      <Stack gap="l1">
+        <BodyPanel>
+          <Text>
+            The box makes an incremental backup each night. By default the
+            backup is stored on the machine itself, but you can also have it
+            stored on Amazon S3.
+          </Text>
+        </BodyPanel>
+        <BodyPanel>
+          {error && (
+            <MessageBar messageBarType={MessageBarType.error} isMultiline>
+              {error}
+            </MessageBar>
+          )}
+          {isLoading && <ProgressIndicator label="Checking backup status..." />}
+          {!isLoading && !error && <BackupSections />}
+        </BodyPanel>
+      </Stack>
     </Body>
   );
 };
diff --git a/src/components/routes/MainRoute/system/CertificatesRoute/CertificatesRoute.tsx b/src/components/routes/MainRoute/system/CertificatesRoute/CertificatesRoute.tsx
index 1fcba88..e29904f 100644
--- a/src/components/routes/MainRoute/system/CertificatesRoute/CertificatesRoute.tsx
+++ b/src/components/routes/MainRoute/system/CertificatesRoute/CertificatesRoute.tsx
@@ -1,16 +1,12 @@
 import {
   MessageBar,
   MessageBarType,
-  PivotItem,
-  PivotLinkSize,
   ProgressIndicator,
-  ScreenWidthMinLarge,
   Stack,
   Text,
 } from '@fluentui/react';
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useMediaQuery } from 'react-responsive';
 import {
   Route,
   Switch,
@@ -45,12 +41,16 @@ const CertificateSections: React.FunctionComponent = () => {
   const history = useHistory();
   const { path, url } = useRouteMatch();
 
-  const isMinLargeScreen = useMediaQuery({
-    minWidth: ScreenWidthMinLarge,
-  });
-  const pivotProps = {
-    linkSize: isMinLargeScreen ? PivotLinkSize.large : PivotLinkSize.normal,
-  };
+  const pivotRoutes = [
+    {
+      itemKey: url,
+      headerText: 'Certificate Status',
+    },
+    {
+      itemKey: `${url}${SectionKeys.install}`,
+      headerText: 'Install Custom Certificate',
+    },
+  ];
 
   useEffect(() => {
     if (sslAction?.type === SSLActionType.install) {
@@ -66,13 +66,7 @@ const CertificateSections: React.FunctionComponent = () => {
 
   return (
     <>
-      <PivotRoutes {...pivotProps}>
-        <PivotItem itemKey={url} headerText="Certificate Status" />
-        <PivotItem
-          itemKey={`${url}${SectionKeys.install}`}
-          headerText="Install Custom Certificate"
-        />
-      </PivotRoutes>
+      <PivotRoutes items={pivotRoutes} />
       <Switch>
         <Route exact path={path}>
           <CertificatesList items={items} />
diff --git a/src/components/routes/MainRoute/system/CustomDnsRoute/CustomDnsRoute.tsx b/src/components/routes/MainRoute/system/CustomDnsRoute/CustomDnsRoute.tsx
index 2b074c0..cad68ca 100644
--- a/src/components/routes/MainRoute/system/CustomDnsRoute/CustomDnsRoute.tsx
+++ b/src/components/routes/MainRoute/system/CustomDnsRoute/CustomDnsRoute.tsx
@@ -1,7 +1,6 @@
 import {
   MessageBar,
   MessageBarType,
-  PivotItem,
   ProgressIndicator,
   Stack,
   Text,
@@ -40,6 +39,21 @@ const CustomDnsSections: React.FunctionComponent = () => {
   const { path, url } = useRouteMatch();
   const openedGroupsState = useState<string[]>([]);
 
+  const pivotItems = [
+    {
+      itemKey: url,
+      headerText: 'DNS Records',
+    },
+    {
+      itemKey: `${url}/add`,
+      headerText: 'Add Custom Record',
+    },
+    {
+      itemKey: `${url}/nameserver`,
+      headerText: 'Secondary Nameserver',
+    },
+  ];
+
   useEffect(() => {
     if (!zones.length) {
       dispatch(getZones());
@@ -57,14 +71,7 @@ const CustomDnsSections: React.FunctionComponent = () => {
   }, [dispatch]);
   return (
     <>
-      <PivotRoutes>
-        <PivotItem itemKey={url} headerText="DNS Records" />
-        <PivotItem itemKey={`${url}/add`} headerText="Add Custom Record" />
-        <PivotItem
-          itemKey={`${url}/nameserver`}
-          headerText="Secondary Nameserver"
-        />
-      </PivotRoutes>
+      <PivotRoutes items={pivotItems} />
       <Switch>
         <Route exact path={path}>
           <LoadingOverlayContainer>
@@ -131,17 +138,19 @@ export const CustomDnsRoute: React.FunctionComponent & {
           ]}
         />
       </Stack>
-      <MessageBar messageBarType={MessageBarType.warning} isMultiline>
-        This is an advanced configuration page.
-      </MessageBar>
-      <BodyPanel>
-        <Text>
-          It is possible to set custom DNS records on domains hosted here.
-        </Text>
-      </BodyPanel>
-      <BodyPanel>
-        <CustomDnsSections />
-      </BodyPanel>
+      <Stack gap="l1">
+        <MessageBar messageBarType={MessageBarType.warning} isMultiline>
+          This is an advanced configuration page.
+        </MessageBar>
+        <BodyPanel>
+          <Text>
+            It is possible to set custom DNS records on domains hosted here.
+          </Text>
+        </BodyPanel>
+        <BodyPanel>
+          <CustomDnsSections />
+        </BodyPanel>
+      </Stack>
     </Body>
   );
 };
diff --git a/src/components/routes/MainRoute/system/ExternalDnsRoute/ExternalDnsRoute.tsx b/src/components/routes/MainRoute/system/ExternalDnsRoute/ExternalDnsRoute.tsx
index d5694d4..59077cd 100644
--- a/src/components/routes/MainRoute/system/ExternalDnsRoute/ExternalDnsRoute.tsx
+++ b/src/components/routes/MainRoute/system/ExternalDnsRoute/ExternalDnsRoute.tsx
@@ -2,13 +2,14 @@ import {
   Link,
   MessageBar,
   MessageBarType,
-  PivotItem,
   ProgressIndicator,
+  ScreenWidthMinLarge,
   Stack,
   Text,
 } from '@fluentui/react';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useMediaQuery } from 'react-responsive';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import { getDump } from '../../../../../features/dnsSlice';
 import { RootState } from '../../../../../store';
@@ -22,15 +23,19 @@ import { PivotRoutes } from '../../../../ui/PivotRoutes/PivotRoutes';
 const ExternalDnsSections: React.FunctionComponent = () => {
   const { path, url } = useRouteMatch();
   const openedGroupsState = useState<string[]>([]);
+  const pivotItems = [
+    {
+      itemKey: url,
+      headerText: 'DNS Records',
+    },
+    {
+      itemKey: `${url}/zone-file`,
+      headerText: 'Zone File Generator',
+    },
+  ];
   return (
     <>
-      <PivotRoutes>
-        <PivotItem itemKey={url} headerText="DNS Records" />
-        <PivotItem
-          itemKey={`${url}/zone-file`}
-          headerText="Zone File Generator"
-        />
-      </PivotRoutes>
+      <PivotRoutes items={pivotItems} />
       <Switch>
         <Route exact path={path}>
           <DnsDumpList openedGroupsState={openedGroupsState} />
@@ -50,6 +55,9 @@ export const ExternalDnsRoute: React.FunctionComponent & {
     (state: RootState) => state.dns
   );
   const dispatch = useDispatch();
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
 
   useEffect(() => {
     if (!dump.length) {
@@ -74,48 +82,54 @@ export const ExternalDnsRoute: React.FunctionComponent & {
           ]}
         />
       </Stack>
-      <MessageBar messageBarType={MessageBarType.warning} isMultiline>
-        This is an advanced configuration page.
-      </MessageBar>
-      <BodyPanel>
-        <Text>
-          Although your box is configured to serve its own DNS, it is possible
-          to host your DNS elsewhere — such as in the DNS control panel provided
-          by your domain name registrar or virtual cloud provider — by copying
-          the DNS zone information shown in the table below into your external
-          DNS server’s control panel.
-        </Text>
-        <Text>
-          If you do so, you are responsible for keeping your DNS entries up to
-          date! If you previously enabled DNSSEC on your domain name by setting
-          a DS record at your registrar, you will likely have to turn it off
-          before changing nameservers.
-        </Text>
-        <MessageBar messageBarType={MessageBarType.info} isMultiline>
-          You may encounter zone file errors when attempting to create a TXT
-          record with a long string.
-          <Link href="http://tools.ietf.org/html/rfc4408#section-3.1.3">
-            RFC 4408
-          </Link>{' '}
-          states a TXT record is allowed to contain multiple strings, and this
-          technique can be used to construct records that would exceed the
-          255-byte maximum length. You may need to adopt this technique when
-          adding DomainKeys. Use a tool like
-          <Link href="http://manpages.ubuntu.com/manpages/bionic/man8/named-checkzone.8.html">
-            <code>named-checkzone</code>
-          </Link>{' '}
-          to validate your zone file.
+      <Stack gap="l1">
+        <MessageBar messageBarType={MessageBarType.warning} isMultiline>
+          This is an advanced configuration page.
         </MessageBar>
-      </BodyPanel>
-      <BodyPanel>
-        {getDumpError && (
-          <MessageBar messageBarType={MessageBarType.error} isMultiline>
-            {getDumpError}
+        <BodyPanel>
+          <Text>
+            Although your box is configured to serve its own DNS, it is possible
+            to host your DNS elsewhere — such as in the DNS control panel
+            provided by your domain name registrar or virtual cloud provider —
+            by copying the DNS zone information shown in the table below into
+            your external DNS server’s control panel.
+          </Text>
+          <Text>
+            If you do so, you are responsible for keeping your DNS entries up to
+            date! If you previously enabled DNSSEC on your domain name by
+            setting a DS record at your registrar, you will likely have to turn
+            it off before changing nameservers.
+          </Text>
+          <MessageBar
+            messageBarType={MessageBarType.info}
+            isMultiline={isMinLargeScreen}
+            truncated={!isMinLargeScreen}
+          >
+            You may encounter zone file errors when attempting to create a TXT
+            record with a long string.
+            <Link href="http://tools.ietf.org/html/rfc4408#section-3.1.3">
+              RFC 4408
+            </Link>{' '}
+            states a TXT record is allowed to contain multiple strings, and this
+            technique can be used to construct records that would exceed the
+            255-byte maximum length. You may need to adopt this technique when
+            adding DomainKeys. Use a tool like
+            <Link href="http://manpages.ubuntu.com/manpages/bionic/man8/named-checkzone.8.html">
+              <code>named-checkzone</code>
+            </Link>{' '}
+            to validate your zone file.
           </MessageBar>
-        )}
-        {isGettingDump && <ProgressIndicator label="Getting DNS dump..." />}
-        {!isGettingDump && !getDumpError && <ExternalDnsSections />}
-      </BodyPanel>
+        </BodyPanel>
+        <BodyPanel>
+          {getDumpError && (
+            <MessageBar messageBarType={MessageBarType.error} isMultiline>
+              {getDumpError}
+            </MessageBar>
+          )}
+          {isGettingDump && <ProgressIndicator label="Getting DNS dump..." />}
+          {!isGettingDump && !getDumpError && <ExternalDnsSections />}
+        </BodyPanel>
+      </Stack>
     </Body>
   );
 };
diff --git a/src/components/ui/ActionConfirmDialog/ActionConfirmDialog.tsx b/src/components/ui/ActionConfirmDialog/ActionConfirmDialog.tsx
index 4ae788c..3a5aea0 100644
--- a/src/components/ui/ActionConfirmDialog/ActionConfirmDialog.tsx
+++ b/src/components/ui/ActionConfirmDialog/ActionConfirmDialog.tsx
@@ -6,7 +6,7 @@ import {
   PrimaryButton,
   Stack,
 } from '@fluentui/react';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { DialogFooter } from '../DialogFooter/DialogFooter';
 import { MessageBar } from '../MessageBar/MessageBar';
 import { Pre } from '../Pre/Pre';
@@ -33,18 +33,18 @@ export const ActionConfirmDialog: React.FunctionComponent<
   actionResponse,
   ...rest
 }) => {
-  const onConfirmButtonClick = useCallback(() => {
+  const onConfirmButtonClick = (): void => {
     if (!actionResponse) {
       onConfirm();
     } else if (rest.onDismiss) {
       rest.onDismiss();
     }
-  }, [actionResponse, onConfirm, rest]);
-  const onCancelButtonClick = useCallback(() => {
+  };
+  const onCancelButtonClick = (): void => {
     if (rest.onDismiss) {
       rest.onDismiss();
     }
-  }, [rest]);
+  };
   return (
     <Dialog hidden={hidden} minWidth={380} maxWidth={480} {...rest}>
       <Stack gap="m">
diff --git a/src/components/ui/BackupConfigure/BackupConfigure.tsx b/src/components/ui/BackupConfigure/BackupConfigure.tsx
index 9ee1346..b39d19c 100644
--- a/src/components/ui/BackupConfigure/BackupConfigure.tsx
+++ b/src/components/ui/BackupConfigure/BackupConfigure.tsx
@@ -10,15 +10,18 @@ import {
   mergeStyles,
   MessageBarType,
   PrimaryButton,
+  ScreenWidthMinLarge,
   Stack,
 } from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
 import {
   SystemBackupConfigResponse,
   SystemBackupConfigUpdateRequest,
   SystemBackupStatusResponse,
 } from 'mailinabox-api';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useMediaQuery } from 'react-responsive';
 import { config } from '../../../config';
 import {
   getStatus,
@@ -87,6 +90,9 @@ export const BackupConfigure: React.FunctionComponent<
   } = useSelector((state: RootState) => state.system.backups);
 
   const dispatch = useDispatch();
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
   const [isDialogHidden, setIsDialogHidden] = useState<boolean>(true);
   const [hasDialogOpened, setHasDialogOpened] = useState<boolean>(false);
 
@@ -101,54 +107,47 @@ export const BackupConfigure: React.FunctionComponent<
     SystemBackupConfigUpdateRequest | undefined
   >();
 
-  const onDialogDismissed = useCallback((): void => {
+  const onDialogDismissed = (): void => {
     if (updateConfigResponse === 'OK') {
       dispatch(getStatus());
     }
     dispatch(updateConfigReset());
-  }, [dispatch, updateConfigResponse]);
+  };
 
-  const onDialogClose = useCallback(
+  const onDialogClose = useConstCallback(
     (_event: React.MouseEvent<BaseButton, MouseEvent>): void => {
       setIsDialogHidden(true);
-    },
-    []
+    }
   );
 
-  const onBackupOptionChange = useCallback(
+  const onBackupOptionChange = useConstCallback(
     (
       _event: React.FormEvent<HTMLDivElement>,
       option?: IDropdownOption
     ): void => {
       setBackupOption(option);
-    },
-    []
+    }
   );
 
-  const onBackupConfigChange = useCallback(
+  const onBackupConfigChange = useConstCallback(
     (config: SystemBackupConfigUpdateRequest): void => {
       setUpdateBackupConfig(config);
-    },
-    []
+    }
   );
 
-  const onFormSubmit = useCallback(
-    (event: React.FormEvent<HTMLElement>): void => {
-      event.preventDefault();
-      if (updateBackupConfig) {
-        dispatch(updateConfig(updateBackupConfig));
-      }
-    },
-    [dispatch, updateBackupConfig]
-  );
+  const onFormSubmit = (event: React.FormEvent<HTMLElement>): void => {
+    event.preventDefault();
+    if (updateBackupConfig) {
+      dispatch(updateConfig(updateBackupConfig));
+    }
+  };
 
-  const onMessageBarDismiss = useCallback(
+  const onMessageBarDismiss = useConstCallback(
     (
       _event?: React.MouseEvent<HTMLElement | BaseButton | Button, MouseEvent>
     ): void => {
       dispatch(updateConfigResetError());
-    },
-    [dispatch]
+    }
   );
 
   useEffect(() => {
@@ -181,7 +180,7 @@ export const BackupConfigure: React.FunctionComponent<
   }, [backupConfig.minAgeInDays, backupOption]);
 
   return (
-    <Stack as="section" gap="l2" horizontal {...props}>
+    <Stack as="section" gap="l2" horizontal={isMinLargeScreen} {...props}>
       <Dialog
         hidden={isDialogHidden}
         dialogContentProps={{
diff --git a/src/components/ui/BackupConfigure/local/BackupConfigureLocal.tsx b/src/components/ui/BackupConfigure/local/BackupConfigureLocal.tsx
index aa49c5d..7eb5ea5 100644
--- a/src/components/ui/BackupConfigure/local/BackupConfigureLocal.tsx
+++ b/src/components/ui/BackupConfigure/local/BackupConfigureLocal.tsx
@@ -1,5 +1,5 @@
 import { TextField } from '@fluentui/react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   onRenderTextFieldLabel,
   textfieldWithLabelInfoStyles,
@@ -14,15 +14,14 @@ export const BackupConfigureLocal: React.FunctionComponent<BackupConfigureProps>
   const [days, setDays] = useState<string | undefined>(
     String(backupConfig.minAgeInDays)
   );
-  const onDaysChange = useCallback(
-    (
-      _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-      newValue?: string | undefined
-    ): void => {
-      setDays(newValue);
-    },
-    []
-  );
+
+  const onDaysChange = (
+    _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string | undefined
+  ): void => {
+    setDays(newValue);
+  };
+
   const onDaysRenderLabel = useMemo(
     () => onRenderTextFieldLabel(daysDescription),
     [daysDescription]
diff --git a/src/components/ui/BackupConfigure/local/BackupInfoLocal.tsx b/src/components/ui/BackupConfigure/local/BackupInfoLocal.tsx
index 641e8d0..86b6333 100644
--- a/src/components/ui/BackupConfigure/local/BackupInfoLocal.tsx
+++ b/src/components/ui/BackupConfigure/local/BackupInfoLocal.tsx
@@ -1,6 +1,7 @@
-import { MessageBarType, Text } from '@fluentui/react';
+import { MessageBarType, ScreenWidthMinLarge, Text } from '@fluentui/react';
 import { SystemBackupConfigResponse } from 'mailinabox-api';
 import React from 'react';
+import { useMediaQuery } from 'react-responsive';
 import { MessageBar } from '../../MessageBar/MessageBar';
 
 interface BackupInfoLocalProps {
@@ -10,6 +11,9 @@ interface BackupInfoLocalProps {
 export const BackupInfoLocal: React.FunctionComponent<BackupInfoLocalProps> = ({
   config,
 }) => {
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
   return (
     <>
       <Text>
@@ -18,7 +22,11 @@ export const BackupInfoLocal: React.FunctionComponent<BackupInfoLocalProps> = ({
         <code>{config.fileTargetDirectory}</code> to a safe location. These
         files are encrypted, so they are safe to store anywhere.
       </Text>
-      <MessageBar messageBarType={MessageBarType.warning} isMultiline>
+      <MessageBar
+        messageBarType={MessageBarType.warning}
+        isMultiline={isMinLargeScreen}
+        truncated={!isMinLargeScreen}
+      >
         Separately copy the encryption password from{' '}
         <code>{config.encPwFile}</code> to a safe and secure location. You will
         need this file to decrypt backup files.
diff --git a/src/components/ui/BackupConfigure/rsync/BackupConfigureRsync.tsx b/src/components/ui/BackupConfigure/rsync/BackupConfigureRsync.tsx
index 86347c4..d88dc7e 100644
--- a/src/components/ui/BackupConfigure/rsync/BackupConfigureRsync.tsx
+++ b/src/components/ui/BackupConfigure/rsync/BackupConfigureRsync.tsx
@@ -1,12 +1,20 @@
 import { TextField } from '@fluentui/react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { config } from '../../../../config';
+import { useFormInputs } from '../../../../forms/useFormInputs';
 import {
   onRenderTextFieldLabel,
   textfieldWithLabelInfoStyles,
 } from '../../TextFieldWithInfo/TextFieldWithInfo';
 import { BackupConfigureProps } from '../types';
 
+type FormState = {
+  hostname: string;
+  path: string;
+  username: string;
+  days: string;
+};
+
 export const BackupConfigureRsync: React.FunctionComponent<BackupConfigureProps> = ({
   backupConfig,
   isCurrentType,
@@ -19,55 +27,13 @@ export const BackupConfigureRsync: React.FunctionComponent<BackupConfigureProps>
   const targetHostParts = isCurrentType
     ? targetPath.shift()?.split('@') || []
     : [];
-  const initialUsername = isCurrentType ? targetHostParts[0] : '';
-  const initialHostName = isCurrentType ? targetHostParts[1] : '';
-  const initialPath = isCurrentType ? `/${targetPath[0]}` : '';
-
-  const [days, setDays] = useState<string | undefined>(
-    String(backupConfig.minAgeInDays)
-  );
-  const [hostname, setHostname] = useState<string | undefined>(initialHostName);
-  const [path, setPath] = useState<string | undefined>(initialPath);
-  const [username, setUsername] = useState<string | undefined>(initialUsername);
-
-  const onDaysChange = useCallback(
-    (
-      _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-      newValue?: string | undefined
-    ): void => {
-      setDays(newValue);
-    },
-    []
-  );
 
-  const onHostnameChange = useCallback(
-    (
-      _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-      newValue?: string | undefined
-    ): void => {
-      setHostname(newValue);
-    },
-    []
-  );
-
-  const onPathChange = useCallback(
-    (
-      _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-      newValue?: string | undefined
-    ): void => {
-      setPath(newValue);
-    },
-    []
-  );
-  const onUsernameChange = useCallback(
-    (
-      _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-      newValue?: string | undefined
-    ): void => {
-      setUsername(newValue);
-    },
-    []
-  );
+  const { inputs, onInputChange } = useFormInputs<FormState>({
+    hostname: isCurrentType ? targetHostParts[1] : '',
+    path: isCurrentType ? `/${targetPath[0]}` : '',
+    username: isCurrentType ? targetHostParts[0] : '',
+    days: String(backupConfig.minAgeInDays),
+  });
 
   const onDaysRenderLabel = useMemo(
     () => onRenderTextFieldLabel(daysDescription),
@@ -89,34 +55,43 @@ export const BackupConfigureRsync: React.FunctionComponent<BackupConfigureProps>
 
   useEffect(() => {
     onConfigChange({
-      target: `rsync://${username}@${hostname}/${path}`,
+      target: `rsync://${inputs.username}@${inputs.hostname}/${inputs.path}`,
       targetUser: '',
       targetPass: '',
-      minAge: Number(days) || 1,
+      minAge: Number(inputs.days) || 1,
     });
-  }, [days, hostname, onConfigChange, path, username]);
+  }, [
+    inputs.days,
+    inputs.hostname,
+    inputs.path,
+    inputs.username,
+    onConfigChange,
+  ]);
 
   return (
     <>
       <TextField
-        value={hostname}
+        value={inputs.hostname}
         label="Hostname"
+        name="hostname"
         required
         placeholder="hostname.local"
-        onChange={onHostnameChange}
+        onChange={onInputChange}
       />
       <TextField
-        value={path}
+        value={inputs.path}
         label="Path"
+        name="path"
         required
         placeholder={`/backups/${config.hostname}`}
-        onChange={onPathChange}
+        onChange={onInputChange}
       />
       <TextField
-        value={username}
+        value={inputs.username}
         label="Username"
+        name="username"
         required
-        onChange={onUsernameChange}
+        onChange={onInputChange}
       />
       <TextField
         value={backupConfig.sshPubKey}
@@ -127,15 +102,16 @@ export const BackupConfigureRsync: React.FunctionComponent<BackupConfigureProps>
         styles={textfieldWithLabelInfoStyles}
       />
       <TextField
-        value={days}
+        value={inputs.days}
         label="Days"
+        name="days"
         min={1}
         step={1}
         type="number"
         required
         onRenderLabel={onDaysRenderLabel}
         styles={textfieldWithLabelInfoStyles}
-        onChange={onDaysChange}
+        onChange={onInputChange}
       />
     </>
   );
diff --git a/src/components/ui/BackupConfigure/rsync/BackupInfoRsync.tsx b/src/components/ui/BackupConfigure/rsync/BackupInfoRsync.tsx
index 6f9d89a..cfd586f 100644
--- a/src/components/ui/BackupConfigure/rsync/BackupInfoRsync.tsx
+++ b/src/components/ui/BackupConfigure/rsync/BackupInfoRsync.tsx
@@ -1,6 +1,7 @@
-import { MessageBarType, Text } from '@fluentui/react';
+import { MessageBarType, ScreenWidthMinLarge, Text } from '@fluentui/react';
 import { SystemBackupConfigResponse } from 'mailinabox-api';
 import React from 'react';
+import { useMediaQuery } from 'react-responsive';
 import { MessageBar } from '../../MessageBar/MessageBar';
 
 interface BackupInfoRsyncProps {
@@ -10,6 +11,9 @@ interface BackupInfoRsyncProps {
 export const BackupInfoRsync: React.FunctionComponent<BackupInfoRsyncProps> = ({
   config,
 }) => {
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
   return (
     <>
       <Text>
@@ -17,7 +21,11 @@ export const BackupInfoRsync: React.FunctionComponent<BackupInfoRsyncProps> = ({
         copies in <code>{config.fileTargetDirectory}</code>. These files are
         encrypted, so they are safe to store anywhere.
       </Text>
-      <MessageBar messageBarType={MessageBarType.warning} isMultiline>
+      <MessageBar
+        messageBarType={MessageBarType.warning}
+        isMultiline={isMinLargeScreen}
+        truncated={!isMinLargeScreen}
+      >
         Separately copy the encryption password from{' '}
         <code>{config.encPwFile}</code> to a safe and secure location. You will
         need this file to decrypt backup files.
diff --git a/src/components/ui/BackupConfigure/s3/BackupConfigureS3.tsx b/src/components/ui/BackupConfigure/s3/BackupConfigureS3.tsx
index dd99ae2..c32bfff 100644
--- a/src/components/ui/BackupConfigure/s3/BackupConfigureS3.tsx
+++ b/src/components/ui/BackupConfigure/s3/BackupConfigureS3.tsx
@@ -1,78 +1,21 @@
 import { Dropdown, IDropdownOption, TextField } from '@fluentui/react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { useFormInputs } from '../../../../forms/useFormInputs';
 import {
   onRenderTextFieldLabel,
   textfieldWithLabelInfoStyles,
 } from '../../../ui/TextFieldWithInfo/TextFieldWithInfo';
 import { BackupConfigureProps } from '../types';
+import { s3RegionOptions } from './regionOptions';
 
-const s3RegionOptions = [
-  { key: 's3-eu-west-1.amazonaws.com', text: 'eu-west-1' },
-  {
-    key: 's3-ap-southeast-1.amazonaws.com',
-    text: 'ap-southeast-1',
-  },
-  {
-    key: 's3-us-gov-west-1.amazonaws.com',
-    text: 'us-gov-west-1',
-  },
-  {
-    key: 's3.ap-south-1.amazonaws.com',
-    text: 'ap-south-1',
-  },
-  {
-    key: 's3.eu-west-2.amazonaws.com',
-    text: 'eu-west-2',
-  },
-  {
-    key: 's3.ca-central-1.amazonaws.com',
-    text: 'ca-central-1',
-  },
-  {
-    key: 's3-ap-southeast-2.amazonaws.com',
-    text: 'ap-southeast-2',
-  },
-  {
-    key: 's3-us-west-1.amazonaws.com',
-    text: 'us-west-1',
-  },
-  {
-    key: 's3-ap-northeast-1.amazonaws.com',
-    text: 'ap-northeast-1',
-  },
-  {
-    key: 's3.ap-northeast-2.amazonaws.com',
-    text: 'ap-northeast-2',
-  },
-  {
-    key: 's3-sa-east-1.amazonaws.com',
-    text: 'sa-east-1',
-  },
-  {
-    key: 's3.amazonaws.com',
-    text: 'us-east-1',
-  },
-  {
-    key: 's3.us-east-2.amazonaws.com',
-    text: 'us-east-2',
-  },
-  {
-    key: 's3-us-west-2.amazonaws.com',
-    text: 'us-west-2',
-  },
-  {
-    key: 's3.eu-central-1.amazonaws.com',
-    text: 'eu-central-1',
-  },
-  {
-    key: 's3.cn-north-1.amazonaws.com.cn',
-    text: 'cn-north-1',
-  },
-  {
-    key: 'other',
-    text: 'Other',
-  },
-];
+type FormState = {
+  region: string;
+  host: string;
+  path: string;
+  accessKey: string;
+  secretAccessKey: string;
+  days: string;
+};
 
 export const BackupConfigureS3: React.FunctionComponent<BackupConfigureProps> = ({
   backupConfig,
@@ -80,75 +23,33 @@ export const BackupConfigureS3: React.FunctionComponent<BackupConfigureProps> =
   daysDescription,
   onConfigChange,
 }) => {
-  const initialS3HostPath = isCurrentType
-    ? backupConfig.target.substring(5).split('/')
-    : [];
-  const initialS3Host = isCurrentType ? initialS3HostPath.shift() : '';
-  const initialRegion = s3RegionOptions.find(
-    (regionOption) => regionOption.key === initialS3Host
+  const path = isCurrentType ? backupConfig.target.substring(5).split('/') : [];
+  const host = isCurrentType ? path.shift() : '';
+  const region = s3RegionOptions.find(
+    (regionOption) => regionOption.key === host
   );
 
-  const [host, setHost] = useState<string>(
-    (initialRegion?.key === 'other' ? '' : initialRegion?.key) || ''
-  );
+  const { inputs, setInputs, onInputChange } = useFormInputs<FormState>({
+    region: (region?.key || '') as string,
+    host: ((region?.key === 'other' ? '' : region?.key) || '') as string,
+    days: String(backupConfig.minAgeInDays),
+    path: path.join('/'),
+    accessKey: '',
+    secretAccessKey: '',
+  });
 
-  const [region, setRegion] = useState<IDropdownOption | undefined>(
-    initialRegion
-  );
-  const [days, setDays] = useState<string | undefined>(
-    String(backupConfig.minAgeInDays)
-  );
-  const [path, setPath] = useState<string | undefined>(
-    initialS3HostPath.join('/')
-  );
-  const [accessKey, setAccessKey] = useState<string | undefined>();
-  const [secretAccessKey, setSecretAccessKey] = useState<string | undefined>();
-
-  const onRegionChange = useCallback(
-    (
-      _event: React.FormEvent<HTMLDivElement>,
-      option?: IDropdownOption
-    ): void => {
-      setRegion(option);
-      setHost(((option?.key === 'other' ? '' : option?.key) || '') as string);
-    },
-    []
-  );
-
-  const onPathChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setPath(newValue ?? '');
-    },
-    []
-  );
-
-  const onAccessKeyChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setAccessKey(newValue ?? '');
-    },
-    []
-  );
-
-  const onSecretAccessKeyChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setSecretAccessKey(newValue ?? '');
-    },
-    []
-  );
-
-  const onDaysChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setDays(newValue ?? '');
-    },
-    []
-  );
-
-  const onHostChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setHost(newValue ?? '');
-    },
-    []
-  );
+  const onRegionChange = (
+    _event: React.FormEvent<HTMLDivElement>,
+    option?: IDropdownOption
+  ): void => {
+    if (option) {
+      setInputs({
+        ...inputs,
+        region: option.key as string,
+        host: ((option.key === 'other' ? '' : option?.key) || '') as string,
+      });
+    }
+  };
 
   const onDaysRenderLabel = useMemo(
     () => onRenderTextFieldLabel(daysDescription),
@@ -157,58 +58,70 @@ export const BackupConfigureS3: React.FunctionComponent<BackupConfigureProps> =
 
   useEffect(() => {
     onConfigChange({
-      target: `s3://${host}/${path}`,
-      targetUser: accessKey || '',
-      targetPass: secretAccessKey || '',
-      minAge: Number(days) || 1,
+      target: `s3://${inputs.host}/${inputs.path}`,
+      targetUser: inputs.accessKey || '',
+      targetPass: inputs.secretAccessKey || '',
+      minAge: Number(inputs.days) || 1,
     });
-  }, [accessKey, days, host, onConfigChange, path, secretAccessKey]);
+  }, [
+    inputs.accessKey,
+    inputs.days,
+    inputs.host,
+    inputs.path,
+    inputs.secretAccessKey,
+    onConfigChange,
+  ]);
 
   return (
     <>
       <Dropdown
         label="S3 Region"
         options={s3RegionOptions}
-        selectedKey={region?.key}
+        selectedKey={inputs.region}
         required
         onChange={onRegionChange}
       />
       <TextField
         label="S3 Host / Endpoint"
         required
-        value={host}
-        onChange={onHostChange}
+        value={inputs.host}
+        onChange={onInputChange}
+        name="host"
         placeholder="Endpoint"
       />
       <TextField
         label="S3 Path"
         required
-        value={path}
+        value={inputs.path}
+        name="path"
         placeholder="your-bucket-name/backup-directory"
-        onChange={onPathChange}
+        onChange={onInputChange}
       />
       <TextField
         label="S3 Access Key"
         required
-        value={accessKey}
-        onChange={onAccessKeyChange}
+        name="accessKey"
+        value={inputs.accessKey}
+        onChange={onInputChange}
       />
       <TextField
         label="S3 Secret Access Key"
         required
-        value={secretAccessKey}
-        onChange={onSecretAccessKeyChange}
+        name="secretAccessKey"
+        value={inputs.secretAccessKey}
+        onChange={onInputChange}
       />
       <TextField
-        value={days}
+        value={inputs.days}
         label="Days"
         min={1}
         step={1}
         type="number"
+        name="days"
         required
         onRenderLabel={onDaysRenderLabel}
         styles={textfieldWithLabelInfoStyles}
-        onChange={onDaysChange}
+        onChange={onInputChange}
       />
     </>
   );
diff --git a/src/components/ui/BackupConfigure/s3/BackupInfoS3.tsx b/src/components/ui/BackupConfigure/s3/BackupInfoS3.tsx
index c38c86d..120ebc0 100644
--- a/src/components/ui/BackupConfigure/s3/BackupInfoS3.tsx
+++ b/src/components/ui/BackupConfigure/s3/BackupInfoS3.tsx
@@ -1,6 +1,7 @@
-import { MessageBarType, Text } from '@fluentui/react';
+import { MessageBarType, ScreenWidthMinLarge, Text } from '@fluentui/react';
 import { SystemBackupConfigResponse } from 'mailinabox-api';
 import React from 'react';
+import { useMediaQuery } from 'react-responsive';
 import { MessageBar } from '../../MessageBar/MessageBar';
 
 interface BackupInfoS3Props {
@@ -10,13 +11,20 @@ interface BackupInfoS3Props {
 export const BackupInfoS3: React.FunctionComponent<BackupInfoS3Props> = ({
   config,
 }) => {
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
   return (
     <>
       <Text>
         Backups are stored in an Amazon Web Services S3 bucket. You must have an
         AWS account already.
       </Text>
-      <MessageBar messageBarType={MessageBarType.warning}>
+      <MessageBar
+        messageBarType={MessageBarType.warning}
+        isMultiline={isMinLargeScreen}
+        truncated={!isMinLargeScreen}
+      >
         You MUST manually copy the encryption password from{' '}
         <code>{config.encPwFile}</code> to a safe and secure location. You will
         need this file to decrypt backup files. It is NOT stored in your Amazon
diff --git a/src/components/ui/BackupConfigure/s3/regionOptions.ts b/src/components/ui/BackupConfigure/s3/regionOptions.ts
new file mode 100644
index 0000000..21389ae
--- /dev/null
+++ b/src/components/ui/BackupConfigure/s3/regionOptions.ts
@@ -0,0 +1,69 @@
+import { IDropdownOption } from '@fluentui/react';
+
+export const s3RegionOptions: IDropdownOption[] = [
+  { key: 's3-eu-west-1.amazonaws.com', text: 'eu-west-1' },
+  {
+    key: 's3-ap-southeast-1.amazonaws.com',
+    text: 'ap-southeast-1',
+  },
+  {
+    key: 's3-us-gov-west-1.amazonaws.com',
+    text: 'us-gov-west-1',
+  },
+  {
+    key: 's3.ap-south-1.amazonaws.com',
+    text: 'ap-south-1',
+  },
+  {
+    key: 's3.eu-west-2.amazonaws.com',
+    text: 'eu-west-2',
+  },
+  {
+    key: 's3.ca-central-1.amazonaws.com',
+    text: 'ca-central-1',
+  },
+  {
+    key: 's3-ap-southeast-2.amazonaws.com',
+    text: 'ap-southeast-2',
+  },
+  {
+    key: 's3-us-west-1.amazonaws.com',
+    text: 'us-west-1',
+  },
+  {
+    key: 's3-ap-northeast-1.amazonaws.com',
+    text: 'ap-northeast-1',
+  },
+  {
+    key: 's3.ap-northeast-2.amazonaws.com',
+    text: 'ap-northeast-2',
+  },
+  {
+    key: 's3-sa-east-1.amazonaws.com',
+    text: 'sa-east-1',
+  },
+  {
+    key: 's3.amazonaws.com',
+    text: 'us-east-1',
+  },
+  {
+    key: 's3.us-east-2.amazonaws.com',
+    text: 'us-east-2',
+  },
+  {
+    key: 's3-us-west-2.amazonaws.com',
+    text: 'us-west-2',
+  },
+  {
+    key: 's3.eu-central-1.amazonaws.com',
+    text: 'eu-central-1',
+  },
+  {
+    key: 's3.cn-north-1.amazonaws.com.cn',
+    text: 'cn-north-1',
+  },
+  {
+    key: 'other',
+    text: 'Other',
+  },
+];
diff --git a/src/components/ui/BackupsList/BackupsList.tsx b/src/components/ui/BackupsList/BackupsList.tsx
index 3daef1d..40f379a 100644
--- a/src/components/ui/BackupsList/BackupsList.tsx
+++ b/src/components/ui/BackupsList/BackupsList.tsx
@@ -6,12 +6,14 @@ import {
   IStackProps,
   mergeStyles,
   MessageBarType,
+  ScreenWidthMinLarge,
   SelectionMode,
   Stack,
   Text,
 } from '@fluentui/react';
 import { SystemBackupStatus, SystemBackupStatusResponse } from 'mailinabox-api';
 import React from 'react';
+import { useMediaQuery } from 'react-responsive';
 import { MessageBar } from '../MessageBar/MessageBar';
 
 function niceSize(bytes: number): string {
@@ -52,9 +54,9 @@ const columns: IColumn[] = [
   {
     key: 'column1',
     name: 'When',
-    minWidth: 100,
-    maxWidth: 180,
-    isMultiline: false,
+    minWidth: 160,
+    maxWidth: 160,
+    isMultiline: true,
     isRowHeader: true,
     onRender: (item: SystemBackupStatus): React.ReactNode => {
       return (
@@ -67,8 +69,8 @@ const columns: IColumn[] = [
   {
     key: 'column2',
     name: '',
-    minWidth: 100,
-    isMultiline: false,
+    minWidth: 160,
+    isMultiline: true,
     isRowHeader: true,
     onRender: (item: SystemBackupStatus): React.ReactNode => {
       return (
@@ -96,7 +98,7 @@ const columns: IColumn[] = [
     key: 'column4',
     name: 'Size',
     isMultiline: false,
-    minWidth: 100,
+    minWidth: 80,
     onRender: (item: SystemBackupStatus): React.ReactNode => {
       return (
         <Text className={item.full ? strongCellClassName : undefined}>
@@ -109,7 +111,7 @@ const columns: IColumn[] = [
     key: 'column5',
     name: 'Deleted In',
     isMultiline: false,
-    minWidth: 160,
+    minWidth: 100,
     onRender: (item: SystemBackupStatus): React.ReactNode => {
       return (
         <Text className={item.full ? strongCellClassName : undefined}>
@@ -123,16 +125,22 @@ const columns: IColumn[] = [
 export const BackupsList: React.FunctionComponent<
   IStackProps & SystemBackupStatusResponse
 > = ({ backups = [], unmatchedFileSize, ...props }) => {
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
   return (
     <Stack as="section" {...props}>
       {!backups.length && (
-        <MessageBar messageBarType={MessageBarType.warning} isMultiline>
+        <MessageBar messageBarType={MessageBarType.warning}>
           No backups have been made yet.
         </MessageBar>
       )}
       {backups.length && (
         <>
-          <MessageBar>
+          <MessageBar
+            isMultiline={isMinLargeScreen}
+            truncated={!isMinLargeScreen}
+          >
             The backup location currently contains the backups listed below. The
             total size of the backups is currently{' '}
             <strong>{getTotalBackupsSize(backups, unmatchedFileSize)}</strong>.
diff --git a/src/components/ui/CertificatesList/CertificateActionsList.tsx b/src/components/ui/CertificatesList/CertificateActionsList.tsx
index 1661e43..02a52a0 100644
--- a/src/components/ui/CertificatesList/CertificateActionsList.tsx
+++ b/src/components/ui/CertificatesList/CertificateActionsList.tsx
@@ -1,6 +1,7 @@
 import { DirectionalHint, IconButton } from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
 import { SSLStatus, SSLStatusType } from 'mailinabox-api';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useDispatch } from 'react-redux';
 import { setSSLAction, SSLActionType } from '../../../features/sslSlice';
 
@@ -8,46 +9,45 @@ interface CertificateActionsListProps {
   sslStatus: SSLStatus;
 }
 
-export const CertificateActionsList: React.FunctionComponent<CertificateActionsListProps> = ({
-  sslStatus,
-}) => {
-  const dispatch = useDispatch();
-  const doAction = useCallback(
-    (type: SSLActionType): void => {
+export const CertificateActionsList: React.FunctionComponent<CertificateActionsListProps> = React.memo(
+  ({ sslStatus }) => {
+    const dispatch = useDispatch();
+    const doAction = useConstCallback((type: SSLActionType): void => {
       dispatch(
         setSSLAction({
           sslStatus,
           type,
         })
       );
-    },
-    [dispatch, sslStatus]
-  );
-  return (
-    <IconButton
-      menuIconProps={{
-        iconName: 'MoreVertical',
-      }}
-      styles={{
-        menuIcon: {
-          fontWeight: 'bold',
-        },
-      }}
-      role="button"
-      aria-haspopup={true}
-      aria-label="Show actions"
-      menuProps={{
-        directionalHint: DirectionalHint.bottomRightEdge,
-        items: [
-          {
-            key: 'installCertificate' + sslStatus.domain,
-            text: `${
-              sslStatus.status === SSLStatusType.Success ? 'Replace' : 'Install'
-            } Certificate`,
-            onClick: (): void => doAction(SSLActionType.install),
+    });
+    return (
+      <IconButton
+        menuIconProps={{
+          iconName: 'MoreVertical',
+        }}
+        styles={{
+          menuIcon: {
+            fontWeight: 'bold',
           },
-        ],
-      }}
-    />
-  );
-};
+        }}
+        role="button"
+        aria-haspopup={true}
+        aria-label="Show actions"
+        menuProps={{
+          directionalHint: DirectionalHint.bottomRightEdge,
+          items: [
+            {
+              key: 'installCertificate' + sslStatus.domain,
+              text: `${
+                sslStatus.status === SSLStatusType.Success
+                  ? 'Replace'
+                  : 'Install'
+              } Certificate`,
+              onClick: (): void => doAction(SSLActionType.install),
+            },
+          ],
+        }}
+      />
+    );
+  }
+);
diff --git a/src/components/ui/CertificatesList/CertificatesList.tsx b/src/components/ui/CertificatesList/CertificatesList.tsx
index a717e53..a2ced06 100644
--- a/src/components/ui/CertificatesList/CertificatesList.tsx
+++ b/src/components/ui/CertificatesList/CertificatesList.tsx
@@ -9,12 +9,14 @@ import {
   IStackProps,
   Link,
   mergeStyles,
+  ScreenWidthMinLarge,
   SelectionMode,
   Stack,
   Text,
 } from '@fluentui/react';
 import { SSLStatus, SSLStatusType } from 'mailinabox-api';
 import React from 'react';
+import { useMediaQuery } from 'react-responsive';
 import { MessageBar } from '../MessageBar/MessageBar';
 import { CertificateActionsList } from './CertificateActionsList';
 
@@ -37,6 +39,7 @@ const columns: IColumn[] = [
     key: 'column1',
     name: 'Domain',
     minWidth: 300,
+    maxWidth: 300,
     isMultiline: false,
     isRowHeader: true,
     isResizable: true,
@@ -78,9 +81,12 @@ export const CertificatesList: React.FunctionComponent<
     items: Array<SSLStatus>;
   }
 > = ({ items, ...props }) => {
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
   return (
     <Stack as="section" {...props}>
-      <MessageBar>
+      <MessageBar truncated={!isMinLargeScreen} isMultiline={isMinLargeScreen}>
         Certificates expire after a period of time. All certificates will be
         automatically renewed through
         <Link href="https://letsencrypt.org/">Let's Encrypt</Link> 14 days prior
diff --git a/src/components/ui/CustomDnsAdd/CustomDnsAdd.tsx b/src/components/ui/CustomDnsAdd/CustomDnsAdd.tsx
index 6b59fb4..ef47fa3 100644
--- a/src/components/ui/CustomDnsAdd/CustomDnsAdd.tsx
+++ b/src/components/ui/CustomDnsAdd/CustomDnsAdd.tsx
@@ -10,19 +10,23 @@ import {
   mergeStyles,
   MessageBarType,
   PrimaryButton,
+  ScreenWidthMinLarge,
   Stack,
   Text,
   TextField,
 } from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
 import { DNSRecordType } from 'mailinabox-api';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useMediaQuery } from 'react-responsive';
 import {
   addCustomRecord,
   addCustomRecordReset,
   addCustomRecordResetError,
   getCustomRecords,
 } from '../../../features/dnsSlice';
+import { useFormInputs } from '../../../forms/useFormInputs';
 import { RootState } from '../../../store';
 import { MessageBar } from '../MessageBar/MessageBar';
 import { Pre } from '../Pre/Pre';
@@ -35,8 +39,16 @@ const recordTypeOptions = Object.keys(recordTypes).map((key) => ({
 
 const columnClassName = mergeStyles({
   flexBasis: 0,
+  minWidth: 0,
 });
 
+type FormState = {
+  type: IDropdownOption;
+  zone: IDropdownOption;
+  name: string;
+  value: string;
+};
+
 export const CustomDnsAdd: React.FunctionComponent<IStackProps> = ({
   ...props
 }) => {
@@ -51,94 +63,69 @@ export const CustomDnsAdd: React.FunctionComponent<IStackProps> = ({
     key: zone,
     text: zone,
   }));
-  const [type, setType] = useState<IDropdownOption>(recordTypeOptions[0]);
-  const [zone, setZone] = useState<IDropdownOption>(zoneOptions[0]);
-  const [name, setName] = useState<string>('');
-  const [value, setValue] = useState<string>('');
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
+
+  const { inputs, setInputs, resetInputs, onInputChange } = useFormInputs<
+    FormState
+  >({
+    type: recordTypeOptions[0],
+    zone: zoneOptions[0],
+    name: '',
+    value: '',
+  });
+
   const [isDialogHidden, setIsDialogHidden] = useState<boolean>(true);
   const [hasDialogOpened, setHasDialogOpened] = useState<boolean>(false);
 
-  const onDialogDismissed = useCallback((): void => {
+  const onDialogDismissed = (): void => {
     if (addCustomRecordResponse) {
       dispatch(getCustomRecords());
     }
     dispatch(addCustomRecordReset());
     setHasDialogOpened(false);
-    setType(recordTypeOptions[0]);
-    setZone(zoneOptions[0]);
-    setName('');
-    setValue('');
-  }, [addCustomRecordResponse, dispatch, zoneOptions]);
+    resetInputs();
+  };
 
-  const onDialogClose = useCallback(
+  const onDialogClose = useConstCallback(
     (_event: React.MouseEvent<BaseButton, MouseEvent>): void => {
       setIsDialogHidden(true);
-    },
-    []
-  );
-
-  const onTypeChange = useCallback(
-    (
-      _event: React.FormEvent<HTMLDivElement>,
-      option?: IDropdownOption
-    ): void => {
-      if (option) {
-        setType(option);
-      }
-    },
-    []
-  );
-
-  const onZoneChange = useCallback(
-    (
-      _event: React.FormEvent<HTMLDivElement>,
-      option?: IDropdownOption
-    ): void => {
-      if (option) {
-        setZone(option);
-      }
-    },
-    []
-  );
-
-  const onNameChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setName(newValue || '');
-    },
-    []
+    }
   );
 
-  const onValueChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setValue(newValue || '');
-    },
-    []
-  );
+  const onDropdownChange = (name: string) => (
+    _event: React.FormEvent<HTMLDivElement>,
+    option?: IDropdownOption
+  ): void => {
+    if (option) {
+      setInputs({
+        ...inputs,
+        [name]: option,
+      });
+    }
+  };
 
-  const onFormSubmit = useCallback(
-    (event: React.FormEvent<HTMLElement>): void => {
-      event.preventDefault();
-      const qname = name
-        ? `${name}.${zone.key as string}`
-        : (zone.key as string);
-      dispatch(
-        addCustomRecord({
-          qname,
-          rtype: type.key as DNSRecordType,
-          body: value,
-        })
-      );
-    },
-    [dispatch, name, type.key, value, zone.key]
-  );
+  const onFormSubmit = (event: React.FormEvent<HTMLElement>): void => {
+    event.preventDefault();
+    const qname = inputs.name
+      ? `${inputs.name}.${inputs.zone.key as string}`
+      : (inputs.zone.key as string);
+    dispatch(
+      addCustomRecord({
+        qname,
+        rtype: inputs.type.key as DNSRecordType,
+        body: inputs.value,
+      })
+    );
+  };
 
-  const onMessageBarDismiss = useCallback(
+  const onMessageBarDismiss = useConstCallback(
     (
       _event?: React.MouseEvent<HTMLElement | BaseButton | Button, MouseEvent>
     ): void => {
       dispatch(addCustomRecordResetError());
-    },
-    [dispatch]
+    }
   );
 
   useEffect(() => {
@@ -159,9 +146,10 @@ export const CustomDnsAdd: React.FunctionComponent<IStackProps> = ({
     };
   }, [dispatch]);
 
+  console.log('addCustomRecordError', addCustomRecordError);
+
   return (
-    <>
-      {/* TODO: dialog creates a gap when shown*/}
+    <Stack>
       <Dialog
         hidden={isDialogHidden}
         dialogContentProps={{
@@ -180,7 +168,7 @@ export const CustomDnsAdd: React.FunctionComponent<IStackProps> = ({
           <PrimaryButton text="OK" onClick={onDialogClose} />
         </DialogFooter>
       </Dialog>
-      <Stack as="section" gap="l2" horizontal {...props}>
+      <Stack as="section" gap="l2" horizontal={isMinLargeScreen} {...props}>
         <Stack gap="m" grow={1} className={columnClassName}>
           <Text>
             You can set additional DNS records, such as if you have a website
@@ -209,29 +197,33 @@ export const CustomDnsAdd: React.FunctionComponent<IStackProps> = ({
             label="Domain"
             required
             options={zoneOptions}
-            selectedKey={zone.key}
-            onChange={onZoneChange}
+            selectedKey={inputs.zone.key}
+            onChange={onDropdownChange('zone')}
           />
           <TextField
             label="Name"
             placeholder="subdomain"
-            value={name}
-            onChange={onNameChange}
+            value={inputs.name}
+            name="name"
+            onChange={onInputChange}
           />
           <Dropdown
             label="Type"
             required
             options={recordTypeOptions}
-            selectedKey={type.key}
-            onChange={onTypeChange}
+            selectedKey={inputs.type.key}
+            onChange={onDropdownChange('type')}
           />
           <TextField
             label="Value"
             required
-            value={value}
-            onChange={onValueChange}
+            value={inputs.value}
+            name="value"
+            onChange={onInputChange}
           />
-          <MessageBar>{recordTypes[type.key as DNSRecordType].hint}</MessageBar>
+          <MessageBar>
+            {recordTypes[inputs.type.key as DNSRecordType].hint}
+          </MessageBar>
           <Stack horizontal>
             <PrimaryButton type="submit" disabled={isAddingCustomRecord}>
               Save Record
@@ -239,6 +231,6 @@ export const CustomDnsAdd: React.FunctionComponent<IStackProps> = ({
           </Stack>
         </Stack>
       </Stack>
-    </>
+    </Stack>
   );
 };
diff --git a/src/components/ui/CustomDnsRecordsList/CustomDnsRecordActions.tsx b/src/components/ui/CustomDnsRecordsList/CustomDnsRecordActions.tsx
index a5b8ff8..6c75894 100644
--- a/src/components/ui/CustomDnsRecordsList/CustomDnsRecordActions.tsx
+++ b/src/components/ui/CustomDnsRecordsList/CustomDnsRecordActions.tsx
@@ -1,5 +1,6 @@
 import { DialogType, Text } from '@fluentui/react';
-import React, { useCallback } from 'react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   DNSActionType,
@@ -21,18 +22,18 @@ export const CustomDnsRecordActions: React.FunctionComponent = () => {
   } = useSelector((state: RootState) => state.dns);
   const dispatch = useDispatch();
 
-  const onActionDialogDismiss = useCallback((): void => {
+  const onActionDialogDismiss = useConstCallback((): void => {
     dispatch(resetDNSAction());
-  }, [dispatch]);
+  });
 
-  const onActionDialogDismissed = useCallback((): void => {
+  const onActionDialogDismissed = (): void => {
     if (removeCustomRecordResponse) {
       dispatch(getCustomRecords());
     }
     dispatch(removeCustomRecordReset());
-  }, [dispatch, removeCustomRecordResponse]);
+  };
 
-  const onRemoveAliasConfirm = useCallback((): void => {
+  const onRemoveAliasConfirm = (): void => {
     if (dnsAction?.dnsRecord) {
       const { qname, rtype, value: body } = dnsAction.dnsRecord;
       dispatch(
@@ -43,7 +44,7 @@ export const CustomDnsRecordActions: React.FunctionComponent = () => {
         })
       );
     }
-  }, [dispatch, dnsAction]);
+  };
 
   return (
     <ActionConfirmDialog
diff --git a/src/components/ui/CustomDnsRecordsList/CustomDnsRecordsActionsList.tsx b/src/components/ui/CustomDnsRecordsList/CustomDnsRecordsActionsList.tsx
index a445af9..8807125 100644
--- a/src/components/ui/CustomDnsRecordsList/CustomDnsRecordsActionsList.tsx
+++ b/src/components/ui/CustomDnsRecordsList/CustomDnsRecordsActionsList.tsx
@@ -1,6 +1,7 @@
 import { DirectionalHint, IconButton } from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
 import { DNSCustomRecord } from 'mailinabox-api';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useDispatch } from 'react-redux';
 import { DNSActionType, setDNSAction } from '../../../features/dnsSlice';
 
@@ -8,44 +9,41 @@ interface CustomDnsRecordsActionsListProps {
   dnsRecord: DNSCustomRecord;
 }
 
-export const CustomDnsRecordsActionsList: React.FunctionComponent<CustomDnsRecordsActionsListProps> = ({
-  dnsRecord,
-}) => {
-  const dispatch = useDispatch();
-  const doAction = useCallback(
-    (type: DNSActionType): void => {
+export const CustomDnsRecordsActionsList: React.FunctionComponent<CustomDnsRecordsActionsListProps> = React.memo(
+  ({ dnsRecord }) => {
+    const dispatch = useDispatch();
+    const doAction = useConstCallback((type: DNSActionType): void => {
       dispatch(
         setDNSAction({
           dnsRecord,
           type,
         })
       );
-    },
-    [dispatch, dnsRecord]
-  );
-  return (
-    <IconButton
-      menuIconProps={{
-        iconName: 'MoreVertical',
-      }}
-      styles={{
-        menuIcon: {
-          fontWeight: 'bold',
-        },
-      }}
-      role="button"
-      aria-haspopup={true}
-      aria-label="Show actions"
-      menuProps={{
-        directionalHint: DirectionalHint.bottomRightEdge,
-        items: [
-          {
-            key: 'removeDnsRecord' + dnsRecord.qname + dnsRecord.rtype,
-            text: 'Remove',
-            onClick: (): void => doAction(DNSActionType.remove),
+    });
+    return (
+      <IconButton
+        menuIconProps={{
+          iconName: 'MoreVertical',
+        }}
+        styles={{
+          menuIcon: {
+            fontWeight: 'bold',
           },
-        ],
-      }}
-    />
-  );
-};
+        }}
+        role="button"
+        aria-haspopup={true}
+        aria-label="Show actions"
+        menuProps={{
+          directionalHint: DirectionalHint.bottomRightEdge,
+          items: [
+            {
+              key: 'removeDnsRecord' + dnsRecord.qname + dnsRecord.rtype,
+              text: 'Remove',
+              onClick: (): void => doAction(DNSActionType.remove),
+            },
+          ],
+        }}
+      />
+    );
+  }
+);
diff --git a/src/components/ui/CustomDnsRecordsList/CustomDnsRecordsList.tsx b/src/components/ui/CustomDnsRecordsList/CustomDnsRecordsList.tsx
index 63d88ae..9a33895 100644
--- a/src/components/ui/CustomDnsRecordsList/CustomDnsRecordsList.tsx
+++ b/src/components/ui/CustomDnsRecordsList/CustomDnsRecordsList.tsx
@@ -17,9 +17,9 @@ const columns: IColumn[] = [
   {
     key: 'column1',
     name: 'Domain Name',
-    minWidth: 140,
+    minWidth: 200,
     maxWidth: 300,
-    isMultiline: false,
+    isMultiline: true,
     isRowHeader: true,
     fieldName: 'qname',
   },
@@ -27,7 +27,7 @@ const columns: IColumn[] = [
     key: 'column2',
     name: 'Record Type',
     minWidth: 100,
-    maxWidth: 120,
+    maxWidth: 100,
     isMultiline: false,
     onRender: (item: DNSCustomRecord): React.ReactNode => {
       return <Text>{item.rtype}</Text>;
@@ -37,6 +37,7 @@ const columns: IColumn[] = [
     key: 'column3',
     name: 'Value',
     minWidth: 180,
+    isMultiline: true,
     onRender: (item: DNSCustomRecord): React.ReactNode => {
       return <Text>{item.value}</Text>;
     },
diff --git a/src/components/ui/CustomDnsSecondaryNameserver/CustomDnsSecondaryNameserver.tsx b/src/components/ui/CustomDnsSecondaryNameserver/CustomDnsSecondaryNameserver.tsx
index 651039f..ab26aa5 100644
--- a/src/components/ui/CustomDnsSecondaryNameserver/CustomDnsSecondaryNameserver.tsx
+++ b/src/components/ui/CustomDnsSecondaryNameserver/CustomDnsSecondaryNameserver.tsx
@@ -8,12 +8,15 @@ import {
   mergeStyles,
   MessageBarType,
   PrimaryButton,
+  ScreenWidthMinLarge,
   Stack,
   Text,
   TextField,
 } from '@fluentui/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useMediaQuery } from 'react-responsive';
 import {
   addSecondaryNameserver,
   addSecondaryNameserverReset,
@@ -37,52 +40,49 @@ export const CustomDnsSecondaryNameserver: React.FunctionComponent<IStackProps>
     addSecondaryNameserverResponse,
   } = useSelector((state: RootState) => state.dns);
   const dispatch = useDispatch();
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
 
   const [hostname, setHostname] = useState<string>('');
   const [isDialogHidden, setIsDialogHidden] = useState<boolean>(true);
   const [hasDialogOpened, setHasDialogOpened] = useState<boolean>(false);
 
-  const onDialogDismissed = useCallback((): void => {
+  const onDialogDismissed = (): void => {
     if (addSecondaryNameserverResponse) {
       dispatch(getSecondaryNameserver());
     }
     dispatch(addSecondaryNameserverReset());
-  }, [addSecondaryNameserverResponse, dispatch]);
+  };
 
-  const onDialogClose = useCallback(
+  const onDialogClose = useConstCallback(
     (_event: React.MouseEvent<BaseButton, MouseEvent>): void => {
       setIsDialogHidden(true);
-    },
-    []
+    }
   );
 
-  const onErrorMessageBarDismiss = useCallback(
+  const onErrorMessageBarDismiss = useConstCallback(
     (
       _event?: React.MouseEvent<HTMLElement | BaseButton | Button, MouseEvent>
     ): void => {
       dispatch(addSecondaryNameserverResetError());
-    },
-    [dispatch]
+    }
   );
 
-  const onHostnameChange = useCallback(
+  const onHostnameChange = useConstCallback(
     (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
       setHostname(newValue || '');
-    },
-    []
+    }
   );
 
-  const onFormSubmit = useCallback(
-    (event: React.FormEvent<HTMLElement>): void => {
-      event.preventDefault();
-      dispatch(
-        addSecondaryNameserver({
-          hostnames: hostname,
-        })
-      );
-    },
-    [dispatch, hostname]
-  );
+  const onFormSubmit = (event: React.FormEvent<HTMLElement>): void => {
+    event.preventDefault();
+    dispatch(
+      addSecondaryNameserver({
+        hostnames: hostname,
+      })
+    );
+  };
 
   useEffect(() => {
     if (addSecondaryNameserverResponse && isDialogHidden && !hasDialogOpened) {
@@ -103,7 +103,7 @@ export const CustomDnsSecondaryNameserver: React.FunctionComponent<IStackProps>
   }, [dispatch]);
 
   return (
-    <Stack as="section" gap="l2" horizontal {...props}>
+    <Stack as="section" gap="l2" horizontal={isMinLargeScreen} {...props}>
       <Dialog
         hidden={isDialogHidden}
         dialogContentProps={{
diff --git a/src/components/ui/DnsDumpList/DnsDumpList.tsx b/src/components/ui/DnsDumpList/DnsDumpList.tsx
index 3e092e5..519c598 100644
--- a/src/components/ui/DnsDumpList/DnsDumpList.tsx
+++ b/src/components/ui/DnsDumpList/DnsDumpList.tsx
@@ -17,7 +17,7 @@ const columns: IColumn[] = [
   {
     key: 'column1',
     name: 'Qname',
-    minWidth: 140,
+    minWidth: 260,
     maxWidth: 300,
     isMultiline: false,
     isRowHeader: true,
@@ -40,7 +40,7 @@ const columns: IColumn[] = [
     key: 'column3',
     name: 'Value',
     isMultiline: true,
-    minWidth: 180,
+    minWidth: 280,
     isPadded: true,
     fieldName: 'value',
     onRender: (item: DNSCustomRecord): React.ReactNode => {
diff --git a/src/components/ui/DnsZoneFileGenerator/DnsZoneFileGenerator.tsx b/src/components/ui/DnsZoneFileGenerator/DnsZoneFileGenerator.tsx
index 0b137ce..03ace44 100644
--- a/src/components/ui/DnsZoneFileGenerator/DnsZoneFileGenerator.tsx
+++ b/src/components/ui/DnsZoneFileGenerator/DnsZoneFileGenerator.tsx
@@ -6,11 +6,13 @@ import {
   Label,
   mergeStyles,
   PrimaryButton,
+  ScreenWidthMinLarge,
   Stack,
   Text,
   TextField,
 } from '@fluentui/react';
 import React from 'react';
+import { useMediaQuery } from 'react-responsive';
 import { Pre } from '../Pre/Pre';
 
 const columnClassName = mergeStyles({
@@ -76,8 +78,12 @@ _dmarc.www	IN	TXT	"v=DMARC1; p=reject"`;
 export const DnsZoneFileGenerator: React.FunctionComponent<IStackProps> = ({
   ...props
 }) => {
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
+
   return (
-    <Stack as="section" gap="l2" horizontal {...props}>
+    <Stack as="section" gap="l2" horizontal={isMinLargeScreen} {...props}>
       <Stack gap="m" grow={1} className={columnClassName}>
         <Text>Use this tool to generate zone files.</Text>
         <Dropdown
diff --git a/src/components/ui/GroupedDetailsList/GroupedDetailsList.tsx b/src/components/ui/GroupedDetailsList/GroupedDetailsList.tsx
index fd533e6..7a0a02d 100644
--- a/src/components/ui/GroupedDetailsList/GroupedDetailsList.tsx
+++ b/src/components/ui/GroupedDetailsList/GroupedDetailsList.tsx
@@ -16,20 +16,43 @@ import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
 
 const onRenderRow = (props?: IDetailsRowProps): JSX.Element | null => {
   if (props) {
-    return (
-      <DetailsRow
-        {...props}
-        // styles={{
-        //   root: {
-        //     animation: 'none',
-        //   },
-        // }}
-      />
-    );
+    return <DetailsRow {...props} />;
   }
   return null;
 };
 
+interface GroupHeader {
+  props: IDetailsGroupDividerProps;
+  defaultRender: IRenderFunction<IGroupHeaderProps>;
+  onToggleGroupCollapse: (key: string, isCollapsed: boolean) => void;
+}
+
+const GroupHeader: React.FunctionComponent<GroupHeader> = React.memo(
+  ({ props, defaultRender, onToggleGroupCollapse }) => {
+    const toggleCollapse = (): void => {
+      if (props?.group) {
+        onToggleGroupCollapse(props.group.key, !props.group.isCollapsed);
+      }
+    };
+    const onHeaderClick = (
+      event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ): void => {
+      if (props && props.group) {
+        event.preventDefault();
+        toggleCollapse();
+      }
+    };
+    return (
+      <div onClick={onHeaderClick}>
+        {defaultRender({
+          ...props,
+          onToggleCollapse: toggleCollapse,
+        })}
+      </div>
+    );
+  }
+);
+
 interface GroupedDetailsListProps {
   openedGroupsState: [string[], Dispatch<SetStateAction<string[]>>];
   groups: IGroup[];
@@ -44,7 +67,7 @@ export const GroupedDetailsList: React.FunctionComponent<
   );
 
   const onToggleGroupCollapse = useCallback(
-    (groupKey: string, collapse: boolean) => {
+    (groupKey: string, collapse: boolean): void => {
       if (collapse) {
         openedGroups.splice(openedGroups.indexOf(groupKey), 1);
       } else {
@@ -55,7 +78,7 @@ export const GroupedDetailsList: React.FunctionComponent<
     [openedGroups, setOpenedGroups]
   );
 
-  const onToggleGroupCollapseAll = useCallback((): void => {
+  const onToggleGroupCollapseAll = (): void => {
     const shouldCollapse =
       hasExpandedAllGroups || openedGroups.length === groups.length;
     if (shouldCollapse) {
@@ -65,61 +88,40 @@ export const GroupedDetailsList: React.FunctionComponent<
       setOpenedGroups(groups.map(({ key }) => key));
       setHasExpandedAllGroups(true);
     }
-  }, [groups, hasExpandedAllGroups, openedGroups.length, setOpenedGroups]);
+  };
 
-  const onRenderDetailsHeader = useCallback(
-    (
-      detailsHeaderProps?: IDetailsHeaderProps,
-      defaultRender?: IRenderFunction<IDetailsHeaderProps>
-    ): JSX.Element | null => {
-      return (
-        defaultRender?.({
-          ...detailsHeaderProps,
-          onToggleCollapseAll: onToggleGroupCollapseAll,
-          styles: {
-            root: {
-              paddingTop: 0,
-            },
+  const onRenderDetailsHeader = (
+    detailsHeaderProps?: IDetailsHeaderProps,
+    defaultRender?: IRenderFunction<IDetailsHeaderProps>
+  ): JSX.Element | null => {
+    return (
+      defaultRender?.({
+        ...detailsHeaderProps,
+        onToggleCollapseAll: onToggleGroupCollapseAll,
+        styles: {
+          root: {
+            paddingTop: 0,
           },
-        } as IDetailsHeaderProps) || null
-      );
-    },
-    [onToggleGroupCollapseAll]
-  );
+        },
+      } as IDetailsHeaderProps) || null
+    );
+  };
 
-  const onRenderGroupHeader = useCallback(
-    (
-      props?: IDetailsGroupDividerProps,
-      defaultRender?: IRenderFunction<IGroupHeaderProps>
-    ): JSX.Element | null => {
-      if (defaultRender) {
-        const toggleCollapse = (): void => {
-          if (props?.group) {
-            onToggleGroupCollapse(props.group.key, !props.group.isCollapsed);
-          }
-        };
-        return (
-          <div
-            onClick={(
-              event: React.MouseEvent<HTMLDivElement, MouseEvent>
-            ): void => {
-              if (props && props.group) {
-                event.preventDefault();
-                toggleCollapse();
-              }
-            }}
-          >
-            {defaultRender({
-              ...props,
-              onToggleCollapse: toggleCollapse,
-            })}
-          </div>
-        );
-      }
-      return null;
-    },
-    [onToggleGroupCollapse]
-  );
+  const onRenderGroupHeader = (
+    props?: IDetailsGroupDividerProps,
+    defaultRender?: IRenderFunction<IGroupHeaderProps>
+  ): JSX.Element | null => {
+    if (defaultRender && props) {
+      return (
+        <GroupHeader
+          props={props}
+          defaultRender={defaultRender}
+          onToggleGroupCollapse={onToggleGroupCollapse}
+        />
+      );
+    }
+    return null;
+  };
 
   const groupsWithCollapsedState = groups.map((group) => ({
     ...group,
diff --git a/src/components/ui/InstallCertificate/InstallCertificate.tsx b/src/components/ui/InstallCertificate/InstallCertificate.tsx
index ead3b5b..eaced7a 100644
--- a/src/components/ui/InstallCertificate/InstallCertificate.tsx
+++ b/src/components/ui/InstallCertificate/InstallCertificate.tsx
@@ -6,14 +6,17 @@ import {
   IStackProps,
   mergeStyles,
   MessageBarType,
+  ScreenWidthMinLarge,
   Stack,
   VirtualizedComboBox,
 } from '@fluentui/react';
 import { getCodeList } from 'country-list';
 import { SSLStatus } from 'mailinabox-api';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useMediaQuery } from 'react-responsive';
 import { generateCSRReset } from '../../../features/sslSlice';
+import { useFormInputs } from '../../../forms/useFormInputs';
 import { RootState } from '../../../store';
 import { MessageBar } from '../MessageBar/MessageBar';
 import { InstallCertificateComboBoxLabel } from './InstallCertificateComboBoxLabel';
@@ -54,35 +57,44 @@ const onRenderComboBoxLabel = (calloutText: string) => (
     />
   ) : null;
 
+type FormState = {
+  domain: string;
+  country: string;
+};
+
+const initialFormState: FormState = {
+  domain: '',
+  country: '',
+};
+
 export const InstallCertificate: React.FunctionComponent<
   IStackProps & {
     items: Array<SSLStatus>;
   }
 > = ({ items, ...props }) => {
   const { sslAction } = useSelector((state: RootState) => state.ssl);
+  const { inputs, setInputs } = useFormInputs<FormState>({
+    ...initialFormState,
+    domain: sslAction?.sslStatus?.domain || '',
+  });
   const dispatch = useDispatch();
-  const [selectedDomain, setSelectedDomain] = useState<IComboBoxOption>({
-    key: sslAction?.sslStatus?.domain || '',
-    text: sslAction?.sslStatus?.domain || '',
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
   });
-  const [selectedCountry, setSelectedCountry] = useState<IComboBoxOption>();
 
-  const onDomainChange = useCallback(
-    (_event: React.FormEvent<IComboBox>, option?: IComboBoxOption): void => {
-      if (option) {
-        dispatch(generateCSRReset());
-        setSelectedDomain(option);
-      }
-    },
-    [dispatch]
-  );
-  const onCountryChange = useCallback(
-    (_event: React.FormEvent<IComboBox>, option?: IComboBoxOption): void => {
+  const onComboboxChange = (key: keyof FormState) => (
+    _event: React.FormEvent<IComboBox>,
+    option?: IComboBoxOption
+  ): void => {
+    if (option) {
       dispatch(generateCSRReset());
-      setSelectedCountry(option);
-    },
-    [dispatch]
-  );
+      setInputs({
+        ...inputs,
+        [key]: option,
+      });
+    }
+  };
+
   const onDomainRenderLabel = useMemo(
     () =>
       onRenderComboBoxLabel(
@@ -90,6 +102,7 @@ export const InstallCertificate: React.FunctionComponent<
       ),
     []
   );
+
   const onCountryRenderLabel = useMemo(
     () =>
       onRenderComboBoxLabel(
@@ -100,12 +113,16 @@ export const InstallCertificate: React.FunctionComponent<
 
   return (
     <Stack as="section" gap="m" {...props}>
-      <MessageBar messageBarType={MessageBarType.info} isMultiline>
+      <MessageBar
+        messageBarType={MessageBarType.info}
+        isMultiline={isMinLargeScreen}
+        truncated={!isMinLargeScreen}
+      >
         If you don't want to use our automatic Let's Encrypt integration, you
         can give any other certificate provider a try. You can generate the
         needed CSR below.
       </MessageBar>
-      <Stack horizontal gap="l2">
+      <Stack horizontal={isMinLargeScreen} gap={isMinLargeScreen ? 'l2' : 'm'}>
         <Stack gap="m" grow={1} className={columnClassName}>
           <ComboBox
             placeholder="Select a domain"
@@ -117,12 +134,12 @@ export const InstallCertificate: React.FunctionComponent<
             required
             allowFreeform
             autoComplete="on"
-            selectedKey={selectedDomain?.key}
+            selectedKey={inputs.domain}
             onRenderLabel={onDomainRenderLabel}
-            onChange={onDomainChange}
+            onChange={onComboboxChange('domain')}
             styles={comboBoxStyles}
           />
-          {selectedDomain?.key && (
+          {inputs.domain && (
             <VirtualizedComboBox
               placeholder="Select a country"
               label="What country are you in?"
@@ -130,19 +147,19 @@ export const InstallCertificate: React.FunctionComponent<
               onRenderLabel={onCountryRenderLabel}
               allowFreeform
               autoComplete="on"
-              selectedKey={selectedCountry?.key}
-              onChange={onCountryChange}
+              selectedKey={inputs.country}
+              onChange={onComboboxChange('country')}
               styles={comboBoxStyles}
               dropdownMaxWidth={300}
               useComboBoxAsMenuWidth
             />
           )}
         </Stack>
-        <Stack gap="m" grow={2} className={columnClassName}>
-          {selectedDomain && selectedCountry && (
+        <Stack grow={2} className={columnClassName}>
+          {inputs.domain && inputs.country && (
             <InstallCertificateWithCSR
-              domain={selectedDomain.key as string}
-              countryCode={selectedCountry.key as string}
+              domain={inputs.domain as string}
+              countryCode={inputs.country as string}
             />
           )}
         </Stack>
diff --git a/src/components/ui/InstallCertificate/InstallCertificateWithCSR.tsx b/src/components/ui/InstallCertificate/InstallCertificateWithCSR.tsx
index 8692c61..2e77afa 100644
--- a/src/components/ui/InstallCertificate/InstallCertificateWithCSR.tsx
+++ b/src/components/ui/InstallCertificate/InstallCertificateWithCSR.tsx
@@ -5,6 +5,7 @@ import {
   DialogType,
   IDialogContentProps,
   IModalProps,
+  IStackProps,
   MessageBar,
   MessageBarType,
   PrimaryButton,
@@ -13,8 +14,9 @@ import {
   Text,
   TextField,
 } from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
 import { SSLCertificateInstallRequest } from 'mailinabox-api';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   generateCSR,
@@ -47,10 +49,9 @@ const defaultInstallCertificateRequest: SSLCertificateInstallRequest = {
 
 const installOkRegEx = /^OK($|\n)/;
 
-export const InstallCertificateWithCSR: React.FunctionComponent<SSLCertificateInstallProps> = ({
-  domain,
-  countryCode,
-}) => {
+export const InstallCertificateWithCSR: React.FunctionComponent<
+  IStackProps & SSLCertificateInstallProps
+> = ({ domain, countryCode, ...props }) => {
   const {
     isGeneratingCSR,
     generateCSRError,
@@ -70,14 +71,13 @@ export const InstallCertificateWithCSR: React.FunctionComponent<SSLCertificateIn
   const [isDialogHidden, setIsDialogHidden] = useState<boolean>(true);
   const [hasDialogOpened, setHasDialogOpened] = useState<boolean>(false);
 
-  const onDialogClose = useCallback(
+  const onDialogClose = useConstCallback(
     (_event: React.MouseEvent<BaseButton, MouseEvent>): void => {
       setIsDialogHidden(true);
-    },
-    []
+    }
   );
 
-  const onDialogDismissed = useCallback((): void => {
+  const onDialogDismissed = (): void => {
     const installCertificateSuccess = installOkRegEx.test(
       installCertificateResponse || ''
     );
@@ -90,35 +90,32 @@ export const InstallCertificateWithCSR: React.FunctionComponent<SSLCertificateIn
     }
     dispatch(installCertificateReset());
     setHasDialogOpened(false);
-  }, [dispatch, domain, installCertificateResponse]);
-
-  const onCertChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setInstallCertificateRequest({
-        ...installCertificateRequest,
-        cert: newValue ?? '',
-      });
-    },
-    [installCertificateRequest]
-  );
-
-  const onChainChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setInstallCertificateRequest({
-        ...installCertificateRequest,
-        chain: newValue ?? '',
-      });
-    },
-    [installCertificateRequest]
-  );
-
-  const onFormSubmit = useCallback(
-    (event: React.FormEvent<HTMLElement>): void => {
-      event.preventDefault();
-      dispatch(installCertificate(installCertificateRequest));
-    },
-    [dispatch, installCertificateRequest]
-  );
+  };
+
+  const onCertChange = (
+    _event: React.FormEvent<HTMLElement>,
+    newValue?: string
+  ): void => {
+    setInstallCertificateRequest({
+      ...installCertificateRequest,
+      cert: newValue ?? '',
+    });
+  };
+
+  const onChainChange = (
+    _event: React.FormEvent<HTMLElement>,
+    newValue?: string
+  ): void => {
+    setInstallCertificateRequest({
+      ...installCertificateRequest,
+      chain: newValue ?? '',
+    });
+  };
+
+  const onFormSubmit = (event: React.FormEvent<HTMLElement>): void => {
+    event.preventDefault();
+    dispatch(installCertificate(installCertificateRequest));
+  };
 
   useEffect(() => {
     if (installCertificateResponse && isDialogHidden && !hasDialogOpened) {
@@ -143,7 +140,7 @@ export const InstallCertificateWithCSR: React.FunctionComponent<SSLCertificateIn
     : installCertificateResponse;
 
   return (
-    <Stack>
+    <Stack {...props}>
       <Dialog
         hidden={isDialogHidden}
         dialogContentProps={dialogContentProps}
diff --git a/src/components/ui/LoginForm/LoginForm.tsx b/src/components/ui/LoginForm/LoginForm.tsx
index e1cb1cd..7059516 100644
--- a/src/components/ui/LoginForm/LoginForm.tsx
+++ b/src/components/ui/LoginForm/LoginForm.tsx
@@ -11,16 +11,29 @@ import {
   TextField,
 } from '@fluentui/react';
 import { MeAuthStatus, MeResponse } from 'mailinabox-api';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { userApi } from '../../../api';
 import { useRequest } from '../../../api/useRequest';
 import { updateAuth } from '../../../features/authSlice';
+import { useFormInputs } from '../../../forms/useFormInputs';
 import { RootState } from '../../../store';
 import { MainRoute } from '../../routes/MainRoute/MainRoute';
 import { MessageBar } from '../MessageBar/MessageBar';
 
+type FormState = {
+  email: string;
+  password: string;
+  remember: boolean;
+};
+
+const initialFormState: FormState = {
+  email: '',
+  password: '',
+  remember: true,
+};
+
 export const LoginForm: React.FunctionComponent = () => {
   const [
     checkLogin,
@@ -37,57 +50,43 @@ export const LoginForm: React.FunctionComponent = () => {
       }
     }
   );
+  const { inputs, setInputs, onInputChange } = useFormInputs<FormState>(
+    initialFormState
+  );
   const { isAuthenticated, error: authError } = useSelector(
     (state: RootState) => state.auth
   );
   const dispatch = useDispatch();
   const history = useHistory();
 
-  const [remember, setRemember] = useState(true);
-  const [email, setEmail] = useState<string>('');
-  const [password, setPassword] = useState<string>('');
+  const onRememberChange = (
+    _event?: React.FormEvent<HTMLElement>,
+    checked?: boolean
+  ): void => {
+    setInputs({
+      ...inputs,
+      remember: !!checked,
+    });
+  };
 
-  const onRememberChange = useCallback(
-    (_event?: React.FormEvent<HTMLElement>, checked?: boolean): void => {
-      setRemember(!!checked);
-    },
-    []
-  );
-  const onEmailChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setEmail(newValue ?? '');
-    },
-    []
-  );
-  const onPasswordChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setPassword(newValue ?? '');
-    },
-    []
-  );
-  const onMessageBarDismiss = useCallback(
-    (
-      _event?: React.MouseEvent<HTMLElement | BaseButton | Button, MouseEvent>
-    ): void => {
-      setError(null);
-      dispatch(
-        updateAuth({
-          username: email,
-          password,
-          error: null,
-        })
-      );
-    },
-    [dispatch, email, password, setError]
-  );
-  const onFormSubmit = useCallback(
-    (event: React.FormEvent<HTMLElement>): void => {
-      event.preventDefault();
-      setError(null);
-      checkLogin();
-    },
-    [checkLogin, setError]
-  );
+  const onMessageBarDismiss = (
+    _event?: React.MouseEvent<HTMLElement | BaseButton | Button, MouseEvent>
+  ): void => {
+    setError(null);
+    dispatch(
+      updateAuth({
+        username: inputs.email,
+        password: inputs.password,
+        error: null,
+      })
+    );
+  };
+
+  const onFormSubmit = (event: React.FormEvent<HTMLElement>): void => {
+    event.preventDefault();
+    setError(null);
+    checkLogin();
+  };
 
   useEffect(() => {
     if (isAuthenticated) {
@@ -95,14 +94,21 @@ export const LoginForm: React.FunctionComponent = () => {
     } else {
       dispatch(
         updateAuth({
-          username: email,
-          password,
+          username: inputs.email,
+          password: inputs.password,
           isAuthenticated: false,
           error: authError,
         })
       );
     }
-  }, [authError, dispatch, email, history, isAuthenticated, password]);
+  }, [
+    authError,
+    dispatch,
+    history,
+    inputs.email,
+    inputs.password,
+    isAuthenticated,
+  ]);
 
   useEffect(() => {
     if (response) {
@@ -112,11 +118,11 @@ export const LoginForm: React.FunctionComponent = () => {
           password: response.apiKey,
           isAuthenticated: true,
           authError: null,
-          remember,
+          remember: inputs.remember,
         })
       );
     }
-  }, [dispatch, remember, response]);
+  }, [dispatch, inputs.remember, response]);
 
   const error = requestError || authError;
 
@@ -135,22 +141,24 @@ export const LoginForm: React.FunctionComponent = () => {
       <Stack gap="m">
         <TextField
           label="Email"
-          value={email}
+          value={inputs.email}
           required
           type="email"
+          name="email"
           autoFocus
-          onChange={onEmailChange}
+          onChange={onInputChange}
         />
         <TextField
           label="Password"
-          value={password}
+          value={inputs.password}
+          name="password"
           required
           type="password"
-          onChange={onPasswordChange}
+          onChange={onInputChange}
         />
         <Checkbox
           label="Remember me"
-          checked={remember}
+          checked={inputs.remember}
           onChange={onRememberChange}
         />
       </Stack>
diff --git a/src/components/ui/MailAliasAdd/MailAliasAdd.tsx b/src/components/ui/MailAliasAdd/MailAliasAdd.tsx
index 5544f1a..d6b5e21 100644
--- a/src/components/ui/MailAliasAdd/MailAliasAdd.tsx
+++ b/src/components/ui/MailAliasAdd/MailAliasAdd.tsx
@@ -13,7 +13,8 @@ import {
   Stack,
   Text,
 } from '@fluentui/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useMediaQuery } from 'react-responsive';
 import { getAliases, upsertAliasReset } from '../../../features/aliasesSlice';
@@ -57,16 +58,15 @@ export const MailAliasAdd: React.FunctionComponent<IStackProps> = ({
     gap: isMinLargeScreen ? 'l2' : 'm',
   };
 
-  const onDialogDismissed = useCallback((): void => {
+  const onDialogDismissed = useConstCallback((): void => {
     dispatch(upsertAliasReset());
     setHasDialogOpened(false);
-  }, [dispatch]);
+  });
 
-  const onDialogClose = useCallback(
+  const onDialogClose = useConstCallback(
     (_event: React.MouseEvent<BaseButton, MouseEvent>): void => {
       setIsDialogHidden(true);
-    },
-    []
+    }
   );
 
   useEffect(() => {
diff --git a/src/components/ui/MailAliasUpsert/MailAliasUpsert.tsx b/src/components/ui/MailAliasUpsert/MailAliasUpsert.tsx
index 988c130..0e8a92d 100644
--- a/src/components/ui/MailAliasUpsert/MailAliasUpsert.tsx
+++ b/src/components/ui/MailAliasUpsert/MailAliasUpsert.tsx
@@ -13,13 +13,15 @@ import {
   Stack,
   TextField,
 } from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
 import { UpsertMailAliasRequest } from 'mailinabox-api';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   upsertAlias,
   upsertAliasResetError,
 } from '../../../features/aliasesSlice';
+import { useFormInputs } from '../../../forms/useFormInputs';
 import { RootState } from '../../../store';
 import { MessageBar } from '../MessageBar/MessageBar';
 import {
@@ -47,7 +49,7 @@ function getInitialAliasType({
   }
 }
 
-const defaultAlias: UpsertMailAliasRequest = {
+const initialFormState: UpsertMailAliasRequest = {
   address: '',
   forwardsTo: '',
   permittedSenders: '',
@@ -60,7 +62,7 @@ interface MailAliasUpsertProps {
 
 export const MailAliasUpsert: React.FunctionComponent<MailAliasUpsertProps> = ({
   children,
-  updateAlias = defaultAlias,
+  updateAlias = initialFormState,
 }) => {
   const { upsertAliasResponse, upsertAliasError } = useSelector(
     (state: RootState) => state.aliases
@@ -73,7 +75,9 @@ export const MailAliasUpsert: React.FunctionComponent<MailAliasUpsertProps> = ({
   const [senderType, setSenderType] = useState<SenderType>(
     updateAlias.permittedSenders ? SenderType.manual : SenderType.any
   );
-  const [alias, setAlias] = useState<UpsertMailAliasRequest>(updateAlias);
+  const { inputs: alias, onInputChange, resetInputs } = useFormInputs<
+    UpsertMailAliasRequest
+  >(updateAlias);
 
   const senderTypeOptions: IChoiceGroupOption[] = [
     { key: SenderType.any, text: formData[aliasType].permittedSenders.any },
@@ -83,7 +87,7 @@ export const MailAliasUpsert: React.FunctionComponent<MailAliasUpsertProps> = ({
     },
   ];
 
-  const onSenderTypeChange = useCallback(
+  const onSenderTypeChange = useConstCallback(
     (
       _event?: React.FormEvent<HTMLElement | HTMLInputElement>,
       option?: IChoiceGroupOption
@@ -91,55 +95,35 @@ export const MailAliasUpsert: React.FunctionComponent<MailAliasUpsertProps> = ({
       if (option) {
         setSenderType(option.key as SenderType);
       }
-    },
-    [setSenderType]
+    }
   );
 
-  const onPivotLinkClick = useCallback(
+  const onPivotLinkClick = useConstCallback(
     (item?: PivotItem, ev?: React.MouseEvent<HTMLElement, MouseEvent>) => {
       if (item && item.props && item.props.itemKey) {
         setAliasType(item.props.itemKey as AliasType);
       }
-    },
-    [setAliasType]
-  );
-
-  const onFieldChange = useCallback(
-    (
-      event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-      newValue?: string
-    ): void => {
-      setAlias({
-        ...alias,
-        [(event.target as HTMLInputElement | HTMLTextAreaElement).name]:
-          newValue || '',
-      });
-    },
-    [alias]
+    }
   );
 
-  const onErrorMessageBarDismiss = useCallback(
+  const onErrorMessageBarDismiss = useConstCallback(
     (
       _event?: React.MouseEvent<HTMLElement | BaseButton | Button, MouseEvent>
     ): void => {
       dispatch(upsertAliasResetError());
-    },
-    [dispatch]
+    }
   );
 
-  const onFormSubmit = useCallback(
-    (event: React.FormEvent<HTMLElement>): void => {
-      event.preventDefault();
-      dispatch(
-        upsertAlias({
-          ...alias,
-          permittedSenders:
-            senderType === SenderType.manual ? alias.permittedSenders : '',
-        })
-      );
-    },
-    [alias, dispatch, senderType]
-  );
+  const onFormSubmit = (event: React.FormEvent<HTMLElement>): void => {
+    event.preventDefault();
+    dispatch(
+      upsertAlias({
+        ...alias,
+        permittedSenders:
+          senderType === SenderType.manual ? alias.permittedSenders : '',
+      })
+    );
+  };
 
   const onForwardsToRenderLabel = useMemo(
     () =>
@@ -157,9 +141,9 @@ export const MailAliasUpsert: React.FunctionComponent<MailAliasUpsertProps> = ({
 
   useEffect(() => {
     if (upsertAliasResponse) {
-      setAlias(defaultAlias);
+      resetInputs();
     }
-  }, [dispatch, upsertAliasResponse]);
+  }, [resetInputs, upsertAliasResponse]);
 
   return (
     <Stack
@@ -215,7 +199,7 @@ export const MailAliasUpsert: React.FunctionComponent<MailAliasUpsertProps> = ({
         placeholder={formData[aliasType].alias.placeholder}
         description={formData[aliasType].alias.info}
         styles={{ description: { ...theme.fonts.small } }}
-        onChange={onFieldChange}
+        onChange={onInputChange}
         name="address"
         value={alias.address}
         autoFocus={!updateAlias.address}
@@ -233,7 +217,7 @@ export const MailAliasUpsert: React.FunctionComponent<MailAliasUpsertProps> = ({
           ...textfieldWithLabelInfoStyles,
         }}
         name="forwardsTo"
-        onChange={onFieldChange}
+        onChange={onInputChange}
         value={alias.forwardsTo}
         onRenderLabel={onForwardsToRenderLabel}
         autoFocus={!!updateAlias.address}
@@ -252,7 +236,7 @@ export const MailAliasUpsert: React.FunctionComponent<MailAliasUpsertProps> = ({
           required
           name="permittedSenders"
           placeholder={formData[aliasType].permittedSenders.placeholder}
-          onChange={onFieldChange}
+          onChange={onInputChange}
           value={alias.permittedSenders ?? ''}
           styles={{
             description: { ...theme.fonts.small },
diff --git a/src/components/ui/MailAliases/MailAliases.tsx b/src/components/ui/MailAliases/MailAliases.tsx
index a429a97..ccee775 100644
--- a/src/components/ui/MailAliases/MailAliases.tsx
+++ b/src/components/ui/MailAliases/MailAliases.tsx
@@ -1,13 +1,6 @@
-import {
-  MessageBar,
-  MessageBarType,
-  PivotItem,
-  PivotLinkSize,
-  ScreenWidthMinLarge,
-} from '@fluentui/react';
+import { MessageBar, MessageBarType } from '@fluentui/react';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useMediaQuery } from 'react-responsive';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import { getAliases } from '../../../features/aliasesSlice';
 import { RootState } from '../../../store';
@@ -24,13 +17,17 @@ export const MailAliases: React.FunctionComponent = () => {
   const openedGroupsState = useState<string[]>([]);
   const dispatch = useDispatch();
   const { path, url } = useRouteMatch();
-  const isMinLargeScreen = useMediaQuery({
-    minWidth: ScreenWidthMinLarge,
-  });
 
-  const pivotProps = {
-    linkSize: isMinLargeScreen ? PivotLinkSize.large : PivotLinkSize.normal,
-  };
+  const pivotItems = [
+    {
+      itemKey: url,
+      headerText: 'Mail Aliases',
+    },
+    {
+      itemKey: `${url}/add`,
+      headerText: 'Add a Mail Alias',
+    },
+  ];
 
   useEffect(() => {
     if (!aliases.length) {
@@ -39,10 +36,7 @@ export const MailAliases: React.FunctionComponent = () => {
   }, [aliases.length, dispatch]);
   return (
     <>
-      <PivotRoutes {...pivotProps}>
-        <PivotItem itemKey={url} headerText="Mail Aliases" />
-        <PivotItem itemKey={`${url}/add`} headerText="Add a Mail Alias" />
-      </PivotRoutes>
+      <PivotRoutes items={pivotItems} />
       <Switch>
         <Route exact path={path}>
           <LoadingOverlayContainer>
diff --git a/src/components/ui/MailAliasesList/MailAliasActions.tsx b/src/components/ui/MailAliasesList/MailAliasActions.tsx
index ec7a772..b596a20 100644
--- a/src/components/ui/MailAliasesList/MailAliasActions.tsx
+++ b/src/components/ui/MailAliasesList/MailAliasActions.tsx
@@ -1,5 +1,6 @@
 import { DialogType, Text } from '@fluentui/react';
-import React, { useCallback } from 'react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   AliasActionType,
@@ -24,29 +25,29 @@ export const MailAliasActions: React.FunctionComponent = () => {
 
   const dispatch = useDispatch();
 
-  const onActionDialogDismiss = useCallback((): void => {
+  const onActionDialogDismiss = useConstCallback((): void => {
     dispatch(resetAliasAction());
-  }, [dispatch]);
+  });
 
-  const onConfirmDialogDismissed = useCallback((): void => {
+  const onConfirmDialogDismissed = (): void => {
     if (removeAliasResponse) {
       dispatch(getAliases());
     }
     dispatch(removeAliasReset());
-  }, [dispatch, removeAliasResponse]);
+  };
 
-  const onUpdateAliasDialogDismissed = useCallback((): void => {
+  const onUpdateAliasDialogDismissed = (): void => {
     if (upsertAliasResponse) {
       dispatch(getAliases());
     }
     dispatch(upsertAliasReset());
-  }, [dispatch, upsertAliasResponse]);
+  };
 
-  const onRemoveAliasConfirm = useCallback((): void => {
+  const onRemoveAliasConfirm = (): void => {
     if (aliasAction?.alias) {
       dispatch(removeAlias(aliasAction?.alias.address));
     }
-  }, [aliasAction, dispatch]);
+  };
 
   return (
     <>
diff --git a/src/components/ui/MailAliasesList/MailAliasActionsList.tsx b/src/components/ui/MailAliasesList/MailAliasActionsList.tsx
index decf269..8b25e9f 100644
--- a/src/components/ui/MailAliasesList/MailAliasActionsList.tsx
+++ b/src/components/ui/MailAliasesList/MailAliasActionsList.tsx
@@ -1,6 +1,7 @@
 import { DirectionalHint, IconButton } from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
 import { MailAlias } from 'mailinabox-api';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useDispatch } from 'react-redux';
 import {
   AliasActionType,
@@ -11,49 +12,46 @@ interface MailAliasActionsListProps {
   alias: MailAlias;
 }
 
-export const MailAliasActionsList: React.FunctionComponent<MailAliasActionsListProps> = ({
-  alias,
-}) => {
-  const dispatch = useDispatch();
-  const doAction = useCallback(
-    (type: AliasActionType): void => {
+export const MailAliasActionsList: React.FunctionComponent<MailAliasActionsListProps> = React.memo(
+  ({ alias }) => {
+    const dispatch = useDispatch();
+    const doAction = useConstCallback((type: AliasActionType): void => {
       dispatch(
         setAliasAction({
           alias,
           type,
         })
       );
-    },
-    [dispatch, alias]
-  );
-  return (
-    <IconButton
-      menuIconProps={{
-        iconName: 'MoreVertical',
-      }}
-      styles={{
-        menuIcon: {
-          fontWeight: 'bold',
-        },
-      }}
-      role="button"
-      aria-haspopup={true}
-      aria-label="Show actions"
-      menuProps={{
-        directionalHint: DirectionalHint.bottomRightEdge,
-        items: [
-          {
-            key: 'updatealias' + alias.address,
-            text: 'Update',
-            onClick: (): void => doAction(AliasActionType.update),
+    });
+    return (
+      <IconButton
+        menuIconProps={{
+          iconName: 'MoreVertical',
+        }}
+        styles={{
+          menuIcon: {
+            fontWeight: 'bold',
           },
-          {
-            key: 'removeealias' + alias.address,
-            text: 'Remove',
-            onClick: (): void => doAction(AliasActionType.remove),
-          },
-        ],
-      }}
-    />
-  );
-};
+        }}
+        role="button"
+        aria-haspopup={true}
+        aria-label="Show actions"
+        menuProps={{
+          directionalHint: DirectionalHint.bottomRightEdge,
+          items: [
+            {
+              key: 'updatealias' + alias.address,
+              text: 'Update',
+              onClick: (): void => doAction(AliasActionType.update),
+            },
+            {
+              key: 'removeealias' + alias.address,
+              text: 'Remove',
+              onClick: (): void => doAction(AliasActionType.remove),
+            },
+          ],
+        }}
+      />
+    );
+  }
+);
diff --git a/src/components/ui/MailAliasesList/MailAliasUpdateDialog.tsx b/src/components/ui/MailAliasesList/MailAliasUpdateDialog.tsx
index 3f4baaa..57abb61 100644
--- a/src/components/ui/MailAliasesList/MailAliasUpdateDialog.tsx
+++ b/src/components/ui/MailAliasesList/MailAliasUpdateDialog.tsx
@@ -7,7 +7,7 @@ import {
   PrimaryButton,
 } from '@fluentui/react';
 import { MailAlias, UpsertMailAliasRequest } from 'mailinabox-api';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../../store';
 import { DialogFooter } from '../DialogFooter/DialogFooter';
@@ -30,9 +30,9 @@ export const MailAliasUpdateDialog: React.FunctionComponent<
     (state: RootState) => state.aliases
   );
 
-  const onDialogCloseButtonClick = useCallback(() => {
+  const onDialogCloseButtonClick = (): void => {
     dialogProps.onDismiss?.();
-  }, [dialogProps]);
+  };
 
   const updateAlias: UpsertMailAliasRequest = {
     address: alias?.address || '',
diff --git a/src/components/ui/MailUserAdd/MailUserAdd.tsx b/src/components/ui/MailUserAdd/MailUserAdd.tsx
index ca11dbc..289bef5 100644
--- a/src/components/ui/MailUserAdd/MailUserAdd.tsx
+++ b/src/components/ui/MailUserAdd/MailUserAdd.tsx
@@ -18,8 +18,9 @@ import {
   Text,
   TextField,
 } from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
 import { MailUserPrivilege } from 'mailinabox-api';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useMediaQuery } from 'react-responsive';
 import { getDump } from '../../../features/dnsSlice';
@@ -30,6 +31,7 @@ import {
   addUserResetError,
   getUsers,
 } from '../../../features/usersSlice';
+import { useFormInputs } from '../../../forms/useFormInputs';
 import { RootState } from '../../../store';
 import { DialogFooter } from '../DialogFooter/DialogFooter';
 import { MessageBar } from '../MessageBar/MessageBar';
@@ -62,11 +64,11 @@ const privilegeOptions: IDropdownOption[] = [
   },
 ];
 
-interface FormState {
+type FormState = {
   email: string;
   password: string;
   privilege: IDropdownOption;
-}
+};
 
 const initialFormState: FormState = {
   email: '',
@@ -77,6 +79,9 @@ const initialFormState: FormState = {
 export const MailUserAdd: React.FunctionComponent<IStackProps> = ({
   ...props
 }) => {
+  const { inputs, resetInputs, setInputs, onInputChange } = useFormInputs<
+    FormState
+  >(initialFormState);
   const { isAddingUser, addUserResponse, addUserError } = useSelector(
     (state: RootState) => state.users
   );
@@ -85,8 +90,6 @@ export const MailUserAdd: React.FunctionComponent<IStackProps> = ({
   const [isDialogHidden, setIsDialogHidden] = useState<boolean>(true);
   const [hasDialogOpened, setHasDialogOpened] = useState<boolean>(false);
 
-  const [user, setUser] = useState<FormState>(initialFormState);
-
   const isMinLargeScreen = useMediaQuery({
     minWidth: ScreenWidthMinLarge,
   });
@@ -96,74 +99,47 @@ export const MailUserAdd: React.FunctionComponent<IStackProps> = ({
     gap: isMinLargeScreen ? 'l2' : 'm',
   };
 
-  const onEmailChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setUser({
-        ...user,
-        email: newValue ?? '',
-      });
-    },
-    [user]
-  );
-
-  const onPasswordChange = useCallback(
-    (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
-      setUser({
-        ...user,
-        password: newValue ?? '',
+  const onDropdownChange = (name: string) => (
+    _event: React.FormEvent<HTMLDivElement>,
+    option?: IDropdownOption
+  ): void => {
+    if (option) {
+      setInputs({
+        ...inputs,
+        [name]: option,
       });
-    },
-    [user]
-  );
-
-  const onPrivilegeChange = useCallback(
-    (
-      _event: React.FormEvent<HTMLDivElement>,
-      option?: IDropdownOption
-    ): void => {
-      if (option) {
-        setUser({
-          ...user,
-          privilege: option,
-        });
-      }
-    },
-    [user]
-  );
+    }
+  };
 
-  const onFormSubmit = useCallback(
-    (event: React.FormEvent<HTMLElement>): void => {
-      event.preventDefault();
-      dispatch(
-        addUser(
-          user.email,
-          user.password,
-          user.privilege.key as MailUserPrivilege
-        )
-      );
-    },
-    [dispatch, user.email, user.password, user.privilege.key]
-  );
+  const onFormSubmit = (event: React.FormEvent<HTMLElement>): void => {
+    event.preventDefault();
+    dispatch(
+      addUser(
+        inputs.email,
+        inputs.password,
+        inputs.privilege.key as MailUserPrivilege
+      )
+    );
+  };
 
-  const onDialogClose = useCallback(
+  const onDialogClose = useConstCallback(
     (_event: React.MouseEvent<BaseButton, MouseEvent>): void => {
       setIsDialogHidden(true);
-    },
-    []
+    }
   );
 
-  const onDialogDismissed = useCallback((): void => {
+  const onDialogDismissed = useConstCallback((): void => {
     dispatch(addUserReset());
-    setUser(initialFormState);
-  }, [dispatch]);
+    resetInputs();
+    setHasDialogOpened(false);
+  });
 
-  const onErrorMessageBarDismiss = useCallback(
+  const onErrorMessageBarDismiss = useConstCallback(
     (
       _event?: React.MouseEvent<HTMLElement | BaseButton | Button, MouseEvent>
     ): void => {
       dispatch(addUserResetError());
-    },
-    [dispatch]
+    }
   );
 
   useEffect(() => {
@@ -245,16 +221,18 @@ export const MailUserAdd: React.FunctionComponent<IStackProps> = ({
           <TextField
             label="Email"
             type="email"
+            name="email"
             required
-            onChange={onEmailChange}
-            value={user.email}
+            onChange={onInputChange}
+            value={inputs.email}
           />
           <TextField
             label="Password"
             type="password"
+            name="password"
             required
-            onChange={onPasswordChange}
-            value={user.password}
+            onChange={onInputChange}
+            value={inputs.password}
             description="Passwords must be at least eight characters and may not contain spaces."
             styles={{ description: { ...theme.fonts.small } }}
           />
@@ -262,8 +240,8 @@ export const MailUserAdd: React.FunctionComponent<IStackProps> = ({
             label="Privilege"
             required
             options={privilegeOptions}
-            selectedKey={user.privilege.key}
-            onChange={onPrivilegeChange}
+            selectedKey={inputs.privilege.key}
+            onChange={onDropdownChange('privilege')}
           />
           <Stack horizontal>
             <PrimaryButton type="submit" disabled={isAddingUser}>
diff --git a/src/components/ui/MailUsersList/MailUserActions.tsx b/src/components/ui/MailUsersList/MailUserActions.tsx
index d034e8f..505c153 100644
--- a/src/components/ui/MailUsersList/MailUserActions.tsx
+++ b/src/components/ui/MailUsersList/MailUserActions.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { resetUserAction, UserActionType } from '../../../features/usersSlice';
 import { RootState } from '../../../store';
@@ -16,15 +17,10 @@ export const MailUserActions: React.FunctionComponent = () => {
 
   const dispatch = useDispatch();
 
-  const onDialogDismiss = useCallback((): void => {
+  const onDialogDismiss = useConstCallback((): void => {
     dispatch(resetUserAction());
-  }, [dispatch]);
+  });
 
-  // useEffect(() => {
-  //   if (updateUserResponse) {
-  //     dispatch(getUsers());
-  //   }
-  // }, [dispatch, updateUserResponse]);
   return (
     <>
       <MailUserUpdatePrivilege
diff --git a/src/components/ui/MailUsersList/MailUserActionsList.tsx b/src/components/ui/MailUsersList/MailUserActionsList.tsx
index 2253b59..6b6ee63 100644
--- a/src/components/ui/MailUsersList/MailUserActionsList.tsx
+++ b/src/components/ui/MailUsersList/MailUserActionsList.tsx
@@ -1,6 +1,7 @@
 import { DirectionalHint, IconButton } from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
 import { MailUser, MailUserPrivilege } from 'mailinabox-api';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useDispatch } from 'react-redux';
 import { setUserAction, UserActionType } from '../../../features/usersSlice';
 
@@ -8,61 +9,59 @@ interface MailUserActionsListProps {
   user: MailUser;
 }
 
-export const MailUserActionsList: React.FunctionComponent<MailUserActionsListProps> = ({
-  user,
-}) => {
-  const dispatch = useDispatch();
-  const doAction = useCallback(
-    (type: UserActionType): void => {
+export const MailUserActionsList: React.FunctionComponent<MailUserActionsListProps> = React.memo(
+  ({ user }) => {
+    const dispatch = useDispatch();
+    const doAction = useConstCallback((type: UserActionType): void => {
       dispatch(
         setUserAction({
           user,
           type,
         })
       );
-    },
-    [dispatch, user]
-  );
-  return (
-    <IconButton
-      menuIconProps={{
-        iconName: 'MoreVertical',
-      }}
-      styles={{
-        menuIcon: {
-          fontWeight: 'bold',
-        },
-      }}
-      role="button"
-      aria-haspopup={true}
-      aria-label="Show actions"
-      menuProps={{
-        directionalHint: DirectionalHint.bottomRightEdge,
-        items: [
-          user.privileges.includes(MailUserPrivilege.Admin)
-            ? {
-                key: 'removeadmin',
-                text: 'Remove Admin Privilege',
-                onClick: (): void =>
-                  doAction(UserActionType.removeAdminPrivilege),
-              }
-            : {
-                key: 'makeadmin',
-                text: 'Make Admin',
-                onClick: (): void => doAction(UserActionType.addAdminPrivilege),
-              },
-          {
-            key: 'setpassword',
-            text: 'Set Password',
-            onClick: (): void => doAction(UserActionType.setPassword),
+    });
+    return (
+      <IconButton
+        menuIconProps={{
+          iconName: 'MoreVertical',
+        }}
+        styles={{
+          menuIcon: {
+            fontWeight: 'bold',
           },
-          {
-            key: 'archiveaccount',
-            text: 'Archive Account',
-            onClick: (): void => doAction(UserActionType.archive),
-          },
-        ],
-      }}
-    />
-  );
-};
+        }}
+        role="button"
+        aria-haspopup={true}
+        aria-label="Show actions"
+        menuProps={{
+          directionalHint: DirectionalHint.bottomRightEdge,
+          items: [
+            user.privileges.includes(MailUserPrivilege.Admin)
+              ? {
+                  key: 'removeadmin',
+                  text: 'Remove Admin Privilege',
+                  onClick: (): void =>
+                    doAction(UserActionType.removeAdminPrivilege),
+                }
+              : {
+                  key: 'makeadmin',
+                  text: 'Make Admin',
+                  onClick: (): void =>
+                    doAction(UserActionType.addAdminPrivilege),
+                },
+            {
+              key: 'setpassword',
+              text: 'Set Password',
+              onClick: (): void => doAction(UserActionType.setPassword),
+            },
+            {
+              key: 'archiveaccount',
+              text: 'Archive Account',
+              onClick: (): void => doAction(UserActionType.archive),
+            },
+          ],
+        }}
+      />
+    );
+  }
+);
diff --git a/src/components/ui/MailUsersList/MailUserArchiveDialog.tsx b/src/components/ui/MailUsersList/MailUserArchiveDialog.tsx
index 94184fb..23ac955 100644
--- a/src/components/ui/MailUsersList/MailUserArchiveDialog.tsx
+++ b/src/components/ui/MailUsersList/MailUserArchiveDialog.tsx
@@ -7,7 +7,7 @@ import {
   Stack,
   Text,
 } from '@fluentui/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   getUsers,
@@ -48,18 +48,18 @@ export const MailUserArchiveDialog: React.FunctionComponent<MailUserArchiveDialo
     setArchiveSelfErrorDialogHidden,
   ] = useState<boolean>(true);
 
-  const onModalDismissed = useCallback((): void => {
+  const onModalDismissed = (): void => {
     if (updateUserResponse) {
       dispatch(getUsers());
     }
     dispatch(updateUserReset());
-  }, [dispatch, updateUserResponse]);
+  };
 
-  const onArchiveConfirm = useCallback((): void => {
+  const onArchiveConfirm = (): void => {
     if (userAction?.user) {
       dispatch(removeUser(userAction.user));
     }
-  }, [dispatch, userAction]);
+  };
 
   const modalProps = {
     isBlocking: true,
diff --git a/src/components/ui/MailUsersList/MailUserSetPasswordDialog.tsx b/src/components/ui/MailUsersList/MailUserSetPasswordDialog.tsx
index f1c3fb7..8416362 100644
--- a/src/components/ui/MailUsersList/MailUserSetPasswordDialog.tsx
+++ b/src/components/ui/MailUsersList/MailUserSetPasswordDialog.tsx
@@ -10,7 +10,8 @@ import {
   Text,
   TextField,
 } from '@fluentui/react';
-import React, { useCallback, useState } from 'react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   getUsers,
@@ -49,30 +50,27 @@ export const MailUserSetPasswordDialog: React.FunctionComponent<MailUserSetPassw
 
   const dispatch = useDispatch();
   const [password, setPassword] = useState<string>('');
-  const onModalDismissed = useCallback((): void => {
+  const onModalDismissed = (): void => {
     setPassword('');
     if (updateUserResponse) {
       dispatch(getUsers());
     }
     dispatch(updateUserReset());
-  }, [dispatch, updateUserResponse]);
+  };
 
-  const onPasswordChange = useCallback(
+  const onPasswordChange = useConstCallback(
     (_event: React.FormEvent<HTMLElement>, newValue?: string): void => {
       setPassword(newValue ?? '');
-    },
-    []
+    }
   );
 
-  const onFormSubmit = useCallback(
-    (event: React.FormEvent<HTMLElement>): void => {
-      event.preventDefault();
-      if (userAction?.user) {
-        dispatch(setUserPassword(userAction.user, password));
-      }
-    },
-    [dispatch, password, userAction]
-  );
+  const onFormSubmit = (event: React.FormEvent<HTMLElement>): void => {
+    event.preventDefault();
+    if (userAction?.user) {
+      dispatch(setUserPassword(userAction.user, password));
+    }
+  };
+
   const updateSelf = username === userAction?.user?.email;
   return (
     <Dialog
diff --git a/src/components/ui/MailUsersList/MailUserUpdatePrivilege.tsx b/src/components/ui/MailUsersList/MailUserUpdatePrivilege.tsx
index 5641c47..6f89b55 100644
--- a/src/components/ui/MailUsersList/MailUserUpdatePrivilege.tsx
+++ b/src/components/ui/MailUsersList/MailUserUpdatePrivilege.tsx
@@ -6,7 +6,7 @@ import {
   PrimaryButton,
   Text,
 } from '@fluentui/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   addUserAdminPrivilege,
@@ -56,24 +56,24 @@ export const MailUserUpdatePrivilege: React.FunctionComponent<MailUserUpdatePriv
   const updateSelfError =
     !removeAdminDialogHidden && username === userAction?.user?.email;
 
-  const onModalDismissed = useCallback((): void => {
+  const onModalDismissed = (): void => {
     if (updateUserResponse) {
       dispatch(getUsers());
     }
     dispatch(updateUserReset());
-  }, [dispatch, updateUserResponse]);
+  };
 
-  const onRemoveAdminConfirm = useCallback((): void => {
+  const onRemoveAdminConfirm = (): void => {
     if (userAction?.user) {
       dispatch(removeUserAdminPrivilege(userAction.user));
     }
-  }, [dispatch, userAction]);
+  };
 
-  const onAddAdminConfirm = useCallback((): void => {
+  const onAddAdminConfirm = (): void => {
     if (userAction?.user) {
       dispatch(addUserAdminPrivilege(userAction.user));
     }
-  }, [dispatch, userAction]);
+  };
 
   useEffect(() => {
     setRemoveSelfErrorDialogHidden(!updateSelfError);
diff --git a/src/components/ui/PivotRoutes/PivotRoutes.tsx b/src/components/ui/PivotRoutes/PivotRoutes.tsx
index 04bfb78..78021a1 100644
--- a/src/components/ui/PivotRoutes/PivotRoutes.tsx
+++ b/src/components/ui/PivotRoutes/PivotRoutes.tsx
@@ -1,29 +1,68 @@
-import { IPivotProps, Pivot, PivotItem, PivotLinkSize } from '@fluentui/react';
-import React, { useCallback } from 'react';
+import {
+  IPivotItemProps,
+  IPivotProps,
+  mergeStyles,
+  Pivot,
+  PivotItem,
+  PivotLinkSize,
+  ScreenWidthMinLarge,
+} from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React, { createRef, RefObject, useEffect } from 'react';
+import { useMediaQuery } from 'react-responsive';
 import { useHistory, useLocation } from 'react-router-dom';
 
-export const PivotRoutes: React.FunctionComponent<IPivotProps> = ({
-  children,
-  ...props
-}) => {
+const className = mergeStyles({
+  overflowX: 'auto',
+  overflowY: 'hidden',
+});
+
+interface PivotRoutes {
+  items?: IPivotItemProps[];
+}
+
+export const PivotRoutes: React.FunctionComponent<
+  PivotRoutes & IPivotProps
+> = ({ children, items = [], ...props }) => {
   const history = useHistory();
-  const location = useLocation();
-  const onPivotLinkClick = useCallback(
-    (item?: PivotItem, _event?: React.MouseEvent<HTMLElement, MouseEvent>) => {
-      if (item?.props.itemKey) {
-        history.push(item.props.itemKey);
-      }
-    },
-    [history]
-  );
+  const { pathname: selectedKey } = useLocation();
+  const isMinLargeScreen = useMediaQuery({
+    minWidth: ScreenWidthMinLarge,
+  });
+  const refs = items.map(() => createRef<HTMLDivElement>());
+
+  const onPivotLinkClick = useConstCallback((item?: PivotItem): void => {
+    if (item?.props.itemKey) {
+      history.push(item.props.itemKey);
+    }
+  });
+
+  const onRenderItemLink = (ref: RefObject<HTMLDivElement>) => (
+    props?: IPivotItemProps
+  ): JSX.Element | null => {
+    return props ? <div ref={ref}>{props.headerText}</div> : null;
+  };
+
+  useEffect(() => {
+    const index = items.findIndex((item) => item.itemKey === selectedKey);
+    refs[index]?.current?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'nearest',
+    });
+  }, [items, refs, selectedKey]);
+
   return (
     <Pivot
-      linkSize={PivotLinkSize.large}
-      selectedKey={location.pathname}
+      className={className}
+      linkSize={isMinLargeScreen ? PivotLinkSize.large : PivotLinkSize.normal}
+      selectedKey={selectedKey}
       onLinkClick={onPivotLinkClick}
       {...props}
     >
-      {children}
+      {items.map((item, i) => (
+        <PivotItem {...item} onRenderItemLink={onRenderItemLink(refs[i])} />
+      ))}
     </Pivot>
   );
 };
diff --git a/src/components/ui/SystemChecksDetailsList/SystemChecksDetailsListItem.tsx b/src/components/ui/SystemChecksDetailsList/SystemChecksDetailsListItem.tsx
index 50d1e6b..4b0bb16 100644
--- a/src/components/ui/SystemChecksDetailsList/SystemChecksDetailsListItem.tsx
+++ b/src/components/ui/SystemChecksDetailsList/SystemChecksDetailsListItem.tsx
@@ -6,8 +6,9 @@ import {
   Stack,
   Text,
 } from '@fluentui/react';
+import { useConstCallback } from '@uifabric/react-hooks';
 import { StatusEntry, StatusEntryType } from 'mailinabox-api';
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 
 const theme = getTheme();
 
@@ -36,7 +37,7 @@ export const SystemChecksDetailsListItem: React.FunctionComponent<SystemChecksDe
 }) => {
   const { text, extra, type } = item;
   const [isCollapsed, setIsCollapsed] = useState(true);
-  const onLinkClick = useCallback((): void => setIsCollapsed(false), []);
+  const onLinkClick = useConstCallback((): void => setIsCollapsed(false));
   const textColor = getTextColor(type);
   return (
     <>
diff --git a/src/components/ui/SystemStatusActionsMenu/SystemStatusActionsMenu.tsx b/src/components/ui/SystemStatusActionsMenu/SystemStatusActionsMenu.tsx
index ca31a5a..4d80cb8 100644
--- a/src/components/ui/SystemStatusActionsMenu/SystemStatusActionsMenu.tsx
+++ b/src/components/ui/SystemStatusActionsMenu/SystemStatusActionsMenu.tsx
@@ -8,7 +8,7 @@ import {
   TooltipHost,
 } from '@fluentui/react';
 import { useId } from '@uifabric/react-hooks';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { updatePrivacy } from '../../../features/system/privacySlice';
 import { RootState } from '../../../store';
@@ -65,9 +65,9 @@ export const SystemStatusActionsMenu: React.FunctionComponent = () => {
   );
 
   const dispatch = useDispatch();
-  const onPrivacyButtonClick = useCallback(() => {
+  const onPrivacyButtonClick = (): void => {
     dispatch(updatePrivacy(!privacyStatus));
-  }, [dispatch, privacyStatus]);
+  };
   return (
     <OverflowSet
       role="menubar"
diff --git a/src/components/ui/WebDomainsList/WebDomainActions.tsx b/src/components/ui/WebDomainsList/WebDomainActions.tsx
index 36cd6c8..3940554 100644
--- a/src/components/ui/WebDomainsList/WebDomainActions.tsx
+++ b/src/components/ui/WebDomainsList/WebDomainActions.tsx
@@ -1,5 +1,6 @@
 import { DialogType, Text } from '@fluentui/react';
-import React, { useCallback } from 'react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   resetDomainAction,
@@ -19,19 +20,19 @@ export const WebDomainActions: React.FunctionComponent = () => {
   } = useSelector((state: RootState) => state.web);
   const dispatch = useDispatch();
 
-  const onActionDialogDismiss = useCallback((): void => {
+  const onActionDialogDismiss = useConstCallback((): void => {
     dispatch(resetDomainAction());
-  }, [dispatch]);
+  });
 
-  const onActionDialogDismissed = useCallback((): void => {
+  const onActionDialogDismissed = useConstCallback((): void => {
     dispatch(updateWebReset());
-  }, [dispatch]);
+  });
 
-  const update = useCallback((): void => {
+  const update = (): void => {
     if (domainAction?.webDomain) {
       dispatch(updateWeb());
     }
-  }, [dispatch, domainAction]);
+  };
 
   const dialogWidth = updateWebResponse ? 420 : 580;
 
diff --git a/src/components/ui/WebDomainsList/WebDomainsActionsList.tsx b/src/components/ui/WebDomainsList/WebDomainsActionsList.tsx
index 734ffe6..4fe992d 100644
--- a/src/components/ui/WebDomainsList/WebDomainsActionsList.tsx
+++ b/src/components/ui/WebDomainsList/WebDomainsActionsList.tsx
@@ -1,5 +1,6 @@
 import { DirectionalHint, IconButton } from '@fluentui/react';
-import React, { useCallback } from 'react';
+import { useConstCallback } from '@uifabric/react-hooks';
+import React from 'react';
 import { useDispatch } from 'react-redux';
 import {
   setDomainAction,
@@ -11,44 +12,41 @@ interface WebDomainsActionsListProps {
   webDomain: WebDomainWithDomainInfo;
 }
 
-export const WebDomainsActionsList: React.FunctionComponent<WebDomainsActionsListProps> = ({
-  webDomain,
-}) => {
-  const dispatch = useDispatch();
-  const doAction = useCallback(
-    (action: WebDomainActionType): void => {
+export const WebDomainsActionsList: React.FunctionComponent<WebDomainsActionsListProps> = React.memo(
+  ({ webDomain }) => {
+    const dispatch = useDispatch();
+    const doAction = useConstCallback((action: WebDomainActionType): void => {
       dispatch(
         setDomainAction({
           webDomain,
           action,
         })
       );
-    },
-    [dispatch, webDomain]
-  );
-  return (
-    <IconButton
-      menuIconProps={{
-        iconName: 'MoreVertical',
-      }}
-      styles={{
-        menuIcon: {
-          fontWeight: 'bold',
-        },
-      }}
-      role="button"
-      aria-haspopup={true}
-      aria-label="Show actions"
-      menuProps={{
-        directionalHint: DirectionalHint.bottomRightEdge,
-        items: [
-          {
-            key: 'changeroot',
-            text: 'Change Root Directory',
-            onClick: (): void => doAction(WebDomainActionType.update),
+    });
+    return (
+      <IconButton
+        menuIconProps={{
+          iconName: 'MoreVertical',
+        }}
+        styles={{
+          menuIcon: {
+            fontWeight: 'bold',
           },
-        ],
-      }}
-    />
-  );
-};
+        }}
+        role="button"
+        aria-haspopup={true}
+        aria-label="Show actions"
+        menuProps={{
+          directionalHint: DirectionalHint.bottomRightEdge,
+          items: [
+            {
+              key: 'changeroot',
+              text: 'Change Root Directory',
+              onClick: (): void => doAction(WebDomainActionType.update),
+            },
+          ],
+        }}
+      />
+    );
+  }
+);
diff --git a/src/forms/useFormInputs.ts b/src/forms/useFormInputs.ts
new file mode 100644
index 0000000..a3038c9
--- /dev/null
+++ b/src/forms/useFormInputs.ts
@@ -0,0 +1,41 @@
+import { useConstCallback } from '@uifabric/react-hooks';
+import { Dispatch, SetStateAction, useState } from 'react';
+
+type FormField = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+interface FormInputsReturnType<T> {
+  onInputChange: (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  inputs: T;
+  setInputs: Dispatch<SetStateAction<T>>;
+  resetInputs: () => void;
+}
+
+export function useFormInputs<T>(initialState: T): FormInputsReturnType<T> {
+  const [inputs, setInputs] = useState<T>(initialState);
+
+  const onInputChange = useConstCallback(
+    (event: React.SyntheticEvent<FormField>): void => {
+      const { name: key, value } = event.target as FormField;
+      if (!(key in initialState)) {
+        throw new Error('Invalid key: ' + key);
+      }
+      setInputs((inputs) => ({
+        ...inputs,
+        [key]: value,
+      }));
+    }
+  );
+
+  const resetInputs = useConstCallback((): void => {
+    setInputs(initialState);
+  });
+
+  return {
+    inputs,
+    setInputs,
+    onInputChange,
+    resetInputs,
+  };
+}