diff --git a/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap b/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap
index 8dc222774..1ab115851 100644
--- a/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap
+++ b/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap
@@ -2781,9 +2781,9 @@ Array [
           onMouseLeave={[Function]}
         >
           <button
-            aria-label="toolbar temperature-sensor"
+            aria-label="toolbar microbit-temperature-sensor"
             className="toolbar-button button"
-            id="toolbar-temperature-sensor-button"
+            id="toolbar-microbit-temperature-sensor-button"
             onClick={[Function]}
             role="button"
             style={
@@ -2848,9 +2848,9 @@ Array [
           onMouseLeave={[Function]}
         >
           <button
-            aria-label="toolbar light-sensor"
+            aria-label="toolbar microbit-light-sensor"
             className="toolbar-button button"
-            id="toolbar-light-sensor-button"
+            id="toolbar-microbit-light-sensor-button"
             onClick={[Function]}
             role="button"
             style={
diff --git a/src/view/components/toolbar/GenericSliderComponent.tsx b/src/view/components/toolbar/GenericSliderComponent.tsx
index 0f7e24b92..48e2ec091 100644
--- a/src/view/components/toolbar/GenericSliderComponent.tsx
+++ b/src/view/components/toolbar/GenericSliderComponent.tsx
@@ -13,7 +13,7 @@ interface IProps {
 }
 export const GenericSliderComponent: React.FC<IProps> = props => {
     return (
-        <div className="GenericSliderComponent">
+        <div className="generic-slider-component">
             {props.axisProperties.sliderProps.map(
                 (sliderProperties: ISliderProps, index: number) => {
                     return (
diff --git a/src/view/components/toolbar/motion/Gesture.tsx b/src/view/components/toolbar/Gesture.tsx
similarity index 91%
rename from src/view/components/toolbar/motion/Gesture.tsx
rename to src/view/components/toolbar/Gesture.tsx
index 934c19345..a89a3bd5c 100644
--- a/src/view/components/toolbar/motion/Gesture.tsx
+++ b/src/view/components/toolbar/Gesture.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
-import { CONSTANTS } from "../../../constants";
-import { Dropdown } from "../../Dropdown";
-import SensorButton from "../SensorButton";
+import { CONSTANTS } from "../../constants";
+import { Dropdown } from "../Dropdown";
+import SensorButton from "./SensorButton";
 
 const GESTURE_BUTTON_MESSAGE = "Send Gesture";
 interface IProps {
diff --git a/src/view/components/toolbar/InputSlider.tsx b/src/view/components/toolbar/InputSlider.tsx
index 1e293ebaa..d98e118cc 100644
--- a/src/view/components/toolbar/InputSlider.tsx
+++ b/src/view/components/toolbar/InputSlider.tsx
@@ -22,7 +22,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
     render() {
         const isInputDisabled = this.context === VIEW_STATE.PAUSE;
         return (
-            <div className="inputSlider">
+            <div className="input-slider">
                 <span>{this.props.axisLabel}</span>
                 <input
                     type="text"
diff --git a/src/view/components/toolbar/LightSensorBar.tsx b/src/view/components/toolbar/LightSensorBar.tsx
deleted file mode 100644
index 5d9d5df82..000000000
--- a/src/view/components/toolbar/LightSensorBar.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-
-import * as React from "react";
-import { SENSOR_LIST } from "../../constants";
-import "../../styles/LightSensorBar.css";
-import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils";
-import InputSlider from "./InputSlider";
-
-const LIGHT_SLIDER_PROPS: ISliderProps = {
-    maxValue: 255,
-    minValue: 0,
-    minLabel: "Dark",
-    maxLabel: "Bright",
-    type: "light",
-    axisLabel: " ",
-};
-
-const LIGHT_SENSOR_PROPERTIES: ISensorProps = {
-    LABEL: "Light sensor",
-    sliderProps: [LIGHT_SLIDER_PROPS],
-    unitLabel: "Lux",
-};
-interface IProps {
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void;
-    value: number;
-}
-
-class LightSensorBar extends React.Component<IProps> {
-    constructor(props: any) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <div className="lightSensorBar">
-                <InputSlider
-                    minValue={
-                        LIGHT_SENSOR_PROPERTIES.sliderProps[X_SLIDER_INDEX]
-                            .minValue
-                    }
-                    maxValue={
-                        LIGHT_SENSOR_PROPERTIES.sliderProps[X_SLIDER_INDEX]
-                            .maxValue
-                    }
-                    type={
-                        LIGHT_SENSOR_PROPERTIES.sliderProps[X_SLIDER_INDEX].type
-                    }
-                    minLabel={
-                        LIGHT_SENSOR_PROPERTIES.sliderProps[X_SLIDER_INDEX]
-                            .minLabel
-                    }
-                    maxLabel={
-                        LIGHT_SENSOR_PROPERTIES.sliderProps[X_SLIDER_INDEX]
-                            .maxLabel
-                    }
-                    axisLabel={
-                        LIGHT_SENSOR_PROPERTIES.sliderProps[X_SLIDER_INDEX]
-                            .axisLabel
-                    }
-                    onUpdateValue={this.props.onUpdateValue}
-                    value={this.props.value}
-                />
-            </div>
-        );
-    }
-}
-
-export default LightSensorBar;
diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx
index b49979fa9..c7ea53f85 100644
--- a/src/view/components/toolbar/SensorModalUtils.tsx
+++ b/src/view/components/toolbar/SensorModalUtils.tsx
@@ -3,13 +3,9 @@
 import * as React from "react";
 import { SENSOR_LIST } from "../../constants";
 import { ARROW_RIGHT_SVG } from "../../svgs/arrow_right_svg";
-import { TAG_INPUT_SVG } from "../../svgs/tag_input_svg";
-import { TAG_OUTPUT_SVG } from "../../svgs/tag_output_svg";
 import * as CLUE_MODAL from "./clue/ClueModalContent";
-import LightSensorBar from "./LightSensorBar";
+import * as CPX_MODAL from "./cpx/CpxModalContent";
 import * as MICROBIT_MODAL from "./microbit/MicrobitModalContent";
-import MotionSensorBar from "./motion/MotionSensorBar";
-import TemperatureSensorBar from "./TemperatureSensorBar";
 
 export const TRY_IT_MAKE_CODE = (
     <div className="link-parent">
@@ -65,8 +61,8 @@ export const CPX_TOOLBAR_ICON_ID = {
 };
 
 export const MICROBIT_TOOLBAR_ICON_ID = {
-    TEMPERATURE: "toolbar-temperature-sensor",
-    LIGHT: "toolbar-light-sensor",
+    TEMPERATURE: "toolbar-microbit-temperature-sensor",
+    LIGHT: "toolbar-microbit-light-sensor",
     ACCELEROMETER: "toolbar-accelerometer-sensor",
     LEDS: "toolbar-microbit-led",
     PUSH_BUTTON: "toolbar-microbit-a-b-push",
@@ -115,200 +111,24 @@ export const DEFAULT_MODAL_CONTENT: IModalContent = {
     id: "none",
 };
 
-export const GPIO_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-gpio.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: TAG_OUTPUT_SVG,
-        descriptionText: "toolbar-gpio.description",
-        tryItDescription: "toolbar-gpio.tryItDescription",
-        components: undefined,
-        id: "GPIO",
-    };
-};
-
-export const IR_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-ir-sensor.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: TAG_OUTPUT_SVG,
-        descriptionText: "toolbar-ir-sensor.description",
-        tryItDescription: "toolbar-ir-sensor.tryItDescription",
-        components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB],
-        id: "IR",
-    };
-};
-export const LIGHT_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-light-sensor.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        descriptionText: "toolbar-light-sensor.description",
-        tryItDescription: "toolbar-light-sensor.tryItDescription",
-        components: [
-            <LightSensorBar
-                onUpdateValue={onUpdateValue}
-                value={sensorValues[SENSOR_LIST.LIGHT]}
-            />,
-        ],
-        id: "light_sensor",
-    };
-};
-export const MOTION_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    const motionSensorValues = {
-        X: sensorValues[SENSOR_LIST.MOTION_X],
-        Y: sensorValues[SENSOR_LIST.MOTION_Y],
-        Z: sensorValues[SENSOR_LIST.MOTION_Z],
-    };
-    return {
-        descriptionTitle: "toolbar-motion-sensor.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        descriptionText: "toolbar-motion-sensor.description",
-        tryItDescription: "toolbar-motion-sensor.tryItDescription",
-        components: [
-            <MotionSensorBar
-                onUpdateValue={onUpdateValue}
-                axisValues={motionSensorValues}
-            />,
-            TRY_IT_MAKE_CODE,
-            FEATURE_REQUEST_ON_GITHUB,
-        ],
-        id: "motion_sensor",
-    };
-};
-export const NEOP_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-neo-pixels.title",
-        tagInput: undefined,
-        tagOutput: TAG_OUTPUT_SVG,
-        descriptionText: "toolbar-neo-pixels.description",
-        tryItDescription: "toolbar-neo-pixels.tryItDescription",
-        components: undefined,
-        id: "neon_pixel",
-    };
-};
-export const PUSHB_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-a-b-push.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        descriptionText: "toolbar-a-b-push.description",
-        tryItDescription: "toolbar-a-b-push.tryItDescription",
-        components: undefined,
-        id: "push_btn",
-    };
-};
-export const RED_LED_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-red-led.title",
-        tagInput: undefined,
-        tagOutput: TAG_OUTPUT_SVG,
-        descriptionText: "toolbar-red-led.description",
-        tryItDescription: "toolbar-red-led.tryItDescription",
-        components: undefined,
-        id: "red_LED",
-    };
-};
-export const SOUND_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-sound-sensor.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        descriptionText: "toolbar-sound-sensor.description",
-        tryItDescription: "toolbar-sound-sensor.tryItDescription",
-        components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB],
-        id: "sound_sensor",
-    };
-};
-export const SWITCH_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-slider-switch.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        descriptionText: "toolbar-slider-switch.description",
-        tryItDescription: "toolbar-slider-switch.tryItDescription",
-        components: undefined,
-        id: "slider_switch",
-    };
-};
-export const SPEAKER_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-speaker.title",
-        tagInput: undefined,
-        tagOutput: TAG_OUTPUT_SVG,
-        descriptionText: "toolbar-speaker.description",
-        tryItDescription: "toolbar-speaker.tryItDescription",
-        components: [FEATURE_REQUEST_ON_GITHUB],
-        id: "speaker",
-    };
-};
-export const TEMPERATURE_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        components: [
-            <TemperatureSensorBar
-                onUpdateSensor={onUpdateValue}
-                value={sensorValues[SENSOR_LIST.TEMPERATURE]}
-            />,
-        ],
-        descriptionText: "toolbar-temperature-sensor.description",
-        descriptionTitle: "toolbar-temperature-sensor.title",
-        id: "temperature",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        tryItDescription: "toolbar-temperature-sensor.tryItDescription",
-    };
-};
-
 export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
