diff --git a/web/components/config/cpu-usage.tsx b/web/components/config/cpu-usage.tsx
index 3f3a7a06c..fe1e046d6 100644
--- a/web/components/config/cpu-usage.tsx
+++ b/web/components/config/cpu-usage.tsx
@@ -44,15 +44,11 @@ export default function CPUUsageSelector({ defaultValue, onChange }: Props) {
   };
 
   return (
-    <div className="config-video-segements-conatiner">
-      <Title level={3} className="section-title">
-        CPU Usage
-      </Title>
+    <div className="config-video-cpu-container">
+      <Title level={3}>CPU Usage</Title>
       <p className="description">
         There are trade-offs when considering CPU usage blah blah more wording here.
       </p>
-      <br />
-
       <div className="segment-slider-container">
         <Slider
           tipFormatter={value => TOOLTIPS[value]}
diff --git a/web/components/config/video-latency.tsx b/web/components/config/video-latency.tsx
index 39b7e1e3c..78771975c 100644
--- a/web/components/config/video-latency.tsx
+++ b/web/components/config/video-latency.tsx
@@ -104,7 +104,7 @@ export default function VideoLatency() {
   };
 
   return (
-    <div className="config-video-segements-conatiner">
+    <div className="config-video-latency-container">
       <Title level={3} className="section-title">
         Latency Buffer
       </Title>
diff --git a/web/components/config/video-variant-form.tsx b/web/components/config/video-variant-form.tsx
index a18f2f4cf..96152288c 100644
--- a/web/components/config/video-variant-form.tsx
+++ b/web/components/config/video-variant-form.tsx
@@ -1,11 +1,11 @@
 // This content populates the video variant modal, which is spawned from the variants table.
 import React from 'react';
-import { Slider, Switch, Collapse, Typography } from 'antd';
+import { Row, Col, Slider, Collapse, Typography } from 'antd';
 import { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section';
 import TextField from './form-textfield';
 import { DEFAULT_VARIANT_STATE } from '../../utils/config-constants';
-import InfoTip from '../info-tip';
 import CPUUsageSelector from './cpu-usage';
+import ToggleSwitch from './form-toggleswitch';
 
 const { Panel } = Collapse;
 
@@ -146,52 +146,45 @@ export default function VideoVariantForm({
     }
     return note;
   };
-  const selectedPresetNote = '';
 
   return (
     <div className="config-variant-form">
       <p className="description">
         Say a thing here about how this all works. Read more{' '}
-        <a href="https://owncast.online/docs/configuration/">here</a>.
+        <a href="https://owncast.online/docs/configuration/">here</a>. Click the OK button below to
+        save your information.
       </p>
 
-      <div className="row">
-        <div>
+      <Row gutter={16}>
+        <Col xs={12} xl={12}>
           {/* ENCODER PRESET FIELD */}
           <div className="form-module cpu-usage-container">
             <CPUUsageSelector
               defaultValue={dataState.cpuUsageLevel}
               onChange={handleVideoCpuUsageLevelChange}
             />
-            {selectedPresetNote && (
-              <span className="selected-value-note">{selectedPresetNote}</span>
-            )}
           </div>
 
-          {/* VIDEO PASSTHROUGH FIELD */}
+          {/* VIDEO PASSTHROUGH FIELD - currently disabled */}
           <div style={{ display: 'none' }} className="form-module">
-            <p className="label">
-              <InfoTip tip={VIDEO_VARIANT_DEFAULTS.videoPassthrough.tip} />
-              Use Video Passthrough?
-            </p>
-            <div className="form-component">
-              {/* todo: change to ToggleSwitch for layout */}
-              <Switch
-                defaultChecked={dataState.videoPassthrough}
-                checked={dataState.videoPassthrough}
-                onChange={handleVideoPassChange}
-                // label="Use Video Passthrough"
-                checkedChildren="Yes"
-                unCheckedChildren="No"
-              />
-            </div>
+            <ToggleSwitch
+              label="Use Video Passthrough?"
+              fieldName="video-passthrough"
+              tip={VIDEO_VARIANT_DEFAULTS.videoPassthrough.tip}
+              checked={dataState.videoPassthrough}
+              onChange={handleVideoPassChange}
+            />
           </div>
+        </Col>
 
+        <Col xs={12} xl={12}>
           {/* VIDEO BITRATE FIELD */}
-          <div className={`form-module ${dataState.videoPassthrough ? 'disabled' : ''}`}>
-            <Typography.Title level={3} className="section-title">
-              Video Bitrate
-            </Typography.Title>
+          <div
+            className={`form-module bitrate-container ${
+              dataState.videoPassthrough ? 'disabled' : ''
+            }`}
+          >
+            <Typography.Title level={3}>Video Bitrate</Typography.Title>
             <p className="description">{VIDEO_VARIANT_DEFAULTS.videoBitrate.tip}</p>
             <div className="segment-slider-container">
               <Slider
@@ -205,58 +198,53 @@ export default function VideoVariantForm({
                 max={videoBRMax}
                 marks={videoBRMarks}
               />
-              <span className="selected-value-note">{selectedVideoBRnote()}</span>
+              <p className="selected-value-note">{selectedVideoBRnote()}</p>
             </div>
           </div>
-        </div>
-        <Collapse className="advanced-settings">
-          <Panel header="Advanced Settings" key="1">
-            <div className="section-intro">
-              Resizing your content will take additional resources on your server. If you wish to
-              optionally resize your output for this stream variant then you should either set the
-              width <strong>or</strong> the height to keep your aspect ratio.
-            </div>
-            <div className="field">
-              <TextField
-                type="number"
-                {...VIDEO_VARIANT_DEFAULTS.scaledWidth}
-                value={dataState.scaledWidth}
-                onChange={handleScaledWidthChanged}
-              />
-            </div>
-            <div className="field">
-              <TextField
-                type="number"
-                {...VIDEO_VARIANT_DEFAULTS.scaledHeight}
-                value={dataState.scaledHeight}
-                onChange={handleScaledHeightChanged}
-              />
-            </div>
+        </Col>
+      </Row>
+      <Collapse className="advanced-settings">
+        <Panel header="Advanced Settings" key="1">
+          <p className="description">
+            Resizing your content will take additional resources on your server. If you wish to
+            optionally resize your output for this stream variant then you should either set the
+            width <strong>or</strong> the height to keep your aspect ratio.
+          </p>
 
-            {/* FRAME RATE FIELD */}
-            <div className="field">
-              <p className="label">
-                <InfoTip tip={VIDEO_VARIANT_DEFAULTS.framerate.tip} />
-                Frame rate:
-              </p>
-              <div className="segment-slider-container form-component">
-                <Slider
-                  // tooltipVisible
-                  tipFormatter={value => `${value} ${framerateUnit}`}
-                  defaultValue={dataState.framerate}
-                  value={dataState.framerate}
-                  onChange={handleFramerateChange}
-                  step={framerateDefaults.incrementBy}
-                  min={framerateMin}
-                  max={framerateMax}
-                  marks={framerateMarks}
-                />
-                <span className="selected-value-note">{selectedFramerateNote()}</span>
-              </div>
+          <TextField
+            type="number"
+            {...VIDEO_VARIANT_DEFAULTS.scaledWidth}
+            value={dataState.scaledWidth}
+            onChange={handleScaledWidthChanged}
+          />
+          <TextField
+            type="number"
+            {...VIDEO_VARIANT_DEFAULTS.scaledHeight}
+            value={dataState.scaledHeight}
+            onChange={handleScaledHeightChanged}
+          />
+
+          {/* FRAME RATE FIELD */}
+          <div className="form-module frame-rate">
+            <Typography.Title level={3}>Frame rate</Typography.Title>
+            <p className="description">{VIDEO_VARIANT_DEFAULTS.framerate.tip}</p>
+            <div className="segment-slider-container">
+              <Slider
+                // tooltipVisible
+                tipFormatter={value => `${value} ${framerateUnit}`}
+                defaultValue={dataState.framerate}
+                value={dataState.framerate}
+                onChange={handleFramerateChange}
+                step={framerateDefaults.incrementBy}
+                min={framerateMin}
+                max={framerateMax}
+                marks={framerateMarks}
+              />
+              <p className="selected-value-note">{selectedFramerateNote()}</p>
             </div>
-          </Panel>
-        </Collapse>
-      </div>
+          </div>
+        </Panel>
+      </Collapse>
     </div>
   );
 }
diff --git a/web/pages/config-video.tsx b/web/pages/config-video.tsx
index d5a9eba62..c117d30d1 100644
--- a/web/pages/config-video.tsx
+++ b/web/pages/config-video.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Typography } from 'antd';
+import { Typography, Row, Col } from 'antd';
 
 import VideoVariantsTable from '../components/config/video-variants-table';
 import VideoLatency from '../components/config/video-latency';
@@ -16,15 +16,18 @@ export default function ConfigVideoSettings() {
         how it impacts your stream performance.
       </p>
 
-      <div className="row">
-        <div className="form-module variants-table-module">
-          <VideoVariantsTable />
-        </div>
-
-        <div className="form-module latency-module">
-          <VideoLatency />
-        </div>
-      </div>
+      <Row gutter={16}>
+        <Col lg={12}>
+          <div className="form-module variants-table-module">
+            <VideoVariantsTable />
+          </div>
+        </Col>
+        <Col lg={12}>
+          <div className="form-module latency-module">
+            <VideoLatency />
+          </div>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss
index 41844d26e..e275a075f 100644
--- a/web/styles/ant-overrides.scss
+++ b/web/styles/ant-overrides.scss
@@ -54,6 +54,9 @@ h5.ant-typography,
 h1.ant-typography {
   font-size: 1.75em;
   color: var(--pink);
+  &:first-of-type {
+    margin-top: 0;
+  }
 }
 .ant-typography h2,
 h2.ant-typography {
@@ -253,13 +256,13 @@ textarea.ant-input {
 
 // ANT BUTTON
 .ant-btn {
-  background-color: var(--purple-dark);
-  border-color: var(--white-25);
+  background-color: var(--owncast-purple-25);
+  border-color: var(--owncast-purple-25);
   color: var(--white-75);
   &:hover,
   &:focus {
-    background-color: var(--owncast-purple);
-    border-color: var(--owncast-purple);
+    background-color: var(--button-focused);
+    border-color: var(--button-focused);
     color: var(--white);
   }
 }
@@ -308,12 +311,13 @@ textarea.ant-input {
 }
 .ant-table-tbody > tr > td {
   transition-duration: var(--ant-transition-duration);
-  background-color: #141417;
+  background-color: #222325;
   color: var(--white-75);
 }
-.ant-table-tbody > tr:nth-child(odd) > td {
-  background-color: #222325;
+.ant-table-tbody > tr.ant-table-row:hover > td {
+  background-color: var(--gray-dark);
 }
+
 .ant-empty {
   color: var(--white-75);
 }
@@ -335,6 +339,10 @@ textarea.ant-input {
 
 
 // MODAL
+.ant-modal,
+.ant-modal-body {
+  font-size: 1em;
+}
 .ant-modal-content {
   border-radius: var(--container-border-radius);
   border: 1px solid var(--owncast-purple);
@@ -362,7 +370,7 @@ textarea.ant-input {
 .ant-modal-content,
 .ant-modal-header,
 .ant-modal-footer {
-  border-color: var(--gray);
+  border-color: var(--white-50);
 }
 
 // SELECT
@@ -378,6 +386,23 @@ textarea.ant-input {
 .ant-slider-mark-text {
   font-size: .85em;
   white-space: nowrap;
+  color: var(--white);
+  opacity: .5;
+}
+.ant-slider-handle {
+  border-color: var(--blue);
+}
+.ant-slider:hover .ant-slider-track {
+  background-color: var(--blue);
+}
+.ant-slider-rail {
+  background-color: var(--black);
+}
+.ant-slider-track {
+  background-color: var(--nav-text);
+}
+.ant-slider-mark-text-active {
+  opacity: 1;
 }
 
 // ANT SWITCH
@@ -394,6 +419,7 @@ textarea.ant-input {
 
 // ANT COLLAPSE
 .ant-collapse {
+  font-size: 1em;
   border-color: transparent;
   &> .ant-collapse-item,
   .ant-collapse-content {
@@ -410,13 +436,16 @@ textarea.ant-input {
 .ant-collapse-content {
   background-color: var(--black-35); //#181231;
 }
+.ant-collapse > .ant-collapse-item:last-child, .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
+  border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
+}
+.ant-collapse-item:last-child > .ant-collapse-content {
+  border-radius: 0 0 var(--container-border-radius) var(--container-border-radius);
+}
 
 
 
 // ANT POPOVER
-.ant-popover {
-
-}
 .ant-popover-inner {
   background-color: var(--black);
 }
diff --git a/web/styles/config-video-variants.scss b/web/styles/config-video-variants.scss
index 1d7526484..a0d5c7213 100644
--- a/web/styles/config-video-variants.scss
+++ b/web/styles/config-video-variants.scss
@@ -7,9 +7,7 @@
   }
 
   .variants-table-module {
-    min-width: 48%;
-    max-width: 600px;
-    margin-right: 1em
+    min-width: 400px;
   }
 
 }
@@ -20,80 +18,13 @@
     margin-top: 0;
   }
 
+  .cpu-usage-container,
+  .bitrate-container {
+    height: 20em;
+  }
 
   .advanced-settings {
-    width: 48%;
-    margin-left: 2em;
-  }
-  .blurb {
-    margin: 1em;
-    opacity: .75;
-  }
-  .note {
-    display: inline-block;
-    margin-left: 1em;
-    font-size: .75em;
-    opacity: .5;
-    font-style: italic;
-  }
-
-
-  // .field {
-  //   margin-bottom: 2em;
-  //   display: flex;
-  //   flex-direction: row;
-  //   justify-content: center;
-  //   align-items: flex-start;
-  //   transform: opacity .15s;
-  //   &.disabled {
-  //     opacity: .25;
-  //   }
-
-  //   .label {
-  //     width: 40%;
-  //     text-align: right;
-  //     padding-right: 2em;
-  //     font-weight: bold;
-  //     color: var(--owncast-purple);
-  //   }
-  //   .info-tip {
-  //     margin-right: 1em;
-  //   }
-  //   .form-component {
-  //     width: 60%;
-      
-  //     .selected-value-note {
-  //       font-size: .85em;
-  //       display: inline-block;
-  //       text-align: center;
-  //     }
-  //   }
-  // }
-  // .ant-collapse {
-  //   border: none;
-  //   border-radius: 6px;
-  // }
-  // .ant-collapse > .ant-collapse-item:last-child, 
-  // .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
-  //   border: none;
-  //   background-color: rgba(0,0,0,.25);
-  //   border-radius: 6px;
-  // }
-  // .ant-collapse-content {
-  //   background-color: rgba(0,0,0,.1);
-  // }
-}
-
-
-
-.config-video-segements-conatiner {
-  // display: flex;
-  // flex-direction: row;
-  // justify-content: center;
-  // align-items: flex-start;
-
-  .status-message {
-    text-align: center;
+    margin-top: 1em;
   }
 }
 
@@ -109,7 +40,3 @@
     opacity: .8;
   }
 }
-
-.advanced-settings {
-  margin-top: 2em;
-}
\ No newline at end of file
diff --git a/web/styles/form-misc-elements.scss b/web/styles/form-misc-elements.scss
index 6ccd49ad5..5c53b82d5 100644
--- a/web/styles/form-misc-elements.scss
+++ b/web/styles/form-misc-elements.scss
@@ -42,32 +42,31 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
 }
 
 
-/* SEGMENT SLIDER */
+/* SEGMENT SLIDER GROUP WITH SELECTED NOTE, OR STATUS */
 .segment-slider-container {
-  width: 90%;
+  width: 100%;
   margin: auto;
   padding: 1em 2em .75em;
   background-color: var(--owncast-purple-25);
-  border-radius: 1em;
-  .ant-slider-rail {
-    background-color: var(--black);
-  }
-  .ant-slider-track {
-    background-color: var(--nav-text);
-  }
-  .ant-slider-mark-text,
-  .ant-slider-mark-text-active {
-    color: var(--white);
-    opacity: .5;
-  }
-  .ant-slider-mark-text-active {
-    opacity: 1;
-  }
+  border-radius: var(--container-border-radius);
+
   .status-container {
     width: 100%;
     margin: .5em auto;
     text-align: center;
   }
+
+  .selected-value-note {
+    width: 100%;
+    margin: 3em auto 0;
+    text-align: center;
+    font-size: .75em;
+    line-height: normal;
+    color: var(--white);
+    padding: 1em;
+    border-radius: var(--container-border-radius);
+    background-color: var(--black-35);
+  }
 }
 
 
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index 6601a0b14..9d822f741 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -72,6 +72,12 @@ code {
   background-color: var(--container-bg-color);
   padding: 2em;
   border-radius: var(--container-border-radius);
+
+  h3 {
+    &:first-of-type {
+      margin-top: 0;
+    }
+  }
 }
 
 .row {