diff --git a/frontend/src/ui/components/Field.tsx b/frontend/src/ui/components/Field.tsx
new file mode 100644
index 0000000..6f0699c
--- /dev/null
+++ b/frontend/src/ui/components/Field.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export interface FieldProps {
+  name?: string;
+}
+
+function Field({ name, children }: React.PropsWithChildren<FieldProps>) {
+  return (
+    <div className="field">
+      {name ? <label className="label">{name}</label> : null}
+      {children}
+    </div>
+  );
+}
+
+export default React.memo(Field);
diff --git a/frontend/src/ui/pages/twitch/APISettings.tsx b/frontend/src/ui/pages/twitch/APISettings.tsx
index bd92ac2..8427761 100644
--- a/frontend/src/ui/pages/twitch/APISettings.tsx
+++ b/frontend/src/ui/pages/twitch/APISettings.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import { useModule } from '../../../lib/react-utils';
 import apiReducer, { modules } from '../../../store/api/reducer';
+import Field from '../../components/Field';
 
 export default function TwitchBotSettingsPage(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -18,7 +19,7 @@ export default function TwitchBotSettingsPage(
   return (
     <>
       <h1 className="title is-4">Twitch module configuration</h1>
-      <div className="field">
+      <Field>
         <label className="checkbox">
           <input
             type="checkbox"
@@ -35,7 +36,7 @@ export default function TwitchBotSettingsPage(
           />{' '}
           Enable twitch integration
         </label>
-      </div>
+      </Field>
       <div className="copyblock">
         <p>You will need to create an application, here's how:</p>
         <p>
@@ -54,8 +55,7 @@ export default function TwitchBotSettingsPage(
         </dl>
         - Once created, create a <b>New Secret</b>, then copy both fields below!
       </div>
-      <div className="field">
-        <label className="label">App Client ID</label>
+      <Field name="App Client ID">
         <p className="control">
           <input
             disabled={!active}
@@ -73,9 +73,8 @@ export default function TwitchBotSettingsPage(
             }
           />
         </p>
-      </div>
-      <div className="field">
-        <label className="label">App Client Secret</label>
+      </Field>
+      <Field name="App Client Secret">
         <p className="control">
           <input
             disabled={!active}
@@ -93,7 +92,7 @@ export default function TwitchBotSettingsPage(
             }
           />
         </p>
-      </div>
+      </Field>
       <button
         className="button"
         onClick={() => {
diff --git a/frontend/src/ui/pages/twitch/BotSettings.tsx b/frontend/src/ui/pages/twitch/BotSettings.tsx
index e6621f5..ff45cfa 100644
--- a/frontend/src/ui/pages/twitch/BotSettings.tsx
+++ b/frontend/src/ui/pages/twitch/BotSettings.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import { useModule } from '../../../lib/react-utils';
 import apiReducer, { modules } from '../../../store/api/reducer';
+import Field from '../../components/Field';
 
 export default function TwitchBotSettingsPage(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -23,7 +24,7 @@ export default function TwitchBotSettingsPage(
   return (
     <>
       <h1 className="title is-4">Twitch module configuration</h1>
-      <div className="field">
+      <Field>
         <label className="checkbox">
           <input
             type="checkbox"
@@ -41,9 +42,8 @@ export default function TwitchBotSettingsPage(
           Enable twitch bot
           {twitchActive ? '' : '(Twitch integration must be enabled for this!)'}
         </label>
-      </div>
-      <div className="field">
-        <label className="label">Twitch channel</label>
+      </Field>
+      <Field name="Twitch channel">
         <p className="control">
           <input
             disabled={!active}
@@ -61,11 +61,8 @@ export default function TwitchBotSettingsPage(
             }
           />
         </p>
-      </div>
-      <div className="field">
-        <label className="label">
-          Bot username (must be a valid Twitch account)
-        </label>
+      </Field>
+      <Field name="Bot username (must be a valid Twitch account)">
         <p className="control">
           <input
             disabled={!active}
@@ -83,9 +80,8 @@ export default function TwitchBotSettingsPage(
             }
           />
         </p>
-      </div>
-      <div className="field">
-        <label className="label">Bot OAuth token</label>
+      </Field>
+      <Field name="Bot OAuth token">
         <p className="control">
           <input
             disabled={!active}
@@ -107,8 +103,8 @@ export default function TwitchBotSettingsPage(
           You can get this by logging in with the bot account and going here:{' '}
           <a href="https://twitchapps.com/tmi/">https://twitchapps.com/tmi/</a>
         </p>
-      </div>
-      <div className="field">
+      </Field>
+      <Field>
         <label className="checkbox">
           <input
             type="checkbox"
@@ -125,9 +121,8 @@ export default function TwitchBotSettingsPage(
           />{' '}
           Enable chat keys (for 3rd party chat integration)
         </label>
-      </div>
-      <div className="field">
-        <label className="label">Chat history</label>
+      </Field>
+      <Field name="Chat history">
         <p className="control">
           <input
             className="input"
@@ -145,7 +140,7 @@ export default function TwitchBotSettingsPage(
             }
           />
         </p>
-      </div>
+      </Field>
       <button
         className="button"
         onClick={() => {