diff --git a/.gitignore b/.gitignore
index 552127a1..d54374a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -73,6 +73,7 @@ public/tle/TLEAltNemo*
 classfd.tle
 public/audio/samples
 public/img/wallpaper/.archive
+public/img/*.xcf
 
 # Jest Coverage
 coverage/
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index ef64fcd6..536e7045 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -2,6 +2,145 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### v10.2.0
+
+>  
+
+- Sateliot
+- fix: :bug: fix debris screening menu being available without a satellite selected
+- feature: new sateliot satellite model
+- feat: :sparkles: add localization for spanish and german
+- feat: :sparkles: add collapsable sections in the sat-infobox
+- feature: created a new satellite model based on a s6u with solar pannels.
+- refactor: :fire: remove jquery!
+- fix: :bug: fix styling issues with sat-infobox and search drop down
+- feat: :sparkles: update new calendar component
+- refactor: :fire: remove unused fonts
+- feat: :lipstick: new ui
+- feat: :heavy_minus_sign: remove jquery-ui-bundle dependencies for calendar
+- refactor: :lipstick: update styling for new theme
+- refactor: :recycle: rename css variables to match home page
+- feat: :sparkles: add flags
+- feat: :sparkles: add new camera widget in eci coordinates
+- refactor: :bug: fix class name error caused by minification
+- build: :green_heart: fix build hanging
+- feat: :sparkles: expand features of tip plugin and fix bug with fetch source
+- test: :white_check_mark: update tests to match new plugin architecture
+- fix: :bug: fix type in .gitignore
+- build: :fire: remove old deployment pipeline
+- feat: :sparkles: add geo satellite transponder info
+- fix: :lipstick: fix ui issues caused by input-field not having margin
+- feat: :globe_with_meridians: add localization to calendar for es and de
+- feat: :sparkles: add sateliot preset
+- fix: :lipstick: fix stf menu ui
+- refactor: :wastebasket: remove deprecated style code
+- refactor: :recycle: migrate to storage.keeptrack.space
+- feat: :sparkles: add camera reset function
+- feat: :sparkles: add tv satellites to constellations plugin
+- feat: :sparkles: add colorbox header
+- feat: :sparkles: add links to satellite owner websites
+- build: :construction_worker: remove codecov from cicd
+- refactor: :recycle: remove deprecated settings and names
+- feat: :sparkles: add new logo always on
+- fix: :bug: fix export function of transponders plugin
+- refactor: :lipstick: more color updates
+- fix: :bug: fix flickering on mobile
+- feat: :sparkles: update screenshot to use new logo instead of text
+- feat: :sparkles: add clear message when no lookangles correctly displayed
+- feat: :sparkles: add different logic for rotation reset vs full camera reset
+- fix: :bug: fix bug caused by satellite that propagates into the earth
+- fix: :bug: fix bug where satellite timeline only visible if watchlist sats
+- refactor: :lipstick: more changes to ui color
+- fix: :bug: fix color of buttons in multi-site lookangles settings
+- fix: :bug: fix bug where some plugins reenable in mobile mode
+- fix: :bug: fix bug in processLimitedSats_ that caused duplicated ids
+- refactor: :recycle: refactor the satellite cone mesh distance from earth to settings
+- build: :construction_worker: remove unnecessary artifacts
+- fix: :lipstick: fix collapsing sat-infobox on mobile
+- fix: :lipstick: fix duplicate shadow effect
+- fix: :bug: fix bug with shift being tracked as down after window loses focus
+- fix: :bug: fix missing id parameters
+- build: :heavy_minus_sign: remove old dependencies
+- feat: :sparkles: add new splash screens
+- fix: :bug: fix new launch showing error even when it works
+- refactor: :lipstick: change color of polar plot to match new theme
+- feat: :lipstick: shrink sat-info-box when multiple menus are collapsed
+- fix: :bug: fix dark-clouds preset
+- refactor: :children_crossing: increase zoom speed
+- fix: :bug: fix bug where no references availalbe for historical RCS est
+- fix: :bug: fix transponder menu being enabled incorrectly
+- refactor: :heavy_minus_sign: remove unused dependencies
+- test: :white_check_mark: fix colorbox test
+- fix: :bug: fix sensor-list side menu size
+- refactor: :recycle: change default search size
+- feat: :lipstick: add iss flag
+- fix: :bug: fix bug where polar plot could be opened without a sensor selected
+- ci: :green_heart: switch trufflehog action
+- fix: :bug: fix create sensor from context menu not working
+- fix: :bug: fix search bar being clipped when sat-infobox moved
+- fix: :lock: fix security issue in dependencies
+- fix: :bug: fix unknown countries showing up as Grenada
+- refactor: :recycle: allow closer zoom on satellite models
+- fix: :ambulance: fix error when no satellite selected
+- fix: :bug: fix typo in locales.ts
+- feat: :sparkles: update logo image
+- fix: :lipstick: fix custom sensor plugin menu width
+- fix: :lipstick: fix missing nav-bar-height on mobile
+- feat: :sparkles: update logos
+- refactor: :lock: fix security issue with dependencies
+
+#### v10.2.0-0
+
+#### v10.1.0
+
+>  
+
+- feat: :sparkles: add localization for spanish and german
+- refactor: :fire: remove jquery!
+- feat: :sparkles: update new calendar component
+- refactor: :fire: remove unused fonts
+- feat: :heavy_minus_sign: remove jquery-ui-bundle dependencies for calendar
+- feat: :sparkles: add flags
+- refactor: :bug: fix class name error caused by minification
+- feat: :sparkles: expand features of tip plugin and fix bug with fetch source
+- test: :white_check_mark: update tests to match new plugin architecture
+- fix: :bug: fix type in .gitignore
+- build: :fire: remove old deployment pipeline
+- feat: :globe_with_meridians: add localization to calendar for es and de
+- refactor: :recycle: migrate to storage.keeptrack.space
+- fix: :bug: fix flickering on mobile
+- fix: :bug: fix missing id parameters
+- refactor: :heavy_minus_sign: remove unused dependencies
+- fix: :bug: fix typo in locales.ts
+- refactor: :lock: fix security issue with dependencies
+
+#### v10.1.0-2
+
+>  
+
+- build: :heavy_minus_sign: remove old dependencies
+
+#### v10.1.0-1
+
+>  
+
+- fix: :bug: disable husky
+
+#### v10.1.0-0
+
+>  
+
+- refactor: :recycle: abstract text from plugins
+- feat: :construction: first attempt at providing localization
+- refactor: :recycle: refactor data out of sensorList and multisiteLookangles
+- feat: :sparkles: add ability to push to npm again
+- docs: :memo: update changelog
+- fix: :bug: fix missing rmb items
+- fix: :goal_net: add try/catch for bad plugins
+- fix: :rotating_light: fix linter errors with package.json
+- fix: :bug: fix rmb events firing twice
+- fix: :bug: fix getSensorList logic
+
 #### v10.0.2
 
 >  
diff --git a/package-lock.json b/package-lock.json
index bc163501..17c22093 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "keeptrack.space",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "keeptrack.space",
-      "version": "10.1.0",
+      "version": "10.2.0",
       "license": "AGPL-3.0",
       "dependencies": {
         "@analytics/google-analytics": "^1.0.7",
diff --git a/package.json b/package.json
index 7d469cae..b38e52fb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "keeptrack.space",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "type": "module",
   "description": "Complex astrodynamics tools designed for non-engineers to make learning about orbital mechanics and satellite operations more accessible.",
   "author": "Theodore Kruczek",
diff --git a/public/css/style.css b/public/css/style.css
index b3a30d04..9bfbafc4 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -156,7 +156,8 @@ ul {
 #keeptrack-canvas {
   background: var(--colorBlack);
   /* Inconsistent brightness without this */