-    [CPX_TOOLBAR_ICON_ID.GPIO, GPIO_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.IR, IR_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.LIGHT, LIGHT_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.MOTION, MOTION_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.NEO_PIXEL, NEOP_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.PUSH_BUTTON, PUSHB_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.RED_LED, RED_LED_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.SOUND, SOUND_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.SPEAKER, SPEAKER_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.SWITCH, SWITCH_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.TEMPERATURE, TEMPERATURE_MODAL_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.GPIO, CPX_MODAL.GPIO_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.IR, CPX_MODAL.IR_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.LIGHT, CPX_MODAL.LIGHT_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.MOTION, CPX_MODAL.MOTION_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.NEO_PIXEL, CPX_MODAL.NEOP_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.PUSH_BUTTON, CPX_MODAL.PUSHB_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.RED_LED, CPX_MODAL.RED_LED_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.SOUND, CPX_MODAL.SOUND_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.SPEAKER, CPX_MODAL.SPEAKER_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.SWITCH, CPX_MODAL.SWITCH_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.TEMPERATURE, CPX_MODAL.TEMPERATURE_CONTENT],
     [
         MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER,
         MICROBIT_MODAL.ACCELEROMETER_CONTENT,
     ],
+    [MICROBIT_TOOLBAR_ICON_ID.TEMPERATURE, MICROBIT_MODAL.TEMPERATURE_CONTENT],
+    [MICROBIT_TOOLBAR_ICON_ID.LIGHT, MICROBIT_MODAL.LIGHT_CONTENT],
     [MICROBIT_TOOLBAR_ICON_ID.COMPASS, MICROBIT_MODAL.COMPASS_CONTENT],
     [MICROBIT_TOOLBAR_ICON_ID.LEDS, MICROBIT_MODAL.LED_CONTENT],
     [MICROBIT_TOOLBAR_ICON_ID.PUSH_BUTTON, MICROBIT_MODAL.BUTTON_CONTENT],
