diff --git a/love/src/components/AuxTel/Dome/Dome.jsx b/love/src/components/AuxTel/Dome/Dome.jsx
index c165469a9..f00de7580 100644
--- a/love/src/components/AuxTel/Dome/Dome.jsx
+++ b/love/src/components/AuxTel/Dome/Dome.jsx
@@ -8,6 +8,8 @@ import DomeTopView from './DomeTopView';
 import DomePointing from './DomePointing';
 import DomeShutter from './DomeShutter';
 import MountTopView from './MountTopView';
+import Elevation from 'components/GeneralPurpose/Elevation/Elevation';
+import Azimuth from 'components/GeneralPurpose/Azimuth/Azimuth';
 
 import WindRose from '../../icons/WindRose/WindRose';
 import DomeSummaryTable from './DomeSummaryTable/DomeSummaryTable';
@@ -208,8 +210,30 @@ export default class Dome extends Component {
             <div className={styles.windRoseContainer}>
               <WindRose />
             </div>
+            <div className={styles.elevationContainer}>
+              <Elevation
+                height={height}
+                width={width}
+                radius={width / 2}
+                maxL3={90}
+                maxL2={85}
+                maxL1={80}
+                minL1={10}
+                minL2={5}
+                minL3={0}
+                currentValue={currentPointing.el}
+                targetValue={currentPointing.az}
+              />
+            </div>
 
-            <DomeTopView width={width} height={height} />
+            <Azimuth
+              className={styles.svgAzimuth}
+              width={width}
+              height={height}
+              currentValue={domeAz}
+              targetValue={domeTargetAz}
+            />
+            {/*<DomeTopView width={width} height={height} />*/}
             <MountTopView currentPointing={currentPointing} />
             <DomeShutter
               width={width}
diff --git a/love/src/components/AuxTel/Dome/Dome.module.css b/love/src/components/AuxTel/Dome/Dome.module.css
index 78df0a979..b04e9a358 100644
--- a/love/src/components/AuxTel/Dome/Dome.module.css
+++ b/love/src/components/AuxTel/Dome/Dome.module.css
@@ -104,10 +104,21 @@
   width: 12%;
 }
 
+.elevationContainer {
+  position: absolute;
+  left: 75%;
+  top: 25%;
+  width: 70%;
+}
+
+.elevationContainer svg {
+  width: 60%;
+}
+
 .vignettingDistanceContainer {
   position: absolute;
   left: 50%;
-  bottom: 2%;
+  bottom: 0%;
   transform: translate(-50%, 0);
 }
 
@@ -126,3 +137,13 @@
   stroke: var(--default-active-background-color);
   fill: var(--second-quaternary-background-dimmed-color);
 }