-  z-index: 0;
+  position: absolute;
+  z-index: -1;
   top: 0;
   left: 0;
   bottom: 0;
@@ -242,7 +243,7 @@ ul {
 }
 
 #sat-hoverbox {
-  display: flex;
+  display: none;
   background: var(--color-dark-background) !important;
   cursor: default;
   color: white;
diff --git a/public/img/textLogoMd.png b/public/img/textLogoMd.png
index 50fbb99f..7dc0d05b 100644
Binary files a/public/img/textLogoMd.png and b/public/img/textLogoMd.png differ
diff --git a/public/img/textLogoXl.png b/public/img/textLogoXl.png
index b8665f57..b5136684 100644
Binary files a/public/img/textLogoXl.png and b/public/img/textLogoXl.png differ
diff --git a/src/keeptrack.ts b/src/keeptrack.ts
index 86081762..09075ff5 100644
--- a/src/keeptrack.ts
+++ b/src/keeptrack.ts
@@ -54,6 +54,7 @@ import { settingsManager, SettingsManagerOverride } from './settings/settings';
 import { VERSION } from './settings/version.js';
 import { VERSION_DATE } from './settings/versionDate.js';
 import { Camera } from './singletons/camera';
+import { CameraControlWidget } from './singletons/camera-control-widget';
 import { CatalogManager } from './singletons/catalog-manager';
 import { ColorSchemeManager } from './singletons/color-scheme-manager';
 import { DemoManager } from './singletons/demo-mode';
