diff --git a/components/common/SwitchTableField/index.scss b/components/common/SwitchTableField/index.scss
index e69de29b..d7b95b2b 100644
--- a/components/common/SwitchTableField/index.scss
+++ b/components/common/SwitchTableField/index.scss
@@ -0,0 +1,9 @@
+.TableField.SwitchTableField {
+  &.Extra .Switch[data-state='checked'] {
+    background: var(--extra-purple-secondary);
+  }
+
+  .Right {
+    justify-content: end;
+  }
+}
diff --git a/components/common/SwitchTableField/index.tsx b/components/common/SwitchTableField/index.tsx
index c4fe2385..2344572d 100644
--- a/components/common/SwitchTableField/index.tsx
+++ b/components/common/SwitchTableField/index.tsx
@@ -1,13 +1,15 @@
 import { useEffect, useState } from 'react'
+import classNames from 'classnames'
 import Switch from '~components/common/Switch'
 import TableField from '~components/common/TableField'
 
 import './index.scss'
 
-interface Props {
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   name: string
   label: string
   description?: string
+  disabled?: boolean
   value?: boolean
   className?: string
   tabIndex?: number
@@ -32,10 +34,19 @@ const SwitchTableField = (props: Props) => {
     setValue(value)
   }
 
+  const classes = classNames(
+    {
+      SwitchTableField: true,
+      Disabled: props.disabled,
+    },
+    props.className
+  )
+
   return (
     <TableField
       name={props.name}
-      className="SwitchField"
+      description={props.description}
+      className={classes}
       imageAlt={props.imageAlt}
       imageClass={props.imageClass}
       imageSrc={props.imageSrc}
@@ -44,6 +55,7 @@ const SwitchTableField = (props: Props) => {
       <Switch
         name={props.name}
         checked={value}
+        disabled={props.disabled}
         tabIndex={props.tabIndex}
         onCheckedChange={onValueChange}
       />