diff --git a/newIDE/app/src/UI/CompactTextAreaField/index.js b/newIDE/app/src/UI/CompactTextAreaField/index.js
index 86a5e91f9d1a..c17a20ff64af 100644
--- a/newIDE/app/src/UI/CompactTextAreaField/index.js
+++ b/newIDE/app/src/UI/CompactTextAreaField/index.js
@@ -19,7 +19,7 @@ const styles = {
   },
 };
 
-export type CompactTextFieldProps = {|
+export type CompactTextAreaFieldProps = {|
   label: string,
   markdownDescription?: ?string,
   value: string,
@@ -50,7 +50,7 @@ export const CompactTextAreaField = ({
   disabled,
   errored,
   placeholder,
-}: CompactTextFieldProps) => {
+}: CompactTextAreaFieldProps) => {
   const idToUse = React.useRef<string>(id || makeTimestampedId());
 
   const title = !markdownDescription
diff --git a/newIDE/app/src/UI/CompactToggleField/CompactToggleField.module.css b/newIDE/app/src/UI/CompactToggleField/CompactToggleField.module.css
index a76efb4b02a6..327bd8c2ed64 100644
--- a/newIDE/app/src/UI/CompactToggleField/CompactToggleField.module.css
+++ b/newIDE/app/src/UI/CompactToggleField/CompactToggleField.module.css
@@ -25,32 +25,57 @@
 
 .slider {
   position: absolute;
-  cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #3a3a3a;
+  background-color: var(--theme-toggle-field-default-background-color);
   transition: 0.2s;
   border-radius: 16px;
 }
-
-.slider:before {
+.handle {
   position: absolute;
   content: '';
   height: 12px;
   width: 12px;
-  left: 2px;
-  bottom: 2px;
-  background-color: white;
+  left: 3px;
+  bottom: 3px;
+  background-color: var(--theme-toggle-field-default-slider-color);
   transition: 0.2s;
   border-radius: 50%;
+  z-index: 2;
+}
+.handleContainer {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: -1px;
+  bottom: -1px;
+  background-color: none;
+  border-radius: 50%;
+  z-index: 1;
+  transition: 0.2s;
 }
 
-.slider.checked {
-  background-color: #4c2f8c;
+.slider:hover .handleContainer:not(.disabled) {
+  background-color: var(--theme-toggle-field-hover-slider-aura-color);
 }
 
-.slider.checked:before {
+.handleContainer.checked {
   transform: translateX(16px);
 }
+
+.slider.checked {
+  background-color: var(--theme-toggle-field-active-background-color);
+}
+.handle.checked {
+  background-color: var(--theme-toggle-field-active-slider-color);
+}
+
+.slider.disabled {
+  background-color: var(--theme-toggle-field-disabled-background-color);
+}
+.handle.disabled {
+  background-color: var(--theme-toggle-field-disabled-slider-color);
+}
diff --git a/newIDE/app/src/UI/CompactToggleField/index.js b/newIDE/app/src/UI/CompactToggleField/index.js
index bd4c9956ae00..8860dbd1fd29 100644
--- a/newIDE/app/src/UI/CompactToggleField/index.js
+++ b/newIDE/app/src/UI/CompactToggleField/index.js
@@ -43,13 +43,31 @@ export const CompactToggleField = (props: Props) => {
           type="checkbox"
           class={classes.checkbox}
           onChange={() => props.onCheck(!props.checked)}
+          disabled={props.disabled}
         />
         <span
           class={classNames({
             [classes.slider]: true,
             [classes.checked]: props.checked,
+            [classes.disabled]: props.disabled,
           })}
-        />
+        >
+          <span
+            class={classNames({
+              [classes.handleContainer]: true,
+              [classes.checked]: props.checked,
+              [classes.disabled]: props.disabled,
+            })}
+          >
+            <span
+              class={classNames({
+                [classes.handle]: true,
+                [classes.checked]: props.checked,
+                [classes.disabled]: props.disabled,
+              })}
+            />
+          </span>
+        </span>
       </div>
       <Tooltip
         title={title}
diff --git a/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json b/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json
index 9f2960a50ffc..7bea02ffc5af 100644
--- a/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json
+++ b/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json
@@ -497,6 +497,42 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#008DFF"
+        },
+        "background-color": {
+          "value": "#006DEE"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {
@@ -746,4 +782,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json b/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json
index 308899e5ef13..607ee5123af6 100644
--- a/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json
+++ b/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json
@@ -573,6 +573,44 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#606166",
+          "comment": "Palette/Grey/60"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#5028cc",
+          "comment": "Palette/Purple/50"
+        },
+        "background-color": {
+          "value": "#9979f1",
+          "comment": "Palette/Purple/30"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {
@@ -824,4 +862,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json
index df7224f04378..762b3a55ebe1 100644
--- a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json
+++ b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json
@@ -561,6 +561,44 @@
           "value": "rgba(79, 40, 205, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#606166",
+          "comment": "Palette/Grey/60"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#5028cc",
+          "comment": "Palette/Purple/50"
+        },
+        "background-color": {
+          "value": "#9979f1",
+          "comment": "Palette/Purple/30"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#A6A6AB",
+          "comment": "Palette/Grey/40"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(197, 197, 201, 0.30)",
+          "comment": "Palette/Grey/30 and alpha"
+        }
+      }
     }
   },
   "input": {
diff --git a/newIDE/app/src/UI/Theme/NordTheme/theme.json b/newIDE/app/src/UI/Theme/NordTheme/theme.json
index b8f03e40b995..1617196dc563 100644
--- a/newIDE/app/src/UI/Theme/NordTheme/theme.json
+++ b/newIDE/app/src/UI/Theme/NordTheme/theme.json
@@ -488,6 +488,42 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#7EA1CC"
+        },
+        "background-color": {
+          "value": "#5E81AC"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {
diff --git a/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json b/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json
index ce5b54c6c145..29b448001607 100644
--- a/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json
+++ b/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json
@@ -503,6 +503,42 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#81CFFF"
+        },
+        "background-color": {
+          "value": "#61AFEF"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {
diff --git a/newIDE/app/src/UI/Theme/RosePineTheme/theme.json b/newIDE/app/src/UI/Theme/RosePineTheme/theme.json
index c7c6a031098f..171acc22239b 100644
--- a/newIDE/app/src/UI/Theme/RosePineTheme/theme.json
+++ b/newIDE/app/src/UI/Theme/RosePineTheme/theme.json
@@ -489,6 +489,42 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#E4C7FF"
+        },
+        "background-color": {
+          "value": "#C4A7E7"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {
diff --git a/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json b/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json
index ea9822ba238a..40136df65d2d 100644
--- a/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json
+++ b/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json
@@ -490,6 +490,42 @@
           "value": "rgba(221, 209, 255, 0.16)"
         }
       }
+    },
+    "toggle-field": {
+      "default": {
+        "slider-color": {
+          "value": "#EBEBED",
+          "comment": "Palette/Grey/10"
+        },
+        "background-color": {
+          "value": "#7F7F85",
+          "comment": "Palette/Grey/50"
+        }
+      },
+      "active": {
+        "slider-color": {
+          "value": "#249AC6"
+        },
+        "background-color": {
+          "value": "#047AA6"
+        }
+      },
+      "disabled": {
+        "slider-color": {
+          "value": "#494952",
+          "comment": "Palette/Grey/70"
+        },
+        "background-color": {
+          "value": "#32323b",
+          "comment": "Palette/Grey/80"
+        }
+      },
+      "hover": {
+        "slider-aura-color": {
+          "value": "rgba(217, 217, 222, 0.30)",
+          "comment": "Palette/Grey/20 and alpha"
+        }
+      }
     }
   },
   "input": {
diff --git a/newIDE/app/src/stories/componentStories/UI/CompactTextAreaField.stories.js b/newIDE/app/src/stories/componentStories/UI/CompactTextAreaField.stories.js
new file mode 100644
index 000000000000..dc7d468c6115
--- /dev/null
+++ b/newIDE/app/src/stories/componentStories/UI/CompactTextAreaField.stories.js
@@ -0,0 +1,61 @@
+// @flow
+import * as React from 'react';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+
+import { CompactTextAreaField } from '../../../UI/CompactTextAreaField';
+import { ColumnStackLayout } from '../../../UI/Layout';
+import ElementHighlighterProvider from '../../ElementHighlighterProvider';
+
+export default {
+  title: 'UI Building Blocks/CompactTextAreaField',
+  component: CompactTextAreaField,
+  decorators: [paperDecorator, muiDecorator],
+};
+
+export const Default = () => {
+  const [value, setValue] = React.useState<string>('');
+  const [value2, setValue2] = React.useState<string>('');
+  const [value3, setValue3] = React.useState<string>('');
+  const [value4, setValue4] = React.useState<string>('');
+  const [value5, setValue5] = React.useState<string>('');
+  return (
+    <ElementHighlighterProvider
+      elements={[{ label: 'Default', id: 'default' }]}
+    >
+      <ColumnStackLayout expand>
+        <CompactTextAreaField
+          value={value}
+          onChange={setValue}
+          id="default"
+          label="Default"
+        />
+        <CompactTextAreaField
+          value={value2}
+          onChange={setValue2}
+          placeholder="With placeholder"
+          label="With placeholder"
+        />
+        <CompactTextAreaField
+          disabled
+          value={value3}
+          onChange={setValue3}
+          label="Disabled field"
+        />
+        <CompactTextAreaField
+          value={value4}
+          onChange={setValue4}
+          label="With description"
+          markdownDescription="This is a description"
+        />
+        <CompactTextAreaField
+          value={value5}
+          onChange={setValue5}
+          errored
+          label="Errored"
+        />
+      </ColumnStackLayout>
+    </ElementHighlighterProvider>
+  );
+};
diff --git a/newIDE/app/src/stories/componentStories/UI/CompactToggleField.stories.js b/newIDE/app/src/stories/componentStories/UI/CompactToggleField.stories.js
new file mode 100644
index 000000000000..e13ccb0605b6
--- /dev/null
+++ b/newIDE/app/src/stories/componentStories/UI/CompactToggleField.stories.js
@@ -0,0 +1,47 @@
+// @flow
+import * as React from 'react';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+
+import { CompactToggleField } from '../../../UI/CompactToggleField';
+import { ColumnStackLayout } from '../../../UI/Layout';
+import ElementHighlighterProvider from '../../ElementHighlighterProvider';
+
+export default {
+  title: 'UI Building Blocks/CompactToggleField',
+  component: CompactToggleField,
+  decorators: [paperDecorator, muiDecorator],
+};
+
+export const Default = () => {
+  const [value, setValue] = React.useState<boolean>(false);
+  const [value2, setValue2] = React.useState<boolean>(true);
+  const [value3, setValue3] = React.useState<boolean>(false);
+  return (
+    <ElementHighlighterProvider
+      elements={[{ label: 'Default', id: 'default' }]}
+    >
+      <ColumnStackLayout expand>
+        <CompactToggleField
+          checked={value}
+          onCheck={setValue}
+          id="default"
+          label="Default"
+        />
+        <CompactToggleField
+          disabled
+          checked={value2}
+          onCheck={setValue2}
+          label="Disabled field"
+        />
+        <CompactToggleField
+          checked={value3}
+          onCheck={setValue3}
+          label="With description"
+          markdownDescription="This is a description"
+        />
+      </ColumnStackLayout>
+    </ElementHighlighterProvider>
+  );
+};