@@ -167,6 +168,10 @@ export class KeepTrack {
     keepTrackContainer.registerSingleton(Singletons.SensorMath, sensorMathInstance);
     const mainCameraInstance = new Camera();
 
+    const cameraControlWidget = new CameraControlWidget();
+
+    console.log(cameraControlWidget);
+
     keepTrackContainer.registerSingleton(Singletons.MainCamera, mainCameraInstance);
     const hoverManagerInstance = new HoverManager();
 
@@ -239,7 +244,7 @@ export class KeepTrack {
         </div>
         <figcaption id="info-overlays">
           <div id="camera-status-box" class="start-hidden status-box">Earth Centered Camera Mode</div>
-          <div id="propRate-status-box" class="start-hidden status-box">Propagation Rate: 1.00x</div>          
+          <div id="propRate-status-box" class="start-hidden status-box">Propagation Rate: 1.00x</div>
         </figcaption>
       </main>
       <footer id="nav-footer" class="page-footer resizable">
diff --git a/src/plugins/debris-screening/debris-screening.ts b/src/plugins/debris-screening/debris-screening.ts
index 334b0122..7d4e5c20 100644
--- a/src/plugins/debris-screening/debris-screening.ts
+++ b/src/plugins/debris-screening/debris-screening.ts
@@ -5,14 +5,14 @@ import { showLoading } from '@app/lib/showLoading';
 import { CoordinateTransforms } from '@app/static/coordinate-transforms';
 import { SatMath } from '@app/static/sat-math';
 import aboutPng from '@public/img/icons/about.png';
-import { BaseObject, DetailedSatellite, EciVec3, Hours, Kilometers, Milliseconds, Minutes, Seconds, Sgp4 } from 'ootk';
+import { DetailedSatellite, EciVec3, Hours, Kilometers, Milliseconds, Minutes, Seconds, Sgp4 } from 'ootk';
 import { KeepTrackPlugin } from '../KeepTrackPlugin';
 import { SelectSatManager } from '../select-sat-manager/select-sat-manager';
 
 export class DebrisScreening extends KeepTrackPlugin {
   readonly id = 'DebrisScreening';
   dependencies_ = [SelectSatManager.name];
-  private selectSatManager_: SelectSatManager;
+  private readonly selectSatManager_: SelectSatManager;
 
   constructor() {
     super();
@@ -114,6 +114,7 @@ export class DebrisScreening extends KeepTrackPlugin {
   </div>
 `;
 
+  isRequireSatelliteSelected = true;
   isIconDisabledOnLoad = true;
   isIconDisabled = true;
 
@@ -138,18 +139,6 @@ export class DebrisScreening extends KeepTrackPlugin {
         });
       },
     });
-
-    keepTrackApi.register({
-      event: KeepTrackApiEvents.selectSatData,
-      cbName: this.id,
-      cb: (sat: BaseObject): void => {
-        if (sat) {
-          this.setBottomIconToEnabled();
-        } else {
-          this.setBottomIconToDisabled();
-        }
-      },
-    });
   }
 
   onVisClick(): void {
@@ -221,7 +210,6 @@ export class DebrisScreening extends KeepTrackPlugin {
         const ric = CoordinateTransforms.sat2ric({ position: satSv.position, velocity: satSv.velocity }, { position: sat2Sv.position, velocity: sat2Sv.velocity });
 
         if (Math.abs(ric.position[0]) < uVal && Math.abs(ric.position[1]) < vVal && Math.abs(ric.position[2]) < wVal) {
-          console.log(`${sat2.sccNum} at ${new Date(now)}`);
           searchList.push(sat2.sccNum);
           // Remove from possible sats
           possibleSats.splice(idx, 1);
diff --git a/src/plugins/settings-menu/settings-menu.ts b/src/plugins/settings-menu/settings-menu.ts
index 81ffa17e..3cf5fbee 100644
--- a/src/plugins/settings-menu/settings-menu.ts
+++ b/src/plugins/settings-menu/settings-menu.ts
@@ -133,6 +133,13 @@ export class SettingsMenuPlugin extends KeepTrackPlugin {
                 Show Agencies
               </label>
             </div>
+            <div class="switch row">
+              <label data-position="top" data-delay="50" data-tooltip="Disable this to hide the camera widget">
+                <input id="settings-drawCameraWidget" type="checkbox" checked/>
+                <span class="lever"></span>
+                Show Camera Widget
+              </label>
+            </div>
             <div class="switch row">
               <label data-position="top" data-delay="50" data-tooltip="Disable this to hide orbit lines">
                 <input id="settings-drawOrbits" type="checkbox" checked/>
@@ -464,6 +471,12 @@ export class SettingsMenuPlugin extends KeepTrackPlugin {
     (<HTMLInputElement>getEl('settings-showDebris')).checked = settingsManager.isShowDebris;
     (<HTMLInputElement>getEl('settings-showAgencies')).checked = settingsManager.isShowAgencies;
     (<HTMLInputElement>getEl('settings-drawOrbits')).checked = settingsManager.isDrawOrbits;
+    (<HTMLInputElement>getEl('settings-drawCameraWidget')).checked = settingsManager.drawCameraWidget;
+    if (!settingsManager.drawCameraWidget) {
+      getEl('camera-control-widget').style.display = 'none';
+    } else {
+      getEl('camera-control-widget').style.display = 'block';
+    }
     (<HTMLInputElement>getEl('settings-drawTrailingOrbits')).checked = settingsManager.isDrawTrailingOrbits;
     (<HTMLInputElement>getEl('settings-drawEcf')).checked = settingsManager.isOrbitCruncherInEcf;
     (<HTMLInputElement>getEl('settings-isDrawInCoverageLines')).checked = settingsManager.isDrawInCoverageLines;
@@ -494,6 +507,7 @@ export class SettingsMenuPlugin extends KeepTrackPlugin {
     PersistenceManager.getInstance().saveItem(StorageKey.SETTINGS_ROCKET_BODIES, settingsManager.isShowRocketBodies.toString());
     PersistenceManager.getInstance().saveItem(StorageKey.SETTINGS_DEBRIS, settingsManager.isShowDebris.toString());
     PersistenceManager.getInstance().saveItem(StorageKey.SETTINGS_AGENCIES, settingsManager.isShowAgencies.toString());
+    PersistenceManager.getInstance().saveItem(StorageKey.SETTINGS_DRAW_CAMERA_WIDGET, settingsManager.drawCameraWidget.toString());
     PersistenceManager.getInstance().saveItem(StorageKey.SETTINGS_DRAW_ORBITS, settingsManager.isDrawOrbits.toString());
     PersistenceManager.getInstance().saveItem(StorageKey.SETTINGS_DRAW_TRAILING_ORBITS, settingsManager.isDrawTrailingOrbits.toString());
     PersistenceManager.getInstance().saveItem(StorageKey.SETTINGS_DRAW_ECF, settingsManager.isOrbitCruncherInEcf.toString());
@@ -550,6 +564,7 @@ export class SettingsMenuPlugin extends KeepTrackPlugin {
       case 'settings-showDebris':
       case 'settings-showAgencies':
       case 'settings-drawOrbits':
+      case 'settings-drawCameraWidget':
       case 'settings-drawTrailingOrbits':
       case 'settings-drawEcf':
       case 'settings-isDrawInCoverageLines':
@@ -594,6 +609,7 @@ export class SettingsMenuPlugin extends KeepTrackPlugin {
   }
 
   private static resetToDefaults_() {
+    keepTrackApi.getSoundManager().play(SoundNames.BUTTON_CLICK);
     settingsManager.isShowLeoSats = true;
     settingsManager.isShowHeoSats = true;
     settingsManager.isShowMeoSats = true;
@@ -603,6 +619,7 @@ export class SettingsMenuPlugin extends KeepTrackPlugin {
     settingsManager.isShowDebris = true;
     settingsManager.isShowAgencies = false;
     settingsManager.isDrawOrbits = true;
+    settingsManager.drawCameraWidget = true;
     settingsManager.isDrawTrailingOrbits = false;
     settingsManager.isOrbitCruncherInEcf = false;
     settingsManager.isDrawInCoverageLines = true;
@@ -653,6 +670,17 @@ export class SettingsMenuPlugin extends KeepTrackPlugin {
     const isDrawAtmosphereChanged = settingsManager.isDrawAtmosphere !== (<HTMLInputElement>getEl('settings-drawAtmosphere')).checked;
     const isDrawAuroraChanged = settingsManager.isDrawAurora !== (<HTMLInputElement>getEl('settings-drawAurora')).checked;
 
+    settingsManager.drawCameraWidget = (<HTMLInputElement>getEl('settings-drawCameraWidget')).checked;
+    const ccWidgetCanvas = getEl('camera-control-widget');
+
+    if (ccWidgetCanvas) {
+      if (settingsManager.drawCameraWidget) {
+        ccWidgetCanvas.style.display = 'block';
+      } else {
+        ccWidgetCanvas.style.display = 'none';
+      }
+    }
+
     settingsManager.isBlackEarth = (<HTMLInputElement>getEl('settings-drawBlackEarth')).checked;
     settingsManager.isDrawAtmosphere = (<HTMLInputElement>getEl('settings-drawAtmosphere')).checked;
     settingsManager.isDrawAurora = (<HTMLInputElement>getEl('settings-drawAurora')).checked;
diff --git a/src/plugins/timeline-satellite/satellite-timeline.ts b/src/plugins/timeline-satellite/satellite-timeline.ts
index 5de80c59..8f35f452 100644
--- a/src/plugins/timeline-satellite/satellite-timeline.ts
+++ b/src/plugins/timeline-satellite/satellite-timeline.ts
@@ -160,21 +160,19 @@ export class SatelliteTimeline extends KeepTrackPlugin {
       event: KeepTrackApiEvents.selectSatData,
       cbName: this.id,
       cb: (sat: BaseObject) => {
-        if (!this.isMenuButtonActive) {
-          return;
-        }
-
-        if (sat) {
-          this.ctxStatic_.reset();
-          this.updateTimeline();
-          this.canvas_.style.display = 'block';
-        }
-
         if (!sat && keepTrackApi.getPlugin(WatchlistPlugin).watchlistList.length === 0) {
           this.setBottomIconToDisabled();
         } else if (this.verifySensorSelected(false)) {
           this.setBottomIconToEnabled();
         }
+
+        if (this.isMenuButtonActive) {
+          if (sat) {
+            this.ctxStatic_.reset();
+            this.updateTimeline();
+            this.canvas_.style.display = 'block';
+          }
+        }
       },
     });
     keepTrackApi.register({
diff --git a/src/settings/settings.ts b/src/settings/settings.ts
index be517c72..2fd83a3e 100644
--- a/src/settings/settings.ts
+++ b/src/settings/settings.ts
@@ -1038,6 +1038,8 @@ export class SettingsManager {
   externalTLEsOnly = false;
   positionCruncher: Worker = null;
   orbitCruncher: Worker = null;
+  /** Enables the camera widget */
+  drawCameraWidget = true;
 
   loadPersistedSettings() {
     const isShowNotionalSatsString = PersistenceManager.getInstance().getItem(StorageKey.SETTINGS_NOTIONAL_SATS);
@@ -1095,6 +1097,12 @@ export class SettingsManager {
     if (drawOrbitsString !== null) {
       this.isDrawOrbits = drawOrbitsString === 'true';
     }
+
+    const drawCameraWidgetString = PersistenceManager.getInstance().getItem(StorageKey.SETTINGS_DRAW_CAMERA_WIDGET);
+
+    if (drawCameraWidgetString !== null) {
+      this.drawCameraWidget = drawCameraWidgetString === 'true';
+    }
     const drawTrailingOrbitsString = PersistenceManager.getInstance().getItem(StorageKey.SETTINGS_DRAW_TRAILING_ORBITS);
 
     if (drawTrailingOrbitsString !== null) {
diff --git a/src/settings/versionDate.js b/src/settings/versionDate.js
index 511b49bd..376a9334 100644
--- a/src/settings/versionDate.js
+++ b/src/settings/versionDate.js
@@ -1,2 +1,2 @@
 // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-export const VERSION_DATE = 'September 29, 2024';
+export const VERSION_DATE = 'September 30, 2024';
diff --git a/src/singletons/camera-control-widget.ts b/src/singletons/camera-control-widget.ts
new file mode 100644
index 00000000..fe28a29d
--- /dev/null
+++ b/src/singletons/camera-control-widget.ts
@@ -0,0 +1,249 @@
+import { KeepTrackApiEvents } from '@app/interfaces';
+import { keepTrackApi } from '@app/keepTrackApi';
+import { mat4, vec3 } from 'gl-matrix';
+import { Radians } from 'ootk';
+
+export class CameraControlWidget {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private isDragging: boolean = false;
+  private lastMousePosition: { x: number; y: number } = { x: 0, y: 0 };
+  private readonly size: number = 120;
+  private readonly pointSize = 15;
+  private readonly center: { x: number; y: number };
+  private readonly axes: { [key: string]: vec3 } = {
+    'X': vec3.fromValues(1, 0, 0),
+    '-X': vec3.fromValues(-1, 0, 0),
+    'Y': vec3.fromValues(0, 1, 0),
+    '-Y': vec3.fromValues(0, -1, 0),
+    'Z': vec3.fromValues(0, 0, 1),
+    '-Z': vec3.fromValues(0, 0, -1),
+  };
+  private readonly colors: { [key: string]: string } = {
+    'X': 'rgb(237, 56, 81)', 'Y': 'rgb(107, 154, 31)', 'Z': 'rgb(47, 132, 226)',
+    '-X': 'rgb(160, 37, 54)', '-Y': 'rgb(53, 77, 15)', '-Z': 'rgb(31, 87, 148)',
+  };
+
+
+  constructor() {
+    this.initCanvas();
+    this.addEventListeners();
+    this.center = { x: this.size / 2, y: this.size / 2 };
+  }
+
+  private initCanvas() {
+    this.canvas = document.createElement('canvas');
+    this.canvas.id = 'camera-control-widget';
+    this.canvas.width = this.size;
+    this.canvas.height = this.size;
+    this.canvas.style.position = 'fixed';
+    this.canvas.style.top = 'calc(var(--top-menu-height) + 10px)';
+    this.canvas.style.right = '10px';
+    this.canvas.style.zIndex = '-1';
+    // append to canvas-holder
+    document.getElementById('canvas-holder').appendChild(this.canvas);
+
+    this.ctx = this.canvas.getContext('2d');
+  }
+
+  private addEventListeners() {
+    this.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
+    document.addEventListener('mousemove', this.onMouseMove.bind(this));
+    document.addEventListener('mouseup', this.onMouseUp.bind(this));
+    this.canvas.addEventListener('click', this.onClick.bind(this));
+
+    keepTrackApi.register({
+      event: KeepTrackApiEvents.updateLoop,
+      cbName: 'cameraControlWidget',
+      cb: this.draw.bind(this),
+    });
+  }
+
+  private onMouseDown(event: MouseEvent) {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    if (this.isInsideCircle(x, y, this.center.x, this.center.y, this.size / 2)) {
+      this.isDragging = true;
+      this.lastMousePosition = { x, y };
+    }
+  }
+
+  private onMouseMove(event: MouseEvent) {
+    if (!this.isDragging) {
+      return;
+    }
+
+    const rect = this.canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const dx = x - this.lastMousePosition.x;
+    const dy = y - this.lastMousePosition.y;
+
+    this.updateCameraRotation(dx, dy);
+
+    this.lastMousePosition = { x, y };
+  }
+
+  private onMouseUp() {
+    this.isDragging = false;
+  }
+
+  private onClick(event: MouseEvent) {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const clickedAxis = this.checkIfNeedsFlipped(this.getClickedAxis(x, y));
+
+    if (clickedAxis) {
+      keepTrackApi.getMainCamera().autoRotate(false);
+      keepTrackApi.getMainCamera().camAngleSnappedOnSat = false;
+      keepTrackApi.getMainCamera().camZoomSnappedOnSat = false;
+      this.alignCameraToAxis(clickedAxis);
+    }
+  }
+
+  private checkIfNeedsFlipped(axis: string): string {
+    if (axis) {
+      const camera = keepTrackApi.getMainCamera();
+
+      if (axis === 'X' && camera.camYawTarget === Math.PI / 2 as Radians) {
+        return '-X';
+      } else if (axis === '-X' && camera.camYawTarget === -Math.PI / 2 as Radians) {
+        return 'X';
+      } else if (axis === 'Y' && camera.camYawTarget === Math.PI as Radians) {
+        return '-Y';
+      } else if (axis === '-Y' && camera.camYawTarget === 0 as Radians) {
+        return 'Y';
+      } else if (axis === 'Z' && camera.camPitchTarget === Math.PI / 2 as Radians) {
+        return '-Z';
+      } else if (axis === '-Z' && camera.camPitchTarget === -Math.PI / 2 as Radians) {
+        return 'Z';
+      }
+    }
+
+    return axis;
+  }
+
+  private isInsideCircle(x: number, y: number, cx: number, cy: number, radius: number): boolean {
+    const distanceSquared = (x - cx) * (x - cx) + (y - cy) * (y - cy);
+
+
+    return distanceSquared <= radius * radius;
+  }
+
+  private updateCameraRotation(dx: number, dy: number) {
+    const camera = keepTrackApi.getMainCamera();
+    const rotationSpeed = 0.01;
+
+    camera.camYaw = camera.camYaw + dx * rotationSpeed as Radians;
+    camera.camPitch = camera.camPitch + dy * rotationSpeed as Radians;
+  }
+
+  private getClickedAxis(x: number, y: number): string | null {
+    const camera = keepTrackApi.getMainCamera();
+    const rotationMatrix = mat4.create();
+
+    mat4.rotateX(rotationMatrix, rotationMatrix, camera.camPitch);
+    mat4.rotateZ(rotationMatrix, rotationMatrix, -camera.camYaw);
+
+    for (const [axisName, axisVector] of Object.entries(this.axes)) {
+      const projectedAxis = vec3.transformMat4(vec3.create(), axisVector, rotationMatrix);
+      const screenX = this.center.x + projectedAxis[0] * this.size / 3;
+      const screenY = this.center.y - projectedAxis[2] * this.size / 3;
+
+      if (this.isInsideCircle(x, y, screenX, screenY, 20)) {
+        return axisName;
+      }
+    }
+
+    return null;
+  }
+
+  private alignCameraToAxis(axisName: string) {
+    const camera = keepTrackApi.getMainCamera();
+
+    camera.isAutoPitchYawToTarget = true;
+    switch (axisName) {
+      case 'X':
+        camera.camYawTarget = Math.PI / 2 as Radians;
+        camera.camPitchTarget = 0 as Radians;
+        break;
+      case '-X':
+        camera.camYawTarget = -Math.PI / 2 as Radians;
+        camera.camPitchTarget = 0 as Radians;
+        break;
+      case 'Y':
+        camera.camYawTarget = Math.PI as Radians;
+        camera.camPitchTarget = 0 as Radians;
+        break;
+      case '-Y':
+        camera.camYawTarget = 0 as Radians;
+        camera.camPitchTarget = 0 as Radians;
+        break;
+      case 'Z':
+        camera.camPitchTarget = Math.PI / 2 as Radians;
+        break;
+      case '-Z':
+        camera.camPitchTarget = -Math.PI / 2 as Radians;
+        break;
+      default:
+    }
+  }
+
+  private draw() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+    const camera = keepTrackApi.getMainCamera();
+    const rotationMatrix = mat4.create();
+
+    // Apply pitch rotation first
+    mat4.rotateX(rotationMatrix, rotationMatrix, camera.camPitch);
+    // Then apply yaw rotation
+    mat4.rotateZ(rotationMatrix, rotationMatrix, -camera.camYaw);
+
+    // Create an array to store the axes with their projected coordinates and depths
+    const axesWithDepth = [];
+
+    // Calculate the projected coordinates and depths for each axis
+    for (const [axisName, axisVector] of Object.entries(this.axes)) {
+      const projectedAxis = vec3.transformMat4(vec3.create(), axisVector, rotationMatrix);
+
+      const screenX = this.center.x + projectedAxis[0] * this.size / 3;
+      const screenY = this.center.y - projectedAxis[2] * this.size / 3;
+      const depth = projectedAxis[1]; // Use the Y component as the depth
+
+      axesWithDepth.push({ axisName, screenX, screenY, depth });
+    }
+
+    // Sort the axes by depth (farther away first)
+    axesWithDepth.sort((a, b) => b.depth - a.depth);
+
+    // Draw the axes
+    for (const { axisName, screenX, screenY } of axesWithDepth) {
+      this.ctx.beginPath();
+      this.ctx.arc(screenX, screenY, this.pointSize, 0, 2 * Math.PI);
+      this.ctx.fillStyle = this.colors[axisName];
+      this.ctx.fill();
+      if (axisName.startsWith('-')) {
+        this.ctx.fillStyle = 'white';
+        this.ctx.font = '12px Arial';
+        this.ctx.textAlign = 'center';
+        this.ctx.textBaseline = 'middle';
+        this.ctx.fillText(axisName, screenX, screenY);
+      } else {
+        this.ctx.strokeStyle = 'white';
+        this.ctx.lineWidth = 2;
+        this.ctx.stroke();
+        this.ctx.fillStyle = 'white';
+        this.ctx.font = '12px Arial';
+        this.ctx.textAlign = 'center';
+        this.ctx.textBaseline = 'middle';
+        this.ctx.fillText(axisName, screenX, screenY);
+      }
+    }
+  }
+}
diff --git a/src/singletons/camera.ts b/src/singletons/camera.ts
index 8f82fc0c..7ba34558 100644
--- a/src/singletons/camera.ts
+++ b/src/singletons/camera.ts
@@ -55,7 +55,6 @@ export enum CameraType {
 }
 
 export class Camera {
-  private camYawTarget_ = <Radians>0;
   private chaseSpeed_ = 0.0005;
   private earthCenteredPitch_ = <Radians>0;
   private earthCenteredYaw_ = <Radians>0;
@@ -125,6 +124,7 @@ export class Camera {
    * It is the overall yaw of the camera?
    */
   camYaw = <Radians>0;
+  camYawTarget = <Radians>0;
   camYawSpeed = 0;
   camZoomSnappedOnSat = false;
   cameraType: CameraType = CameraType.DEFAULT;
@@ -336,9 +336,9 @@ export class Camera {
   camSnap(pitch: Radians, yaw: Radians): void {
     // this.isPanReset = true
     this.camPitchTarget = pitch;
-    this.camYawTarget_ = normalizeAngle(yaw);
+    this.camYawTarget = normalizeAngle(yaw);
     this.earthCenteredPitch_ = pitch;
-    this.earthCenteredYaw_ = this.camYawTarget_; // Use the normalized yaw
+    this.earthCenteredYaw_ = this.camYawTarget; // Use the normalized yaw
     // if (this.earthCenteredYaw_ < 0) this.earthCenteredYaw_ = <Radians>(this.earthCenteredYaw_ + TAU);
     this.isAutoPitchYawToTarget = true;
   }
@@ -1373,7 +1373,7 @@ export class Camera {
       Number.isNaN(this.camPitch) ||
       Number.isNaN(this.camYaw) ||
       Number.isNaN(this.camPitchTarget) ||
-      Number.isNaN(this.camYawTarget_) ||
+      Number.isNaN(this.camYawTarget) ||
       Number.isNaN(this.zoomLevel_) ||
       Number.isNaN(this.zoomTarget_)
     ) {
@@ -1381,7 +1381,7 @@ export class Camera {
         errorManagerInstance.debug(`camPitch: ${this.camPitch}`);
         errorManagerInstance.debug(`camYaw: ${this.camYaw}`);
         errorManagerInstance.debug(`camPitchTarget: ${this.camPitchTarget}`);
-        errorManagerInstance.debug(`camYawTarget: ${this.camYawTarget_}`);
+        errorManagerInstance.debug(`camYawTarget: ${this.camYawTarget}`);
         errorManagerInstance.debug(`zoomLevel: ${this.zoomLevel_}`);
         errorManagerInstance.debug(`_zoomTarget: ${this.zoomTarget_}`);
         errorManagerInstance.debug(`this.settings_.cameraMovementSpeed: ${this.settings_.cameraMovementSpeed}`);
@@ -1392,7 +1392,7 @@ export class Camera {
       this.camYaw = <Radians>0.5;
       this.zoomLevel_ = 0.5;
       this.camPitchTarget = <Radians>0;
-      this.camYawTarget_ = <Radians>0;
+      this.camYawTarget = <Radians>0;
       this.zoomTarget = 0.5;
     }
 
@@ -1439,7 +1439,7 @@ export class Camera {
     if (this.isAutoPitchYawToTarget) {
       this.camPitch = <Radians>(this.camPitch + (this.camPitchTarget - this.camPitch) * this.chaseSpeed_ * dt);
 
-      this.yawErr_ = normalizeAngle(<Radians>(this.camYawTarget_ - this.camYaw));
+      this.yawErr_ = normalizeAngle(<Radians>(this.camYawTarget - this.camYaw));
       this.camYaw = <Radians>(this.camYaw + this.yawErr_ * this.chaseSpeed_ * dt);
     }
   }
diff --git a/src/singletons/persistence-manager.ts b/src/singletons/persistence-manager.ts
index 1ec744fb..49eb27b2 100644
--- a/src/singletons/persistence-manager.ts
+++ b/src/singletons/persistence-manager.ts
@@ -17,6 +17,7 @@ export enum StorageKey {
   SETTINGS_ROCKET_BODIES = 'keepTrack-settings-rocketBodies',
   SETTINGS_DEBRIS = 'keepTrack-settings-debris',
   SETTINGS_AGENCIES = 'keepTrack-settings-agencies',
+  SETTINGS_DRAW_CAMERA_WIDGET = 'keepTrack-settings-drawCameraWidget',
   SETTINGS_DRAW_ORBITS = 'keepTrack-settings-drawOrbits',
   SETTINGS_DRAW_ECF = 'keepTrack-settings-drawECF',
   SETTINGS_DRAW_IN_COVERAGE_LINES = 'keepTrack-settings-drawInCoverageLines',
diff --git a/test/environment/standard-env.ts b/test/environment/standard-env.ts
index d2459605..f1a8394d 100644
--- a/test/environment/standard-env.ts
+++ b/test/environment/standard-env.ts
@@ -189,6 +189,7 @@ export const setupStandardEnvironment = (dependencies?: Constructor<KeepTrackPlu
     <div id="earth-rmb-menu"></div>
     <div id="dops-rmb"></div>
     <div id="dops-rmb-menu"></div>
+    <div id="camera-control-widget"></div>
     `;
 
   inputManagerInstance.init();