+
+.svgAzimuth {
+  transform-origin: 50% 50%;
+  transform: scale(1.1);
+  width: 100%;
+}
+
+.svgAzimuth svg {
+  width: 110%;
+}
diff --git a/love/src/components/AuxTel/Dome/DomePointing.jsx b/love/src/components/AuxTel/Dome/DomePointing.jsx
index 0bc51f16d..e9e337167 100644
--- a/love/src/components/AuxTel/Dome/DomePointing.jsx
+++ b/love/src/components/AuxTel/Dome/DomePointing.jsx
@@ -51,18 +51,17 @@ export default class DomePointing extends Component {
     const az = this.props.currentPointing.az;
     return (
       <svg className={styles.svgOverlay} height={height} width={width} viewBox="0 0 596 596">
-
-          <circle
-            className={styles.targetPointing}
-            r={16}
-            strokeWidth={2}
-            cx={zenithPixels.x}
-            cy={zenithPixels.y}
-            style={{
-              transform: `rotateZ(${this.props.targetPointing.az}deg) rotateX(${this.props.targetPointing.el - 90}deg)`,
-              transformOrigin: '50% 50% 298px',
-            }}
-          />
+        <circle
+          className={styles.targetPointing}
+          r={16}
+          strokeWidth={2}
+          cx={zenithPixels.x}
+          cy={zenithPixels.y}
+          style={{
+            transform: `rotateZ(${this.props.targetPointing.az}deg) rotateX(${this.props.targetPointing.el - 90}deg)`,
+            transformOrigin: '50% 50% 298px',
+          }}
+        />
 
         <g
           style={{
diff --git a/love/src/components/AuxTel/Mount/SummaryPanel/SummaryPanel.module.css b/love/src/components/AuxTel/Mount/SummaryPanel/SummaryPanel.module.css
index ea3301864..a29a73380 100644
--- a/love/src/components/AuxTel/Mount/SummaryPanel/SummaryPanel.module.css
+++ b/love/src/components/AuxTel/Mount/SummaryPanel/SummaryPanel.module.css
@@ -10,17 +10,17 @@
   color: var(--secondary-font-color);
 }
 
-
 .multirowLabel {
   display: block;
   white-space: nowrap;
 }
 
-.panelTable{
+.panelTable {
   padding: 1em 0 0 0.4rem;
 }
 
-.panelTable td, .panelTable th{
- border-color:var(--second-quaternary-background-dimmed-color);
- text-align:center;
-}
\ No newline at end of file
+.panelTable td,
+.panelTable th {
+  border-color: var(--second-quaternary-background-dimmed-color);
+  text-align: center;
+}
diff --git a/love/src/components/GeneralPurpose/Azimuth/Azimuth.jsx b/love/src/components/GeneralPurpose/Azimuth/Azimuth.jsx
new file mode 100644
index 000000000..804a765e2
--- /dev/null
+++ b/love/src/components/GeneralPurpose/Azimuth/Azimuth.jsx
@@ -0,0 +1,145 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './Azimuth.module.css';
+
+export default class Limits extends Component {
+  static propTypes = {
+    /** gauge Size */
+    radius: PropTypes.number,
+
+    /** Value origin, from where the gauge fills up */
+    valueOrigin: PropTypes.number,
+    /** Current value */
+    currentValue: PropTypes.number,
+    /** Target value */
+    targetValue: PropTypes.number,
+
+    /** Option to show labels */
+    displayLabels: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    radius: 200,
+    valueOrigin: -90,
+
+    currentValue: 0,
+    targetValue: 0,
+
+    displayLabels: true,
+
+    height: 200,
+    width: 200,
+  };
+
+  render() {
+    const { className, height, width, currentValue, targetValue, radius, valueOrigin, displayLabels } = this.props;
+
+    return (
+      <svg className={className} height={height} width={width} viewBox={`0 0 ${height} ${height}`}>
+        {/* Diagram Group Container, whith translation and origin rotation for the whole svg */}
+        <g style={{ translate: `${width / 2}px ${height / 2}px`, transform: `rotate(${valueOrigin}deg)` }}>
+          {/* Origin value text */}
+          <text
+            className={styles.originText}
+            transform={`${'translate(' + radius + ' 0) rotate(' + valueOrigin * -1 + ')'}`}
+          >
+            <tspan>0º</tspan>
+          </text>
+
+          {/* Azimuth Diagram Group */}
+          <g
+            style={{
+              transformOrigin: `50% 50%`,
+              transition: 'transform 1.5s linear 0s',
+              transformBox: 'fill-box',
+              transform: ` rotate(${currentValue}deg)`,
+            }}
+          >
+            {/* Rotate Center */}
+            <circle
+              style={{
+                fill: 'transparent',
+              }}
+              r={`${radius * 1.3}`}
+              cx={`${0}`}
+              cy={`${0}`}
+            />
+
+            {/* Current value text*/}
+            <g className={styles.targetText}>
+              <text
+                transform={`${'translate(' + radius + ' 0) rotate(' + (valueOrigin * -1 - currentValue) + ')'}`}
+                transition=" transform 1.5s linear 0s"
+              >
+                <tspan
+                  className={[
+                    currentValue > 90
+                      ? [currentValue > 180 ? [currentValue > 270 ? styles.textQ2 : styles.textQ3] : styles.textQ4]
+                      : styles.textQ1,
+                  ].join(' ')}
+                >{`${currentValue + 'º'}`}</tspan>
+              </text>
+            </g>
+
+            {/* Background */}
+            <circle
+              style={{
+                transition: 'transform 1.5s linear 0s',
+                transformBox: 'fill-box',
+              }}
+              r={`${radius}`}
+              cx={`${0}`}
+              cy={`${0}`}
+              className={styles.bg}
+            />
+
+            {/* Gauge */}
+            <circle
+              style={{
+                transition: 'transform 1.5s linear 0s',
+                transformBox: 'fill-box',
+              }}
+              r={`${radius * 0.92}`}
+              cx={`${0}`}
+              cy={`${0}`}
+              className={styles.gaugeL1}
+            />
+
+            {/* Target Line */}
+            <path
+              style={{
+                transition: 'transform 1.5s linear 0s',
+                transformBox: 'fill-box',
+                transform: ` rotate(${targetValue - currentValue}deg)`,
+              }}
+              d={`${'M 0 0 L ' + radius + ' 0'}`}
+              className={styles.targetValue}
+            />
+
+            {/* Current Line */}
+            <path
+              style={{
+                transition: 'transform 1.5s linear 0s',
+                transformBox: 'fill-box',
+              }}
+              d={`${'M 0 0 L ' + radius + ' 0'}`}
+              className={styles.currentValue}
+            />
+
+            {/* Cutout */}
+            <circle
+              style={{
+                transition: 'transform 1.5s linear 0s',
+                transformBox: 'fill-box',
+              }}
+              r={`${radius * 0.9}`}
+              cx={`${0}`}
+              cy={`${0}`}
+              className={styles.cutOut}
+            />
+          </g>
+        </g>
+      </svg>
+    );
+  }
+}
diff --git a/love/src/components/GeneralPurpose/Azimuth/Azimuth.module.css b/love/src/components/GeneralPurpose/Azimuth/Azimuth.module.css
new file mode 100644
index 000000000..8dd2bbee4
--- /dev/null
+++ b/love/src/components/GeneralPurpose/Azimuth/Azimuth.module.css
@@ -0,0 +1,77 @@
+.backgroundBar {
+  stroke: var(--second-quaternary-background-color);
+}
+
+.warningBar {
+  stroke: var(--status-warning-dimmed-color-2);
+}
+
+.activeWarning {
+  animation: warning 0.5s infinite;
+  animation-direction: alternate;
+  transition: stroke ease-in-out;
+}
+
+.currentValue {
+  fill: white;
+  transition: x 0.5s ease;
+}
+
+.originText {
+  fill: var(--secondary-font-color);
+  font-size: 1em;
+  text-anchor: start;
+}
+
+.targetText {
+  fill: var(--base-font-color);
+  font-size: 1em;
+  transition: transform 0.5s linear 0s;
+}
+
+.textQ1 {
+  text-anchor: start;
+}
+.textQ2 {
+  text-anchor: end;
+}
+.textQ3 {
+  alignment-baseline: text-before-edge;
+  text-anchor: end;
+}
+.textQ4 {
+  alignment-baseline: text-before-edge;
+  text-anchor: start;
+}
+
+.cutOut {
+  fill: rgb(17, 31, 39);
+}
+
+.bg {
+  fill: #182e39;
+}
+.bgTarget {
+  fill: transparent;
+  stroke: #3a525f;
+  opacity: 0.25;
+  transition: stroke-dasharray linear 0.5s;
+  transition: transform ease-out 0.5s;
+}
+.gaugeL1 {
+  fill: #2e6261;
+}
+
+.targetValue {
+  stroke: #c1ced2;
+  fill: transparent;
+  stroke-width: 2px;
+  stroke-dasharray: 4 4;
+  transition: transform ease-out 0.5s;
+}
+.currentValue {
+  stroke: #c1ced2;
+  fill: transparent;
+  stroke-width: 2px;
+  transition: transform ease-out 0.5s;
+}
diff --git a/love/src/components/GeneralPurpose/Elevation/Elevation.jsx b/love/src/components/GeneralPurpose/Elevation/Elevation.jsx
new file mode 100644
index 000000000..f3fca2a3d
--- /dev/null
+++ b/love/src/components/GeneralPurpose/Elevation/Elevation.jsx
@@ -0,0 +1,216 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './Elevation.module.css';
+
+export default class Limits extends Component {
+  static propTypes = {
+    /** Maximum limit 3, start of fault gauge */
+    maxL3: PropTypes.number,
+    /** Maximum limit 2, start of warning gauge */
+    maxL2: PropTypes.number,
+    /** Maximum limit 1, start of nominal gauge */
+    maxL1: PropTypes.number,
+    /** Maximum limit 1, end of nominal gauge */
+    minL1: PropTypes.number,
+    /** Maximum limit 2, end of warning gauge */
+    minL2: PropTypes.number,
+    /** Maximum limit 3, end of fault gauge */
+    minL3: PropTypes.number,
+
+    /** gauge Size */
+    radius: PropTypes.number,
+
+    /** Value origin, from where the gauge fills up */
+    valueOrigin: PropTypes.number,
+    /** Current value */
+    currentValue: PropTypes.number,
+    /** Target value */
+    targetValue: PropTypes.number,
+
+    /** Option to show labels */
+    displayLabels: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    height: 75,
+    maxL3: 90,
+    maxL2: 80,
+    maxL1: 70,
+    minL1: 10,
+    minL2: 5,
+    minL3: 0,
+
+    radius: 10,
+
+    valueOrigin: 0,
+    currentValue: 0,
+    targetValue: 0,
+
+    displayLabels: true,
+  };
+
+  render() {
+    const {
+      currentValue,
+      targetValue,
+      height,
+      maxL3,
+      maxL2,
+      maxL1,
+      minL1,
+      minL2,
+      minL3,
+      radius,
+      valueOrigin,
+      displayLabels,
+    } = this.props;
+
+    {
+      /* Convert Angles to pie % */
+    }
+    const percMaxL3 = (maxL3 / 360) * (radius * 3.142) - (minL3 / 360) * (radius * 3.142) + ' ' + radius * 3.142;
+    const percMaxL2 = (maxL2 / 360) * (radius * 3.142) - (minL2 / 360) * (radius * 3.142) + ' ' + radius * 3.142;
+    const percMaxL1 = (maxL1 / 360) * (radius * 3.142) - (minL1 / 360) * (radius * 3.142) + ' ' + radius * 3.142;
+    const percTarget = Math.abs((targetValue / 360) * (radius * 3.142)) + ' ' + radius * 3.142;
+    const percCurrent = Math.abs((currentValue / 360) * (radius * 3.142)) + ' ' + radius * 3.142;
+
+    const rad = Math.PI / 180;
+
+    const currentText_X = radius * Math.cos(currentValue * rad);
+    const currentText_Y = -1 * radius * Math.sin(currentValue * rad);
+
+    const rotTarget = 'rotate(' + (targetValue - minL3) + ') scale(1, 1)';
+
+    const gaugeRotation = 'rotate(' + -minL3 + ') scale(1, -1)';
+    const rotMinL3 = 'rotate(' + -minL3 + ')';
+    const rotMinL2 = 'rotate(' + (-1 * minL3 + minL2) + ')';
+    const rotMinL1 = 'rotate(' + (-1 * minL3 + minL1) + ')';
+
+    {
+      /* Check if current or target value is within danger or warning zone */
+    }
+    const isInWarningZone = currentValue > maxL1 || currentValue < minL1;
+    const isInDangerZone = currentValue > maxL2 || currentValue < minL2;
+    const isTargetWarningZone = targetValue > maxL1 || targetValue < minL1;
+    const isTargetDangerZone = targetValue > maxL2 || targetValue < minL2;
+
+    console.log(minL3);
+
+    return (
+      <svg className={styles.svgElevation} height={height / 2} viewBox={`0 0 ${height} ${height}`}>
+        {/* Current value */}
+        <text className={styles.originText} transform={`${'translate(' + (radius + 1) + ' 0)'}`}>
+          <tspan>0º</tspan>
+        </text>
+
+        <g className={styles.targetText} transform={`${'rotate(' + currentValue * -1 + ')'}`}>
+          <text
+            transform={`${'translate(' + radius + ' 0) rotate(' + currentValue + ')'}`}
+            transition=" transform 1.5s linear 0s"
+          >
+            <tspan
+              className={[
+                currentText_X < 0
+                  ? [currentText_Y < 0 ? styles.textQ2 : styles.textQ3]
+                  : [currentText_Y < 0 ? styles.textQ1 : styles.textQ4],
+              ].join(' ')}
+            >{`${currentValue + 'º'}`}</tspan>
+          </text>
+        </g>
+
+        <g transform={`${gaugeRotation}`}>
+          {/* Cartoon background */}
+          <circle
+            r={`${radius / 2}`}
+            cx="0"
+            cy="0"
+            className={styles.bg}
+            stroke-width={`${radius}`}
+            stroke-dasharray={`${percMaxL3}`}
+          />
+
+          {/* Target background */}
+          <circle
+            r={`${radius / 2}`}
+            cx="0"
+            cy="0"
+            className={styles.bgTarget}
+            stroke-width={`${radius}`}
+            stroke-dasharray={`${percTarget}`}
+            transform={`${'rotate(' + (0 - minL3) + ') scale(1, ' + [targetValue < 0 ? -1 : 1] + ')'}`}
+          />
+
+          {/* Current background */}
+          <circle
+            r={`${radius / 2}`}
+            cx="0"
+            cy="0"
+            className={styles.bgCurrent}
+            stroke-width={`${radius}`}
+            stroke-dasharray={`${percCurrent}`}
+            transform={`${'rotate(' + (0 - minL3) + ') scale(1, ' + [currentValue < 0 ? -1 : 1] + ')'}`}
+            transition=" transform 1.5s linear 0s"
+          />
+
+          {/* L3 Gauge */}
+          <circle
+            r={`${radius / 2}`}
+            cx="0"
+            cy="0"
+            className={styles.gaugeL3}
+            stroke-width={`${radius / 10}`}
+            stroke-dasharray={`${percMaxL3}`}
+          />
+
+          {/* L2 Gauge */}
+          <circle
+            r={`${radius / 2}`}
+            cx="0"
+            cy="0"
+            className={styles.gaugeL2}
+            stroke-width={`${radius / 10}`}
+            stroke-dasharray={`${percMaxL2}`}
+            transform={`${rotMinL2}`}
+          />
+
+          {/* L1 Gauge */}
+          <circle
+            r={`${radius / 2}`}
+            cx="0"
+            cy="0"
+            className={styles.gaugeL1}
+            stroke-width={`${radius / 10}`}
+            stroke-dasharray={`${percMaxL1}`}
+            transform={`${rotMinL1}`}
+          />
+
+          {/* Current Gauge */}
+          <circle
+            className={[isInDangerZone ? styles.fillL3 : [isInWarningZone ? styles.fillL2 : styles.fillL1]]}
+            r={`${radius / 2}`}
+            cx="0"
+            cy="0"
+            stroke-width={`${radius / 10}`}
+            stroke-dasharray={`${percCurrent}`}
+            transform={`${'rotate(' + (0 - minL3) + ') scale(1, ' + [currentValue < 0 ? -1 : 1] + ')'}`}
+            transition=" transform 1.5s linear 0s"
+          />
+
+          {/* Target Value line */}
+          <path
+            className={[
+              isTargetDangerZone
+                ? styles.targetValueDanger
+                : [isTargetWarningZone ? styles.targetValueWarning : styles.targetValue],
+            ]}
+            d={`M 0 0 L ${radius} 0`}
+            transform={`${rotTarget}`}
+          />
+
+          {/* Front Mask */}
+          <circle r={`${radius / 2}`} cx="0" cy="0" className={styles.cutOut} />
+        </g>
+      </svg>
+    );
+  }
+}
diff --git a/love/src/components/GeneralPurpose/Elevation/Elevation.module.css b/love/src/components/GeneralPurpose/Elevation/Elevation.module.css
new file mode 100644
index 000000000..adf36eb08
--- /dev/null
+++ b/love/src/components/GeneralPurpose/Elevation/Elevation.module.css
@@ -0,0 +1,145 @@
+.svgElevation {
+  overflow: visible;
+}
+
+svg text {
+  padding: 4px;
+}
+
+.backgroundBar {
+  stroke: var(--second-quaternary-background-color);
+}
+
+.warningBar {
+  stroke: var(--status-warning-dimmed-color-2);
+}
+
+.activeWarning {
+  animation: warning 0.5s infinite;
+  animation-direction: alternate;
+  transition: stroke ease-in-out;
+}
+
+@keyframes warning {
+  from {
+    stroke: var(--status-warning-dimmed-color-2);
+  }
+  to {
+    stroke: var(--status-warning-dimmed-color);
+  }
+}
+
+.currentValue {
+  fill: white;
+  transition: x 0.5s ease;
+}
+
+.originText {
+  fill: var(--secondary-font-color);
+  font-size: 2em;
+  text-anchor: start;
+}
+
+.targetText {
+  fill: var(--base-font-color);
+  font-size: 2em;
+  transition: transform 0.5s linear 0s;
+}
+
+.textQ1 {
+  text-anchor: start;
+}
+.textQ2 {
+  text-anchor: end;
+}
+.textQ3 {
+  alignment-baseline: text-before-edge;
+  text-anchor: end;
+}
+.textQ4 {
+  alignment-baseline: text-before-edge;
+  text-anchor: start;
+}
+
+.top {
+  dominant-baseline: text-after-edge;
+}
+
+.bottom {
+  dominant-baseline: text-before-edge;
+}
+
+.cutOut {
+  fill: rgb(17, 31, 39);
+}
+
+.bg {
+  fill: transparent;
+  stroke: #182e39;
+}
+.bgTarget {
+  fill: transparent;
+  stroke: #3a525f;
+  opacity: 0.25;
+  transition: stroke-dasharray linear 0.5s;
+  transition: transform ease-out 0.5s;
+}
+.bgCurrent {
+  fill: transparent;
+  stroke: #3a525f;
+  transition: stroke-dasharray linear 0.5s;
+}
+.gaugeL1 {
+  fill: transparent;
+  stroke: #2e6261;
+  transition: stroke-dasharray linear 0.5s;
+}
+.gaugeL2 {
+  fill: transparent;
+  stroke: #3f4720;
+  transition: stroke-dasharray linear 0.5s;
+}
+.gaugeL3 {
+  fill: transparent;
+  stroke: #3c2b20;
+  transition: stroke-dasharray linear 0.5s;
+}
+.fillL1 {
+  fill: transparent;
+  stroke: #00a26d;
+  transition: stroke-dasharray linear 0.5s;
+}
+.fillL2 {
+  fill: transparent;
+  stroke: #eee203;
+  transition: stroke-dasharray linear 0.5s;
+}
+.fillL3 {
+  fill: transparent;
+  stroke: #db5826;
+  transition: stroke-dasharray linear 0.5s;
+}
+
+.targetValue {
+  stroke: #c1ced2;
+  fill: transparent;
+  stroke-width: 2px;
+  stroke-dasharray: 6;
+  transition: transform ease-out 0.5s;
+}
+
+.targetValueWarning {
+  stroke: #eee203;
+  fill: transparent;
+  stroke-width: 2px;
+  stroke-dasharray: 6;
+  transition: transform ease-out 0.5s;
+}
+
+.targetValueDanger {
+  stroke: #db5826;
+  fill: transparent;
+  stroke-width: 2px;
+  stroke-dasharray: 6;
+  transition: transform ease-out 0.5s;
+}
diff --git a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx
index e9d635fd4..29918a8c8 100644
--- a/love/src/components/MainTel/CableWraps/CableWraps.container.jsx
+++ b/love/src/components/MainTel/CableWraps/CableWraps.container.jsx
@@ -32,7 +32,6 @@ const CableWrapsContainer = ({ subscribeToStreams, unsubscribeToStreams, ...prop
 };
 
 const mapStateToProps = (state) => {
-
   const ccwState = getCCWState(state);
   const ccwPosition = getCCWPosition(state);
   const rotatorState = getRotatorState(state);
diff --git a/love/src/components/MainTel/M1M3/M1M3.container.jsx b/love/src/components/MainTel/M1M3/M1M3.container.jsx
index 9f807b96c..3119fa9c1 100644
--- a/love/src/components/MainTel/M1M3/M1M3.container.jsx
+++ b/love/src/components/MainTel/M1M3/M1M3.container.jsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { addGroup, removeGroup } from 'redux/actions/ws';
-import { getM1M3State, getM1M3ActuatorsState, getM1M3ActuatorForces,
-         getM1M3HardpointMonitorData, getM1M3HardpointActuatorState } from 'redux/selectors';
+import {
+  getM1M3State,
+  getM1M3ActuatorsState,
+  getM1M3ActuatorForces,
+  getM1M3HardpointMonitorData,
+  getM1M3HardpointActuatorState,
+} from 'redux/selectors';
 import SubscriptionTableContainer from 'components/GeneralPurpose/SubscriptionTable/SubscriptionTable.container';
 import M1M3 from './M1M3';
 
diff --git a/love/src/components/MainTel/M1M3/M1M3.module.css b/love/src/components/MainTel/M1M3/M1M3.module.css
index e09c2b9bb..258b491fa 100644
--- a/love/src/components/MainTel/M1M3/M1M3.module.css
+++ b/love/src/components/MainTel/M1M3/M1M3.module.css
@@ -1,13 +1,11 @@
-
-
 .cursorMove {
   cursor: crosshair;
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .borderCircleOverlay {
@@ -54,7 +52,7 @@
 }
 
 .state :first-child {
-  margin-right: .5em;
+  margin-right: 0.5em;
 }
 
 .summaryState {
@@ -101,22 +99,21 @@
   text-align: left;
 }
 
-.summaryPanelControls > .controls > .control{
+.summaryPanelControls > .controls > .control {
   flex-grow: 1;
 }
 
-.summaryPanelControls > .controls > .control > span{
-  margin-bottom: .5em;
+.summaryPanelControls > .controls > .control > span {
+  margin-bottom: 0.5em;
   display: block;
 }
 
-.summaryPanelControls > .controls > .control > .toggleContainer{
+.summaryPanelControls > .controls > .control > .toggleContainer {
   display: flex;
 }
 
 .summaryPanelControls > .controls > div {
   margin-right: 1em;
-
 }
 
 .svgContainer {
@@ -144,12 +141,12 @@
 .hardpoints > span:first-child {
   text-align: left;
   font-weight: bold;
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 
 .borderCircleHardpoint {
-  opacity:0.85;
-  fill:#152f3b;
+  opacity: 0.85;
+  fill: #152f3b;
 }
 
 .textHardpoint {
@@ -162,7 +159,7 @@
   /*fill:#8bea96;*/
   stroke-width: 2px;
   /*stroke: gray;*/
-  opacity:0.71;
+  opacity: 0.71;
   cursor: pointer;
 }
 
@@ -201,7 +198,7 @@
 .forceGradientWrapper > span:first-child {
   text-align: left;
   font-weight: bold;
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 
 .forceGradient {
@@ -245,7 +242,7 @@
 }
 
 .actuatorValue > .summaryState {
-  font-size: .8em;
+  font-size: 0.8em;
   line-height: 1.7em;
 }
 
@@ -254,11 +251,11 @@
 }
 
 .stopLeft {
-  stop-color: #3f51b5;  /* Indigo */
+  stop-color: #3f51b5; /* Indigo */
 }
 
 .stopRright {
-  stop-color: #009688;  /* Teal */
+  stop-color: #009688; /* Teal */
 }
 
 .filled {
@@ -358,13 +355,12 @@
   border-right: 3px solid var(--status-alert-dimmed-color-2);
 }
 
-
 .plotSection {
   margin: 4em 2em;
   display: grid;
   grid-template-columns: 1fr 5fr 2fr;
   grid-auto-rows: minmax(100px, auto);
-  grid-template-areas: "hp plot group";
+  grid-template-areas: 'hp plot group';
 }
 
 .gridHardpoint {
diff --git a/love/src/components/MainTel/M1M3/M1M3Table.module.css b/love/src/components/MainTel/M1M3/M1M3Table.module.css
index 6d7a4af64..cda9d70c6 100644
--- a/love/src/components/MainTel/M1M3/M1M3Table.module.css
+++ b/love/src/components/MainTel/M1M3/M1M3Table.module.css
@@ -28,11 +28,11 @@
 }
 
 .state :first-child {
-  margin-right: .5em;
+  margin-right: 0.5em;
 }
 
 .summaryState {
-  border-radius: .2rem;
+  border-radius: 0.2rem;
   font-weight: 700;
   text-align: center;
   width: 8em;
@@ -65,18 +65,17 @@
   text-align: left;
 }
 
-.summaryPanelControls > .controls > .control{
+.summaryPanelControls > .controls > .control {
   flex-grow: 1;
 }
 
-.summaryPanelControls > .controls > .control > span{
-  margin-bottom: .5em;
+.summaryPanelControls > .controls > .control > span {
+  margin-bottom: 0.5em;
   display: block;
 }
 
 .summaryPanelControls > .controls > div {
   margin-right: 1em;
-
 }
 
 .plotSection {
@@ -139,11 +138,11 @@
 }
 
 .stopLeft {
-  stop-color: #3f51b5;  /* Indigo */
+  stop-color: #3f51b5; /* Indigo */
 }
 
 .stopRright {
-  stop-color: #009688;  /* Teal */
+  stop-color: #009688; /* Teal */
 }
 
 .filled {
@@ -156,4 +155,4 @@
 
 .actuator:hover circle {
   stroke: white;
-}
\ No newline at end of file
+}
diff --git a/love/src/components/MainTel/M2/Actuators/Inclinometer/Inclinometer.jsx b/love/src/components/MainTel/M2/Actuators/Inclinometer/Inclinometer.jsx
index 020f3001c..ab20d3935 100644
--- a/love/src/components/MainTel/M2/Actuators/Inclinometer/Inclinometer.jsx
+++ b/love/src/components/MainTel/M2/Actuators/Inclinometer/Inclinometer.jsx
@@ -25,39 +25,41 @@ export default class Inclinometer extends Component {
 
     return (
       <div className={styles.container}>
-          <p className={styles.title}>Inclination</p>
-          <svg className={styles.svgContainer} viewBox="0 0 302 165.85">
-            <path className={styles['cls-1']} d="M1,164.85a150,150,0,0,1,300,0" />
-            <line className={styles['cls-1']} x1="151" y1="14.85" x2="151" y2="159.46" />
-            <rect className={styles['cls-1']} x="1" y="155.62" width="300" height="9.23" />
-            <line
-              style={{
-                transform: `rotate(${zenithAngleMeasured}deg)`,
-              }}
-              className={styles.marker}
-              x1="151"
-              y1="3.31"
-              x2="151"
-              y2="164.85"
-            />
-            <path className={styles['cls-3']} d="M111,164.85a40,40,0,0,1,80,0" />
-            <rect
-              style={{
-                transform: `rotate(${zenithAngleMeasured}deg)`,
-              }}
-              className={styles['cls-3']}
-              x="104.85"
-              y="1"
-              width="92.31"
-              height="23.08"
-            />
-            <text className={styles.axisLabel} x="146" y="-5">0°</text>
-          </svg>
+        <p className={styles.title}>Inclination</p>
+        <svg className={styles.svgContainer} viewBox="0 0 302 165.85">
+          <path className={styles['cls-1']} d="M1,164.85a150,150,0,0,1,300,0" />
+          <line className={styles['cls-1']} x1="151" y1="14.85" x2="151" y2="159.46" />
+          <rect className={styles['cls-1']} x="1" y="155.62" width="300" height="9.23" />
+          <line
+            style={{
+              transform: `rotate(${zenithAngleMeasured}deg)`,
+            }}
+            className={styles.marker}
+            x1="151"
+            y1="3.31"
+            x2="151"
+            y2="164.85"
+          />
+          <path className={styles['cls-3']} d="M111,164.85a40,40,0,0,1,80,0" />
+          <rect
+            style={{
+              transform: `rotate(${zenithAngleMeasured}deg)`,
+            }}
+            className={styles['cls-3']}
+            x="104.85"
+            y="1"
+            width="92.31"
+            height="23.08"
+          />
+          <text className={styles.axisLabel} x="146" y="-5">
+            0°
+          </text>
+        </svg>
         <div className={styles.inclinometerValues}>
-            <span>Inclination</span>
-            <span className={styles.value}>{fixedFloat(zenithAngleMeasured, 2)}°</span>
-            <span>Source</span>
-            <span className={styles.value}>{inclinationTelemetrySourceValue}</span>
+          <span>Inclination</span>
+          <span className={styles.value}>{fixedFloat(zenithAngleMeasured, 2)}°</span>
+          <span>Source</span>
+          <span className={styles.value}>{inclinationTelemetrySourceValue}</span>
         </div>
       </div>
     );
diff --git a/love/src/components/MainTel/M2/Actuators/Selector/Selector.jsx b/love/src/components/MainTel/M2/Actuators/Selector/Selector.jsx
index 52435a5af..1f1d78c29 100644
--- a/love/src/components/MainTel/M2/Actuators/Selector/Selector.jsx
+++ b/love/src/components/MainTel/M2/Actuators/Selector/Selector.jsx
@@ -1,10 +1,7 @@
 import React, { Component } from 'react';
 import * as d3 from 'd3';
 import PropTypes from 'prop-types';
-import {
-  M2ActuatorPositions,
-  M2ActuatorTangentPositions,
-} from 'Config';
+import { M2ActuatorPositions, M2ActuatorTangentPositions } from 'Config';
 import ForceGradiant from '../ForceGradiant/ForceGradiant';
 import styles from './Selector.module.css';
 
@@ -122,9 +119,12 @@ export default class Selector extends Component {
 
   getGradiantColorX = (value) => {
     const { minForceLimit, maxForceLimit } = this.props;
-    const colorInterpolate = d3.scaleLinear().domain(d3.extent([minForceLimit, maxForceLimit])).range([0, 1]);
+    const colorInterpolate = d3
+      .scaleLinear()
+      .domain(d3.extent([minForceLimit, maxForceLimit]))
+      .range([0, 1]);
     return ForceGradiant.COLOR_SCALE(1 - colorInterpolate(value));
-  }
+  };
 
   getActuator = (id) => {
     if (id === 0 || id === null) {
@@ -134,11 +134,7 @@ export default class Selector extends Component {
         colorForceMeasured: '#FFF',
       };
     }
-    const {
-      actuatorReferenceId,
-      axialForceApplied,
-      axialForceMeasured,
-    } = this.props;
+    const { actuatorReferenceId, axialForceApplied, axialForceMeasured } = this.props;
 
     const actuatorIndex = actuatorReferenceId.indexOf(id);
     const actuator = {
@@ -149,7 +145,7 @@ export default class Selector extends Component {
       colorForceMeasured: this.getGradiantColorX(axialForceMeasured[actuatorIndex]),
     };
     return actuator;
-  }
+  };
 
   getActuatorTangent = (id) => {
     if (id === 0 || id === null) {
@@ -159,11 +155,7 @@ export default class Selector extends Component {
         colorForceMeasured: '#FFF',
       };
     }
-    const {
-      actuatorTangentReferenceId,
-      tangentForceApplied,
-      tangentForceMeasured,
-    } = this.props;
+    const { actuatorTangentReferenceId, tangentForceApplied, tangentForceMeasured } = this.props;
 
     const actuatorIndex = actuatorTangentReferenceId.indexOf(id);
     const actuator = {
@@ -174,7 +166,7 @@ export default class Selector extends Component {
       colorForceMeasured: this.getGradiantColorX(tangentForceMeasured[actuatorIndex]),
     };
     return actuator;
-  }
+  };
 
   componentDidMount() {
     let yMax = -Infinity;
@@ -244,17 +236,18 @@ export default class Selector extends Component {
   };
 
   render() {
-    return (
-      <div className={styles.container}>
-        {this.getSvg()}
-      </div>
-    );
+    return <div className={styles.container}>{this.getSvg()}</div>;
   }
 
   getSvg() {
-    const { showActuatorsID, showCommandedForce, showMeasuredForce,
-      actuatorSelect, selectedActuator,
-      actuatorTangentSelect, selectedActuatorTangent,
+    const {
+      showActuatorsID,
+      showCommandedForce,
+      showMeasuredForce,
+      actuatorSelect,
+      selectedActuator,
+      actuatorTangentSelect,
+      selectedActuatorTangent,
     } = this.props;
 
     const { zoomLevel } = this.state;
@@ -263,19 +256,32 @@ export default class Selector extends Component {
     const margin = 60;
 
     return (
-        <svg
-          className={styles.svgContainer}
-          viewBox={`0 0 ${this.state.width} ${this.state.width}`}
-          onMouseEnter={this.disableScroll}
-          onMouseLeave={this.enableScroll}
-        >
-          {this.getBackground()}
-          {this.getScatter(scale, margin, showActuatorsID, showMeasuredForce, showCommandedForce,
-            zoomLevel, actuatorSelect, selectedActuator)}
-          {this.getAxis(margin, actuatorSelect)}
-          {this.getTangentActuators(showActuatorsID, showMeasuredForce, showCommandedForce,
-            actuatorTangentSelect, selectedActuatorTangent)}
-        </svg>
+      <svg
+        className={styles.svgContainer}
+        viewBox={`0 0 ${this.state.width} ${this.state.width}`}
+        onMouseEnter={this.disableScroll}
+        onMouseLeave={this.enableScroll}
+      >
+        {this.getBackground()}
+        {this.getScatter(
+          scale,
+          margin,
+          showActuatorsID,
+          showMeasuredForce,
+          showCommandedForce,
+          zoomLevel,
+          actuatorSelect,
+          selectedActuator,
+        )}
+        {this.getAxis(margin, actuatorSelect)}
+        {this.getTangentActuators(
+          showActuatorsID,
+          showMeasuredForce,
+          showCommandedForce,
+          actuatorTangentSelect,
+          selectedActuatorTangent,
+        )}
+      </svg>
     );
   }
 
@@ -298,21 +304,15 @@ export default class Selector extends Component {
                 cx={(act.position[0] + this.state.xRadius) * scale + margin}
                 cy={(act.position[1] + this.state.yRadius) * scale + margin}
                 key={act.id}
-                fill={
-                  showMeasuredForce
-                    ? this.getActuator(act.id)?.colorForceMeasured
-                    : 'gray'
-                }
+                fill={showMeasuredForce ? this.getActuator(act.id)?.colorForceMeasured : 'gray'}
                 stroke={
                   selectedActuator === act.id
                     ? this.strokeActuatorSelected(act.id)
                     : showCommandedForce
-                      ? this.getActuator(act.id)?.colorForceApplied
-                      : 'none'
-                }
-                strokeWidth={
-                  act.id === selectedActuator ? 6 : 4
+                    ? this.getActuator(act.id)?.colorForceApplied
+                    : 'none'
                 }
+                strokeWidth={act.id === selectedActuator ? 6 : 4}
                 r={(this.state.maxRadius * scale) / 16}
                 pointerEvents="all"
               />
@@ -344,85 +344,72 @@ export default class Selector extends Component {
     const y0 = this.state.width / 2;
 
     return (
-      <g
-        id="tangent-actuators"
-      >
-      { this.state.actuatorsTangent.map((act) => {
+      <g id="tangent-actuators">
+        {this.state.actuatorsTangent.map((act) => {
+          const x1 = x0 + act.position[0];
+          const y1 = y0 + act.position[1];
 
-        const x1 = x0 + act.position[0];
-        const y1 = y0 + act.position[1];
+          const x2 = x0 + act.position[2];
+          const y2 = y0 + act.position[3];
 
-        const x2 = x0 + act.position[2];
-        const y2 = y0 + act.position[3];
+          let x3 = x0 + act.position[2] * 1.1;
+          let y3 = y0 + act.position[3] * 1.1;
 
-        let x3 = x0 + act.position[2] * 1.1;
-        let y3 = y0 + act.position[3] * 1.1;
+          let x4 = x0 + act.position[0] * 1.1;
+          let y4 = y0 + act.position[1] * 1.1;
 
-        let x4 = x0 + act.position[0] * 1.1;
-        let y4 = y0 + act.position[1] * 1.1;
+          const centerX1 = (x1 + x2) / 2;
+          const centerY1 = (y1 + y2) / 2;
 
-        const centerX1 = (x1 + x2) / 2;
-        const centerY1 = (y1 + y2) / 2;
+          const centerX2 = (x3 + x4) / 2;
+          const centerY2 = (y3 + y4) / 2;
 
-        const centerX2 = (x3 + x4) / 2;
-        const centerY2 = (y3 + y4) / 2;
+          const difX1 = centerX1 - x1;
+          const difY1 = centerY1 - y1;
 
-        const difX1 = centerX1 - x1;
-        const difY1 = centerY1 - y1;
+          x4 = centerX2 - difX1;
+          y4 = centerY2 - difY1;
 
-        x4 = centerX2 - difX1;
-        y4 = centerY2 - difY1;
+          x3 = centerX2 + difX1;
+          y3 = centerY2 + difY1;
 
-        x3 = centerX2 + difX1;
-        y3 = centerY2 + difY1;
+          const centerX = (centerX1 + centerX2) / 2;
+          const centerY = (centerY1 + centerY2) / 2;
 
-        const centerX = (centerX1 + centerX2) / 2;
-        const centerY = (centerY1 + centerY2) / 2;
-
-        return (
-          <g
-            key={act.id}
-            className={styles.actuatorTangent}
-            onClick={() => actuatorTangentSelect(act.id)}
-          >
-            <path
-              d={`
+          return (
+            <g key={act.id} className={styles.actuatorTangent} onClick={() => actuatorTangentSelect(act.id)}>
+              <path
+                d={`
                 M ${x1} ${y1}
                 L ${x2} ${y2}
                 L ${x3} ${y3}
                 L ${x4} ${y4}
                 z
               `}
-              strokeWidth={
-                act.id === selectedActuatorTangent ? 6 : 4
-              }
-              fill={
-                showMeasuredForce
-                  ? this.getActuatorTangent(act.id)?.colorForceMeasured
-                  : 'gray'
-              }
-              stroke={
-                selectedActuatorTangent === act.id
-                  ? this.strokeActuatorTangentSelected(act.id)
-                  : showCommandedForce
+                strokeWidth={act.id === selectedActuatorTangent ? 6 : 4}
+                fill={showMeasuredForce ? this.getActuatorTangent(act.id)?.colorForceMeasured : 'gray'}
+                stroke={
+                  selectedActuatorTangent === act.id
+                    ? this.strokeActuatorTangentSelected(act.id)
+                    : showCommandedForce
                     ? this.getActuatorTangent(act.id)?.colorForceApplied
                     : 'none'
-              }
-            />
-            <text
-              x={centerX}
-              y={centerY}
-              textAnchor="middle"
-              alignmentBaseline="middle"
-              className={showActuatorsID || selectedActuatorTangent === act.id ? '' : styles.hidden}
-              pointerEvents="none"
-            >
-              {act.id}
-            </text>
-          </g>
-        );
-      })}
-    </g>
+                }
+              />
+              <text
+                x={centerX}
+                y={centerY}
+                textAnchor="middle"
+                alignmentBaseline="middle"
+                className={showActuatorsID || selectedActuatorTangent === act.id ? '' : styles.hidden}
+                pointerEvents="none"
+              >
+                {act.id}
+              </text>
+            </g>
+          );
+        })}
+      </g>
     );
   }
 
diff --git a/love/src/components/MainTel/M2/Actuators/Selector/Selector.module.css b/love/src/components/MainTel/M2/Actuators/Selector/Selector.module.css
index bf3be2dce..e45804697 100644
--- a/love/src/components/MainTel/M2/Actuators/Selector/Selector.module.css
+++ b/love/src/components/MainTel/M2/Actuators/Selector/Selector.module.css
@@ -41,7 +41,7 @@
   font-size: 0.5em;
   stroke: #000;
   stroke-width: 0.2px;
-};
+}
 
 .circleOverlayDisabled {
   fill: var(--status-disabled-dimmed-color-2);
@@ -64,7 +64,6 @@
   fill: white;
 }
 
-
 .hardpoints {
   /*max-width: 160px;
   min-width: 60px;*/
@@ -143,4 +142,3 @@
   fill: white !important;
   stroke: white !important;
 }
-
diff --git a/love/src/components/MainTel/M2/M2.container.jsx b/love/src/components/MainTel/M2/M2.container.jsx
index 5f3d54b23..faed1c632 100644
--- a/love/src/components/MainTel/M2/M2.container.jsx
+++ b/love/src/components/MainTel/M2/M2.container.jsx
@@ -1,12 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { addGroup, removeGroup } from 'redux/actions/ws';
-import {
-  getM2State,
-  getM2Inclinometer,
-  getM2Actuator,
-  getM2ActuatorForce,
-} from 'redux/selectors';
+import { getM2State, getM2Inclinometer, getM2Actuator, getM2ActuatorForce } from 'redux/selectors';
 import SubscriptionTableContainer from 'components/GeneralPurpose/SubscriptionTable/SubscriptionTable.container';
 import M2 from './M2';
 
diff --git a/love/src/components/MainTel/M2/M2.jsx b/love/src/components/MainTel/M2/M2.jsx
index b0fb045e0..947d656c0 100644
--- a/love/src/components/MainTel/M2/M2.jsx
+++ b/love/src/components/MainTel/M2/M2.jsx
@@ -5,7 +5,6 @@ import Actuators from './Actuators/Actuators';
 import styles from './M2.module.css';
 
 export default class M2 extends Component {
-
   static propTypes = {
     /** Function to subscribe to streams to receive */
     subscribeToStreams: PropTypes.func,
@@ -52,11 +51,11 @@ export default class M2 extends Component {
     minForceLimit: PropTypes.number,
     /** Number of the maximum force limit, used for the gradiant color */
     maxForceLimit: PropTypes.number,
-  }
+  };
   static defaultProps = {
     minForceLimit: 0,
     maxForceLimit: 1000,
-  }
+  };
 
   componentDidMount() {
     this.props.subscribeToStreams();
@@ -67,7 +66,7 @@ export default class M2 extends Component {
   }
 
   render() {
-    const { 
+    const {
       actuatorIlcState,
       axialActuatorSteps,
       axialEncoderPositions,
@@ -89,13 +88,12 @@ export default class M2 extends Component {
           summaryState={summaryState}
           commandableByDDS={commandableByDDS}
           forceBalanceSystemStatus={forceBalanceSystemStatus}
-          m2AssemblyInPosition={m2AssemblyInPosition}  
+          m2AssemblyInPosition={m2AssemblyInPosition}
         />
 
         <Actuators
           zenithAngleMeasured={zenithAngleMeasured}
           inclinationTelemetrySource={inclinationTelemetrySource}
-
           actuatorIlcState={actuatorIlcState}
           axialActuatorSteps={axialActuatorSteps}
           axialEncoderPositions={axialEncoderPositions}
@@ -111,4 +109,4 @@ export default class M2 extends Component {
       </div>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/love/src/components/MainTel/M2/M2.module.css b/love/src/components/MainTel/M2/M2.module.css
index 01e9d5c91..b6dbdb89b 100644
--- a/love/src/components/MainTel/M2/M2.module.css
+++ b/love/src/components/MainTel/M2/M2.module.css
@@ -1,5 +1,4 @@
 .container {
-  
 }
 
 .fill_ok_summary {
diff --git a/love/src/components/MainTel/M2/M2Table.container.jsx b/love/src/components/MainTel/M2/M2Table.container.jsx
index d27a7bef8..4d7f02453 100644
--- a/love/src/components/MainTel/M2/M2Table.container.jsx
+++ b/love/src/components/MainTel/M2/M2Table.container.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { addGroup, removeGroup } from 'redux/actions/ws';
-import {
-  getM2ActuatorTable,
-} from 'redux/selectors';
+import { getM2ActuatorTable } from 'redux/selectors';
 import SubscriptionTableContainer from 'components/GeneralPurpose/SubscriptionTable/SubscriptionTable.container';
 import M2Table from './M2Table';
 
diff --git a/love/src/components/MainTel/M2/M2Table.jsx b/love/src/components/MainTel/M2/M2Table.jsx
index 8bf1bef2a..5c945d7d4 100644
--- a/love/src/components/MainTel/M2/M2Table.jsx
+++ b/love/src/components/MainTel/M2/M2Table.jsx
@@ -79,10 +79,9 @@ export default class MotorTable extends Component {
     positionIMSZ: 0,
     positionIMSXRot: 0,
     positionIMSYRot: 0,
-    positionIMSZRot: 0,    
+    positionIMSZRot: 0,
   };
 
-
   static forceTableHeaders() {
     return [
       {
diff --git a/love/src/components/MainTel/M2/Summary/Summary.jsx b/love/src/components/MainTel/M2/Summary/Summary.jsx
index 48106931e..5732d65a1 100644
--- a/love/src/components/MainTel/M2/Summary/Summary.jsx
+++ b/love/src/components/MainTel/M2/Summary/Summary.jsx
@@ -49,9 +49,7 @@ export default class Summary extends Component {
         <SummaryPanel className={styles.summaryPanelStates}>
           <div className={styles.state}>
             <Title>M2 Status</Title>
-            <span className={[summaryStateValue?.class, styles.summaryState].join(' ')}>
-              {summaryStateValue?.name}
-            </span>
+            <span className={[summaryStateValue?.class, styles.summaryState].join(' ')}>{summaryStateValue?.name}</span>
           </div>
           <div className={styles.state}>
             <Title>Command</Title>
diff --git a/love/src/components/MainTel/M2/Summary/Summary.module.css b/love/src/components/MainTel/M2/Summary/Summary.module.css
index c9034eeb5..b8da94a41 100644
--- a/love/src/components/MainTel/M2/Summary/Summary.module.css
+++ b/love/src/components/MainTel/M2/Summary/Summary.module.css
@@ -70,4 +70,4 @@
 
 .summaryPanelControls > .controls > div {
   margin-right: 1em;
-}
\ No newline at end of file
+}
diff --git a/love/src/components/MainTel/MTDome/MTDome.jsx b/love/src/components/MainTel/MTDome/MTDome.jsx
index 4a635a509..8dafe12c7 100644
--- a/love/src/components/MainTel/MTDome/MTDome.jsx
+++ b/love/src/components/MainTel/MTDome/MTDome.jsx
@@ -5,6 +5,8 @@ import MTDomeLouvers from './MTDomeLouvers';
 import MTDomePointing from './MTDomePointing';
 import SimpleTable from 'components/GeneralPurpose/SimpleTable/SimpleTable';
 import PlotContainer from 'components/GeneralPurpose/Plot/Plot.container';
+import Azimuth from 'components/GeneralPurpose/Azimuth/Azimuth';
+import Elevation from 'components/GeneralPurpose/Elevation/Elevation';
 import WindRose from '../../icons/WindRose/WindRose';
 import MTDomeSummaryTable from './MTDomeSummaryTable/MTDomeSummaryTable';
 import styles from './MTDome.module.css';
@@ -535,9 +537,31 @@ export default class MTDome extends Component {
           <div className={styles.windRoseContainer}>
             <WindRose />
           </div>
+          <div className={styles.elevationContainer} height={`${height / 2}px`}>
+            <Elevation
+              height={height * 0.75}
+              radius={width * 0.75}
+              maxL3={86.5}
+              maxL2={85}
+              maxL1={84}
+              minL1={18}
+              minL2={19}
+              minL3={20}
+              currentValue={positionActualLightWindScreen}
+              targetValue={positionCommandedLightWindScreen}
+              className={styles.svgElevation}
+            />
+          </div>
 
           <div className={styles.divDome}>
             <div className={styles.divDomeLouvers}>
+              <Azimuth
+                className={styles.svgAzimuth}
+                width={width}
+                height={height}
+                currentValue={positionActualDomeAz}
+                targetValue={positionCommandedDomeAz}
+              />
               <MTDomeShutter
                 width={width}
                 height={height}
@@ -556,7 +580,6 @@ export default class MTDome extends Component {
                 targetPointing={targetPointing}
                 isProjected={isProjected}
               />
-
               <MTDomeLouvers
                 actualPositionLouvers={actualPositionLouvers}
                 commandedPositionLouvers={commandedPositionLouvers}
diff --git a/love/src/components/MainTel/MTDome/MTDome.module.css b/love/src/components/MainTel/MTDome/MTDome.module.css
index b222e1d47..7561e50d4 100644
--- a/love/src/components/MainTel/MTDome/MTDome.module.css
+++ b/love/src/components/MainTel/MTDome/MTDome.module.css
@@ -34,7 +34,7 @@
 .svgOverlay {
   position: absolute;
   left: calc(50% - 130px);
-  top: 5%;
+  top: 7%;
   width: auto;
   overflow: visible;
 }
@@ -66,7 +66,7 @@
 .svgLouvers {
   position: absolute;
   left: calc(50% - 308px);
-  top: 60%;
+  top: 65%;
   width: auto;
 }
 
@@ -94,6 +94,16 @@
   transition: x 0.5s, width 0.5s;
 }
 
+.svgAzimuth {
+  position: absolute;
+  left: calc(50% - 134px);
+  top: 8%;
+  width: auto;
+  overflow: visible;
+  transform-origin: center;
+  transform: scale(1.05);
+}
+
 .telemetryTable {
   display: grid;
   padding-top: 1em;
@@ -126,6 +136,16 @@
   top: 1%;
   width: 4%;
 }
+.elevationContainer {
+  position: absolute;
+  left: calc(100% - 600px);
+  top: 14%;
+}
+.azimuthContainer {
+  position: absolute;
+  left: calc(50% - 299px);
+  top: 5%;
+}
 
 .vignettingDistanceContainer {
   position: absolute;
diff --git a/love/src/components/MainTel/TMA/Azimuth/Azimuth.jsx b/love/src/components/MainTel/TMA/Azimuth/Azimuth.jsx
new file mode 100644
index 000000000..429d04b57
--- /dev/null
+++ b/love/src/components/MainTel/TMA/Azimuth/Azimuth.jsx
@@ -0,0 +1,277 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './Azimuth.module.css';
+
+export default class Limits extends Component {
+  static propTypes = {
+    /** POSITIVE SIDE */
+    /** Maximum limit 3, start of fault gauge */
+    maxL3: PropTypes.number,
+    /** Maximum limit 2, start of warning gauge */
+    maxL2: PropTypes.number,
+    /** Maximum limit 1, start of nominal gauge */
+    maxL1: PropTypes.number,
+
+    /** NEGATIVE SIDE */
+    /** Maximum limit 1, end of nominal gauge */
+    minL1: PropTypes.number,
+    /** Maximum limit 2, end of warning gauge */
+    minL2: PropTypes.number,
+    /** Maximum limit 3, end of fault gauge */
+    minL3: PropTypes.number,
+
+    /** Azimuth Radius */
+    radius: PropTypes.number,
+
+    /** Rotation offset for gauge origin */
+    rotationOffset: PropTypes.number,
+
+    /** Current value */
+    currentValue: PropTypes.number,
+    /** Target value */
+    targetValue: PropTypes.number,
+
+    /** Option to show labels */
+    displayLabels: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    maxL3: 270,
+    maxL2: 265,
+    maxL1: 260,
+    minL1: -260,
+    minL2: -265,
+    minL3: -270,
+
+    radius: 344.4,
+
+    rotationOffset: -90,
+
+    currentValue: 0,
+    targetValue: 0,
+
+    displayLabels: true,
+  };
+
+  render() {
+    const {
+      currentValue,
+      targetValue,
+      height,
+      maxL3,
+      maxL2,
+      maxL1,
+      minL1,
+      minL2,
+      minL3,
+      radius,
+      rotationOffset,
+      displayLabels,
+    } = this.props;
+
+    {
+      /* Convert Angles to pie % */
+    }
+
+    const percMaxL2 = (maxL2 / 360) * (radius * 3.142) + ' ' + radius * 3.142;
+    const percMaxL1 = (maxL1 / 360) * (radius * 3.142) + ' ' + radius * 3.142;
+
+    const percTarget = Math.abs((targetValue / 360) * (radius * 3.142)) + ' ' + radius * 3.142;
+    const percCurrent = Math.abs((currentValue / 360) * (radius * 3.142)) + ' ' + radius * 3.142;
+
+    const rad = Math.PI / 180;
+
+    const currentText_X = radius * Math.cos(currentValue * rad);
+    const currentText_Y = -1 * radius * Math.sin(currentValue * rad);
+
+    const gaugeRotation = 'rotate(' + -minL3 + ') scale(1, -1)';
+    const rotMinL3 = 'rotate(' + -minL3 + ')';
+    const rotMinL2 = 'rotate(' + (-1 * minL3 + minL2) + ')';
+    const rotMinL1 = 'rotate(' + (-1 * minL3 + minL1) + ')';
+
+    const posCurrentValue = currentValue > 0;
+    const negCurrentValue = currentValue < 0;
+
+    const radiusBack = radius * 0.58;
+
+    {
+      /* Check if current or target value is within danger or warning zone */
+    }
+    const isInWarningZone = currentValue > maxL1 || currentValue < minL1;
+    const isInDangerZone = currentValue > maxL2 || currentValue < minL2;
+    const isTargetWarningZone = targetValue > maxL1 || targetValue < minL1;
+    const isTargetDangerZone = targetValue > maxL2 || targetValue < minL2;
+
+    return (
+      <svg viewBox={`${'0 0 ' + radius * 2 + ' ' + radius * 2}`}>
+        {/* Cartoon background */}
+        <circle r={`${radiusBack}`} cx={`${radius}`} cy={`${radius}`} className={styles.bg} />
+
+        {/* Current value */}
+        <text
+          className={styles.originText}
+          transform={`${'translate(' + radius + ' ' + (radius - radiusBack - 10) + ')'}`}
+        >
+          <tspan>0º</tspan>
+        </text>
+
+        <g
+          className={styles.targetText}
+          transform={`${'translate(' + radius + ' ' + radius + ') rotate(' + currentValue + ')'}`}
+        >
+          <text
+            transform={`${'translate(0 ' + (radiusBack * -1 - 10) + ') rotate(' + currentValue * -1 + ')'}`}
+            transition=" transform 1.5s linear 0s"
+          >
+            <tspan
+              transition=" transform 1.5s linear 0s"
+              className={[
+                currentText_X < 0
+                  ? [currentText_Y < 0 ? styles.textQ4 : styles.textQ3]
+                  : [currentText_Y < 1 ? styles.textQ1 : styles.textQ2],
+              ].join(' ')}
+            >
+              {`${currentValue + 'º'}`}
+            </tspan>
+          </text>
+        </g>
+
+        {/* Target & Current Background */}
+        <g transform-origin="50% 50%" transform={`${'rotate(' + rotationOffset + ')'}`}>
+          {/* Target background */}
+          <circle
+            r={`${radiusBack / 2}`}
+            cx={`${radius}`}
+            cy={`${radius}`}
+            className={styles.bgTarget}
+            stroke-width={`${radiusBack}`}
+            stroke-dasharray={`${(targetValue / 360) * (radiusBack * 3.142) + ' ' + radius * 3.142}`}
+            transition=" transform 1.5s linear 0s"
+          />
+
+          {/* Current background POS */}
+          <circle
+            visibility={[posCurrentValue ? 'visible' : 'hidden']}
+            r={`${radiusBack / 2}`}
+            cx={`${radius}`}
+            cy={`${radius}`}
+            className={styles.bgCurrent}
+            stroke-width={`${radiusBack}`}
+            stroke-dasharray={`${(Math.abs(currentValue) / 360) * (radiusBack * 3.142) + ' ' + radius * 3.142}`}
+            transition=" transform 1.5s linear 0s"
+          />
+        </g>
+        <g transform={`${'rotate(' + rotationOffset + ') scale(1 -1)'}`} transform-origin="50% 50%">
+          {/* Current background NEG */}
+          <circle
+            visibility={[negCurrentValue ? 'visible' : 'hidden']}
+            r={`${radiusBack / 2}`}
+            cx={`${radius}`}
+            cy={`${radius}`}
+            className={styles.bgCurrent}
+            stroke-width={`${radiusBack}`}
+            stroke-dasharray={`${(Math.abs(currentValue) / 360) * (radiusBack * 3.142) + ' ' + radius * 3.142}`}
+            transition=" transform 1.5s linear 0s"
+          />
+        </g>
+
+        <g className={styles.clipPathPos}>
+          <g transform={`${'rotate(' + rotationOffset + ')'}`} transform-origin="50% 50%">
+            {/* L3 Gauge */}
+            <circle r={`${radius}`} cx={`${radius}`} cy={`${radius}`} className={styles.gaugeL3} />
+
+            {/* L2 Gauge */}
+            <circle
+              r={`${radius / 2}`}
+              cx={`${radius}`}
+              cy={`${radius}`}
+              className={styles.gaugeL2}
+              stroke-width={`${radius / 10}`}
+              stroke-dasharray={`${percMaxL2}`}
+              transform={`${rotationOffset}`}
+            />
+
+            {/* L1 Gauge */}
+            <circle
+              r={`${radius / 2}`}
+              cx={`${radius}`}
+              cy={`${radius}`}
+              className={styles.gaugeL1}
+              stroke-width={`${radius / 10}`}
+              stroke-dasharray={`${percMaxL1}`}
+              transform={`${rotationOffset}`}
+            />
+
+            {/* Current Gauge */}
+
+            <circle
+              visibility={[posCurrentValue ? 'visible' : 'hidden']}
+              className={[isInDangerZone ? styles.fillL3 : [isInWarningZone ? styles.fillL2 : styles.fillL1]]}
+              r={`${radius / 2}`}
+              cx={`${radius}`}
+              cy={`${radius}`}
+              stroke-width={`${radius / 10}`}
+              stroke-dasharray={`${percCurrent}`}
+              transform={`${rotationOffset}`}
+            />
+          </g>
+        </g>
+
+        <g className={styles.clipPathNeg}>
+          <g transform={`${'rotate(' + rotationOffset + ') scale(1 -1)'}`} transform-origin="50% 50%">
+            {/* L3 Gauge */}
+            <circle r={`${radius}`} cx={`${radius}`} cy={`${radius}`} className={styles.gaugeL3} />
+
+            {/* L2 Gauge */}
+            <circle
+              r={`${radius / 2}`}
+              cx={`${radius}`}
+              cy={`${radius}`}
+              className={styles.gaugeL2}
+              stroke-width={`${radius / 10}`}
+              stroke-dasharray={`${percMaxL2}`}
+              transform={`${rotationOffset}`}
+            />
+
+            {/* L1 Gauge */}
+            <circle
+              r={`${radius / 2}`}
+              cx={`${radius}`}
+              cy={`${radius}`}
+              className={styles.gaugeL1}
+              stroke-width={`${radius / 10}`}
+              stroke-dasharray={`${percMaxL1}`}
+              transform={`${rotationOffset}`}
+            />
+
+            {/* Current Gauge */}
+            <circle
+              visibility={[negCurrentValue ? 'visible' : 'hidden']}
+              className={[isInDangerZone ? styles.fillL3 : [isInWarningZone ? styles.fillL2 : styles.fillL1]]}
+              r={`${radius / 2}`}
+              cx={`${radius}`}
+              cy={`${radius}`}
+              stroke-width={`${radius / 10}`}
+              stroke-dasharray={`${percCurrent}`}
+              transform={`${rotationOffset}`}
+            />
+          </g>
+        </g>
+
+        {/* Target Value line */}
+        <path
+          className={[
+            isTargetDangerZone
+              ? styles.targetValueDanger
+              : [isTargetWarningZone ? styles.targetValueWarning : styles.targetValue],
+          ]}
+          d={`${'M 0 0 L ' + radiusBack + ' 0'}`}
+          transform={`${'translate(' + radius + ' ' + radius + ') rotate(' + (targetValue - minL3) + ') scale(1, 1)'}`}
+        />
+
+        {/* Front Mask */}
+        <circle r={`${radiusBack * 0.8}`} cx={`${radius}`} cy={`${radius}`} className={styles.cutOut} />
+      </svg>
+    );
+  }
+}
diff --git a/love/src/components/MainTel/TMA/Azimuth/Azimuth.module.css b/love/src/components/MainTel/TMA/Azimuth/Azimuth.module.css
new file mode 100644
index 000000000..0da44506c
--- /dev/null
+++ b/love/src/components/MainTel/TMA/Azimuth/Azimuth.module.css
@@ -0,0 +1,119 @@
+.container svg text {
+  padding: 4px;
+}
+
+.clipPathPos {
+  clip-path: path(
+    'M344.4,520.9c-97.32,0-176.5-79.18-176.5-176.5h6c0,94.01,76.49,170.5,170.5,170.5s170.5-76.49,170.5-170.5-76.49-170.5-170.5-170.5v-6c97.32,0,176.5,79.18,176.5,176.5s-79.18,176.5-176.5,176.5Z'
+  );
+}
+.clipPathNeg {
+  clip-path: path(
+    'M344.4,533.9c-103.66,0-188-84.34-188-188,0-49.65,19.58-95.11,55.15-128.02,34.83-32.23,82.01-49.98,132.85-49.98v6c-49.32,0-95.06,17.18-128.78,48.39-34.32,31.76-53.22,75.66-53.22,123.61,0,100.36,81.64,182,182,182s182-81.64,182-182h6c0,103.66-84.34,188-188,188Z'
+  );
+}
+
+.currentValue {
+  fill: white;
+  transition: x 0.5s linear;
+}
+
+.originText {
+  fill: var(--secondary-font-color);
+  font-size: 1em;
+  text-anchor: start;
+}
+
+.targetText {
+  fill: var(--base-font-color);
+  font-size: 1em;
+  transition: transform 0.5s linear 0s;
+}
+
+.textQ1 {
+  text-anchor: start;
+}
+.textQ2 {
+  text-anchor: end;
+}
+.textQ3 {
+  alignment-baseline: text-before-edge;
+  text-anchor: end;
+}
+.textQ4 {
+  alignment-baseline: text-before-edge;
+  text-anchor: start;
+}
+
+.cutOut {
+  fill: rgb(17, 31, 39);
+}
+
+.bg {
+  fill: #182e39;
+}
+.bgTarget {
+  fill: transparent;
+  stroke: #3a525f;
+  opacity: 0.25;
+  transition: stroke-dasharray linear 0.5s;
+  transition: transform linear 0.5s;
+}
+.bgCurrent {
+  fill: transparent;
+  stroke: #3a525f;
+  transition: stroke-dasharray linear 0.5s;
+}
+.gaugeL1 {
+  fill: transparent;
+  stroke: #2e6261;
+  transition: stroke-dasharray linear 0.5s;
+}
+.gaugeL2 {
+  transform-origin: 50% 50%;
+  fill: transparent;
+  stroke: #3f4720;
+  transition: stroke-dasharray linear 0.5s;
+}
+.gaugeL3 {
+  transform-origin: 50% 50%;
+  fill: #3c2b20;
+}
+.fillL1 {
+  fill: transparent;
+  stroke: #00a26d;
+  transition: stroke-dasharray linear 0.5s;
+}
+.fillL2 {
+  fill: transparent;
+  stroke: #eee203;
+  transition: stroke-dasharray linear 0.5s;
+}
+.fillL3 {
+  fill: transparent;
+  stroke: #db5826;
+  transition: stroke-dasharray linear 0.5s;
+}
+.targetValue {
+  stroke: #c1ced2;
+  fill: transparent;
+  stroke-width: 0.2em;
+  stroke-dasharray: 0.4em 0.4em;
+  transition: transform linear 0.5s;
+}
+
+.targetValueWarning {
+  stroke: #eee203;
+  fill: transparent;
+  stroke-width: 0.2em;
+  stroke-dasharray: 0.4em 0.4em;
+  transition: transform linear 0.5s;
+}
+
+.targetValueDanger {
+  stroke: #db5826;
+  fill: transparent;
+  stroke-width: 0.2em;
+  stroke-dasharray: 0.4em 0.4em;
+  transition: transform linear 0.5s;
+}
diff --git a/love/src/components/MainTel/TMA/Drives/Drives.jsx b/love/src/components/MainTel/TMA/Drives/Drives.jsx
index 325cdadc1..9da7417d6 100644
--- a/love/src/components/MainTel/TMA/Drives/Drives.jsx
+++ b/love/src/components/MainTel/TMA/Drives/Drives.jsx
@@ -28,7 +28,6 @@ export default class Drives extends Component {
       type: 'number',
       className: styles.angleColumn,
       render: (value) => (isNaN(value) || Number.isInteger(value) ? value : `${value.toFixed(2)}º`),
-
     };
   }
 
diff --git a/love/src/components/MainTel/TMA/Drives/Drives.module.css b/love/src/components/MainTel/TMA/Drives/Drives.module.css
index 17fb62c53..e6021fc71 100644
--- a/love/src/components/MainTel/TMA/Drives/Drives.module.css
+++ b/love/src/components/MainTel/TMA/Drives/Drives.module.css
@@ -1,22 +1,21 @@
-
 .container {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .table {
-    height: 100%;
+  height: 100%;
 }
 
 th.angleColumn {
-    text-align: center;
+  text-align: center;
 }
 
 .angleColumn {
-    max-width: 0.5em;
-    text-align: center;
+  max-width: 0.5em;
+  text-align: center;
 }
 
 .units {
-    opacity: 0.65;
-}
\ No newline at end of file
+  opacity: 0.65;
+}
diff --git a/love/src/components/MainTel/TMA/Elevation/Elevation.jsx b/love/src/components/MainTel/TMA/Elevation/Elevation.jsx
index be3d5f828..a4e0237fa 100644
--- a/love/src/components/MainTel/TMA/Elevation/Elevation.jsx
+++ b/love/src/components/MainTel/TMA/Elevation/Elevation.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { closestEquivalentAngle } from 'Utils';
 import styles from './Elevation.module.css';
+import GpElevation from 'components/GeneralPurpose/Elevation/Elevation';
 
 export default class Elevation extends Component {
   static propTypes = {
@@ -21,89 +22,97 @@ export default class Elevation extends Component {
     this.state = {
       prevElevationActual: 0,
       prevElevationDemand: 0,
-    }
+    };
   }
 
   componentDidUpdate(prevProps) {
     if (prevProps.elevationActualPosition !== this.props.elevationActualPosition) {
       this.setState((prevState) => ({
-        prevElevationActual: closestEquivalentAngle(prevState.prevElevationActual, this.props.elevationActualPosition)
+        prevElevationActual: closestEquivalentAngle(prevState.prevElevationActual, this.props.elevationActualPosition),
       }));
     }
     if (prevProps.elevationDemandPosition !== this.props.elevationDemandPosition) {
       this.setState((prevState) => ({
-        prevElevationDemand: closestEquivalentAngle(prevState.prevElevationDemand, this.props.elevationDemandPosition)
+        prevElevationDemand: closestEquivalentAngle(prevState.prevElevationDemand, this.props.elevationDemandPosition),
       }));
     }
   }
 
   render() {
     return (
-      <div className={styles.container}>    
-        { this.getSvg()}
+      <div className={styles.container}>
+        <div className={styles.gpElevationContainer}>
+          <GpElevation
+            height={300}
+            width={300}
+            radius={300 / 2}
+            maxL3={97}
+            maxL2={90}
+            maxL1={86.5}
+            minL1={15}
+            minL2={0}
+            minL3={-7}
+            currentValue={this.state.prevElevationActual}
+            targetValue={this.state.prevElevationDemand}
+          />
+        </div>
+        {this.getSvg()}
       </div>
     );
   }
 
   getSvg = () => {
-    const equivalentElevationActual = closestEquivalentAngle(this.state.prevElevationActual, this.props.elevationActualPosition);
-    const equivalentElevationDemand = closestEquivalentAngle(this.state.prevElevationDemand, this.props.elevationDemandPosition);
+    const equivalentElevationActual = closestEquivalentAngle(
+      this.state.prevElevationActual,
+      this.props.elevationActualPosition,
+    );
+    const equivalentElevationDemand = closestEquivalentAngle(
+      this.state.prevElevationDemand,
+      this.props.elevationDemandPosition,
+    );
     return (
-      <svg
-          id="elevationSvg"
-          data-name="elevationSvg"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox={`0 0 502 502`}
-      >
-        
+      <svg id="elevationSvg" data-name="elevationSvg" xmlns="http://www.w3.org/2000/svg" viewBox={`0 0 502 502`}>
         <g
           style={{
             transition: 'transform 1.5s linear 0s',
-            transform: `rotateZ(${equivalentElevationActual}deg)`, transformOrigin: `50% 50%`
+            transform: `rotateZ(${equivalentElevationActual}deg)`,
+            transformOrigin: `50% 50%`,
           }}
         >
-          { this.getMount() }
+          {this.getMount()}
         </g>
-        
-        { equivalentElevationDemand !== equivalentElevationActual ?? this.getDemand(equivalentElevationDemand) }
-        { this.getBaseMount() }
 
+        {equivalentElevationDemand !== equivalentElevationActual ?? this.getDemand(equivalentElevationDemand)}
+        {this.getBaseMount()}
       </svg>
     );
-  }
+  };
 
   getDemand = (equivalentElevationDemand) => {
     return (
       <path
-          d="m417.15 218-34.72-74.46H408l-10-12h-21.16l-6-12.87-4.5-22.09V86.19l-.06-.23h38.37l-4-24h-71l-25-15.63h-3V44h-26.23V20.15h-49.54V44h-26.23v2.36h-3L171.63 62h-71l-4 24h39.76l-.06.23V96.6l-4.49 22.09-6 12.87h-21.77l-10 12h26.19L101.43 184H65.6v30.24h-1v10h26.31v50.16l20 6.84v48.12l20 59.27h240l20-59.27v-48.17l20-6.84v-43.1.05l1.68-.79a9.39 9.39 0 0 0 4.56-12.51ZM156.35 86h.23v.64h-.23V86Zm11.3 129.23-3.51-71.63h6.61l43 71.63ZM161.76 95h33.45v18.6l-10.56 18h-8l-14.26-23.8ZM199 74a9 9 0 0 1-17.95.9l13.67-8.56A9 9 0 0 1 199 74Zm8.22-15.47h1.21V62h-6.76Zm87 0 5.46 3.47h-6.76v-3.51Zm12.8 8 13.93 8.72a9 9 0 1 1-13.93-8.72Zm9.72 65.07-10.57-18V95h34.85l-.62 12.8-14.4 23.76Zm-23.82-65.15a9 9 0 0 1 0 15Zm-25.54 15.83A8.89 8.89 0 0 1 264 83a9 9 0 0 1 0-18 8.89 8.89 0 0 1 3.43.68ZM238 83a8.81 8.81 0 0 1-4-1V65.92a9 9 0 1 1 4 17Zm-29.62-16.1V81a9 9 0 0 1 0-14.12Zm18.53 148.29-43-71.63h42v43.78l1 15h47.54l1-15v-43.78h43.4l-43 71.63Zm105-71.63h6.6L335 215.19h-46.09Zm-64.53-85.07V62h-33.46v-3.51ZM118.58 184h-4.74l8.41-18Zm221.61 97.24a93.74 93.74 0 0 1-10.45 21.11H172.07a94.17 94.17 0 0 1-10.45-21.11Zm40.25-115.27 23 49.27h-13Zm.71-101c2.76 0 5 4 5 9s-2.24 9-5 9-5-4-5-9 2.24-8.97 5-8.97Zm-261 18c-2.76 0-5-4-5-9s2.24-9 5-9 5 4 5 9-2.24 9.03-5 9.03ZM372 281.19Z"
-          style={{
-              strokeMiterlimit: 10,
-              stroke: "#e4e4e7",
-              strokeWidth: ".5px",
-              strokeDasharray: 6,
-              fill: "none",
-              transition: 'transform 1.5s linear 0s',
-              transform: `rotateZ(${equivalentElevationDemand}deg)`, transformOrigin: `50% 50%`
-          }}
-        />
+        d="m417.15 218-34.72-74.46H408l-10-12h-21.16l-6-12.87-4.5-22.09V86.19l-.06-.23h38.37l-4-24h-71l-25-15.63h-3V44h-26.23V20.15h-49.54V44h-26.23v2.36h-3L171.63 62h-71l-4 24h39.76l-.06.23V96.6l-4.49 22.09-6 12.87h-21.77l-10 12h26.19L101.43 184H65.6v30.24h-1v10h26.31v50.16l20 6.84v48.12l20 59.27h240l20-59.27v-48.17l20-6.84v-43.1.05l1.68-.79a9.39 9.39 0 0 0 4.56-12.51ZM156.35 86h.23v.64h-.23V86Zm11.3 129.23-3.51-71.63h6.61l43 71.63ZM161.76 95h33.45v18.6l-10.56 18h-8l-14.26-23.8ZM199 74a9 9 0 0 1-17.95.9l13.67-8.56A9 9 0 0 1 199 74Zm8.22-15.47h1.21V62h-6.76Zm87 0 5.46 3.47h-6.76v-3.51Zm12.8 8 13.93 8.72a9 9 0 1 1-13.93-8.72Zm9.72 65.07-10.57-18V95h34.85l-.62 12.8-14.4 23.76Zm-23.82-65.15a9 9 0 0 1 0 15Zm-25.54 15.83A8.89 8.89 0 0 1 264 83a9 9 0 0 1 0-18 8.89 8.89 0 0 1 3.43.68ZM238 83a8.81 8.81 0 0 1-4-1V65.92a9 9 0 1 1 4 17Zm-29.62-16.1V81a9 9 0 0 1 0-14.12Zm18.53 148.29-43-71.63h42v43.78l1 15h47.54l1-15v-43.78h43.4l-43 71.63Zm105-71.63h6.6L335 215.19h-46.09Zm-64.53-85.07V62h-33.46v-3.51ZM118.58 184h-4.74l8.41-18Zm221.61 97.24a93.74 93.74 0 0 1-10.45 21.11H172.07a94.17 94.17 0 0 1-10.45-21.11Zm40.25-115.27 23 49.27h-13Zm.71-101c2.76 0 5 4 5 9s-2.24 9-5 9-5-4-5-9 2.24-8.97 5-8.97Zm-261 18c-2.76 0-5-4-5-9s2.24-9 5-9 5 4 5 9-2.24 9.03-5 9.03ZM372 281.19Z"
+        style={{
+          strokeMiterlimit: 10,
+          stroke: '#e4e4e7',
+          strokeWidth: '.5px',
+          strokeDasharray: 6,
+          fill: 'none',
+          transition: 'transform 1.5s linear 0s',
+          transform: `rotateZ(${equivalentElevationDemand}deg)`,
+          transformOrigin: `50% 50%`,
+        }}
+      />
     );
-  }
+  };
 
   getMount = () => {
     return (
       <>
         <path className={styles.cls2} d="M268.38 52.14h19.53v46.05h-19.53z" />
         <path className={styles.cls2} d="M282.19 52.14h11.73v46.05h-11.73z" />
-        <path
-          className={styles.cls2}
-          transform="rotate(-180 225.15 75.165)"
-          d="M215.38 52.14h19.53v46.05h-19.53z"
-        />
-        <path
-          className={styles.cls2}
-          transform="rotate(-180 215.245 75.165)"
-          d="M209.38 52.14h11.73v46.05h-11.73z"
-        />
+        <path className={styles.cls2} transform="rotate(-180 225.15 75.165)" d="M215.38 52.14h19.53v46.05h-19.53z" />
+        <path className={styles.cls2} transform="rotate(-180 215.245 75.165)" d="M209.38 52.14h11.73v46.05h-11.73z" />
         <path className={styles.cls3} d="M226.88 19.15h49.54v29.13h-49.54z" />
         <path className={styles.cls2} d="M200.65 42.97h102v14.51h-102z" />
         <path className={styles.cls4} d="M197.62 45.33h5.02v10h-5.02z" />
@@ -111,31 +120,17 @@ export default class Elevation extends Component {
         <path className={styles.cls4} d="M211.62 45.33h5.02v10h-5.02z" />
         <path className={styles.cls5} d="m211.62 55.33-31.97 20v-10l31.97-20v10z" />
 
-        <path
-          className={styles.cls4}
-          transform="rotate(-180 303.165 50.325)"
-          d="M300.65 45.33h5.02v10h-5.02z"
-        />
+        <path className={styles.cls4} transform="rotate(-180 303.165 50.325)" d="M300.65 45.33h5.02v10h-5.02z" />
 
         <path className={styles.cls5} d="m305.67 55.33 31.98 20v-10l-31.98-20v10z" />
 
-        <path
-          className={styles.cls4}
-          transform="rotate(-180 289.165 50.325)"
-          d="M286.65 45.33h5.02v10h-5.02z"
-        />
-        <path
-          className={styles.cls5}
-          d="m291.67 55.33 31.98 20v-10l-31.98-20v10zM196.21 91.97h110.87v20.63H196.21z"
-        />
+        <path className={styles.cls4} transform="rotate(-180 289.165 50.325)" d="M286.65 45.33h5.02v10h-5.02z" />
+        <path className={styles.cls5} d="m291.67 55.33 31.98 20v-10l-31.98-20v10zM196.21 91.97h110.87v20.63H196.21z" />
         <path
           className={styles.cls3}
           d="M226.88 121.15h49.54v65.19h-49.54zM275.42 201.37h-47.54l-1-15.03h49.54l-1 15.03z"
         />
-        <path
-          className={styles.cls5}
-          d="M307.08 112.6H196.21l-14 23.8h138.87l-14-23.8z"
-        />
+        <path className={styles.cls5} d="M307.08 112.6H196.21l-14 23.8h138.87l-14-23.8z" />
         <path className={styles.cls2} d="M169.35 228.44h-20.7V85.61h13.7l7 142.83z" />
         <path className={styles.cls2} d="M150.65 95.6h6.7v127.84h-6.7z" />
         <path
@@ -145,50 +140,24 @@ export default class Elevation extends Component {
         />
         <path className={styles.cls2} d="M335.35 228.44h20.69V85.61h-13.69l-7 142.83z" />
         <path className={styles.cls2} d="M347.34 95.6h6.7v127.84h-6.7z" />
-        <path
-          className={styles.cls3}
-          transform="rotate(121 312.779 165.193)"
-          d="M230.42 159.57h164.71v11.25H230.42z"
-        />
+        <path className={styles.cls3} transform="rotate(121 312.779 165.193)" d="M230.42 159.57h164.71v11.25H230.42z" />
         <path className={styles.cls2} d="M399.02 130.56H105.07l-10 12h313.95l-10-12z" />
 
-        <path
-          className={styles.cls3}
-          transform="rotate(-65 116.065 167.011)"
-          d="M58.27 161.38h115.6v11.25H58.27z"
-        />
+        <path className={styles.cls3} transform="rotate(-65 116.065 167.011)" d="M58.27 161.38h115.6v11.25H58.27z" />
         <path className={styles.cls4} d="M157.58 82.28h191.44V94H157.58z" />
         <path
           className={styles.cls2}
           d="M401.65 61h-300l-4 24h308Zm-280.5 21c-2.76 0-5-4-5-9s2.24-9 5-9 5 4 5 9-2.24 9-5 9ZM191 82a9 9 0 1 1 9-9 9 9 0 0 1-9 9Zm24 0a9 9 0 1 1 9-9 9 9 0 0 1-9 9Zm24 0a9 9 0 1 1 9-9 9 9 0 0 1-9 9Zm26 0a9 9 0 1 1 9-9 9 9 0 0 1-9 9Zm24 0a9 9 0 1 1 9-9 9 9 0 0 1-9 9Zm24 0a9 9 0 1 1 9-9 9 9 0 0 1-9 9Zm69.2 0c-2.76 0-5-4-5-9s2.24-9 5-9 5 4 5 9-2.29 9-5.05 9ZM111.35 223.44h39.3V95.61h-13.3l-26 127.83zM137.35 85.19h13.3v10.42h-13.3z"
         />
         <path className={styles.cls2} d="M150.65 85.19h-13.3l3-11.11h13.3l-3 11.11z" />
-        <path
-          className={styles.cls2}
-          transform="rotate(-180 154 90.395)"
-          d="M150.65 85.19h6.7v10.42h-6.7z"
-        />
+        <path className={styles.cls2} transform="rotate(-180 154 90.395)" d="M150.65 85.19h6.7v10.42h-6.7z" />
         <path className={styles.cls2} d="M150.65 85.19h6.7V74.08h-3.7l-3 11.11z" />
-        <path
-          className={styles.cls3}
-          transform="rotate(-25 388.63 167.01)"
-          d="M383 109.21h11.25v115.6H383z"
-        />
+        <path className={styles.cls3} transform="rotate(-25 388.63 167.01)" d="M383 109.21h11.25v115.6H383z" />
         <path className={styles.cls2} d="M393.35 223.44h-39.31V95.61h13.31l26 127.83z" />
-        <path
-          className={styles.cls2}
-          transform="rotate(-180 360.695 90.395)"
-          d="M354.04 85.19h13.3v10.42h-13.3z"
-        />
-        <path
-          className={styles.cls2}
-          d="M354.04 85.19h13.31l-3-11.11h-13.31l3 11.11zM347.34 85.19h6.7v10.42h-6.7z"
-        />
+        <path className={styles.cls2} transform="rotate(-180 360.695 90.395)" d="M354.04 85.19h13.3v10.42h-13.3z" />
+        <path className={styles.cls2} d="M354.04 85.19h13.31l-3-11.11h-13.31l3 11.11zM347.34 85.19h6.7v10.42h-6.7z" />
         <path className={styles.cls2} d="M354.04 85.19h-6.69V74.08h3.69l3 11.11z" />
-        <path
-          className={styles.cls3}
-          d="m408 221.77 4 8.53 1.67-.79a9.39 9.39 0 0 0 4.48-12.51Z"
-        />
+        <path className={styles.cls3} d="m408 221.77 4 8.53 1.67-.79a9.39 9.39 0 0 0 4.48-12.51Z" />
 
         <path
           className={styles.cls2}
@@ -198,14 +167,8 @@ export default class Elevation extends Component {
           className={styles.cls2}
           d="M152.91 301.3h198v24h-198zM346.91 301.3v24M156.91 325.3v-24M336.91 301.3v24M166.91 325.3v-24M321.91 301.3v24M181.91 325.3v-24M306.91 301.3v24M196.91 325.3v-24M291.91 301.3v24M211.91 325.3v-24M272.91 301.3v24M230.91 325.3v-24M251.91 325.3v-24"
         />
-        <path
-          className={styles.cls2}
-          d="M346.2 255.39a94.5 94.5 0 0 1-188.59 0h-30.55a125 125 0 0 0 249.69 0Z"
-        />
-        <path
-          className={styles.cls2}
-          d="M346.2 255.39a94.5 94.5 0 0 1-188.59 0h-25.55a120 120 0 0 0 239.69 0Z"
-        />
+        <path className={styles.cls2} d="M346.2 255.39a94.5 94.5 0 0 1-188.59 0h-30.55a125 125 0 0 0 249.69 0Z" />
+        <path className={styles.cls2} d="M346.2 255.39a94.5 94.5 0 0 1-188.59 0h-25.55a120 120 0 0 0 239.69 0Z" />
         <path
           className={styles.cls2}
           d="M411.91 214.19v59.16l-20 6.84h-280l-20-6.84v-59.16h320zM128.78 280.19v-66M375.04 280.19v-66M340.91 280.19v-66M162.91 280.19v-66M207.91 280.19v-66M295.91 280.19v-66"
@@ -214,19 +177,15 @@ export default class Elevation extends Component {
           className={styles.cls6}
           d="M168.71 215.44v64.54M181.71 215.44v64.54M169.08 218.09h12.16M169.08 227.09h12.16M169.08 236.09h12.16M169.08 245.09h12.16M169.08 262.09h12.16M169.08 270.09h12.16M169.08 280.09h12.16M169.08 253.09h12.16"
         />
-        <path
-          className={styles.cls7}
-          transform="rotate(-90 116.085 218.185)"
-          d="M111.08 167.69h10v101h-10z"
-        />
+        <path className={styles.cls7} transform="rotate(-90 116.085 218.185)" d="M111.08 167.69h10v101h-10z" />
 
         <path
           className={styles.cls8}
           d="M66.61 215.93v-32.98h99.13v33.68l-99.13-.7zM165.74 182.95v33.68M137.74 182.95v33.68M111.74 182.95v33.68M88.74 182.95v33.68M66.6 205.95h99.14"
         />
       </>
-    )
-  }
+    );
+  };
 
   getBaseMount = () => {
     return (
@@ -244,40 +203,13 @@ export default class Elevation extends Component {
           className={styles.cls7}
           d="M166.83 298.72h140v6h-140zM98.52 329.72h70.31v6H98.52zM62.31 365.72h32.1v6h-32.1zM302.83 268.72h53v6h-53zM201.83 292.72h100v5h-100z"
         />
-        <path
-          className={styles.cls7}
-          transform="rotate(-44 183.038 317.612)"
-          d="M160.07 314.61H206v6h-45.93z"
-        />
-        <path
-          className={styles.cls7}
-          transform="rotate(-44 292.717 283.34)"
-          d="M274.94 280.34h35.55v6h-35.55z"
-        />
-        <path
-          className={styles.cls7}
-          d="M310.83 263.22h42v5h-42zM310.83 257.22h42v5h-42z"
-        />
-        <path
-          className={styles.cls7}
-          transform="rotate(-57 88.728 350.308)"
-          d="M66.13 347.3h45.19v6H66.13z"
-        />
-        <path
-          className={styles.cls7}
-          transform="rotate(-57 52.168 386.833)"
-          d="M28.95 383.83H75.4v6H28.95z"
-        />
-        <path
-          className={styles.cls7}
-          transform="rotate(-57 104.484 350.672)"
-          d="M81.45 347.7h46.07v5.93H81.45z"
-        />
-        <path
-          className={styles.cls7}
-          transform="rotate(-57 68.092 386.953)"
-          d="M44.72 383.96h46.75v6H44.72z"
-        />
+        <path className={styles.cls7} transform="rotate(-44 183.038 317.612)" d="M160.07 314.61H206v6h-45.93z" />
+        <path className={styles.cls7} transform="rotate(-44 292.717 283.34)" d="M274.94 280.34h35.55v6h-35.55z" />
+        <path className={styles.cls7} d="M310.83 263.22h42v5h-42zM310.83 257.22h42v5h-42z" />
+        <path className={styles.cls7} transform="rotate(-57 88.728 350.308)" d="M66.13 347.3h45.19v6H66.13z" />
+        <path className={styles.cls7} transform="rotate(-57 52.168 386.833)" d="M28.95 383.83H75.4v6H28.95z" />
+        <path className={styles.cls7} transform="rotate(-57 104.484 350.672)" d="M81.45 347.7h46.07v5.93H81.45z" />
+        <path className={styles.cls7} transform="rotate(-57 68.092 386.953)" d="M44.72 383.96h46.75v6H44.72z" />
         <path
           className={styles.cls7}
           d="M81.4 361.72h16v2h-16zM84.4 355.72h16v2h-16zM87.4 349.72h16v2h-16zM92.4 343.72h16v2h-16zM96.4 337.72h16v2h-16zM45.4 397.72h16v2h-16zM48.4 391.72h16v2h-16zM51.4 385.72h16v2h-16zM56.4 379.72h16v2h-16zM60.4 373.72h16v2h-16z"
@@ -288,8 +220,8 @@ export default class Elevation extends Component {
         />
         <path
           style={{
-            fill: "#27434f",
-            stroke: "#27434f",
+            fill: '#27434f',
+            stroke: '#27434f',
             strokeMiterlimit: 10,
           }}
           d="M61.66 373.49v-43.82"
@@ -310,6 +242,5 @@ export default class Elevation extends Component {
         <path className={styles.cls4} d="M4 403.67h496v7H4z" />
       </>
     );
-  }
-
+  };
 }
diff --git a/love/src/components/MainTel/TMA/Elevation/Elevation.module.css b/love/src/components/MainTel/TMA/Elevation/Elevation.module.css
index c7bafbfd5..2bd2719e5 100644
--- a/love/src/components/MainTel/TMA/Elevation/Elevation.module.css
+++ b/love/src/components/MainTel/TMA/Elevation/Elevation.module.css
@@ -1,27 +1,26 @@
-
 .container {
-    display: flex;
-    align-self: center;
-    flex-wrap: wrap;
-    position: relative;
+  display: flex;
+  align-self: center;
+  flex-wrap: wrap;
+  position: relative;
 }
 
 .container svg {
-    vertical-align: top;
-    margin: auto;
-    width: 85%;
-    height: auto;
-  }
+  vertical-align: top;
+  margin: auto;
+  width: 85%;
+  height: auto;
+}
 
 .cls1,
 .cls8 {
-    fill: none;
+  fill: none;
 }
 
 .cls1 {
-    stroke: #e4e4e7;
-    stroke-width: 0.5px;
-    stroke-dasharray: 6;
+  stroke: #e4e4e7;
+  stroke-width: 0.5px;
+  stroke-dasharray: 6;
 }
 
 .cls1,
@@ -31,11 +30,11 @@
 .cls6,
 .cls8,
 .cls9 {
-    stroke-miterlimit: 10;
+  stroke-miterlimit: 10;
 }
 
 .cls2 {
-    fill: #182e39;
+  fill: #182e39;
 }
 
 .cls2,
@@ -43,33 +42,42 @@
 .cls6,
 .cls8,
 .cls9 {
-    stroke: #27434f;
+  stroke: #27434f;
 }
 
 .cls2,
 .cls3,
 .cls4,
 .cls5 {
-    stroke-width: 2px;
+  stroke-width: 2px;
 }
 
 .cls3,
 .cls6,
 .cls7,
 .cls9 {
-    fill: #27434f;
+  fill: #27434f;
 }
 
 .cls4,
 .cls5 {
-    fill: #15242d;
-    stroke: #182e39;
+  fill: #15242d;
+  stroke: #182e39;
 }
 
 .cls5 {
-    stroke-linejoin: round;
+  stroke-linejoin: round;
 }
 
 .cls6 {
-    stroke-linecap: round;
+  stroke-linecap: round;
+}
+
+.gpElevationContainer {
+  position: absolute;
+  top: 10%;
+  width: 30%;
+}
+.gpElevationContainer svg {
+  transform: translate(0, 50%);
 }
diff --git a/love/src/components/MainTel/TMA/MirrorCovers/MirrorCovers.jsx b/love/src/components/MainTel/TMA/MirrorCovers/MirrorCovers.jsx
index f501ca797..ec9babec9 100644
--- a/love/src/components/MainTel/TMA/MirrorCovers/MirrorCovers.jsx
+++ b/love/src/components/MainTel/TMA/MirrorCovers/MirrorCovers.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { closestEquivalentAngle } from 'Utils';
 import WindRose from '../../../icons/WindRose/WindRose';
+import Azimuth from '../Azimuth/Azimuth';
 import {
   mtMountMirrorCoversStateMap,
   // stateToStyleMTMountMirrorCoversState,
@@ -51,6 +52,9 @@ export default class MirrorCovers extends Component {
         <div className={styles.windRoseContainer}>
           <WindRose />
         </div>
+        <div className={styles.azContainer}>
+          <Azimuth currentValue={this.props.azimuthActualPosition} targetValue={this.props.azimuthDemandPosition} />
+        </div>
         {this.getSvg()}
       </div>
     );
@@ -99,28 +103,22 @@ export default class MirrorCovers extends Component {
     );
 
     return (
-        <svg
-            id="mirrorCoverSvg"
-            data-name="mirrorCoverSvg"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 385 385"
+      <svg id="mirrorCoverSvg" data-name="mirrorCoverSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385 385">
+        {this.getBase(x0, y0, equivalentAzimuthActual)}
+
+        <g
+          style={{
+            transition: 'transform 1.5s linear 0s',
+            transform: `rotateZ(${equivalentAzimuthActual}deg)`,
+            transformOrigin: `50% 50%`,
+          }}
         >
-          { this.getBase(x0, y0, equivalentAzimuthActual) }
-          
-            <g
-                style={{
-                  transition: 'transform 1.5s linear 0s',
-                  transform: `rotateZ(${equivalentAzimuthActual}deg)`,
-                  transformOrigin: `50% 50%`
-                }}
-            >
-              { this.getMirrorCover(angleClosed, angleClosedBorder, viewBoxSize) }
-              { this.getMount(x0, y0) }
-            </g>
+          {this.getMirrorCover(angleClosed, angleClosedBorder, viewBoxSize)}
+          {this.getMount(x0, y0)}
+        </g>
 
-            { equivalentAzimuthDemand !== equivalentAzimuthActual ?? this.getDemand(equivalentAzimuthDemand) }
-            
-        </svg>
+        {equivalentAzimuthDemand !== equivalentAzimuthActual ?? this.getDemand(equivalentAzimuthDemand)}
+      </svg>
     );
   };
 
@@ -139,20 +137,20 @@ export default class MirrorCovers extends Component {
           }}
         />
         <g
-            style={{
-              transition: 'transform 1.5s linear 0s',
-              transform: `rotateZ(${equivalentAzimuthActual}deg)`,
-              transformOrigin: `50% 50%`
-            }}
+          style={{
+            transition: 'transform 1.5s linear 0s',
+            transform: `rotateZ(${equivalentAzimuthActual}deg)`,
+            transformOrigin: `50% 50%`,
+          }}
         >
-            <path
-                className={styles.cls3}
-                d="M19.95 168.14h48.69v48.71H19.95zM316.36 168.14h48.69v48.71h-48.69zM302.63 40.57H82.37L38.31 87.89l-3.25 19.02 47.31 15.66h220.26l47.31-15.66-2.44-19.02-44.87-47.32z"
-            />
-            <path
-                className={styles.cls3}
-                d="M323.24 97.41 289 62.6H96L61.76 97.41l-11.28 60.28v69.62l11.28 60.28L96 322.4h193l34.26-34.81 11.28-60.28v-69.62ZM192.5 298A105.54 105.54 0 1 1 298 192.5 105.52 105.52 0 0 1 192.5 298Z"
-            />
+          <path
+            className={styles.cls3}
+            d="M19.95 168.14h48.69v48.71H19.95zM316.36 168.14h48.69v48.71h-48.69zM302.63 40.57H82.37L38.31 87.89l-3.25 19.02 47.31 15.66h220.26l47.31-15.66-2.44-19.02-44.87-47.32z"
+          />
+          <path
+            className={styles.cls3}
+            d="M323.24 97.41 289 62.6H96L61.76 97.41l-11.28 60.28v69.62l11.28 60.28L96 322.4h193l34.26-34.81 11.28-60.28v-69.62ZM192.5 298A105.54 105.54 0 1 1 298 192.5 105.52 105.52 0 0 1 192.5 298Z"
+          />
         </g>
       </>
     );
@@ -170,7 +168,7 @@ export default class MirrorCovers extends Component {
           strokeMiterlimit: 10,
           transition: 'transform 1.5s linear 0s',
           transform: `rotateZ(${equivalentAzimuthDemand}deg)`,
-          transformOrigin: `50% 50%`
+          transformOrigin: `50% 50%`,
         }}
       />
     );
diff --git a/love/src/components/MainTel/TMA/MirrorCovers/MirrorCovers.module.css b/love/src/components/MainTel/TMA/MirrorCovers/MirrorCovers.module.css
index 8609f8f7b..1d3f6a8e0 100644
--- a/love/src/components/MainTel/TMA/MirrorCovers/MirrorCovers.module.css
+++ b/love/src/components/MainTel/TMA/MirrorCovers/MirrorCovers.module.css
@@ -1,28 +1,35 @@
-
 .container {
-    display: flex;
-    align-self: center;
-    flex-wrap: wrap;
-    position: relative;
+  display: flex;
+  align-self: center;
+  flex-wrap: wrap;
+  position: relative;
 }
 
 .container svg {
-    vertical-align: top;
-    margin: auto;
-    width: 70%;
-    height: auto;
-  }
+  vertical-align: top;
+  margin: auto;
+  width: 50%;
+  height: auto;
+  z-index: 1;
+}
 
 .windRoseContainer {
-    position: absolute;
-    left: 10%;
-    top: 0%;
-    width: 13%;
-  }
+  position: absolute;
+  left: 0%;
+  top: -20%;
+  width: 20%;
+}
+
+.azContainer {
+  position: absolute;
+  left: -60%;
+  top: -60%;
+  width: 220%;
+}
 
 .cls1 {
-    fill: #15242d;
-    stroke: #182e39;
+  fill: #15242d;
+  stroke: #182e39;
 }
 
 .cls1,
@@ -33,7 +40,7 @@
 .cls6,
 .cls7,
 .cls8 {
-    stroke-miterlimit: 10;
+  stroke-miterlimit: 10;
 }
 
 .cls1,
@@ -41,52 +48,53 @@
 .cls5,
 .cls6,
 .cls7 {
-    stroke-width: 2px;
+  stroke-width: 2px;
 }
 
 .cls2,
 .cls6 {
-    fill: none;
+  fill: none;
 }
 
 .cls2 {
-    stroke: #e4e4e7;
-    stroke-width: 0.5px;
-    stroke-dasharray: 6;
+  stroke: #e4e4e7;
+  stroke-width: 0.5px;
+  stroke-dasharray: 6;
 }
 
 .cls3,
 .cls8 {
-    fill: #182e39;
+  fill: #182e39;
 }
 
 .cls3,
 .cls7,
 .cls8 {
-    stroke: #27434f;
+  stroke: #27434f;
 }
 
-.cls4, .cls5 {
-    stroke: none;
+.cls4,
+.cls5 {
+  stroke: none;
 }
 
 .cls4 {
-    fill: #bcd8e2;
-  }
+  fill: #bcd8e2;
+}
 
 .cls5 {
-    fill: #fff;
+  fill: #fff;
 }
 
 .cls6 {
-    stroke: #f2f2f2;
+  stroke: #f2f2f2;
 }
 
 .cls7 {
-    fill: #27434f;
+  fill: #27434f;
 }
 
 .cls8 {
-    stroke-linecap: round;
-    stroke-width: 4px;
+  stroke-linecap: round;
+  stroke-width: 4px;
 }
diff --git a/love/src/components/MainTel/TMA/Summary/Summary.module.css b/love/src/components/MainTel/TMA/Summary/Summary.module.css
index 6a3b37e9d..6a77e750f 100644
--- a/love/src/components/MainTel/TMA/Summary/Summary.module.css
+++ b/love/src/components/MainTel/TMA/Summary/Summary.module.css
@@ -1,14 +1,13 @@
-
 .container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    background: var(--second-quaternary-background-dimmed-color);
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  background: var(--second-quaternary-background-dimmed-color);
 }
 
 .highlight {
-    color: var(--base-font-color);
-  }
+  color: var(--base-font-color);
+}
 
 .pt {
-    padding: 2.15em 0em 0.1em 0em !important;
+  padding: 2.15em 0em 0.1em 0em !important;
 }
diff --git a/love/src/components/MainTel/TMA/TMA.container.jsx b/love/src/components/MainTel/TMA/TMA.container.jsx
index ecf04f1f6..d71908546 100644
--- a/love/src/components/MainTel/TMA/TMA.container.jsx
+++ b/love/src/components/MainTel/TMA/TMA.container.jsx
@@ -13,8 +13,7 @@ import {
 import SubscriptionTableContainer from '../../GeneralPurpose/SubscriptionTable/SubscriptionTable.container';
 
 export const schema = {
-  description:
-    'View of Telescope Mount Assembly',
+  description: 'View of Telescope Mount Assembly',
   defaultSize: [90, 53],
   props: {
     title: {
@@ -26,21 +25,11 @@ export const schema = {
   },
 };
 
-const TMAContainer = ({
-  subscribeToStreams,
-  unsubscribeToStreams,
-  ...props
-}) => {
+const TMAContainer = ({ subscribeToStreams, unsubscribeToStreams, ...props }) => {
   if (props.isRaw) {
-     return <SubscriptionTableContainer subscriptions={props.subscriptions}></SubscriptionTableContainer>;
-   }
-  return (
-    <TMA
-      subscribeToStreams={subscribeToStreams}
-      unsubscribeToStreams={unsubscribeToStreams}
-      {...props}
-    />
-  );
+    return <SubscriptionTableContainer subscriptions={props.subscriptions}></SubscriptionTableContainer>;
+  }
+  return <TMA subscribeToStreams={subscribeToStreams} unsubscribeToStreams={unsubscribeToStreams} {...props} />;
 };
 
 const mapStateToProps = (state) => {
@@ -49,13 +38,13 @@ const mapStateToProps = (state) => {
   const elevation = getElevationState(state);
   const drives = getDrivesAzimuthElevationState(state);
   const mirror = getMirrorCoversMotionState(state);
-  return { 
+  return {
     ...tmaSummary,
     ...azimuth,
     ...elevation,
     ...drives,
     ...mirror,
-   };
+  };
 };
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/love/src/components/MainTel/TMA/TMA.jsx b/love/src/components/MainTel/TMA/TMA.jsx
index 967b86a7b..580ef40d4 100644
--- a/love/src/components/MainTel/TMA/TMA.jsx
+++ b/love/src/components/MainTel/TMA/TMA.jsx
@@ -5,6 +5,8 @@ import styles from './TMA.module.css';
 import Summary from './Summary/Summary';
 import MirrorCovers from './MirrorCovers/MirrorCovers';
 import Elevation from './Elevation/Elevation';
+import GpElevation from 'components/GeneralPurpose/Elevation/Elevation';
+
 import Drives from './Drives/Drives';
 
 export default class TMA extends Component {
@@ -69,10 +71,6 @@ export default class TMA extends Component {
     elevationDrives: [],
   };
 
-  componentDidMount() {
-    this.props.subscribeToStreams();
-  }
-
   componentWillUnmount() {
     this.props.unsubscribeToStreams();
   }
@@ -97,6 +95,7 @@ export default class TMA extends Component {
       azimuthDrives,
       elevationDrives,
     } = this.props;
+
     return (
       <>
         <div className={styles.summaryContainer}>
@@ -126,10 +125,12 @@ export default class TMA extends Component {
             />
           </div>
           <div className={styles.elevationContainer}>
-            <Elevation
-              elevationActualPosition={elevationActualPosition}
-              elevationDemandPosition={elevationDemandPosition}
-            />
+            <div className={styles.svgElevationContainer}>
+              <Elevation
+                elevationActualPosition={elevationActualPosition}
+                elevationDemandPosition={elevationDemandPosition}
+              />
+            </div>
           </div>
         </div>
 
diff --git a/love/src/components/MainTel/TMA/TMA.module.css b/love/src/components/MainTel/TMA/TMA.module.css
index 4c0774b55..0c503fc91 100644
--- a/love/src/components/MainTel/TMA/TMA.module.css
+++ b/love/src/components/MainTel/TMA/TMA.module.css
@@ -1,30 +1,30 @@
 .summaryContainer {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    padding: 1em;
-    border-radius: 5px;
-    background: var(--second-secondary-background-color);
-    margin-bottom: 1em;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  padding: 1em;
+  border-radius: 5px;
+  background: var(--second-secondary-background-color);
+  margin-bottom: 1em;
 }
 
 .mirrorAndElevationContainer {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-auto-rows: auto;
-    gap: 10px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: auto;
+  gap: 10px;
 }
 
 .mirrorCoversContainer {
-    align-self: center;
+  align-self: center;
 }
 
 .elevationContainer {
-    align-self: center;
+  align-self: center;
 }
 
 .drivesContainer {
-    padding: 1em;
-    border-radius: 5px;
-    background: var(--second-secondary-background-color);
+  padding: 1em;
+  border-radius: 5px;
+  background: var(--second-secondary-background-color);
 }