diff --git a/src/view/components/toolbar/TemperatureSensorBar.tsx b/src/view/components/toolbar/TemperatureSensorBar.tsx
deleted file mode 100644
index 064c32b6e..000000000
--- a/src/view/components/toolbar/TemperatureSensorBar.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-
-import * as React from "react";
-import { SENSOR_LIST } from "../../constants";
-import "../../styles/TemperatureSensorBar.css";
-import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils";
-import InputSlider from "./InputSlider";
-
-const TEMPERATURE_SLIDER_PROPS: ISliderProps = {
-    axisLabel: " ",
-    maxLabel: "Hot",
-    maxValue: 125,
-    minLabel: "Cold",
-    minValue: -55,
-    type: SENSOR_LIST.TEMPERATURE,
-};
-const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = {
-    LABEL: "Temperature sensor",
-    sliderProps: [TEMPERATURE_SLIDER_PROPS],
-    unitLabel: "°C",
-};
-interface IProps {
-    onUpdateSensor: (sensor: SENSOR_LIST, value: number) => void;
-    value: number;
-}
-class TemperatureSensorBar extends React.Component<IProps, {}> {
-    constructor(props: any) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <div className="temperatureSensorBar">
-                <InputSlider
-                    minValue={
-                        TEMPERATURE_SENSOR_PROPERTIES.sliderProps[
-                            X_SLIDER_INDEX
-                        ].minValue
-                    }
-                    maxValue={
-                        TEMPERATURE_SENSOR_PROPERTIES.sliderProps[
-                            X_SLIDER_INDEX
-                        ].maxValue
-                    }
-                    type={
-                        TEMPERATURE_SENSOR_PROPERTIES.sliderProps[
-                            X_SLIDER_INDEX
-                        ].type
-                    }
-                    minLabel={
-                        TEMPERATURE_SENSOR_PROPERTIES.sliderProps[
-                            X_SLIDER_INDEX
-                        ].minLabel
-                    }
-                    maxLabel={
-                        TEMPERATURE_SENSOR_PROPERTIES.sliderProps[
-                            X_SLIDER_INDEX
-                        ].maxLabel
-                    }
-                    axisLabel={
-                        TEMPERATURE_SENSOR_PROPERTIES.sliderProps[
-                            X_SLIDER_INDEX
-                        ].axisLabel
-                    }
-                    value={this.props.value}
-                    onUpdateValue={this.props.onUpdateSensor}
-                />
-            </div>
-        );
-    }
-}
-
-export default TemperatureSensorBar;
diff --git a/src/view/components/toolbar/__snapshots__/Toolbar.spec.tsx.snap b/src/view/components/toolbar/__snapshots__/Toolbar.spec.tsx.snap
index 7da991a70..50676ed29 100644
--- a/src/view/components/toolbar/__snapshots__/Toolbar.spec.tsx.snap
+++ b/src/view/components/toolbar/__snapshots__/Toolbar.spec.tsx.snap
@@ -20,9 +20,9 @@ exports[`Toolbar component  should render correctly 1`] = `
         onMouseLeave={[Function]}
       >
         <button
-          aria-label="toolbar light-sensor"
+          aria-label="toolbar microbit-light-sensor"
           className="toolbar-button button"
-          id="toolbar-light-sensor-button"
+          id="toolbar-microbit-light-sensor-button"
           onClick={[Function]}
           role="button"
           style={
diff --git a/src/view/components/toolbar/clue/ClueModalContent.tsx b/src/view/components/toolbar/clue/ClueModalContent.tsx
index d18aaa862..250e61388 100644
--- a/src/view/components/toolbar/clue/ClueModalContent.tsx
+++ b/src/view/components/toolbar/clue/ClueModalContent.tsx
@@ -3,21 +3,23 @@ import { GESTURES_CLUE, SENSOR_LIST } from "../../../constants";
 import { TAG_INPUT_SVG } from "../../../svgs/tag_input_svg";
 import { TAG_OUTPUT_SVG } from "../../../svgs/tag_output_svg";
 import { GenericSliderComponent } from "../GenericSliderComponent";
-import { Accelerometer } from "../motion/Accelerometer";
-import { Gesture } from "../motion/Gesture";
+import { Gesture } from "../Gesture";
 import { FEATURE_REQUEST_ON_GITHUB, IModalContent } from "../SensorModalUtils";
-import TemperatureSensorBar from "../TemperatureSensorBar";
 import * as SENSOR_PROPERTIES from "./ClueSensorProperties";
 
 export const TEMPERATURE_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
     sensorValues: { [key: string]: number }
 ): IModalContent => {
+    const temperatureSensorValues = {
+        T: sensorValues[SENSOR_LIST.TEMPERATURE],
+    };
     return {
         components: [
-            <TemperatureSensorBar
-                onUpdateSensor={onUpdateValue}
-                value={sensorValues[SENSOR_LIST.TEMPERATURE]}
+            <GenericSliderComponent
+                onUpdateValue={onUpdateValue}
+                axisValues={temperatureSensorValues}
+                axisProperties={SENSOR_PROPERTIES.TEMPERATURE_SENSOR_PROPERTIES}
             />,
         ],
         descriptionText: "toolbar-clue-temperature-sensor.description",
@@ -55,9 +57,10 @@ export const ACCELEROMETER_CONTENT = (
     };
     return {
         components: (
-            <Accelerometer
+            <GenericSliderComponent
                 onUpdateValue={onUpdateValue}
                 axisValues={accelerometerSensorValues}
+                axisProperties={SENSOR_PROPERTIES.MOTION_SENSOR_PROPERTIES}
             />
         ),
         descriptionText: "toolbar-clue-accelerometer-sensor.description",
@@ -123,7 +126,7 @@ export const LIGHT_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
     sensorValues: { [key: string]: number }
 ): IModalContent => {
-    const accelerometerSensorValues = {
+    const lightSensorValues = {
         R: sensorValues[SENSOR_LIST.LIGHT_R],
         G: sensorValues[SENSOR_LIST.LIGHT_G],
         B: sensorValues[SENSOR_LIST.LIGHT_B],
@@ -133,7 +136,7 @@ export const LIGHT_CONTENT = (
         components: (
             <GenericSliderComponent
                 onUpdateValue={onUpdateValue}
-                axisValues={accelerometerSensorValues}
+                axisValues={lightSensorValues}
                 axisProperties={SENSOR_PROPERTIES.CLUE_LIGHT_PROPERTIES}
             />
         ),
diff --git a/src/view/components/toolbar/clue/ClueSensorProperties.tsx b/src/view/components/toolbar/clue/ClueSensorProperties.tsx
index 77b1109cb..2e2b9975a 100644
--- a/src/view/components/toolbar/clue/ClueSensorProperties.tsx
+++ b/src/view/components/toolbar/clue/ClueSensorProperties.tsx
@@ -146,3 +146,54 @@ export const CLUE_PRESSURE_PROPERTIES: ISensorProps = {
     ],
     unitLabel: "hPa",
 };
+const MOTION_SLIDER_PROPS_X: ISliderProps = {
+    axisLabel: "X",
+    maxLabel: "Right",
+    maxValue: 1023,
+    minLabel: "Left",
+    minValue: -1023,
+    type: SENSOR_LIST.MOTION_X,
+};
+
+const MOTION_SLIDER_PROPS_Y: ISliderProps = {
+    axisLabel: "Y",
+    maxLabel: "Front",
+    maxValue: 1023,
+    minLabel: "Back",
+    minValue: -1023,
+    type: SENSOR_LIST.MOTION_Y,
+};
+
+const MOTION_SLIDER_PROPS_Z: ISliderProps = {
+    axisLabel: "Z",
+    maxLabel: "Down",
+    maxValue: 1023,
+    minLabel: "Up",
+    minValue: -1023,
+    type: SENSOR_LIST.MOTION_Z,
+};
+
+export const MOTION_SENSOR_PROPERTIES: ISensorProps = {
+    LABEL: "Motion sensor",
+    sliderProps: [
+        MOTION_SLIDER_PROPS_X,
+        MOTION_SLIDER_PROPS_Y,
+        MOTION_SLIDER_PROPS_Z,
+    ],
+    unitLabel: "m/s2",
+};
+
+const TEMPERATURE_SLIDER_PROPS: ISliderProps = {
+    axisLabel: "T",
+    maxLabel: "Hot",
+    maxValue: 125,
+    minLabel: "Cold",
+    minValue: -55,
+    type: SENSOR_LIST.TEMPERATURE,
+};
+
+export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = {
+    LABEL: "Temperature sensor",
+    sliderProps: [TEMPERATURE_SLIDER_PROPS],
+    unitLabel: "°C",
+};
diff --git a/src/view/components/toolbar/cpx/CpxModalContent.tsx b/src/view/components/toolbar/cpx/CpxModalContent.tsx
new file mode 100644
index 000000000..55166eb2a
--- /dev/null
+++ b/src/view/components/toolbar/cpx/CpxModalContent.tsx
@@ -0,0 +1,198 @@
+import * as React from "react";
+import { SENSOR_LIST } from "../../../constants";
+import { TAG_INPUT_SVG } from "../../../svgs/tag_input_svg";
+import { TAG_OUTPUT_SVG } from "../../../svgs/tag_output_svg";
+import { GenericSliderComponent } from "../GenericSliderComponent";
+import {
+    FEATURE_REQUEST_ON_GITHUB,
+    IModalContent,
+    TRY_IT_MAKE_CODE,
+} from "../SensorModalUtils";
+import * as SENSOR_PROPERTIES from "./CpxSensorProperties";
+
+export const GPIO_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    return {
+        descriptionTitle: "toolbar-gpio.title",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: TAG_OUTPUT_SVG,
+        descriptionText: "toolbar-gpio.description",
+        tryItDescription: "toolbar-gpio.tryItDescription",
+        components: undefined,
+        id: "GPIO",
+    };
+};
+
+export const IR_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    return {
+        descriptionTitle: "toolbar-ir-sensor.title",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: TAG_OUTPUT_SVG,
+        descriptionText: "toolbar-ir-sensor.description",
+        tryItDescription: "toolbar-ir-sensor.tryItDescription",
+        components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB],
+        id: "IR",
+    };
+};
+export const LIGHT_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    const lightSensorValues = {
+        L: sensorValues[SENSOR_LIST.LIGHT],
+    };
+    return {
+        descriptionTitle: "toolbar-light-sensor.title",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        descriptionText: "toolbar-light-sensor.description",
+        tryItDescription: "toolbar-light-sensor.tryItDescription",
+        components: [
+            <GenericSliderComponent
+                onUpdateValue={onUpdateValue}
+                axisProperties={SENSOR_PROPERTIES.LIGHT_SENSOR_PROPERTIES}
+                axisValues={lightSensorValues}
+            />,
+        ],
+        id: "light_sensor",
+    };
+};
+export const MOTION_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    const motionSensorValues = {
+        X: sensorValues[SENSOR_LIST.MOTION_X],
+        Y: sensorValues[SENSOR_LIST.MOTION_Y],
+        Z: sensorValues[SENSOR_LIST.MOTION_Z],
+    };
+    return {
+        descriptionTitle: "toolbar-motion-sensor.title",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        descriptionText: "toolbar-motion-sensor.description",
+        tryItDescription: "toolbar-motion-sensor.tryItDescription",
+        components: [
+            <GenericSliderComponent
+                onUpdateValue={onUpdateValue}
+                axisProperties={SENSOR_PROPERTIES.MOTION_SENSOR_PROPERTIES}
+                axisValues={motionSensorValues}
+            />,
+            TRY_IT_MAKE_CODE,
+            FEATURE_REQUEST_ON_GITHUB,
+        ],
+        id: "motion_sensor",
+    };
+};
+export const NEOP_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    return {
+        descriptionTitle: "toolbar-neo-pixels.title",
+        tagInput: undefined,
+        tagOutput: TAG_OUTPUT_SVG,
+        descriptionText: "toolbar-neo-pixels.description",
+        tryItDescription: "toolbar-neo-pixels.tryItDescription",
+        components: undefined,
+        id: "neon_pixel",
+    };
+};
+export const PUSHB_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    return {
+        descriptionTitle: "toolbar-a-b-push.title",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        descriptionText: "toolbar-a-b-push.description",
+        tryItDescription: "toolbar-a-b-push.tryItDescription",
+        components: undefined,
+        id: "push_btn",
+    };
+};
+export const RED_LED_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    return {
+        descriptionTitle: "toolbar-red-led.title",
+        tagInput: undefined,
+        tagOutput: TAG_OUTPUT_SVG,
+        descriptionText: "toolbar-red-led.description",
+        tryItDescription: "toolbar-red-led.tryItDescription",
+        components: undefined,
+        id: "red_LED",
+    };
+};
+export const SOUND_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    return {
+        descriptionTitle: "toolbar-sound-sensor.title",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        descriptionText: "toolbar-sound-sensor.description",
+        tryItDescription: "toolbar-sound-sensor.tryItDescription",
+        components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB],
+        id: "sound_sensor",
+    };
+};
+export const SWITCH_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    return {
+        descriptionTitle: "toolbar-slider-switch.title",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        descriptionText: "toolbar-slider-switch.description",
+        tryItDescription: "toolbar-slider-switch.tryItDescription",
+        components: undefined,
+        id: "slider_switch",
+    };
+};
+export const SPEAKER_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    return {
+        descriptionTitle: "toolbar-speaker.title",
+        tagInput: undefined,
+        tagOutput: TAG_OUTPUT_SVG,
+        descriptionText: "toolbar-speaker.description",
+        tryItDescription: "toolbar-speaker.tryItDescription",
+        components: [FEATURE_REQUEST_ON_GITHUB],
+        id: "speaker",
+    };
+};
+export const TEMPERATURE_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    const temperatureSensorValues = {
+        T: sensorValues[SENSOR_LIST.TEMPERATURE],
+    };
+    return {
+        components: [
+            <GenericSliderComponent
+                axisProperties={SENSOR_PROPERTIES.TEMPERATURE_SENSOR_PROPERTIES}
+                onUpdateValue={onUpdateValue}
+                axisValues={temperatureSensorValues}
+            />,
+        ],
+        descriptionText: "toolbar-temperature-sensor.description",
+        descriptionTitle: "toolbar-temperature-sensor.title",
+        id: "temperature",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        tryItDescription: "toolbar-temperature-sensor.tryItDescription",
+    };
+};
diff --git a/src/view/components/toolbar/cpx/CpxSensorProperties.tsx b/src/view/components/toolbar/cpx/CpxSensorProperties.tsx
new file mode 100644
index 000000000..6a5a9990a
--- /dev/null
+++ b/src/view/components/toolbar/cpx/CpxSensorProperties.tsx
@@ -0,0 +1,66 @@
+import { SENSOR_LIST } from "../../../constants";
+import { ISensorProps, ISliderProps } from "../../../viewUtils";
+
+const LIGHT_SLIDER_PROPS: ISliderProps = {
+    maxValue: 255,
+    minValue: 0,
+    minLabel: "Dark",
+    maxLabel: "Bright",
+    type: "light",
+    axisLabel: "L",
+};
+
+export const LIGHT_SENSOR_PROPERTIES: ISensorProps = {
+    LABEL: "Light sensor",
+    sliderProps: [LIGHT_SLIDER_PROPS],
+    unitLabel: "Lux",
+};
+
+const TEMPERATURE_SLIDER_PROPS: ISliderProps = {
+    axisLabel: "T",
+    maxLabel: "Hot",
+    maxValue: 125,
+    minLabel: "Cold",
+    minValue: -55,
+    type: SENSOR_LIST.TEMPERATURE,
+};
+export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = {
+    LABEL: "Temperature sensor",
+    sliderProps: [TEMPERATURE_SLIDER_PROPS],
+    unitLabel: "°C",
+};
+
+const MOTION_SLIDER_PROPS_X: ISliderProps = {
+    axisLabel: "X",
+    maxLabel: "Right",
+    maxValue: 78,
+    minLabel: "Left",
+    minValue: -78,
+    type: SENSOR_LIST.MOTION_X,
+};
+const MOTION_SLIDER_PROPS_Y: ISliderProps = {
+    axisLabel: "Y",
+    maxLabel: "Front",
+    maxValue: 78,
+    minLabel: "Back",
+    minValue: -78,
+    type: SENSOR_LIST.MOTION_Y,
+};
+const MOTION_SLIDER_PROPS_Z: ISliderProps = {
+    axisLabel: "Z",
+    maxLabel: "Down",
+    maxValue: 78,
+    minLabel: "Up",
+    minValue: -78,
+    type: SENSOR_LIST.MOTION_Z,
+};
+
+export const MOTION_SENSOR_PROPERTIES: ISensorProps = {
+    LABEL: "Motion sensor",
+    sliderProps: [
+        MOTION_SLIDER_PROPS_X,
+        MOTION_SLIDER_PROPS_Y,
+        MOTION_SLIDER_PROPS_Z,
+    ],
+    unitLabel: "Lux",
+};
diff --git a/src/view/components/toolbar/microbit/MicrobitModalContent.tsx b/src/view/components/toolbar/microbit/MicrobitModalContent.tsx
index 9eb4fd8a3..6d4ae76ef 100644
--- a/src/view/components/toolbar/microbit/MicrobitModalContent.tsx
+++ b/src/view/components/toolbar/microbit/MicrobitModalContent.tsx
@@ -2,9 +2,10 @@ import * as React from "react";
 import { GESTURES_MICROBIT, SENSOR_LIST } from "../../../constants";
 import { TAG_INPUT_SVG } from "../../../svgs/tag_input_svg";
 import { TAG_OUTPUT_SVG } from "../../../svgs/tag_output_svg";
-import { Accelerometer } from "../motion/Accelerometer";
-import { Gesture } from "../motion/Gesture";
+import { GenericSliderComponent } from "../GenericSliderComponent";
+import { Gesture } from "../Gesture";
 import { FEATURE_REQUEST_ON_GITHUB, IModalContent } from "../SensorModalUtils";
+import * as SENSOR_PROPERTIES from "./MicrobitSensorProperties";
 
 export const ACCELEROMETER_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
@@ -18,9 +19,10 @@ export const ACCELEROMETER_CONTENT = (
     };
     return {
         components: (
-            <Accelerometer
+            <GenericSliderComponent
                 onUpdateValue={onUpdateValue}
                 axisValues={accelerometerSensorValues}
+                axisProperties={SENSOR_PROPERTIES.MOTION_SENSOR_PROPERTIES}
             />
         ),
         descriptionText: "toolbar-accelerometer-sensor.description",
@@ -136,3 +138,50 @@ export const GESTURE_CONTENT = (
         id: "gesture_sensor",
     };
 };
+export const LIGHT_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    const lightSensorValues = {
+        L: sensorValues[SENSOR_LIST.LIGHT],
+    };
+    return {
+        descriptionTitle: "toolbar-light-sensor.title",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        descriptionText: "toolbar-light-sensor.description",
+        tryItDescription: "toolbar-light-sensor.tryItDescription",
+        components: [
+            <GenericSliderComponent
+                onUpdateValue={onUpdateValue}
+                axisValues={lightSensorValues}
+                axisProperties={SENSOR_PROPERTIES.LIGHT_SENSOR_PROPERTIES}
+            />,
+        ],
+        id: "light_sensor",
+    };
+};
+
+export const TEMPERATURE_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    const temperatureSensorValues = {
+        T: sensorValues[SENSOR_LIST.TEMPERATURE],
+    };
+    return {
+        components: [
+            <GenericSliderComponent
+                onUpdateValue={onUpdateValue}
+                axisValues={temperatureSensorValues}
+                axisProperties={SENSOR_PROPERTIES.TEMPERATURE_SENSOR_PROPERTIES}
+            />,
+        ],
+        descriptionText: "toolbar-temperature-sensor.description",
+        descriptionTitle: "toolbar-temperature-sensor.title",
+        id: "temperature",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        tryItDescription: "toolbar-temperature-sensor.tryItDescription",
+    };
+};
diff --git a/src/view/components/toolbar/motion/Accelerometer.tsx b/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx
similarity index 51%
rename from src/view/components/toolbar/motion/Accelerometer.tsx
rename to src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx
index d6f4759d0..42470ce44 100644
--- a/src/view/components/toolbar/motion/Accelerometer.tsx
+++ b/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx
@@ -1,65 +1,69 @@
-import * as React from "react";
-import { SENSOR_LIST } from "../../../constants";
-import { ISensorProps, ISliderProps } from "../../../viewUtils";
-
-import { GenericSliderComponent } from "../GenericSliderComponent";
-
-const MOTION_SLIDER_PROPS_X: ISliderProps = {
-    axisLabel: "X",
-    maxLabel: "Right",
-    maxValue: 1023,
-    minLabel: "Left",
-    minValue: -1023,
-    type: SENSOR_LIST.MOTION_X,
-};
-
-const MOTION_SLIDER_PROPS_Y: ISliderProps = {
-    axisLabel: "Y",
-    maxLabel: "Front",
-    maxValue: 1023,
-    minLabel: "Back",
-    minValue: -1023,
-    type: SENSOR_LIST.MOTION_Y,
-};
-
-const MOTION_SLIDER_PROPS_Z: ISliderProps = {
-    axisLabel: "Z",
-    maxLabel: "Down",
-    maxValue: 1023,
-    minLabel: "Up",
-    minValue: -1023,
-    type: SENSOR_LIST.MOTION_Z,
-};
-
-const MOTION_SENSOR_PROPERTIES: ISensorProps = {
-    LABEL: "Motion sensor",
-    sliderProps: [
-        MOTION_SLIDER_PROPS_X,
-        MOTION_SLIDER_PROPS_Y,
-        MOTION_SLIDER_PROPS_Z,
-    ],
-    unitLabel: "Lux",
-};
-
-interface IProps {
-    axisValues: {
-        X: number;
-        Y: number;
-        Z: number;
-    };
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void;
-}
-
-export class Accelerometer extends React.Component<IProps> {
-    render() {
-        return (
-            <div className="accelerometer">
-                <GenericSliderComponent
-                    axisProperties={MOTION_SENSOR_PROPERTIES}
-                    onUpdateValue={this.props.onUpdateValue}
-                    axisValues={this.props.axisValues}
-                />
-            </div>
-        );
-    }
-}
+import { SENSOR_LIST } from "../../../constants";
+import { ISensorProps, ISliderProps } from "../../../viewUtils";
+
+const LIGHT_SLIDER_PROPS: ISliderProps = {
+    maxValue: 255,
+    minValue: 0,
+    minLabel: "Dark",
+    maxLabel: "Bright",
+    type: "light",
+    axisLabel: "L",
+};
+
+export const LIGHT_SENSOR_PROPERTIES: ISensorProps = {
+    LABEL: "Light sensor",
+    sliderProps: [LIGHT_SLIDER_PROPS],
+    unitLabel: "Lux",
+};
+
+const MOTION_SLIDER_PROPS_X: ISliderProps = {
+    axisLabel: "X",
+    maxLabel: "Right",
+    maxValue: 1023,
+    minLabel: "Left",
+    minValue: -1023,
+    type: SENSOR_LIST.MOTION_X,
+};
+
+const MOTION_SLIDER_PROPS_Y: ISliderProps = {
+    axisLabel: "Y",
+    maxLabel: "Front",
+    maxValue: 1023,
+    minLabel: "Back",
+    minValue: -1023,
+    type: SENSOR_LIST.MOTION_Y,
+};
+
+const MOTION_SLIDER_PROPS_Z: ISliderProps = {
+    axisLabel: "Z",
+    maxLabel: "Down",
+    maxValue: 1023,
+    minLabel: "Up",
+    minValue: -1023,
+    type: SENSOR_LIST.MOTION_Z,
+};
+
+export const MOTION_SENSOR_PROPERTIES: ISensorProps = {
+    LABEL: "Motion sensor",
+    sliderProps: [
+        MOTION_SLIDER_PROPS_X,
+        MOTION_SLIDER_PROPS_Y,
+        MOTION_SLIDER_PROPS_Z,
+    ],
+    unitLabel: "m/s2",
+};
+
+const TEMPERATURE_SLIDER_PROPS: ISliderProps = {
+    axisLabel: "T",
+    maxLabel: "Hot",
+    maxValue: 125,
+    minLabel: "Cold",
+    minValue: -55,
+    type: SENSOR_LIST.TEMPERATURE,
+};
+
+export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = {
+    LABEL: "Temperature sensor",
+    sliderProps: [TEMPERATURE_SLIDER_PROPS],
+    unitLabel: "°C",
+};
diff --git a/src/view/components/toolbar/motion/Accelerometer.spec.tsx b/src/view/components/toolbar/motion/Accelerometer.spec.tsx
deleted file mode 100644
index 548e496ff..000000000
--- a/src/view/components/toolbar/motion/Accelerometer.spec.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { IntlProvider } from "react-intl";
-import * as testRenderer from "react-test-renderer";
-import { Accelerometer } from "./Accelerometer";
-
-describe("Accelerometer component ", () => {
-    const mockProps = {
-        axisValues: {
-            X: 1,
-            Y: 0,
-            Z: 1,
-        },
-        onUpdateValue: () => {},
-    };
-
-    it("should render correctly", () => {
-        const component = testRenderer
-            .create(
-                <IntlProvider locale="en">
-                    <Accelerometer
-                        axisValues={mockProps.axisValues}
-                        onUpdateValue={mockProps.onUpdateValue}
-                    />
-                </IntlProvider>
-            )
-            .toJSON();
-        expect(component).toMatchSnapshot();
-    });
-
-    it("should render without crashing", () => {
-        const div = document.createElement("div");
-        ReactDOM.render(
-            <IntlProvider locale="en">
-                <Accelerometer
-                    axisValues={mockProps.axisValues}
-                    onUpdateValue={mockProps.onUpdateValue}
-                />
-            </IntlProvider>,
-            div
-        );
-        ReactDOM.unmountComponentAtNode(div);
-    });
-});
diff --git a/src/view/components/toolbar/motion/MotionSensorBar.tsx b/src/view/components/toolbar/motion/MotionSensorBar.tsx
deleted file mode 100644
index 5c54904a1..000000000
--- a/src/view/components/toolbar/motion/MotionSensorBar.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-
-import * as React from "react";
-import { CONSTANTS, SENSOR_LIST, WEBVIEW_MESSAGES } from "../../../constants";
-import "../../../styles/MotionSensorBar.css";
-import { sendMessage } from "../../../utils/MessageUtils";
-import { ISensorProps, ISliderProps } from "../../../viewUtils";
-import svg from "../../cpx/Svg_utils";
-import { GenericSliderComponent } from "../GenericSliderComponent";
-import SensorButton from "../SensorButton";
-
-const MOTION_SLIDER_PROPS_X: ISliderProps = {
-    axisLabel: "X",
-    maxLabel: "Right",
-    maxValue: 78,
-    minLabel: "Left",
-    minValue: -78,
-    type: SENSOR_LIST.MOTION_X,
-};
-const MOTION_SLIDER_PROPS_Y: ISliderProps = {
-    axisLabel: "Y",
-    maxLabel: "Front",
-    maxValue: 78,
-    minLabel: "Back",
-    minValue: -78,
-    type: SENSOR_LIST.MOTION_Y,
-};
-const MOTION_SLIDER_PROPS_Z: ISliderProps = {
-    axisLabel: "Z",
-    maxLabel: "Down",
-    maxValue: 78,
-    minLabel: "Up",
-    minValue: -78,
-    type: SENSOR_LIST.MOTION_Z,
-};
-
-const MOTION_SENSOR_PROPERTIES: ISensorProps = {
-    LABEL: "Motion sensor",
-    sliderProps: [
-        MOTION_SLIDER_PROPS_X,
-        MOTION_SLIDER_PROPS_Y,
-        MOTION_SLIDER_PROPS_Z,
-    ],
-    unitLabel: "Lux",
-};
-interface IProps {
-    axisValues: {
-        X: number;
-        Y: number;
-        Z: number;
-    };
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void;
-}
-
-class MotionSensorBar extends React.Component<IProps> {
-    constructor(props: any) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <div className="MotionSensorBar">
-                <div className="sensor-button-container">
-                    <SensorButton
-                        label="Shake"
-                        type="shake"
-                        onMouseUp={this.onMouseUp}
-                        onMouseDown={this.onMouseDown}
-                        onKeyUp={this.onKeyUp}
-                        onKeyDown={this.onKeyDown}
-                    />
-                </div>
-                <br />
-                <GenericSliderComponent
-                    axisProperties={MOTION_SENSOR_PROPERTIES}
-                    onUpdateValue={this.props.onUpdateValue}
-                    axisValues={this.props.axisValues}
-                />
-                <br />
-            </div>
-        );
-    }
-
-    private onMouseDown = (event: React.PointerEvent<HTMLButtonElement>) => {
-        this.updateShakePress(true, event.currentTarget.id);
-        this.handleOnclick(true, "shake");
-    };
-
-    private onKeyUp = (event: React.KeyboardEvent<HTMLButtonElement>) =>
-        this.onKeyEvent(event, false);
-
-    private onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) =>
-        this.onKeyEvent(event, true);
-
-    private onMouseUp = (event: React.PointerEvent<HTMLButtonElement>) => {
-        this.updateShakePress(false, event.currentTarget.id);
-        this.handleOnclick(false, "shake");
-    };
-
-    private handleOnclick = (active: boolean, type: string) => {
-        const messageState = { [type]: active };
-        sendMessage(WEBVIEW_MESSAGES.SENSOR_CHANGED, messageState);
-    };
-
-    private onKeyEvent(
-        event: React.KeyboardEvent<HTMLButtonElement>,
-        active: boolean
-    ) {
-        if (
-            [event.keyCode, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)
-        ) {
-            this.handleOnclick(active, "shake");
-        }
-    }
-
-    private updateShakePress = (shakeState: boolean, id: string): void => {
-        const svgElement = window.document.getElementById("cpx_svg");
-        const buttonElement = window.document.getElementById(id);
-        const cpxSvg: SVGElement = (svgElement as unknown) as SVGElement;
-
-        if (svgElement && cpxSvg && buttonElement) {
-            buttonElement.setAttribute("aria-pressed", shakeState.toString());
-            shakeState
-                ? svg.addClass(cpxSvg, "shake-pressed")
-                : svg.removeClass(cpxSvg, "shake-pressed");
-        }
-    };
-}
-
-export default MotionSensorBar;
diff --git a/src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap b/src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap
deleted file mode 100644
index 2e78e8daf..000000000
--- a/src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap
+++ /dev/null
@@ -1,210 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Accelerometer component  should render correctly 1`] = `
-<div
-  className="accelerometer"
->
-  <div
-    className="GenericSliderComponent"
-  >
-    <div
-      className="inputSlider"
-    >
-      <span>
-        X
-      </span>
-      <input
-        aria-label="motion_x sensor input X"
-        className="sliderValue"
-        defaultValue="-1,023"
-        onInput={[Function]}
-        onKeyUp={[Function]}
-        pattern="^-?[0-9]{0,4}$"
-        type="text"
-        value={1}
-      />
-      <span
-        className="sliderArea"
-      >
-        <span
-          className="upLabelArea"
-        >
-          <span
-            className="minLabel"
-          >
-            -1023
-          </span>
-          <span
-            className="maxLabel"
-          >
-            1023
-          </span>
-        </span>
-        <input
-          aria-label="motion_x sensor"
-          aria-valuemax={1023}
-          aria-valuemin={-1023}
-          aria-valuenow={1}
-          className="slider"
-          defaultValue="-1,023"
-          disabled={false}
-          max={1023}
-          min={-1023}
-          onChange={[Function]}
-          onKeyUp={[Function]}
-          onMouseUp={[Function]}
-          type="range"
-          value={1}
-        />
-        <span
-          className="downLabelArea"
-        >
-          <span
-            className="minLabel"
-          >
-            Left
-          </span>
-          <span
-            className="maxLabel"
-          >
-            Right
-          </span>
-        </span>
-      </span>
-    </div>
-    <br />
-    <div
-      className="inputSlider"
-    >
-      <span>
-        Y
-      </span>
-      <input
-        aria-label="motion_y sensor input Y"
-        className="sliderValue"
-        defaultValue="-1,023"
-        onInput={[Function]}
-        onKeyUp={[Function]}
-        pattern="^-?[0-9]{0,4}$"
-        type="text"
-        value={0}
-      />
-      <span
-        className="sliderArea"
-      >
-        <span
-          className="upLabelArea"
-        >
-          <span
-            className="minLabel"
-          >
-            -1023
-          </span>
-          <span
-            className="maxLabel"
-          >
-            1023
-          </span>
-        </span>
-        <input
-          aria-label="motion_y sensor"
-          aria-valuemax={1023}
-          aria-valuemin={-1023}
-          aria-valuenow={0}
-          className="slider"
-          defaultValue="-1,023"
-          disabled={false}
-          max={1023}
-          min={-1023}
-          onChange={[Function]}
-          onKeyUp={[Function]}
-          onMouseUp={[Function]}
-          type="range"
-          value={0}
-        />
-        <span
-          className="downLabelArea"
-        >
-          <span
-            className="minLabel"
-          >
-            Back
-          </span>
-          <span
-            className="maxLabel"
-          >
-            Front
-          </span>
-        </span>
-      </span>
-    </div>
-    <br />
-    <div
-      className="inputSlider"
-    >
-      <span>
-        Z
-      </span>
-      <input
-        aria-label="motion_z sensor input Z"
-        className="sliderValue"
-        defaultValue="-1,023"
-        onInput={[Function]}
-        onKeyUp={[Function]}
-        pattern="^-?[0-9]{0,4}$"
-        type="text"
-        value={1}
-      />
-      <span
-        className="sliderArea"
-      >
-        <span
-          className="upLabelArea"
-        >
-          <span
-            className="minLabel"
-          >
-            -1023
-          </span>
-          <span
-            className="maxLabel"
-          >
-            1023
-          </span>
-        </span>
-        <input
-          aria-label="motion_z sensor"
-          aria-valuemax={1023}
-          aria-valuemin={-1023}
-          aria-valuenow={1}
-          className="slider"
-          defaultValue="-1,023"
-          disabled={false}
-          max={1023}
-          min={-1023}
-          onChange={[Function]}
-          onKeyUp={[Function]}
-          onMouseUp={[Function]}
-          type="range"
-          value={1}
-        />
-        <span
-          className="downLabelArea"
-        >
-          <span
-            className="minLabel"
-          >
-            Up
-          </span>
-          <span
-            className="maxLabel"
-          >
-            Down
-          </span>
-        </span>
-      </span>
-    </div>
-    <br />
-  </div>
-</div>
-`;
diff --git a/src/view/container/device/__snapshots__/Device.spec.tsx.snap b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
index bce966d43..54a45df26 100644
--- a/src/view/container/device/__snapshots__/Device.spec.tsx.snap
+++ b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
@@ -2783,9 +2783,9 @@ exports[`Device component  should render correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <button
-            aria-label="toolbar temperature-sensor"
+            aria-label="toolbar microbit-temperature-sensor"
             className="toolbar-button button"
-            id="toolbar-temperature-sensor-button"
+            id="toolbar-microbit-temperature-sensor-button"
             onClick={[Function]}
             role="button"
             style={
@@ -2850,9 +2850,9 @@ exports[`Device component  should render correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <button
-            aria-label="toolbar light-sensor"
+            aria-label="toolbar microbit-light-sensor"
             className="toolbar-button button"
-            id="toolbar-light-sensor-button"
+            id="toolbar-microbit-light-sensor-button"
             onClick={[Function]}
             role="button"
             style={
diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css
index ef35688a9..faca0569c 100644
--- a/src/view/styles/ToolBar.css
+++ b/src/view/styles/ToolBar.css
@@ -167,10 +167,16 @@
     -webkit-appearance: none;
     text-decoration: none;
 }
+
 .gesture-container {
     display: "flex";
     justify-content: "space-between";
     flex-direction: "column";
     align-items: "center";
     height: 750;
+    padding-top: 10px;
+}
+
+.generic-slider-component {
+    padding-top: 10px;
 }