diff --git a/src/assets/defaults.ts b/src/assets/defaults.ts
index 9b2e61be4..ac52aae66 100644
--- a/src/assets/defaults.ts
+++ b/src/assets/defaults.ts
@@ -10,6 +10,12 @@ import {
   WidgetType,
 } from '@/types/widgets'
 
+import {
+  availableGamepadToCockpitMaps,
+  cockpitStandardToProtocols,
+  defaultProtocolMappingVehicleCorrespondency,
+} from './joystick-profiles'
+
 export const defaultRovProfileHash = 'c2bcf04d-048f-496f-9d78-fc4002608028'
 export const defaultBoatProfileHash = 'adb7d856-f2e5-4980-aaeb-c39c1fa3562b'
 export const defaultMavProfileHash = '2309ffda-896a-449d-a171-7b7fdf80bc95'
@@ -901,3 +907,90 @@ export const defaultSensorDataloggerProfile: OverlayGrid = {
 export const defaultDisplayUnitPreferences = {
   distance: DistanceDisplayUnit.Meters,
 }
+
+export const defaultCockpitSettings = {
+  'cockpit-current-view-index': 0,
+  'cockpit-has-seen-tutorial': false,
+  'cockpit-auto-process-videos': true,
+  'cockpit-slide-events-enabled': true,
+  'cockpit-last-mission-name': null,
+  'cockpit-default-map-center': [-27.5935, -48.55854],
+  'cockpit-saved-profiles-v8': widgetProfiles,
+  'cockpit-slide-events-categories-required': {
+    'Arm': true,
+    'Disarm': true,
+    'Takeoff': true,
+    'Altitude Change': true,
+    'Land': true,
+    'Goto': true,
+  },
+  'cockpit-enabled-alert-levels': [
+    { level: 'info', enabled: false },
+    { level: 'success', enabled: true },
+    { level: 'error', enabled: true },
+    { level: 'warning', enabled: true },
+    { level: 'critical', enabled: true },
+  ],
+  'cockpit-mission-start-time': '2025-02-10T21:34:50.113Z',
+  'cockpit-current-profile-index': 0,
+  'cockpit-streams-correspondency': [],
+  'cockpit-allowed-stream-protocols': [],
+  'cockpit-username': null,
+  'cockpit-standard-mappings-v2': availableGamepadToCockpitMaps,
+  'cockpit-datalogger-log-interval': 1000,
+  'cockpit-enable-blueos-settings-sync': true,
+  'cockpit-jitter-buffer-target': 0,
+  'cockpit-default-vehicle-type-protocol-mappings': defaultProtocolMappingVehicleCorrespondency,
+  'cockpit-vehicle-custom-main-connection-uri': {
+    data: 'ws://blueos-avahi.local/mavlink2rest/ws/mavlink',
+    enabled: false,
+  },
+  'cockpit-last-tutorial-step': 1,
+  'cockpit-hold-last-joystick-input-when-window-hidden': false,
+  'cockpit-unprocessed-video-info': {},
+  'cockpit-enable-usage-statistics-telemetry': true,
+  'cockpit-default-map-zoom': 15,
+  'cockpit-zip-multiple-video-files': false,
+  'cockpit-enable-system-logging': true,
+  'cockpit-selected-alert-speech-voice': 'Google US English',
+  'cockpit-custom-rtc-config': {
+    data: {
+      bundlePolicy: 'max-bundle',
+      iceServers: [],
+    },
+    enabled: false,
+  },
+  'cockpit-protocol-mapping-index-v1': 0,
+  'cockpit-main-menu-style': 'center-left',
+  'cockpit-prevent-auto-vehicle-discovery-dialog': false,
+  'cockpit-datalogger-overlay-grid': defaultSensorDataloggerProfile,
+  'cockpit-enable-voice-alerts': true,
+  'cockpit-mini-widgets-profile-v4': miniWidgetsProfile,
+  'cockpit-mini-widget-last-values': {},
+  'cockpit-vehicle-custom-webrtc-signalling-uri': {
+    data: 'ws://blueos-avahi.local:6021/',
+    enabled: false,
+  },
+  'cockpit-reset-just-made': false,
+  'cockpit-display-unit-preferences': defaultDisplayUnitPreferences,
+  'cockpit-ui-glass-effect': defaultUIGlassColor,
+  'cockpit-default-vehicle-type-profiles': defaultProfileVehicleCorrespondency,
+  'cockpit-actions-joystick-confirm-required': {},
+  'cockpit-allowed-stream-ips': [],
+  'cockpit-enable-auto-ice-ip-fetch': true,
+  'cockpit-protocol-mappings-v1': cockpitStandardToProtocols,
+  'cockpit-datalogger-overlay-options': {
+    fontSize: 30,
+    fontColor: '#FFFFFFFF',
+    backgroundColor: '#000000FF',
+    fontOutlineColor: '#000000FF',
+    fontOutlineSize: 2,
+    fontShadowColor: '#000000FF',
+    fontShadowSize: 1,
+    fontBold: false,
+    fontItalic: false,
+    fontUnderline: false,
+    fontStrikeout: false,
+  },
+  'cockpit-vehicle-address': 'blueos-avahi.local',
+}
diff --git a/src/components/configuration/ManageCockpitSettings.vue b/src/components/configuration/ManageCockpitSettings.vue
new file mode 100644
index 000000000..847e2a899
--- /dev/null
+++ b/src/components/configuration/ManageCockpitSettings.vue
@@ -0,0 +1,425 @@
+<template>
+  <v-dialog v-model="openDialog" width="800px" persistent>
+    <v-card class="rounded-lg" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold py-4 text-center">
+        <div class="flex justify-between w-full -mt-1">
+          <div class="w-10" />
+          Cockpit settings manager
+          <v-icon class="self-end" @click="closeConfigDialog">mdi-close</v-icon>
+        </div>
+      </v-card-title>
+
+      <v-container>
+        <div class="flex flex-col h-[70vh] border border-[rgba(255,255,255,0.3)] rounded elevation-3">
+          <div class="flex-none sticky top-0 bg-inherit z-[2]">
+            <table class="w-full border-collapse">
+              <thead>
+                <tr class="bg-[#00000022]">
+                  <th class="text-center border-b border-b-[rgba(255,255,255,0.3)]">Setting</th>
+                  <th class="text-center w-[445px] p-2 border-b border-b-[rgba(255,255,255,0.3)]">Value</th>
+                  <th class="text-center w-[30px] p-2 border-b border-b-[rgba(255,255,255,0.3)]"></th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+
+          <div class="flex-auto overflow-y-auto">
+            <template v-if="settingsArray.length === 0">
+              <div class="flex flex-row w-full h-full justify-center items-center text-center py-4">
+                <v-circular-progress size="40" color="white" />
+                <p>Loading settings...</p>
+              </div>
+            </template>
+            <template v-else>
+              <table class="w-full border-collapse">
+                <tbody>
+                  <tr v-for="item in filteredSettings" :key="item.originalKey">
+                    <td class="text-start align-top p-2 pl-4 w-[300px] border-b border-b-[rgba(255,255,255,0.3)]">
+                      {{ item.setting }}
+                    </td>
+
+                    <td class="text-center border-b border-b-[rgba(255,255,255,0.3)]">
+                      <template v-if="isPrimitive(editedValues[item.originalKey])">
+                        <div class="text-center py-0 cursor-pointer" @dblclick="startEditing(item)">
+                          <template v-if="editing[item.originalKey]">
+                            <template v-if="typeof editedValues[item.originalKey] === 'boolean'">
+                              <select
+                                v-model="editedValues[item.originalKey]"
+                                class="bg-[#FFFFFF11] w-[120px]"
+                                @change="() => commitChanges(item)"
+                              >
+                                <option :value="true" class="bg-[#000000AA]">true</option>
+                                <option :value="false" class="bg-[#000000AA]">false</option>
+                              </select>
+                            </template>
+                            <template v-else-if="typeof editedValues[item.originalKey] === 'number'">
+                              <input
+                                v-model.number="editedValues[item.originalKey]"
+                                type="number"
+                                class="text-right bg-transparent w-[150px]"
+                                @blur="() => commitChanges(item)"
+                              />
+                            </template>
+                            <template v-else-if="typeof editedValues[item.originalKey] === 'string'">
+                              <input
+                                v-model="editedValues[item.originalKey]"
+                                class="text-right bg-transparent w-[150px]"
+                                @blur="() => commitChanges(item)"
+                              />
+                            </template>
+                          </template>
+                          <template v-else>
+                            <span>{{ editedValues[item.originalKey] }}</span>
+                          </template>
+                        </div>
+                      </template>
+                      <template v-else>
+                        <div v-if="inlineJsonEditing[item.originalKey]" class="my-2">
+                          <textarea
+                            v-model="inlineJsonText[item.originalKey]"
+                            rows="8"
+                            class="bg-[#00000011] w-full p-2"
+                            :class="{ 'border-2 border-[#FF000055]': JsonEditError }"
+                          />
+                          <div class="flex justify-end gap-x-6 pt-[2px]">
+                            <v-btn size="x-small" variant="text" class="bgb-transparent" @click="cancelJsonEditing()">
+                              cancel
+                            </v-btn>
+                            <v-btn
+                              size="x-small"
+                              variant="text"
+                              class="bg-[#FFFFFF22]"
+                              @click="finishInlineJsonEditing(item.originalKey)"
+                            >
+                              Save
+                            </v-btn>
+                          </div>
+                        </div>
+                        <div v-else>
+                          <v-btn
+                            size="small"
+                            variant="flat"
+                            class="bg-[#FFFFFF22]"
+                            @click="startInlineJsonEditing(item.originalKey)"
+                          >
+                            Edit JSON
+                          </v-btn>
+                        </div>
+                      </template>
+                    </td>
+
+                    <td class="text-center border-b border-b-[rgba(255,255,255,0.3)] w-[35px]">
+                      <v-icon
+                        v-if="item.changed"
+                        class="text-[18px] -mt-1 text-orange-300"
+                        @click="reloadSetting(item)"
+                      >
+                        mdi-refresh
+                      </v-icon>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </template>
+          </div>
+
+          <div
+            class="flex flex-row sticky bottom-0 bg-[rgba(0,0,0,0.15)] border-t border-t-[rgba(255,255,255,0.3)] z-[2] p-1 pr-3 justify-between"
+          >
+            <v-text-field
+              v-model="search"
+              placeholder="Search settings"
+              variant="plain"
+              density="compact"
+              hide-details
+              class="mt-1"
+            >
+              <template #prepend>
+                <v-icon class="ml-2 mt-[2px]">mdi-magnify</v-icon>
+              </template>
+            </v-text-field>
+            <v-divider vertical class="mr-6 my-2" />
+            <v-tooltip text="Upload and aplly config file">
+              <template #activator="{ props: tooltipProps }">
+                <v-btn icon variant="text" class="bg-transparent" v-bind="tooltipProps" @click="uploadConfigFile">
+                  <v-icon>mdi-upload-outline</v-icon>
+                </v-btn>
+              </template>
+            </v-tooltip>
+            <v-tooltip text="Save config file">
+              <template #activator="{ props: tooltipProps }">
+                <v-btn icon variant="text" class="bg-transparent" v-bind="tooltipProps" @click="downloadConfigFile">
+                  <v-icon>mdi-download</v-icon>
+                </v-btn>
+              </template>
+            </v-tooltip>
+          </div>
+        </div>
+      </v-container>
+
+      <v-card-actions>
+        <div class="flex justify-between items-center p-2 w-full h-full text-[rgba(255,255,255,0.5)]">
+          <v-btn @click="resetAllCockpitSettings">Reset all settings to default</v-btn>
+          <v-btn class="text-white" @click="closeDialog">Close</v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+
+import { defaultCockpitSettings } from '@/assets/defaults'
+import { useInteractionDialog } from '@/composables/interactionDialog'
+import { useSnackbar } from '@/composables/snackbar'
+import { getKeyDataFromCockpitVehicleStorage } from '@/libs/blueos'
+import { isEqual } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { useMainVehicleStore } from '@/stores/mainVehicle'
+import { useMissionStore } from '@/stores/mission'
+import { SettingItem, Settings } from '@/types/general'
+
+const props = defineProps<{
+  /**
+   * Whether the dialog should be open or not.
+   */
+  openDialog: boolean
+}>()
+
+const { showDialog, closeDialog } = useInteractionDialog()
+const { showSnackbar } = useSnackbar()
+const missionStore = useMissionStore()
+const interfaceStore = useAppInterfaceStore()
+const vehicleStore = useMainVehicleStore()
+
+const originalSettings: Settings = defaultCockpitSettings
+const openDialog = ref(props.openDialog || false)
+const userSettings = useStorage<Settings>('settings', {})
+const editedValues = reactive<Settings>({})
+const search = ref('')
+const editing = reactive<Record<string, boolean>>({})
+const inlineJsonEditing = reactive<Record<string, boolean>>({})
+const inlineJsonText = reactive<Record<string, string>>({})
+const JsonEditError = ref(false)
+
+const settingsArray = computed<SettingItem[]>(() => {
+  return Object.keys(editedValues).map((key) => ({
+    setting: key.replace(/^cockpit-/, ''),
+    originalKey: key,
+  }))
+})
+
+const filteredSettings = computed<SettingItem[]>(() => {
+  const lowerSearch = search.value.toLowerCase()
+
+  return settingsArray.value
+    .filter((item) => item.setting.toLowerCase().includes(lowerSearch))
+    .sort((a, b) => a.setting.localeCompare(b.setting))
+    .map((item) => ({
+      ...item,
+      changed: hasChanged(item.originalKey),
+    }))
+})
+
+onMounted(() => {
+  loadUserSettings()
+})
+
+// Trying to sync automatically
+watch(
+  () => userSettings.value,
+  (value) => {
+    Object.keys(value).forEach((key) => {
+      localStorage.setItem(key, isPrimitive(value[key]) ? value[key] : JSON.stringify(value[key]))
+    })
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.openDialog,
+  (value: boolean) => {
+    openDialog.value = value
+  }
+)
+
+const isPrimitive = (val: any): boolean => {
+  return val !== Object(val)
+}
+
+const getUserSettingsFromBlueOS = async (): Promise<Record<string, any>> => {
+  const vehicleAddress = vehicleStore.globalAddress
+  const username = missionStore.username
+  const settings = await getKeyDataFromCockpitVehicleStorage(vehicleAddress, `settings/${username}`)
+  return settings as Record<string, any>
+}
+
+const loadUserSettings = async (): Promise<void> => {
+  if (vehicleStore.isVehicleOnline) {
+    try {
+      const settings = await getUserSettingsFromBlueOS()
+      userSettings.value = settings
+      editedValues.value = settings
+    } catch (error: any) {
+      showSnackbar({
+        message: 'Failed to load settings from user profile. ' + error.message,
+        variant: 'error',
+        duration: 5000,
+      })
+    }
+    console.log('🚀 ~ settings from BlueOS user profile:', userSettings.value)
+    return
+  }
+
+  const storedSettings: Record<string, any> = Object.keys(localStorage)
+    .filter((key: string): boolean => key.startsWith('cockpit-'))
+    .reduce((acc: Record<string, any>, key: string): Record<string, any> => {
+      const value = localStorage.getItem(key)
+      try {
+        acc[key] = value ? JSON.parse(value) : null
+      } catch {
+        acc[key] = value
+      }
+      return acc
+    }, {} as Record<string, any>)
+  Object.assign(editedValues, storedSettings)
+  userSettings.value = storedSettings
+  console.log('🚀 ~ settings from browser storage:', userSettings.value)
+}
+
+const closeConfigDialog = (): void => {
+  openDialog.value = false
+}
+
+const hasChanged = (key: string): boolean => {
+  return !isEqual(editedValues[key], originalSettings[key])
+}
+
+const startEditing = (item: SettingItem): void => {
+  editing[item.originalKey] = true
+}
+
+// Syncing changes to local storage on blur
+const commitChanges = (item: SettingItem): void => {
+  editing[item.originalKey] = false
+  console.log('🚀 ~ editedValues:', editedValues)
+  console.log('🚀 ~ userSettings.value:', userSettings.value)
+  userSettings.value = editedValues
+}
+
+const reloadSetting = (item: SettingItem): void => {
+  editedValues[item.originalKey] = originalSettings[item.originalKey]
+  userSettings.value[item.originalKey] = originalSettings[item.originalKey]
+}
+
+const startInlineJsonEditing = (key: string): void => {
+  inlineJsonEditing[key] = true
+  inlineJsonText[key] = JSON.stringify(editedValues[key], null, 2)
+}
+
+const finishInlineJsonEditing = (key: string): void => {
+  try {
+    const parsed = JSON.parse(inlineJsonText[key])
+    editedValues[key] = parsed
+    inlineJsonEditing[key] = false
+    JsonEditError.value = false
+    userSettings.value[key] = parsed
+  } catch (error: any) {
+    JsonEditError.value = true
+    showSnackbar({ message: 'Invalid JSON: ' + error.message, variant: 'error', duration: 5000 })
+  }
+}
+
+const cancelJsonEditing = (): void => {
+  Object.keys(inlineJsonEditing).forEach((key) => {
+    inlineJsonEditing[key] = false
+  })
+  JsonEditError.value = false
+}
+
+const downloadConfigFile = (): void => {
+  const dataStr = JSON.stringify(userSettings.value, null, 2)
+  const blob = new Blob([dataStr], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  const username = missionStore.username !== 'null' ? missionStore.username : 'unnamed'
+  const filename = username + '_config.json'
+
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+const uploadConfigFile = (): void => {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = 'application/json'
+
+  input.onchange = (event: Event) => {
+    const file = (event.target as HTMLInputElement).files?.[0]
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = (e: ProgressEvent<FileReader>) => {
+      try {
+        const text = e.target?.result as string
+        const json = JSON.parse(text)
+
+        if (!json || typeof json !== 'object') {
+          showSnackbar({
+            message: 'Invalid configuration file: content is not an object.',
+            variant: 'warning',
+            duration: 5000,
+          })
+          return
+        }
+
+        Object.assign(originalSettings, json)
+        Object.assign(editedValues, json)
+        userSettings.value = json
+
+        showSnackbar({ message: 'Configuration file applied successfully.', variant: 'success', duration: 5000 })
+      } catch (error: any) {
+        console.error('Error parsing configuration file: ' + error.message)
+        showSnackbar({
+          message: 'Error parsing configuration file: ' + error.message,
+          variant: 'error',
+          duration: 5000,
+        })
+      }
+    }
+    reader.readAsText(file)
+  }
+
+  input.click()
+}
+
+const resetAllCockpitSettings = (): void => {
+  showDialog({
+    message: 'Are you sure you want to reset all settings to default?',
+    variant: 'warning',
+    actions: [
+      {
+        text: 'Cancel',
+        action: () => {
+          closeDialog()
+        },
+      },
+      {
+        text: 'Reset settings',
+        action: () => {
+          userSettings.value = originalSettings
+          localStorage.clear()
+          location.reload()
+          showSnackbar({ message: 'All settings have been reset to default.', variant: 'success', duration: 5000 })
+        },
+      },
+    ],
+  })
+}
+</script>
diff --git a/src/types/general.ts b/src/types/general.ts
index 90c189aa6..02bde39d2 100644
--- a/src/types/general.ts
+++ b/src/types/general.ts
@@ -78,3 +78,28 @@ export interface ValidationFunctionReturn {
    */
   error?: string
 }
+
+/**
+ * Cockpit settings object
+ */
+export interface Settings {
+  [key: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+/**
+ * Config item for Cockpit settings
+ */
+export interface SettingItem {
+  /**
+   *
+   */
+  setting: string
+  /**
+   *
+   */
+  originalKey: string
+  /**
+   *
+   */
+  changed?: boolean
+}
diff --git a/src/views/ConfigurationGeneralView.vue b/src/views/ConfigurationGeneralView.vue
index 0ed57719a..e82d69c68 100644
--- a/src/views/ConfigurationGeneralView.vue
+++ b/src/views/ConfigurationGeneralView.vue
@@ -23,27 +23,39 @@
                     missionStore.username
                   }}</span>
                 </div>
-                <v-btn
-                  id="select-profile"
-                  size="sm"
-                  icon="mdi-swap-horizontal"
-                  class="bg-transparent"
-                  variant="text"
-                  @click="missionStore.changeUsername"
-                />
+                <div class="flex justify-end">
+                  <v-btn
+                    id="select-profile"
+                    size="small"
+                    append-icon="mdi-swap-horizontal"
+                    class="bg-[#FFFFFF22] shadow-2"
+                    variant="flat"
+                    @click="missionStore.changeUsername"
+                    >switch user</v-btn
+                  >
+                </div>
               </div>
-              <div class="flex flex-row">
-                <v-btn size="x-small" class="bg-[#FFFFFF22] -mt-3 mb-4 shadow-2" variant="flat" @click="openTutorial">
-                  Show tutorial
-                </v-btn>
+              <div class="flex flex-row w-full justify-between">
+                <div>
+                  <v-btn size="x-small" class="bg-[#FFFFFF22] -mt-3 mb-4 shadow-2" variant="flat" @click="openTutorial">
+                    Show tutorial
+                  </v-btn>
+                  <v-btn
+                    size="x-small"
+                    class="bg-[#FFFFFF22] -mt-3 mb-4 ml-2 shadow-2"
+                    variant="flat"
+                    @click="openCockpitFolder"
+                  >
+                    Open Cockpit folder
+                  </v-btn>
+                </div>
                 <v-btn
-                  v-if="isElectron()"
                   size="x-small"
-                  class="bg-[#FFFFFF22] -mt-3 mb-4 ml-2 shadow-2"
+                  class="bg-[#FFFFFF22] -mt-3 mb-4 shadow-2"
                   variant="flat"
-                  @click="openCockpitFolder"
+                  @click="showCockpitSettingsDialog = true"
                 >
-                  Open Cockpit folder
+                  Manage Cockpit settings
                 </v-btn>
               </div>
             </div>
@@ -295,12 +307,14 @@
     </template>
   </BaseConfigurationView>
   <VehicleDiscoveryDialog v-model="showDiscoveryDialog" />
+  <ManageCockpitSettings v-if="showCockpitSettingsDialog" :open-dialog="showCockpitSettingsDialog" />
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 
 import { defaultGlobalAddress } from '@/assets/defaults'
+import ManageCockpitSettings from '@/components/configuration/ManageCockpitSettings.vue'
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
 import VehicleDiscoveryDialog from '@/components/VehicleDiscoveryDialog.vue'
 import { useSnackbar } from '@/composables/snackbar'
@@ -323,6 +337,7 @@ const { showSnackbar } = useSnackbar()
 const globalAddressForm = ref()
 const globalAddressFormValid = ref(false)
 const newGlobalAddress = ref(mainVehicleStore.globalAddress)
+const showCockpitSettingsDialog = ref(false)
 
 const setGlobalAddress = async (): Promise<void> => {
   await globalAddressForm.value.validate()
@@ -519,7 +534,6 @@ const tryToPrettifyRtcConfig = (): void => {
 
 const openTutorial = (): void => {
   interfaceStore.isMainMenuVisible = false
-  interfaceStore.configComponent = -1
   interfaceStore.isTutorialVisible = true
 }