diff --git a/src/view/components/clue/Clue.tsx b/src/view/components/clue/Clue.tsx
index 35111b288..294b2fcc0 100644
--- a/src/view/components/clue/Clue.tsx
+++ b/src/view/components/clue/Clue.tsx
@@ -33,6 +33,12 @@ const DEFAULT_STATE = {
         [SENSOR_LIST.HUMIDITY]: 0,
         [SENSOR_LIST.PRESSURE]: 0,
         [SENSOR_LIST.PROXIMITY]: 0,
+        [SENSOR_LIST.GYRO_X]: 0,
+        [SENSOR_LIST.GYRO_Y]: 0,
+        [SENSOR_LIST.GYRO_Z]: 0,
+        [SENSOR_LIST.MAGNET_X]: 0,
+        [SENSOR_LIST.MAGNET_Y]: 0,
+        [SENSOR_LIST.MAGNET_Z]: 0,
     },
     currentSelectedGesture: GESTURES_CLUE[0],
 };
@@ -129,6 +135,14 @@ const CLUE_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [
         label: CLUE_TOOLBAR_ICON_ID.GESTURE,
         image: TOOLBAR_SVG.GESTURE_SVG,
     },
+    {
+        label: CLUE_TOOLBAR_ICON_ID.GYROSCOPE,
+        image: TOOLBAR_SVG.GYROSCOPE_SVG,
+    },
+    {
+        label: CLUE_TOOLBAR_ICON_ID.MAGNETOSCOPE,
+        image: TOOLBAR_SVG.MAGNET_SVG,
+    },
     {
         label: CLUE_TOOLBAR_ICON_ID.GPIO,
         image: TOOLBAR_SVG.GPIO_SVG,
diff --git a/src/view/components/microbit/Microbit.tsx b/src/view/components/microbit/Microbit.tsx
index c0e062e13..c1380ec99 100644
--- a/src/view/components/microbit/Microbit.tsx
+++ b/src/view/components/microbit/Microbit.tsx
@@ -115,6 +115,10 @@ const MICROBIT_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [
         image: TOOLBAR_SVG.GPIO_SVG,
         label: MICROBIT_TOOLBAR_ICON_ID.GPIO,
     },
+    {
+        image: TOOLBAR_SVG.GYROSCOPE_SVG,
+        label: MICROBIT_TOOLBAR_ICON_ID.COMPASS,
+    },
     {
         image: TOOLBAR_SVG.SPEAKER_SVG,
         label: MICROBIT_TOOLBAR_ICON_ID.SOUND,
diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx
index 8da9575ce..b49979fa9 100644
--- a/src/view/components/toolbar/SensorModalUtils.tsx
+++ b/src/view/components/toolbar/SensorModalUtils.tsx
@@ -74,6 +74,7 @@ export const MICROBIT_TOOLBAR_ICON_ID = {
     SOUND: "toolbar-microbit-sound",
     WIRELESS: "toolbar-microbit-wireless",
     GESTURE: "toolbar-microbit-gesture-sensor",
+    COMPASS: "toolbar-microbit-compass-sensor",
 };
 
 export const CLUE_TOOLBAR_ICON_ID = {
@@ -90,6 +91,8 @@ export const CLUE_TOOLBAR_ICON_ID = {
     GESTURE: "toolbar-clue-gesture-sensor",
     PROXIMITY: "toolbar-clue-proximity-sensor",
     BLUETOOTH: "toolbar-clue-bluetooth",
+    MAGNETOSCOPE: "toolbar-clue-magnet-sensor",
+    GYROSCOPE: "toolbar-clue-gyroscope-sensor",
 };
 
 export interface IModalContent {
@@ -304,13 +307,15 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
     [CPX_TOOLBAR_ICON_ID.TEMPERATURE, TEMPERATURE_MODAL_CONTENT],
     [
         MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER,
-        MICROBIT_MODAL.ACCELEROMETER_MODAL_CONTENT,
+        MICROBIT_MODAL.ACCELEROMETER_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],
-    [MICROBIT_TOOLBAR_ICON_ID.GPIO, MICROBIT_MODAL.GPIO_MODAL_CONTENT],
-    [MICROBIT_TOOLBAR_ICON_ID.SOUND, MICROBIT_MODAL.SOUND_MODAL_CONTENT],
+    [MICROBIT_TOOLBAR_ICON_ID.GPIO, MICROBIT_MODAL.GPIO_CONTENT],
+    [MICROBIT_TOOLBAR_ICON_ID.SOUND, MICROBIT_MODAL.SOUND_CONTENT],
     [MICROBIT_TOOLBAR_ICON_ID.WIRELESS, MICROBIT_MODAL.WIRELESS_CONTENT],
+    [MICROBIT_TOOLBAR_ICON_ID.COMPASS, MICROBIT_MODAL.COMPASS_CONTENT],
     [CLUE_TOOLBAR_ICON_ID.TEMPERATURE, CLUE_MODAL.TEMPERATURE_CONTENT],
     [CLUE_TOOLBAR_ICON_ID.ACCELEROMETER, CLUE_MODAL.ACCELEROMETER_CONTENT],
     [CLUE_TOOLBAR_ICON_ID.PUSH_BUTTON, CLUE_MODAL.BUTTON_CONTENT],
@@ -324,6 +329,8 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
     [CLUE_TOOLBAR_ICON_ID.BLUETOOTH, CLUE_MODAL.BLUETOOTH_CONTENT],
     [CLUE_TOOLBAR_ICON_ID.ACCELEROMETER, CLUE_MODAL.ACCELEROMETER_CONTENT],
     [CLUE_TOOLBAR_ICON_ID.SPEAKER, CLUE_MODAL.SPEAKER_CONTENT],
+    [CLUE_TOOLBAR_ICON_ID.GYROSCOPE, CLUE_MODAL.GYROSCOPE_CONTENT],
+    [CLUE_TOOLBAR_ICON_ID.MAGNETOSCOPE, CLUE_MODAL.MAGNETOSCOPE_CONTENT],
 ]);
 
 export const getModalContent = (
@@ -336,10 +343,7 @@ export const getModalContent = (
     if (label === CLUE_TOOLBAR_ICON_ID.GESTURE) {
         return CLUE_MODAL.GESTURE_CONTENT(onSelectGestures, sendGesture);
     } else if (label === MICROBIT_TOOLBAR_ICON_ID.GESTURE) {
-        return MICROBIT_MODAL.GESTURE_MODAL_CONTENT(
-            onSelectGestures,
-            sendGesture
-        );
+        return MICROBIT_MODAL.GESTURE_CONTENT(onSelectGestures, sendGesture);
     }
     const modalContentConstructor = LABEL_TO_MODAL_CONTENT_CONSTRUCTOR.get(
         label
diff --git a/src/view/components/toolbar/clue/ClueModalContent.tsx b/src/view/components/toolbar/clue/ClueModalContent.tsx
index 7d8ba8928..bdd2ceb1d 100644
--- a/src/view/components/toolbar/clue/ClueModalContent.tsx
+++ b/src/view/components/toolbar/clue/ClueModalContent.tsx
@@ -68,6 +68,56 @@ export const ACCELEROMETER_CONTENT = (
         tryItDescription: "toolbar-clue-accelerometer-sensor.tryItDescription",
     };
 };
+export const GYROSCOPE_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    const gyroSensorValues = {
+        X: sensorValues[SENSOR_LIST.GYRO_X],
+        Y: sensorValues[SENSOR_LIST.GYRO_Y],
+        Z: sensorValues[SENSOR_LIST.GYRO_Z],
+    };
+    return {
+        components: (
+            <GenericSliderComponent
+                onUpdateValue={onUpdateValue}
+                axisValues={gyroSensorValues}
+                axisProperties={SENSOR_PROPERTIES.CLUE_GYRO_PROPERTIES}
+            />
+        ),
+        descriptionText: "toolbar-clue-gyroscope-sensor.description",
+        descriptionTitle: "toolbar-clue-gyroscope-sensor.title",
+        id: "gyroscope",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        tryItDescription: "toolbar-clue-gyroscope-sensor.tryItDescription",
+    };
+};
+export const MAGNETOSCOPE_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    const magnetSensorValues = {
+        X: sensorValues[SENSOR_LIST.MAGNET_X],
+        Y: sensorValues[SENSOR_LIST.MAGNET_Y],
+        Z: sensorValues[SENSOR_LIST.MAGNET_Z],
+    };
+    return {
+        components: (
+            <GenericSliderComponent
+                onUpdateValue={onUpdateValue}
+                axisValues={magnetSensorValues}
+                axisProperties={SENSOR_PROPERTIES.CLUE_MAGNET_PROPERTIES}
+            />
+        ),
+        descriptionText: "toolbar-clue-magnet-sensor.description",
+        descriptionTitle: "toolbar-clue-magnet-sensor.title",
+        id: "magnetoscope",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        tryItDescription: "toolbar-clue-magnet-sensor.tryItDescription",
+    };
+};
 
 export const LIGHT_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
diff --git a/src/view/components/toolbar/clue/ClueSensorProperties.tsx b/src/view/components/toolbar/clue/ClueSensorProperties.tsx
index fc058559e..0dc2e5e3f 100644
--- a/src/view/components/toolbar/clue/ClueSensorProperties.tsx
+++ b/src/view/components/toolbar/clue/ClueSensorProperties.tsx
@@ -41,6 +41,69 @@ export const CLUE_LIGHT_PROPERTIES: ISensorProps = {
     sliderProps: [CLUE_SLIDER_R, CLUE_SLIDER_G, CLUE_SLIDER_B, CLUE_SLIDER_C],
     unitLabel: "Lux",
 };
+
+// Range for magnet found here https://www.adafruit.com/product/4479
+const CLUE_MAGNET_X: ISliderProps = {
+    axisLabel: "X",
+    maxLabel: "Max",
+    minLabel: "Min",
+    maxValue: 1600,
+    minValue: 400,
+    type: SENSOR_LIST.MAGNET_X,
+};
+const CLUE_MAGNET_Y: ISliderProps = {
+    axisLabel: "Y",
+    maxLabel: "Max",
+    minLabel: "Min",
+    maxValue: 1600,
+    minValue: 400,
+    type: SENSOR_LIST.MAGNET_Y,
+};
+const CLUE_MAGNET_Z: ISliderProps = {
+    axisLabel: "Z",
+    maxLabel: "Max",
+    minLabel: "Min",
+    maxValue: 1600,
+    minValue: 400,
+    type: SENSOR_LIST.MAGNET_Z,
+};
+
+export const CLUE_MAGNET_PROPERTIES: ISensorProps = {
+    LABEL: "Magnetoscope",
+    sliderProps: [CLUE_MAGNET_X, CLUE_MAGNET_Y, CLUE_MAGNET_Z],
+    unitLabel: "μT",
+};
+const CLUE_GYRO_X: ISliderProps = {
+    axisLabel: "X",
+    maxLabel: "Max",
+    minLabel: "Min",
+    maxValue: 1000,
+    minValue: -1000,
+    type: SENSOR_LIST.GYRO_X,
+};
+const CLUE_GYRO_Y: ISliderProps = {
+    axisLabel: "Y",
+    maxLabel: "Max",
+    minLabel: "Min",
+    maxValue: 1000,
+    minValue: -1000,
+    type: SENSOR_LIST.GYRO_Y,
+};
+const CLUE_GYRO_Z: ISliderProps = {
+    axisLabel: "Z",
+    maxLabel: "Max",
+    minLabel: "Min",
+    maxValue: 1000,
+    minValue: -1000,
+    type: SENSOR_LIST.GYRO_Z,
+};
+
+export const CLUE_GYRO_PROPERTIES: ISensorProps = {
+    LABEL: "Gyroscope",
+    sliderProps: [CLUE_GYRO_X, CLUE_GYRO_Y, CLUE_GYRO_Z],
+    unitLabel: "deg/s",
+};
+
 export const CLUE_HUMIDITY_PROPERTIES: ISensorProps = {
     LABEL: "Humidity Sensor",
     sliderProps: [
diff --git a/src/view/components/toolbar/microbit/MicrobitModalContent.tsx b/src/view/components/toolbar/microbit/MicrobitModalContent.tsx
index c34b6058d..9eb4fd8a3 100644
--- a/src/view/components/toolbar/microbit/MicrobitModalContent.tsx
+++ b/src/view/components/toolbar/microbit/MicrobitModalContent.tsx
@@ -6,7 +6,7 @@ import { Accelerometer } from "../motion/Accelerometer";
 import { Gesture } from "../motion/Gesture";
 import { FEATURE_REQUEST_ON_GITHUB, IModalContent } from "../SensorModalUtils";
 
-export const ACCELEROMETER_MODAL_CONTENT = (
+export const ACCELEROMETER_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
     sensorValues: { [key: string]: number }
 ): IModalContent => {
@@ -60,7 +60,7 @@ export const BUTTON_CONTENT = (
         id: "microbit_button",
     };
 };
-export const SOUND_MODAL_CONTENT = (
+export const SOUND_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
     sensorValues: { [key: string]: number }
 ): IModalContent => {
@@ -74,7 +74,7 @@ export const SOUND_MODAL_CONTENT = (
         id: "microbit_sound",
     };
 };
-export const GPIO_MODAL_CONTENT = (
+export const GPIO_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
     sensorValues: { [key: string]: number }
 ): IModalContent => {
@@ -88,6 +88,20 @@ export const GPIO_MODAL_CONTENT = (
         id: "microbit_gpio",
     };
 };
+export const COMPASS_CONTENT = (
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
+    sensorValues: { [key: string]: number }
+): IModalContent => {
+    return {
+        descriptionTitle: "toolbar-microbit-compass-sensor.title",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: TAG_OUTPUT_SVG,
+        descriptionText: "toolbar-microbit-compass-sensor.description",
+        tryItDescription: "toolbar-microbit-compass-sensor.tryItDescription",
+        components: [FEATURE_REQUEST_ON_GITHUB],
+        id: "microbit_compass",
+    };
+};
 export const WIRELESS_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
     sensorValues: { [key: string]: number }
@@ -102,7 +116,7 @@ export const WIRELESS_CONTENT = (
         id: "microbit_wireless",
     };
 };
-export const GESTURE_MODAL_CONTENT = (
+export const GESTURE_CONTENT = (
     onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
     sendGesture?: (isActive: boolean) => void
 ): IModalContent => {
diff --git a/src/view/constants.ts b/src/view/constants.ts
index a34dc2564..b3719e124 100644
--- a/src/view/constants.ts
+++ b/src/view/constants.ts
@@ -107,6 +107,12 @@ export enum SENSOR_LIST {
     HUMIDITY = "humidity",
     PRESSURE = "pressure",
     PROXIMITY = "proximity",
+    MAGNET_X = "magnet_x",
+    MAGNET_Y = "magnet_y",
+    MAGNET_Z = "magnet_z",
+    GYRO_X = "gyro_x",
+    GYRO_Y = "gyro_y",
+    GYRO_Z = "gyro_z",
 }
 
 export const GESTURES_MICROBIT = [