diff --git a/src/components/CesiumViewer.vue b/src/components/CesiumViewer.vue
index 39408c5..24ec48f 100644
--- a/src/components/CesiumViewer.vue
+++ b/src/components/CesiumViewer.vue
@@ -18,6 +18,7 @@
                 </tbody>
             </table>
         </div>
+        <CesiumSettingsWidget />
         <div id="cesiumContainer"></div>
     </div>
 </template>
@@ -62,6 +63,7 @@ import { store } from './Globals.js'
 import { DataflashDataExtractor } from '../tools/dataflashDataExtractor'
 import { MavlinkDataExtractor } from '../tools/mavlinkDataExtractor'
 import 'cesium/Build/Cesium/Widgets/widgets.css'
+import CesiumSettingsWidget from './widgets/CesiumSettingsWidget.vue'
 
 Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MmM0MDgzZC00OGVkLTRjZ' +
     'TItOWI2MS1jMGVhYTM2MmMzODYiLCJpZCI6MjczNywiaWF0IjoxNjYyMTI4MjkxfQ.fPqhawtYLhwyZirKCi8fEjPEIn1CjYqETvA0bYYhWRA'
@@ -86,6 +88,9 @@ export default {
             lastEmitted: 0
         }
     },
+    components: {
+        CesiumSettingsWidget
+    },
     created () {
         // The objects declared here are not watched by Vue
         this.viewer = null // Cesium viewer instance
@@ -1165,7 +1170,7 @@ export default {
 
     #toolbar {
         margin: 5px;
-        padding: 2px 5px;
+        padding: 5px 5px;
         position: absolute;
         top: 0;
         color: #eee;
@@ -1177,15 +1182,12 @@ export default {
     /* INFO PANEL */
 
     .infoPanel {
-        background: rgba(41, 41, 41, 0.678);
-        padding: 5px;
-        border-collapse: separate;
-        margin: 8px;
-        border-radius: 5px;
-        font-weight: bold;
-        float: left;
-        box-shadow: inset 0 0 10px rgb(0, 0, 0);
-        letter-spacing: 1px;
+      top: 10px;
+      background-color: rgba(40, 40, 40, 0.7);
+      padding: 10px;
+      padding-left: 25px;
+      border-radius: 5px;
+      border: 1px solid #444;
     }
 
     #wrapper {
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 1938d1b..5e348f2 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -18,11 +18,6 @@
                 <!-- Plot -->
                 <a :class="selected === 'plot' ? 'selected' : ''" @click="selected='plot'"
                    v-if="state.processDone"> <i class="fas fa-chart-line"></i>Plot</a>
-                <!-- 3D -->
-                <a :class="selected ==='3d' ? 'selected' : ''" @click="selected='3d'"
-                   v-if="state.mapAvailable && state.showMap">  <i class="fas fa-cube"></i> 3D </a>
-                <a :class="selected ==='3d' ? 'selected' : ''" @click="state.showMap=trueselected='3d'"
-                   v-if="state.mapAvailable && !state.showMap">3D</a>
                 <!-- more -->
                 <a :class="selected ==='other' ? 'selected' : ''" @click="selected='other'" v-if="state.processDone">
                     <i class="fas fa-ellipsis-v"></i>
@@ -42,68 +37,6 @@
                     <span class="buildinfo">Commit {{state.commit}}</span>
                     <span class="buildinfo">Built {{state.buildDate}}</span>
                 </div>
-                <div v-if="selected==='3d' && state.mapAvailable">
-                    <!--<li v-if="!state.mapAvailable" @click="state.mapAvailable=true">-->
-                    <!--<a class="section">-->
-                    <!--<i class="fas fa-eye fa-lg"></i> Show 3D View</a>-->
-                    <!--</li>-->
-                    <!--<li v-if="state.mapAvailable" @click="state.mapAvailable=false">-->
-                    <!--<a class="section">-->
-                    <!--<i class="fas fa-eye-slash fa-lg"></i> Hide 3D View</a>-->
-                    <!--</li>-->
-
-                    <!-- CAMERA -->
-                    <div>
-                        <label><i class="fas fa-camera"></i> Camera</label>
-                        <select class="cesium-button" v-model="state.cameraType">
-                            <option value="free">Free</option>
-                            <option value="follow">Follow</option>
-                        </select>
-                    </div>
-                    <!-- CHECKBOXES -->
-                    <div>
-                        <label><input type="checkbox" v-model="state.showWaypoints">
-                        Waypoints <i class="fa fa-map-marker"></i> </label>
-                        <label><input type="checkbox" v-model="state.showTrajectory">
-                        Trajectory <i class="fa fa-map" aria-hidden="true"></i> </label>
-                    </div>
-                    <!-- WINGSPAN -->
-                    <div>
-                        <label><i class="fa fa-fighter-jet" aria-hidden="true"></i> Wingspan (m)
-                            <input max="15" min="0.1" step="0.01" type="range"
-                            class="custom-range" v-model="state.modelScale">
-                            <input class="wingspan-text" size="5" type="text" v-model="state.modelScale">
-                        </label>
-                    </div>
-                    <!-- ALTITUDE OFFSET -->
-                    <div>
-                        <label><i class="fa fa-arrows-v" aria-hidden="true"></i> Altitude Offset (m)
-                            <input max="3000" min="-1000" step="0.01" type="range"
-                            class="custom-range" v-model="state.heightOffset">
-                            <input class="wingspan-text" size="5" type="number" v-model="state.heightOffset">
-                        </label>
-                    </div>
-                    <!-- Trajectory Source -->
-                    <div>
-                        <label><i class="fas fa-map"></i> Trajectory Source</label>
-                        <select class="cesium-button" v-model="state.trajectorySource">
-                            <!-- eslint-disable-next-line vue/no-v-html vue/no-unused-vars -->
-                            <option v-for="item in state.trajectorySources" :key="item">
-                                {{item}}
-                            </option>
-                        </select>
-                    </div>
-                    <!-- Attitude Source -->
-                    <div>
-                        <label><i class="fas fa-map"></i> Attitude Source</label>
-                        <select class="cesium-button" v-model="state.attitudeSource">
-                            <!-- eslint-disable-next-line vue/no-v-html vue/no-unused-vars -->
-                            <option v-for="item in attitudeSources" :key="item">
-                                {{item}}
-                            </option>
-                        </select>
-                    </div>
-                </div>
                 <div v-if="selected==='other'">
                     <!-- PARAM/MESSAGES/RADIO -->
                     <hr>
@@ -279,11 +212,6 @@ export default {
             this.downloadBlob(this.state.files[filename], filename, 'application/octet-stream')
         }
     },
-    computed: {
-        attitudeSources () {
-            return [...this.state.attitudeSources.quaternions, ...this.state.attitudeSources.eulers]
-        }
-    },
     created () {
         this.$eventHub.$on('set-selected', this.setSelected)
     },
diff --git a/src/components/widgets/CesiumSettingsWidget.vue b/src/components/widgets/CesiumSettingsWidget.vue
new file mode 100644
index 0000000..7f3f2fd
--- /dev/null
+++ b/src/components/widgets/CesiumSettingsWidget.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="cesium-settings-defaultContainer">
+    <div @click="toggleSettings" class="gear-icon">⚙</div>
+        <div v-show="isSettingsVisible" class="cesium-settings-display">
+          <label>Camera</label>
+            <select class="cesium-button" v-model="state.cameraType">
+                <option value="free">Free</option>
+                <option value="follow">Follow</option>
+            </select>
+        <!-- CHECKBOXES -->
+        <div>
+            <label><input type="checkbox" v-model="state.showWaypoints">
+            Waypoints</label>
+            <label><input type="checkbox" v-model="state.showTrajectory">
+            Trajectory</label>
+        </div>
+        <!-- WINGSPAN -->
+        <div>
+            <label>Wingspan
+                <input class="wingspan-text" size="5" type="text" v-model="state.modelScale">
+                (m)
+            </label>
+        </div>
+        <!-- ALTITUDE OFFSET -->
+        <div>
+            <label> Altitude Offset
+                <input class="wingspan-text" size="5" type="number" v-model="state.heightOffset">
+                (m)
+            </label>
+        </div>
+        <!-- Trajectory Source -->
+        <div>
+            <label> Trajectory Source</label>
+            <select class="cesium-button" v-model="state.trajectorySource" style="display: block;">
+                <!-- eslint-disable-next-line vue/no-v-html vue/no-unused-vars -->
+                <option v-for="item in state.trajectorySources" :key="item">
+                    {{item}}
+                </option>
+            </select>
+        </div>
+        <!-- Attitude Source -->
+        <div>
+            <label> Attitude Source</label>
+            <select class="cesium-button" v-model="state.attitudeSource">
+                <!-- eslint-disable-next-line vue/no-v-html vue/no-unused-vars -->
+                <option v-for="item in attitudeSources" :key="item">
+                    {{item}}
+                </option>
+            </select>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import { store } from '../Globals.js'
+
+export default {
+    name: 'CesiumSettingsWidget',
+    props: {
+        snappable: { type: Boolean, default: false },
+        fixedAspectRatio: { type: Boolean, default: false },
+        aspectRatio: { type: Number, default: 2 }
+    },
+    data () {
+        return {
+            state: store,
+            isSettingsVisible: false
+        }
+    },
+    methods: {
+        toggleSettings () {
+            this.isSettingsVisible = !this.isSettingsVisible
+        }
+    },
+    computed: {
+        attitudeSources () {
+            return [...this.state.attitudeSources.quaternions, ...this.state.attitudeSources.eulers]
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+/* Gear Icon styling */
+.gear-icon {
+    cursor: pointer;
+    font-size: 30px;
+    position: absolute;
+    top: -10px;
+    left: 7px;
+    z-index: 2;
+}
+
+.cesium-settings-defaultContainer {
+    z-index: 1;
+    position: relative;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #ffffff;
+    font-family: sans-serif;
+    font-size: 16px;
+    box-sizing: border-box;
+    position: absolute;
+    top: 10px;
+    left: 120px;
+    min-width: 30px; /* Width of gear icon + padding */
+    min-height: 30px; /* Height of gear icon + padding */
+    overflow: hidden;
+    background-color: rgba(40, 40, 40, 0.7);
+    padding: 7px;
+    padding-left: 25px;
+    border-radius: 5px;
+    border: 1px solid #444;
+}
+
+.cesium-settings-display {
+    max-height: 400px; /* Estimate the maximum height of your content; you may need to adjust this */
+    overflow: hidden; /* To hide the content that exceeds the max-height */
+    font: bold 12px sans-serif;
+}
+</style>