From f7d2e2da6471d8c5baa47c742a881490cbece758 Mon Sep 17 00:00:00 2001
From: Maschga <88616799+Maschga@users.noreply.github.com>
Date: Wed, 12 Mar 2025 10:00:57 +0100
Subject: [PATCH] chore: refactor components file structure (#19627)

Co-authored-by: Michael Geers <michael@geers.tv>
---
 assets/js/api.js                              |  2 +-
 .../js/components/{ => Auth}/LoginModal.vue   |  8 +--
 .../components/{ => Auth}/PasswordModal.vue   |  8 +--
 assets/js/{ => components/Auth}/auth.js       |  6 +-
 .../{ => Battery}/BatterySettingsModal.vue    | 14 ++--
 .../Arrival.vue}                              |  4 +-
 .../ChargingPlan.story.vue                    |  0
 .../{ => ChargingPlans}/ChargingPlan.vue      | 24 ++++---
 .../PlanRepeatingSettings.vue}                |  8 +--
 .../PlanStaticSettings.vue}                   |  6 +-
 .../PlansRepeatingSettings.vue}               |  8 +--
 .../PlansSettings.vue}                        | 28 ++++----
 .../Preview.story.vue}                        | 12 ++--
 .../Preview.test.js}                          |  6 +-
 .../Preview.vue}                              |  6 +-
 .../Warnings.vue}                             |  2 +-
 assets/js/components/Config/ChargerModal.vue  |  2 +-
 assets/js/components/Config/ControlModal.vue  |  2 +-
 assets/js/components/Config/JsonModal.vue     |  2 +-
 .../js/components/Config/LoadpointModal.vue   |  4 +-
 assets/js/components/Config/MeterModal.vue    |  2 +-
 assets/js/components/Config/PropertyField.vue |  2 +-
 assets/js/components/Config/SponsorModal.vue  |  4 +-
 assets/js/components/Config/VehicleModal.vue  |  4 +-
 assets/js/components/Config/YamlModal.vue     |  2 +-
 .../js/components/Energyflow/Energyflow.vue   |  6 +-
 .../{EnergyflowEntry.vue => Entry.vue}        |  2 +-
 .../components/Energyflow/Visualization.vue   |  2 +-
 .../components/{ => Footer}/Footer.story.vue  |  0
 assets/js/components/{ => Footer}/Footer.vue  |  2 +-
 assets/js/components/{ => Footer}/Logo.vue    |  0
 .../{ => Footer}/OfflineIndicator.story.vue   |  0
 .../{ => Footer}/OfflineIndicator.vue         |  6 +-
 .../components/{ => Footer}/Version.story.vue |  0
 assets/js/components/{ => Footer}/Version.vue |  2 +-
 .../ActiveSlot.vue}                           |  4 +-
 .../{ForecastChart.vue => Forecast/Chart.vue} |  8 +--
 .../Details.vue}                              |  6 +-
 .../{ => Forecast}/ForecastModal.vue          | 24 +++----
 .../TypeSelect.vue}                           |  8 +--
 .../GlobalSettingsModal.vue                   |  2 +-
 .../UserInterfaceSettings.vue                 | 14 ++--
 assets/js/components/HelpModal.vue            |  6 +-
 .../{ => Helper}/AnimatedNumber.vue           |  0
 .../components/{ => Helper}/CustomSelect.vue  |  0
 assets/js/components/{ => Helper}/FormRow.vue |  0
 .../components/{ => Helper}/GenericModal.vue  |  0
 .../{ => Helper}/IconSelectGroup.vue          |  0
 .../{ => Helper}/IconSelectItem.vue           |  0
 .../components/{ => Helper}/LabelAndValue.vue |  0
 .../components/{ => Helper}/MultiSelect.vue   |  2 +-
 .../{ => Helper}/SelectGroup.story.vue        |  0
 .../components/{ => Helper}/SelectGroup.vue   |  0
 .../{ => Loadpoints}/Loadpoint.story.vue      |  0
 .../components/{ => Loadpoints}/Loadpoint.vue | 30 ++++----
 .../{ => Loadpoints}/Loadpoints.story.vue     |  0
 .../{ => Loadpoints}/Loadpoints.vue           |  0
 .../{ => Loadpoints}/Mode.story.vue           |  0
 .../js/components/{ => Loadpoints}/Mode.vue   |  0
 .../{ => Loadpoints}/Phases.story.vue         |  0
 .../js/components/{ => Loadpoints}/Phases.vue |  0
 .../SessionInfo.vue}                          |  8 +--
 .../SettingsBatteryBoost.vue}                 |  2 +-
 .../SettingsButton.vue}                       |  0
 .../SettingsModal.vue}                        | 14 ++--
 .../Loadpoints}/sessionInfo.js                |  2 +-
 .../{ => Savings}/LiveCommunity.story.vue     |  0
 .../{ => Savings}/LiveCommunity.vue           |  8 +--
 .../{ => Savings}/Savings.story.vue           |  0
 .../js/components/{ => Savings}/Savings.vue   | 18 ++---
 .../{ => Savings}/Sponsor.story.vue           |  0
 .../js/components/{ => Savings}/Sponsor.vue   |  2 +-
 .../SponsorTokenExpires.story.vue             |  0
 .../{ => Savings}/SponsorTokenExpires.vue     |  2 +-
 .../Tile.story.vue}                           |  4 +-
 .../{SavingsTile.vue => Savings/Tile.vue}     |  4 +-
 .../{ => components/Savings}/co2Reference.js  |  0
 .../{ => components/Savings}/communityApi.js  |  0
 .../js/components/Sessions/DateNavigator.vue  |  2 +-
 .../js/components/Sessions/PeriodSelector.vue |  2 +-
 .../Sessions/SessionDetailsModal.vue          |  6 +-
 .../js/components/Sessions/SessionTable.vue   |  2 +-
 assets/js/components/{ => Site}/Site.vue      | 18 ++---
 .../js/components/{ => Site}/WelcomeIcons.vue |  6 +-
 .../{ => Tariff}/SmartCostLimit.vue           |  6 +-
 .../components/{ => Tariff}/TariffChart.vue   |  6 +-
 .../{TopHeader.vue => Top/Header.vue}         | 10 +--
 .../Navigation.story.vue}                     | 10 +--
 .../{TopNavigation.vue => Top/Navigation.vue} | 10 +--
 .../{ => Top}/Notifications.story.vue         |  0
 .../js/components/{ => Top}/Notifications.vue |  2 +-
 assets/js/{ => components/Top}/baseapi.js     |  0
 .../{ => Vehicles}/LimitEnergySelect.vue      |  8 +--
 .../{ => Vehicles}/LimitSocSelect.vue         |  8 +--
 .../Options.vue}                              |  0
 .../{VehicleSoc.vue => Vehicles/Soc.vue}      |  2 +-
 .../Status.story.vue}                         | 72 ++++++++-----------
 .../Status.test.js}                           |  4 +-
 .../Status.vue}                               | 36 +++++-----
 .../{VehicleTitle.vue => Vehicles/Title.vue}  | 14 ++--
 .../{ => Vehicles}/Vehicle.story.vue          |  0
 .../js/components/{ => Vehicles}/Vehicle.vue  | 28 ++++----
 assets/js/router.js                           |  8 ++-
 assets/js/views/App.vue                       | 12 ++--
 assets/js/views/Config.vue                    |  4 +-
 assets/js/views/Energy.vue                    | 12 ++--
 assets/js/views/Log.vue                       |  6 +-
 assets/js/views/Main.vue                      |  2 +-
 assets/js/views/Sessions.vue                  | 12 ++--
 109 files changed, 331 insertions(+), 331 deletions(-)
 rename assets/js/components/{ => Auth}/LoginModal.vue (95%)
 rename assets/js/components/{ => Auth}/PasswordModal.vue (95%)
 rename assets/js/{ => components/Auth}/auth.js (95%)
 rename assets/js/components/{ => Battery}/BatterySettingsModal.vue (97%)
 rename assets/js/components/{ChargingPlanArrival.vue => ChargingPlans/Arrival.vue} (96%)
 rename assets/js/components/{ => ChargingPlans}/ChargingPlan.story.vue (100%)
 rename assets/js/components/{ => ChargingPlans}/ChargingPlan.vue (93%)
 rename assets/js/components/{ChargingPlanRepeatingSettings.vue => ChargingPlans/PlanRepeatingSettings.vue} (96%)
 rename assets/js/components/{ChargingPlanStaticSettings.vue => ChargingPlans/PlanStaticSettings.vue} (98%)
 rename assets/js/components/{ChargingPlansRepeatingSettings.vue => ChargingPlans/PlansRepeatingSettings.vue} (90%)
 rename assets/js/components/{ChargingPlansSettings.vue => ChargingPlans/PlansSettings.vue} (93%)
 rename assets/js/components/{ChargingPlanPreview.story.vue => ChargingPlans/Preview.story.vue} (89%)
 rename assets/js/components/{ChargingPlanPreview.test.js => ChargingPlans/Preview.test.js} (95%)
 rename assets/js/components/{ChargingPlanPreview.vue => ChargingPlans/Preview.vue} (97%)
 rename assets/js/components/{ChargingPlanWarnings.vue => ChargingPlans/Warnings.vue} (98%)
 rename assets/js/components/Energyflow/{EnergyflowEntry.vue => Entry.vue} (98%)
 rename assets/js/components/{ => Footer}/Footer.story.vue (100%)
 rename assets/js/components/{ => Footer}/Footer.vue (90%)
 rename assets/js/components/{ => Footer}/Logo.vue (100%)
 rename assets/js/components/{ => Footer}/OfflineIndicator.story.vue (100%)
 rename assets/js/components/{ => Footer}/OfflineIndicator.vue (94%)
 rename assets/js/components/{ => Footer}/Version.story.vue (100%)
 rename assets/js/components/{ => Footer}/Version.vue (99%)
 rename assets/js/components/{ForecastActiveSlot.vue => Forecast/ActiveSlot.vue} (90%)
 rename assets/js/components/{ForecastChart.vue => Forecast/Chart.vue} (98%)
 rename assets/js/components/{ForecastDetails.vue => Forecast/Details.vue} (97%)
 rename assets/js/components/{ => Forecast}/ForecastModal.vue (88%)
 rename assets/js/components/{ForecastTypeSelect.vue => Forecast/TypeSelect.vue} (84%)
 rename assets/js/components/{ => GlobalSettings}/GlobalSettingsModal.vue (92%)
 rename assets/js/components/{Config => GlobalSettings}/UserInterfaceSettings.vue (93%)
 rename assets/js/components/{ => Helper}/AnimatedNumber.vue (100%)
 rename assets/js/components/{ => Helper}/CustomSelect.vue (100%)
 rename assets/js/components/{ => Helper}/FormRow.vue (100%)
 rename assets/js/components/{ => Helper}/GenericModal.vue (100%)
 rename assets/js/components/{ => Helper}/IconSelectGroup.vue (100%)
 rename assets/js/components/{ => Helper}/IconSelectItem.vue (100%)
 rename assets/js/components/{ => Helper}/LabelAndValue.vue (100%)
 rename assets/js/components/{ => Helper}/MultiSelect.vue (98%)
 rename assets/js/components/{ => Helper}/SelectGroup.story.vue (100%)
 rename assets/js/components/{ => Helper}/SelectGroup.vue (100%)
 rename assets/js/components/{ => Loadpoints}/Loadpoint.story.vue (100%)
 rename assets/js/components/{ => Loadpoints}/Loadpoint.vue (93%)
 rename assets/js/components/{ => Loadpoints}/Loadpoints.story.vue (100%)
 rename assets/js/components/{ => Loadpoints}/Loadpoints.vue (100%)
 rename assets/js/components/{ => Loadpoints}/Mode.story.vue (100%)
 rename assets/js/components/{ => Loadpoints}/Mode.vue (100%)
 rename assets/js/components/{ => Loadpoints}/Phases.story.vue (100%)
 rename assets/js/components/{ => Loadpoints}/Phases.vue (100%)
 rename assets/js/components/{LoadpointSessionInfo.vue => Loadpoints/SessionInfo.vue} (94%)
 rename assets/js/components/{LoadpointSettingsBatteryBoost.vue => Loadpoints/SettingsBatteryBoost.vue} (97%)
 rename assets/js/components/{LoadpointSettingsButton.vue => Loadpoints/SettingsButton.vue} (100%)
 rename assets/js/components/{LoadpointSettingsModal.vue => Loadpoints/SettingsModal.vue} (95%)
 rename assets/js/{ => components/Loadpoints}/sessionInfo.js (87%)
 rename assets/js/components/{ => Savings}/LiveCommunity.story.vue (100%)
 rename assets/js/components/{ => Savings}/LiveCommunity.vue (94%)
 rename assets/js/components/{ => Savings}/Savings.story.vue (100%)
 rename assets/js/components/{ => Savings}/Savings.vue (95%)
 rename assets/js/components/{ => Savings}/Sponsor.story.vue (100%)
 rename assets/js/components/{ => Savings}/Sponsor.vue (98%)
 rename assets/js/components/{ => Savings}/SponsorTokenExpires.story.vue (100%)
 rename assets/js/components/{ => Savings}/SponsorTokenExpires.vue (94%)
 rename assets/js/components/{SavingsTile.story.vue => Savings/Tile.story.vue} (77%)
 rename assets/js/components/{SavingsTile.vue => Savings/Tile.vue} (94%)
 rename assets/js/{ => components/Savings}/co2Reference.js (100%)
 rename assets/js/{ => components/Savings}/communityApi.js (100%)
 rename assets/js/components/{ => Site}/Site.vue (92%)
 rename assets/js/components/{ => Site}/WelcomeIcons.vue (95%)
 rename assets/js/components/{ => Tariff}/SmartCostLimit.vue (98%)
 rename assets/js/components/{ => Tariff}/TariffChart.vue (97%)
 rename assets/js/components/{TopHeader.vue => Top/Header.vue} (85%)
 rename assets/js/components/{TopNavigation.story.vue => Top/Navigation.story.vue} (82%)
 rename assets/js/components/{TopNavigation.vue => Top/Navigation.vue} (95%)
 rename assets/js/components/{ => Top}/Notifications.story.vue (100%)
 rename assets/js/components/{ => Top}/Notifications.vue (98%)
 rename assets/js/{ => components/Top}/baseapi.js (100%)
 rename assets/js/components/{ => Vehicles}/LimitEnergySelect.vue (91%)
 rename assets/js/components/{ => Vehicles}/LimitSocSelect.vue (91%)
 rename assets/js/components/{VehicleOptions.vue => Vehicles/Options.vue} (100%)
 rename assets/js/components/{VehicleSoc.vue => Vehicles/Soc.vue} (99%)
 rename assets/js/components/{VehicleStatus.story.vue => Vehicles/Status.story.vue} (78%)
 rename assets/js/components/{VehicleStatus.test.js => Vehicles/Status.test.js} (98%)
 rename assets/js/components/{VehicleStatus.vue => Vehicles/Status.vue} (94%)
 rename assets/js/components/{VehicleTitle.vue => Vehicles/Title.vue} (90%)
 rename assets/js/components/{ => Vehicles}/Vehicle.story.vue (100%)
 rename assets/js/components/{ => Vehicles}/Vehicle.vue (91%)

diff --git a/assets/js/api.js b/assets/js/api.js
index cd7fbd4d9..146af401e 100644
--- a/assets/js/api.js
+++ b/assets/js/api.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { openLoginModal } from "./auth";
+import { openLoginModal } from "./components/Auth/auth.js";
 
 const { protocol, hostname, port, pathname } = window.location;
 
diff --git a/assets/js/components/LoginModal.vue b/assets/js/components/Auth/LoginModal.vue
similarity index 95%
rename from assets/js/components/LoginModal.vue
rename to assets/js/components/Auth/LoginModal.vue
index 46d352cdd..f9ac99947 100644
--- a/assets/js/components/LoginModal.vue
+++ b/assets/js/components/Auth/LoginModal.vue
@@ -58,11 +58,11 @@
 </template>
 
 <script>
-import GenericModal from "./GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import Modal from "bootstrap/js/dist/modal";
-import api from "../api";
-import { updateAuthStatus, getAndClearNextUrl, getAndClearNextModal, isLoggedIn } from "../auth";
-import { docsPrefix } from "../i18n";
+import api from "../../api.js";
+import { updateAuthStatus, getAndClearNextUrl, getAndClearNextModal, isLoggedIn } from "./auth.js";
+import { docsPrefix } from "../../i18n.js";
 
 export default {
 	name: "LoginModal",
diff --git a/assets/js/components/PasswordModal.vue b/assets/js/components/Auth/PasswordModal.vue
similarity index 95%
rename from assets/js/components/PasswordModal.vue
rename to assets/js/components/Auth/PasswordModal.vue
index bdc6d0910..2badc9c2f 100644
--- a/assets/js/components/PasswordModal.vue
+++ b/assets/js/components/Auth/PasswordModal.vue
@@ -86,10 +86,10 @@
 </template>
 
 <script>
-import GenericModal from "./GenericModal.vue";
-import FormRow from "./FormRow.vue";
-import api from "../api";
-import { updateAuthStatus, isConfigured } from "../auth";
+import GenericModal from "../Helper/GenericModal.vue";
+import FormRow from "../Helper/FormRow.vue";
+import api from "../../api.js";
+import { updateAuthStatus, isConfigured } from "./auth.js";
 
 export default {
 	name: "PasswordModal",
diff --git a/assets/js/auth.js b/assets/js/components/Auth/auth.js
similarity index 95%
rename from assets/js/auth.js
rename to assets/js/components/Auth/auth.js
index 06b1c6e2d..c3891cd79 100644
--- a/assets/js/auth.js
+++ b/assets/js/components/Auth/auth.js
@@ -1,8 +1,8 @@
 import { reactive, watch } from "vue";
-import api from "./api";
-import store from "./store";
+import api from "../../api.js";
+import store from "../../store.js";
 import Modal from "bootstrap/js/dist/modal";
-import { isSystemError } from "./utils/fatal";
+import { isSystemError } from "../../utils/fatal.js";
 
 const auth = reactive({
   configured: true,
diff --git a/assets/js/components/BatterySettingsModal.vue b/assets/js/components/Battery/BatterySettingsModal.vue
similarity index 97%
rename from assets/js/components/BatterySettingsModal.vue
rename to assets/js/components/Battery/BatterySettingsModal.vue
index bc82bb390..341df2bf0 100644
--- a/assets/js/components/BatterySettingsModal.vue
+++ b/assets/js/components/Battery/BatterySettingsModal.vue
@@ -254,13 +254,13 @@
 import "@h2d2/shopicons/es/regular/lightning";
 import "@h2d2/shopicons/es/regular/car3";
 import "@h2d2/shopicons/es/regular/home";
-import SmartCostLimit from "./SmartCostLimit.vue";
-import CustomSelect from "./CustomSelect.vue";
-import GenericModal from "./GenericModal.vue";
-import formatter, { POWER_UNIT } from "../mixins/formatter";
-import collector from "../mixins/collector";
-import api from "../api";
-import smartCostAvailable from "../utils/smartCostAvailable";
+import SmartCostLimit from "../Tariff/SmartCostLimit.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
+import GenericModal from "../Helper/GenericModal.vue";
+import formatter, { POWER_UNIT } from "../../mixins/formatter.js";
+import collector from "../../mixins/collector.js";
+import api from "../../api.js";
+import smartCostAvailable from "../../utils/smartCostAvailable.js";
 
 export default {
 	name: "BatterySettingsModal",
diff --git a/assets/js/components/ChargingPlanArrival.vue b/assets/js/components/ChargingPlans/Arrival.vue
similarity index 96%
rename from assets/js/components/ChargingPlanArrival.vue
rename to assets/js/components/ChargingPlans/Arrival.vue
index a94270a99..93ea9f7d0 100644
--- a/assets/js/components/ChargingPlanArrival.vue
+++ b/assets/js/components/ChargingPlans/Arrival.vue
@@ -60,8 +60,8 @@
 </template>
 
 <script>
-import { distanceUnit } from "../units";
-import formatter from "../mixins/formatter";
+import { distanceUnit } from "../../units.js";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "ChargingPlanArrival",
diff --git a/assets/js/components/ChargingPlan.story.vue b/assets/js/components/ChargingPlans/ChargingPlan.story.vue
similarity index 100%
rename from assets/js/components/ChargingPlan.story.vue
rename to assets/js/components/ChargingPlans/ChargingPlan.story.vue
diff --git a/assets/js/components/ChargingPlan.vue b/assets/js/components/ChargingPlans/ChargingPlan.vue
similarity index 93%
rename from assets/js/components/ChargingPlan.vue
rename to assets/js/components/ChargingPlans/ChargingPlan.vue
index b3324c2db..32c4a2578 100644
--- a/assets/js/components/ChargingPlan.vue
+++ b/assets/js/components/ChargingPlans/ChargingPlan.vue
@@ -104,20 +104,24 @@
 
 <script>
 import Modal from "bootstrap/js/dist/modal";
-import LabelAndValue from "./LabelAndValue.vue";
-import ChargingPlansSettings from "./ChargingPlansSettings.vue";
-import ChargingPlanArrival from "./ChargingPlanArrival.vue";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import PlansSettings from "./PlansSettings.vue";
+import Arrival from "./Arrival.vue";
 
-import formatter from "../mixins/formatter";
-import collector from "../mixins/collector";
-import api from "../api";
-import { optionStep, fmtEnergy } from "../utils/energyOptions";
+import formatter from "../../mixins/formatter.js";
+import collector from "../../mixins/collector.js";
+import api from "../../api.js";
+import { optionStep, fmtEnergy } from "../../utils/energyOptions.js";
 
 const ONE_MINUTE = 60 * 1000;
 
 export default {
 	name: "ChargingPlan",
-	components: { LabelAndValue, ChargingPlansSettings, ChargingPlanArrival },
+	components: {
+		LabelAndValue,
+		ChargingPlansSettings: PlansSettings,
+		ChargingPlanArrival: Arrival,
+	},
 	mixins: [formatter, collector],
 	props: {
 		currency: String,
@@ -196,10 +200,10 @@ export default {
 			return this.activeTab === "arrival";
 		},
 		chargingPlansSettingsProps: function () {
-			return this.collectProps(ChargingPlansSettings);
+			return this.collectProps(PlansSettings);
 		},
 		chargingPlanArrival: function () {
-			return this.collectProps(ChargingPlanArrival);
+			return this.collectProps(Arrival);
 		},
 		targetSocLabel: function () {
 			if (this.socBasedPlanning) {
diff --git a/assets/js/components/ChargingPlanRepeatingSettings.vue b/assets/js/components/ChargingPlans/PlanRepeatingSettings.vue
similarity index 96%
rename from assets/js/components/ChargingPlanRepeatingSettings.vue
rename to assets/js/components/ChargingPlans/PlanRepeatingSettings.vue
index 7069f8b45..78a455369 100644
--- a/assets/js/components/ChargingPlanRepeatingSettings.vue
+++ b/assets/js/components/ChargingPlans/PlanRepeatingSettings.vue
@@ -137,10 +137,10 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/trash";
-import { distanceUnit } from "../units";
-import MultiSelect from "./MultiSelect.vue";
-import formatter from "../mixins/formatter";
-import deepEqual from "../utils/deepEqual";
+import { distanceUnit } from "../../units.js";
+import MultiSelect from "../Helper/MultiSelect.vue";
+import formatter from "../../mixins/formatter.js";
+import deepEqual from "../../utils/deepEqual.js";
 export default {
 	name: "ChargingPlanRepeatingSettings",
 	components: {
diff --git a/assets/js/components/ChargingPlanStaticSettings.vue b/assets/js/components/ChargingPlans/PlanStaticSettings.vue
similarity index 98%
rename from assets/js/components/ChargingPlanStaticSettings.vue
rename to assets/js/components/ChargingPlans/PlanStaticSettings.vue
index 744971b4c..65feccb9e 100644
--- a/assets/js/components/ChargingPlanStaticSettings.vue
+++ b/assets/js/components/ChargingPlans/PlanStaticSettings.vue
@@ -148,10 +148,10 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/checkmark";
-import { distanceUnit } from "../units";
+import { distanceUnit } from "../../units.js";
 
-import formatter from "../mixins/formatter";
-import { energyOptions } from "../utils/energyOptions";
+import formatter from "../../mixins/formatter.js";
+import { energyOptions } from "../../utils/energyOptions.js";
 
 const LAST_TARGET_TIME_KEY = "last_target_time";
 const LAST_SOC_GOAL_KEY = "last_soc_goal";
diff --git a/assets/js/components/ChargingPlansRepeatingSettings.vue b/assets/js/components/ChargingPlans/PlansRepeatingSettings.vue
similarity index 90%
rename from assets/js/components/ChargingPlansRepeatingSettings.vue
rename to assets/js/components/ChargingPlans/PlansRepeatingSettings.vue
index e7663976a..3be1eedb0 100644
--- a/assets/js/components/ChargingPlansRepeatingSettings.vue
+++ b/assets/js/components/ChargingPlans/PlansRepeatingSettings.vue
@@ -29,9 +29,9 @@
 </template>
 
 <script>
-import ChargingPlanRepeatingSettings from "./ChargingPlanRepeatingSettings.vue";
-import deepEqual from "../utils/deepEqual";
-import formatter from "../mixins/formatter";
+import PlanRepeatingSettings from "./PlanRepeatingSettings.vue";
+import deepEqual from "../../utils/deepEqual.js";
+import formatter from "../../mixins/formatter.js";
 
 const DEFAULT_WEEKDAYS = [1, 2, 3, 4, 5]; // weekdays
 const DEFAULT_TARGET_TIME = "07:00";
@@ -40,7 +40,7 @@ const DEFAULT_TARGET_SOC = 80;
 export default {
 	name: "ChargingPlansRepeatingSettings",
 	components: {
-		ChargingPlanRepeatingSettings,
+		ChargingPlanRepeatingSettings: PlanRepeatingSettings,
 	},
 	mixins: [formatter],
 	props: {
diff --git a/assets/js/components/ChargingPlansSettings.vue b/assets/js/components/ChargingPlans/PlansSettings.vue
similarity index 93%
rename from assets/js/components/ChargingPlansSettings.vue
rename to assets/js/components/ChargingPlans/PlansSettings.vue
index 466a7ee1e..7ff35676f 100644
--- a/assets/js/components/ChargingPlansSettings.vue
+++ b/assets/js/components/ChargingPlans/PlansSettings.vue
@@ -63,25 +63,25 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/plus";
-import ChargingPlanPreview from "./ChargingPlanPreview.vue";
-import ChargingPlanStaticSettings from "./ChargingPlanStaticSettings.vue";
-import ChargingPlansRepeatingSettings from "./ChargingPlansRepeatingSettings.vue";
-import ChargingPlanWarnings from "./ChargingPlanWarnings.vue";
-import formatter from "../mixins/formatter";
-import collector from "../mixins/collector";
-import api from "../api";
-import CustomSelect from "./CustomSelect.vue";
-import deepEqual from "../utils/deepEqual";
+import Preview from "./Preview.vue";
+import PlanStaticSettings from "./PlanStaticSettings.vue";
+import RepeatingSettings from "./PlansRepeatingSettings.vue";
+import Warnings from "./Warnings.vue";
+import formatter from "../../mixins/formatter.js";
+import collector from "../../mixins/collector.js";
+import api from "../../api.js";
+import CustomSelect from "../Helper/CustomSelect.vue";
+import deepEqual from "../../utils/deepEqual.js";
 
 const TARIFF_CACHE_TIME = 300000; // 5 minutes
 
 export default {
 	name: "ChargingPlansSettings",
 	components: {
-		ChargingPlanPreview,
-		ChargingPlanStaticSettings,
-		ChargingPlansRepeatingSettings,
-		ChargingPlanWarnings,
+		ChargingPlanPreview: Preview,
+		ChargingPlanStaticSettings: PlanStaticSettings,
+		ChargingPlansRepeatingSettings: RepeatingSettings,
+		ChargingPlanWarnings: Warnings,
 		CustomSelect,
 	},
 	mixins: [formatter, collector],
@@ -128,7 +128,7 @@ export default {
 			return this.previewPlanOptions[this.selectedPreviewId - 1]?.name;
 		},
 		chargingPlanWarningsProps: function () {
-			return this.collectProps(ChargingPlanWarnings);
+			return this.collectProps(Warnings);
 		},
 		chargingPlanPreviewProps: function () {
 			const { rates } = this.tariff;
diff --git a/assets/js/components/ChargingPlanPreview.story.vue b/assets/js/components/ChargingPlans/Preview.story.vue
similarity index 89%
rename from assets/js/components/ChargingPlanPreview.story.vue
rename to assets/js/components/ChargingPlans/Preview.story.vue
index 852691161..d50f242a0 100644
--- a/assets/js/components/ChargingPlanPreview.story.vue
+++ b/assets/js/components/ChargingPlans/Preview.story.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ChargingPlanPreview from "./ChargingPlanPreview.vue";
+import Preview from "./Preview.vue";
 
 const now = new Date();
 
@@ -82,19 +82,19 @@ const dynamic = {
 <template>
 	<Story title="ChargingPlanPreview">
 		<Variant title="co2">
-			<ChargingPlanPreview v-bind="co2" />
+			<Preview v-bind="co2" />
 		</Variant>
 		<Variant title="fixed">
-			<ChargingPlanPreview v-bind="fixed" />
+			<Preview v-bind="fixed" />
 		</Variant>
 		<Variant title="zoned">
-			<ChargingPlanPreview v-bind="zoned" />
+			<Preview v-bind="zoned" />
 		</Variant>
 		<Variant title="unknown">
-			<ChargingPlanPreview v-bind="unknown" />
+			<Preview v-bind="unknown" />
 		</Variant>
 		<Variant title="dynamic">
-			<ChargingPlanPreview v-bind="dynamic" />
+			<Preview v-bind="dynamic" />
 		</Variant>
 	</Story>
 </template>
diff --git a/assets/js/components/ChargingPlanPreview.test.js b/assets/js/components/ChargingPlans/Preview.test.js
similarity index 95%
rename from assets/js/components/ChargingPlanPreview.test.js
rename to assets/js/components/ChargingPlans/Preview.test.js
index eda5e8b63..f5ae25e32 100644
--- a/assets/js/components/ChargingPlanPreview.test.js
+++ b/assets/js/components/ChargingPlans/Preview.test.js
@@ -1,6 +1,6 @@
 import { mount, config } from "@vue/test-utils";
 import { beforeAll, describe, expect, test } from "vitest";
-import ChargingPlanPreview from "./ChargingPlanPreview.vue";
+import Preview from "./Preview.vue";
 
 config.global.mocks["$i18n"] = { locale: "de-DE" };
 config.global.mocks["$t"] = (a) => a;
@@ -22,7 +22,7 @@ describe("basics", () => {
     },
   ];
 
-  const wrapper = mount(ChargingPlanPreview, {
+  const wrapper = mount(Preview, {
     props: {
       plan: PLAN,
       targetTime: DATE_TARGET,
@@ -106,7 +106,7 @@ describe("zoned tariffs", () => {
 
   let result = null;
 
-  const wrapper = mount(ChargingPlanPreview, {
+  const wrapper = mount(Preview, {
     props: {
       plan: PLAN,
       targetTime: DATE_TARGET,
diff --git a/assets/js/components/ChargingPlanPreview.vue b/assets/js/components/ChargingPlans/Preview.vue
similarity index 97%
rename from assets/js/components/ChargingPlanPreview.vue
rename to assets/js/components/ChargingPlans/Preview.vue
index ee5d60b0c..f49fefab9 100644
--- a/assets/js/components/ChargingPlanPreview.vue
+++ b/assets/js/components/ChargingPlans/Preview.vue
@@ -35,9 +35,9 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
-import { CO2_TYPE } from "../units";
-import TariffChart from "./TariffChart.vue";
+import formatter from "../../mixins/formatter.js";
+import { CO2_TYPE } from "../../units.js";
+import TariffChart from "../Tariff/TariffChart.vue";
 
 export default {
 	name: "ChargingPlanPreview",
diff --git a/assets/js/components/ChargingPlanWarnings.vue b/assets/js/components/ChargingPlans/Warnings.vue
similarity index 98%
rename from assets/js/components/ChargingPlanWarnings.vue
rename to assets/js/components/ChargingPlans/Warnings.vue
index 2bf3c42aa..9c4cbcdc8 100644
--- a/assets/js/components/ChargingPlanWarnings.vue
+++ b/assets/js/components/ChargingPlans/Warnings.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "ChargingPlanWarnings",
diff --git a/assets/js/components/Config/ChargerModal.vue b/assets/js/components/Config/ChargerModal.vue
index 7dcd008c7..d9b685574 100644
--- a/assets/js/components/Config/ChargerModal.vue
+++ b/assets/js/components/Config/ChargerModal.vue
@@ -152,7 +152,7 @@ import TestResult from "./TestResult.vue";
 import api from "../../api";
 import test from "./mixins/test";
 import Modbus from "./Modbus.vue";
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import Markdown from "./Markdown.vue";
 import SponsorTokenRequired from "./SponsorTokenRequired.vue";
 const initialValues = { type: "template" };
diff --git a/assets/js/components/Config/ControlModal.vue b/assets/js/components/Config/ControlModal.vue
index 603e0d314..d661137d0 100644
--- a/assets/js/components/Config/ControlModal.vue
+++ b/assets/js/components/Config/ControlModal.vue
@@ -80,7 +80,7 @@
 </template>
 
 <script>
-import GenericModal from "./../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import FormRow from "./FormRow.vue";
 import store from "../../store";
 import api from "../../api";
diff --git a/assets/js/components/Config/JsonModal.vue b/assets/js/components/Config/JsonModal.vue
index beb34acbb..fe51a507d 100644
--- a/assets/js/components/Config/JsonModal.vue
+++ b/assets/js/components/Config/JsonModal.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import api from "../../api";
 import { docsPrefix } from "../../i18n";
 import store from "../../store";
diff --git a/assets/js/components/Config/LoadpointModal.vue b/assets/js/components/Config/LoadpointModal.vue
index 21a18918a..b77ed6546 100644
--- a/assets/js/components/Config/LoadpointModal.vue
+++ b/assets/js/components/Config/LoadpointModal.vue
@@ -547,9 +547,9 @@
 <script>
 import FormRow from "./FormRow.vue";
 import PropertyField from "./PropertyField.vue";
-import SelectGroup from "../SelectGroup.vue";
+import SelectGroup from "../Helper/SelectGroup.vue";
 import api from "../../api";
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import deepClone from "../../utils/deepClone";
 import deepEqual from "../../utils/deepEqual";
 import formatter, { POWER_UNIT } from "../../mixins/formatter";
diff --git a/assets/js/components/Config/MeterModal.vue b/assets/js/components/Config/MeterModal.vue
index 44f7c9c04..d0e43db98 100644
--- a/assets/js/components/Config/MeterModal.vue
+++ b/assets/js/components/Config/MeterModal.vue
@@ -165,7 +165,7 @@ import api from "../../api";
 import test from "./mixins/test";
 import NewDeviceButton from "./NewDeviceButton.vue";
 import Modbus from "./Modbus.vue";
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import Markdown from "./Markdown.vue";
 import PropertyField from "./PropertyField.vue";
 const initialValues = { type: "template", deviceTitle: "", deviceIcon: "" };
diff --git a/assets/js/components/Config/PropertyField.vue b/assets/js/components/Config/PropertyField.vue
index dbeddea78..9e238e4e7 100644
--- a/assets/js/components/Config/PropertyField.vue
+++ b/assets/js/components/Config/PropertyField.vue
@@ -92,7 +92,7 @@
 <script>
 import "@h2d2/shopicons/es/regular/minus";
 import VehicleIcon from "../VehicleIcon";
-import SelectGroup from "../SelectGroup.vue";
+import SelectGroup from "../Helper/SelectGroup.vue";
 import formatter from "../../mixins/formatter";
 
 const NS_PER_SECOND = 1000000000;
diff --git a/assets/js/components/Config/SponsorModal.vue b/assets/js/components/Config/SponsorModal.vue
index 6af92e192..61c437b91 100644
--- a/assets/js/components/Config/SponsorModal.vue
+++ b/assets/js/components/Config/SponsorModal.vue
@@ -64,8 +64,8 @@
 <script>
 import JsonModal from "./JsonModal.vue";
 import FormRow from "./FormRow.vue";
-import Sponsor, { VICTRON_DEVICE } from "../Sponsor.vue";
-import SponsorTokenExpires from "../SponsorTokenExpires.vue";
+import Sponsor, { VICTRON_DEVICE } from "../Savings/Sponsor.vue";
+import SponsorTokenExpires from "../Savings/SponsorTokenExpires.vue";
 import store from "../../store";
 import { docsPrefix } from "../../i18n";
 import { cleanYaml } from "../../utils/cleanYaml";
diff --git a/assets/js/components/Config/VehicleModal.vue b/assets/js/components/Config/VehicleModal.vue
index a55bb031b..31c5873c5 100644
--- a/assets/js/components/Config/VehicleModal.vue
+++ b/assets/js/components/Config/VehicleModal.vue
@@ -235,10 +235,10 @@
 import FormRow from "./FormRow.vue";
 import PropertyField from "./PropertyField.vue";
 import TestResult from "./TestResult.vue";
-import SelectGroup from "../SelectGroup.vue";
+import SelectGroup from "../Helper/SelectGroup.vue";
 import PropertyEntry from "./PropertyEntry.vue";
 import PropertyCollapsible from "./PropertyCollapsible.vue";
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import Markdown from "./Markdown.vue";
 import api from "../../api";
 import test from "./mixins/test";
diff --git a/assets/js/components/Config/YamlModal.vue b/assets/js/components/Config/YamlModal.vue
index 65bba41b8..b1d1970d1 100644
--- a/assets/js/components/Config/YamlModal.vue
+++ b/assets/js/components/Config/YamlModal.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import GenericModal from "../GenericModal.vue";
+import GenericModal from "../Helper/GenericModal.vue";
 import api from "../../api";
 import { docsPrefix } from "../../i18n";
 import YamlEditor from "./YamlEditor.vue";
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
index 1c13b5eea..9e81b2a7c 100644
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@@ -230,9 +230,9 @@
 import "@h2d2/shopicons/es/filled/square";
 import Modal from "bootstrap/js/dist/modal";
 import Visualization from "./Visualization.vue";
-import EnergyflowEntry from "./EnergyflowEntry.vue";
+import Entry from "./Entry.vue";
 import formatter, { POWER_UNIT } from "../../mixins/formatter";
-import AnimatedNumber from "../AnimatedNumber.vue";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
 import settings from "../../settings";
 import { CO2_TYPE } from "../../units";
 import collector from "../../mixins/collector";
@@ -241,7 +241,7 @@ export default {
 	name: "Energyflow",
 	components: {
 		Visualization,
-		EnergyflowEntry,
+		EnergyflowEntry: Entry,
 		AnimatedNumber,
 	},
 	mixins: [formatter, collector],
diff --git a/assets/js/components/Energyflow/EnergyflowEntry.vue b/assets/js/components/Energyflow/Entry.vue
similarity index 98%
rename from assets/js/components/Energyflow/EnergyflowEntry.vue
rename to assets/js/components/Energyflow/Entry.vue
index 040c1548f..c1b423d8f 100644
--- a/assets/js/components/Energyflow/EnergyflowEntry.vue
+++ b/assets/js/components/Energyflow/Entry.vue
@@ -46,7 +46,7 @@ import "@h2d2/shopicons/es/regular/home";
 import Tooltip from "bootstrap/js/dist/tooltip";
 import BatteryIcon from "./BatteryIcon.vue";
 import formatter from "../../mixins/formatter";
-import AnimatedNumber from "../AnimatedNumber.vue";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
 import VehicleIcon from "../VehicleIcon";
 import ForecastIcon from "../MaterialIcon/Forecast.vue";
 
diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue
index 4680b89b0..b0e0a36ef 100644
--- a/assets/js/components/Energyflow/Visualization.vue
+++ b/assets/js/components/Energyflow/Visualization.vue
@@ -110,7 +110,7 @@
 import formatter, { POWER_UNIT } from "../../mixins/formatter";
 import BatteryIcon from "./BatteryIcon.vue";
 import LabelBar from "./LabelBar.vue";
-import AnimatedNumber from "../AnimatedNumber.vue";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
 import VehicleIcon from "../VehicleIcon";
 import QuestionIcon from "../MaterialIcon/Question.vue";
 import "@h2d2/shopicons/es/regular/sun";
diff --git a/assets/js/components/Footer.story.vue b/assets/js/components/Footer/Footer.story.vue
similarity index 100%
rename from assets/js/components/Footer.story.vue
rename to assets/js/components/Footer/Footer.story.vue
diff --git a/assets/js/components/Footer.vue b/assets/js/components/Footer/Footer.vue
similarity index 90%
rename from assets/js/components/Footer.vue
rename to assets/js/components/Footer/Footer.vue
index f62e17d60..4fcaaf99f 100644
--- a/assets/js/components/Footer.vue
+++ b/assets/js/components/Footer/Footer.vue
@@ -13,7 +13,7 @@
 import "@h2d2/shopicons/es/filled/testtube";
 
 import Version from "./Version.vue";
-import Savings from "./Savings.vue";
+import Savings from "../Savings/Savings.vue";
 
 export default {
 	name: "Footer",
diff --git a/assets/js/components/Logo.vue b/assets/js/components/Footer/Logo.vue
similarity index 100%
rename from assets/js/components/Logo.vue
rename to assets/js/components/Footer/Logo.vue
diff --git a/assets/js/components/OfflineIndicator.story.vue b/assets/js/components/Footer/OfflineIndicator.story.vue
similarity index 100%
rename from assets/js/components/OfflineIndicator.story.vue
rename to assets/js/components/Footer/OfflineIndicator.story.vue
diff --git a/assets/js/components/OfflineIndicator.vue b/assets/js/components/Footer/OfflineIndicator.vue
similarity index 94%
rename from assets/js/components/OfflineIndicator.vue
rename to assets/js/components/Footer/OfflineIndicator.vue
index 0d295275a..7d5f12559 100644
--- a/assets/js/components/OfflineIndicator.vue
+++ b/assets/js/components/Footer/OfflineIndicator.vue
@@ -74,9 +74,9 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/car1";
-import CloudOffline from "./MaterialIcon/CloudOffline.vue";
-import Sync from "./MaterialIcon/Sync.vue";
-import restart, { performRestart, restartComplete } from "../restart";
+import CloudOffline from "../MaterialIcon/CloudOffline.vue";
+import Sync from "../MaterialIcon/Sync.vue";
+import restart, { performRestart, restartComplete } from "../../restart.js";
 
 export default {
 	name: "OfflineIndicator",
diff --git a/assets/js/components/Version.story.vue b/assets/js/components/Footer/Version.story.vue
similarity index 100%
rename from assets/js/components/Version.story.vue
rename to assets/js/components/Footer/Version.story.vue
diff --git a/assets/js/components/Version.vue b/assets/js/components/Footer/Version.vue
similarity index 99%
rename from assets/js/components/Version.vue
rename to assets/js/components/Footer/Version.vue
index 1872dc372..43716aed0 100644
--- a/assets/js/components/Version.vue
+++ b/assets/js/components/Footer/Version.vue
@@ -129,7 +129,7 @@
 import Modal from "bootstrap/js/dist/modal";
 import "@h2d2/shopicons/es/regular/gift";
 import "@h2d2/shopicons/es/regular/moonstars";
-import api from "../api";
+import api from "../../api.js";
 import Logo from "./Logo.vue";
 
 export default {
diff --git a/assets/js/components/ForecastActiveSlot.vue b/assets/js/components/Forecast/ActiveSlot.vue
similarity index 90%
rename from assets/js/components/ForecastActiveSlot.vue
rename to assets/js/components/Forecast/ActiveSlot.vue
index 14e680137..d902c8b63 100644
--- a/assets/js/components/ForecastActiveSlot.vue
+++ b/assets/js/components/Forecast/ActiveSlot.vue
@@ -11,8 +11,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import type { PropType } from "vue";
-import { type PriceSlot, type TimeseriesEntry } from "../utils/forecast";
-import formatter from "../mixins/formatter";
+import { type PriceSlot, type TimeseriesEntry } from "../../utils/forecast.ts";
+import formatter from "../../mixins/formatter";
 
 export default defineComponent({
 	name: "ForecastActiveSlot",
diff --git a/assets/js/components/ForecastChart.vue b/assets/js/components/Forecast/Chart.vue
similarity index 98%
rename from assets/js/components/ForecastChart.vue
rename to assets/js/components/Forecast/Chart.vue
index 999efed83..1b3a6be03 100644
--- a/assets/js/components/ForecastChart.vue
+++ b/assets/js/components/Forecast/Chart.vue
@@ -28,16 +28,16 @@ import {
 } from "chart.js";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 import "chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm";
-import { registerChartComponents, commonOptions } from "./Sessions/chartConfig";
-import formatter, { POWER_UNIT } from "../mixins/formatter";
-import colors, { lighterColor } from "../colors";
+import { registerChartComponents, commonOptions } from "../Sessions/chartConfig";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import colors, { lighterColor } from "../../colors";
 import {
 	highestSlotIndexByDay,
 	ForecastType,
 	type PriceSlot,
 	type SolarDetails,
 	type TimeseriesEntry,
-} from "../utils/forecast";
+} from "../../utils/forecast.ts";
 
 registerChartComponents([
 	BarController,
diff --git a/assets/js/components/ForecastDetails.vue b/assets/js/components/Forecast/Details.vue
similarity index 97%
rename from assets/js/components/ForecastDetails.vue
rename to assets/js/components/Forecast/Details.vue
index c39385993..6ea2756ae 100644
--- a/assets/js/components/ForecastDetails.vue
+++ b/assets/js/components/Forecast/Details.vue
@@ -64,9 +64,9 @@
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
-import { ForecastType, type PriceSlot, type SolarDetails } from "../utils/forecast";
-import formatter, { POWER_UNIT } from "../mixins/formatter";
-import AnimatedNumber from "./AnimatedNumber.vue";
+import { ForecastType, type PriceSlot, type SolarDetails } from "../../utils/forecast.ts";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
 const LOCALES_WITHOUT_DAY_AFTER_TOMORROW = ["en", "tr"];
 
 export interface Energy {
diff --git a/assets/js/components/ForecastModal.vue b/assets/js/components/Forecast/ForecastModal.vue
similarity index 88%
rename from assets/js/components/ForecastModal.vue
rename to assets/js/components/Forecast/ForecastModal.vue
index 0627415ae..668945588 100644
--- a/assets/js/components/ForecastModal.vue
+++ b/assets/js/components/Forecast/ForecastModal.vue
@@ -53,28 +53,28 @@ import "@h2d2/shopicons/es/regular/eco1";
 import "@h2d2/shopicons/es/regular/sun";
 import { defineComponent } from "vue";
 import type { PropType } from "vue";
-import GenericModal from "./GenericModal.vue";
-import ForecastChart from "./ForecastChart.vue";
-import ForecastTypeSelect from "./ForecastTypeSelect.vue";
-import ForecastDetails from "./ForecastDetails.vue";
-import ForecastActiveSlot from "./ForecastActiveSlot.vue";
+import GenericModal from "../Helper/GenericModal.vue";
+import Chart from "./Chart.vue";
+import TypeSelect from "./TypeSelect.vue";
+import Details from "./Details.vue";
+import ActiveSlot from "./ActiveSlot.vue";
 import {
 	type PriceSlot,
 	type TimeseriesEntry,
 	type Forecast,
 	ForecastType,
 	adjustedSolar,
-} from "../utils/forecast";
-import formatter from "../mixins/formatter";
-import settings from "../settings";
+} from "../../utils/forecast.ts";
+import formatter from "../../mixins/formatter";
+import settings from "../../settings";
 export default defineComponent({
 	name: "ForecastModal",
 	components: {
 		GenericModal,
-		ForecastChart,
-		ForecastTypeSelect,
-		ForecastDetails,
-		ForecastActiveSlot,
+		ForecastChart: Chart,
+		ForecastTypeSelect: TypeSelect,
+		ForecastDetails: Details,
+		ForecastActiveSlot: ActiveSlot,
 	},
 	mixins: [formatter],
 	props: {
diff --git a/assets/js/components/ForecastTypeSelect.vue b/assets/js/components/Forecast/TypeSelect.vue
similarity index 84%
rename from assets/js/components/ForecastTypeSelect.vue
rename to assets/js/components/Forecast/TypeSelect.vue
index 19f506223..e19ba775f 100644
--- a/assets/js/components/ForecastTypeSelect.vue
+++ b/assets/js/components/Forecast/TypeSelect.vue
@@ -18,10 +18,10 @@
 import "@h2d2/shopicons/es/regular/eco1";
 import "@h2d2/shopicons/es/regular/sun";
 import { defineComponent } from "vue";
-import IconSelectItem from "./IconSelectItem.vue";
-import IconSelectGroup from "./IconSelectGroup.vue";
-import DynamicPriceIcon from "./MaterialIcon/DynamicPrice.vue";
-import { ForecastType } from "../utils/forecast";
+import IconSelectItem from "../Helper/IconSelectItem.vue";
+import IconSelectGroup from "../Helper/IconSelectGroup.vue";
+import DynamicPriceIcon from "../MaterialIcon/DynamicPrice.vue";
+import { ForecastType } from "../../utils/forecast.ts";
 
 export default defineComponent({
 	name: "ForecastTypeSelect",
diff --git a/assets/js/components/GlobalSettingsModal.vue b/assets/js/components/GlobalSettings/GlobalSettingsModal.vue
similarity index 92%
rename from assets/js/components/GlobalSettingsModal.vue
rename to assets/js/components/GlobalSettings/GlobalSettingsModal.vue
index 71a4ff5f1..c7bdb797d 100644
--- a/assets/js/components/GlobalSettingsModal.vue
+++ b/assets/js/components/GlobalSettings/GlobalSettingsModal.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import UserInterfaceSettings from "./Config/UserInterfaceSettings.vue";
+import UserInterfaceSettings from "./UserInterfaceSettings.vue";
 
 export default {
 	name: "GlobalSettingsModal",
diff --git a/assets/js/components/Config/UserInterfaceSettings.vue b/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
similarity index 93%
rename from assets/js/components/Config/UserInterfaceSettings.vue
rename to assets/js/components/GlobalSettings/UserInterfaceSettings.vue
index 0c552e188..c5870d8f2 100644
--- a/assets/js/components/Config/UserInterfaceSettings.vue
+++ b/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
@@ -78,18 +78,18 @@
 
 <script>
 import TelemetrySettings from "../TelemetrySettings.vue";
-import FormRow from "../FormRow.vue";
-import SelectGroup from "../SelectGroup.vue";
+import FormRow from "../Helper/FormRow.vue";
+import SelectGroup from "../Helper/SelectGroup.vue";
 import {
 	getLocalePreference,
 	setLocalePreference,
 	LOCALES,
 	removeLocalePreference,
-} from "../../i18n";
-import { getThemePreference, setThemePreference, THEMES } from "../../theme";
-import { getUnits, setUnits, UNITS } from "../../units";
-import { getHiddenFeatures, setHiddenFeatures } from "../../featureflags";
-import { isApp } from "../../utils/native";
+} from "../../i18n.js";
+import { getThemePreference, setThemePreference, THEMES } from "../../theme.js";
+import { getUnits, setUnits, UNITS } from "../../units.js";
+import { getHiddenFeatures, setHiddenFeatures } from "../../featureflags.js";
+import { isApp } from "../../utils/native.js";
 
 export default {
 	name: "UserInterfaceSettings",
diff --git a/assets/js/components/HelpModal.vue b/assets/js/components/HelpModal.vue
index c8806425b..4781ea6f2 100644
--- a/assets/js/components/HelpModal.vue
+++ b/assets/js/components/HelpModal.vue
@@ -138,9 +138,9 @@
 
 <script>
 import Modal from "bootstrap/js/dist/modal";
-import { docsPrefix } from "../i18n";
-import { performRestart } from "../restart";
-import { isLoggedIn, openLoginModal } from "../auth";
+import { docsPrefix } from "../i18n.js";
+import { performRestart } from "../restart.js";
+import { isLoggedIn, openLoginModal } from "./Auth/auth.js";
 
 export default {
 	name: "HelpModal",
diff --git a/assets/js/components/AnimatedNumber.vue b/assets/js/components/Helper/AnimatedNumber.vue
similarity index 100%
rename from assets/js/components/AnimatedNumber.vue
rename to assets/js/components/Helper/AnimatedNumber.vue
diff --git a/assets/js/components/CustomSelect.vue b/assets/js/components/Helper/CustomSelect.vue
similarity index 100%
rename from assets/js/components/CustomSelect.vue
rename to assets/js/components/Helper/CustomSelect.vue
diff --git a/assets/js/components/FormRow.vue b/assets/js/components/Helper/FormRow.vue
similarity index 100%
rename from assets/js/components/FormRow.vue
rename to assets/js/components/Helper/FormRow.vue
diff --git a/assets/js/components/GenericModal.vue b/assets/js/components/Helper/GenericModal.vue
similarity index 100%
rename from assets/js/components/GenericModal.vue
rename to assets/js/components/Helper/GenericModal.vue
diff --git a/assets/js/components/IconSelectGroup.vue b/assets/js/components/Helper/IconSelectGroup.vue
similarity index 100%
rename from assets/js/components/IconSelectGroup.vue
rename to assets/js/components/Helper/IconSelectGroup.vue
diff --git a/assets/js/components/IconSelectItem.vue b/assets/js/components/Helper/IconSelectItem.vue
similarity index 100%
rename from assets/js/components/IconSelectItem.vue
rename to assets/js/components/Helper/IconSelectItem.vue
diff --git a/assets/js/components/LabelAndValue.vue b/assets/js/components/Helper/LabelAndValue.vue
similarity index 100%
rename from assets/js/components/LabelAndValue.vue
rename to assets/js/components/Helper/LabelAndValue.vue
diff --git a/assets/js/components/MultiSelect.vue b/assets/js/components/Helper/MultiSelect.vue
similarity index 98%
rename from assets/js/components/MultiSelect.vue
rename to assets/js/components/Helper/MultiSelect.vue
index bdf10d716..6a9cf5366 100644
--- a/assets/js/components/MultiSelect.vue
+++ b/assets/js/components/Helper/MultiSelect.vue
@@ -50,7 +50,7 @@
 
 <script>
 import Dropdown from "bootstrap/js/dist/dropdown";
-import deepEqual from "../utils/deepEqual";
+import deepEqual from "../../utils/deepEqual.js";
 export default {
 	name: "MultiSelect",
 	props: {
diff --git a/assets/js/components/SelectGroup.story.vue b/assets/js/components/Helper/SelectGroup.story.vue
similarity index 100%
rename from assets/js/components/SelectGroup.story.vue
rename to assets/js/components/Helper/SelectGroup.story.vue
diff --git a/assets/js/components/SelectGroup.vue b/assets/js/components/Helper/SelectGroup.vue
similarity index 100%
rename from assets/js/components/SelectGroup.vue
rename to assets/js/components/Helper/SelectGroup.vue
diff --git a/assets/js/components/Loadpoint.story.vue b/assets/js/components/Loadpoints/Loadpoint.story.vue
similarity index 100%
rename from assets/js/components/Loadpoint.story.vue
rename to assets/js/components/Loadpoints/Loadpoint.story.vue
diff --git a/assets/js/components/Loadpoint.vue b/assets/js/components/Loadpoints/Loadpoint.vue
similarity index 93%
rename from assets/js/components/Loadpoint.vue
rename to assets/js/components/Loadpoints/Loadpoint.vue
index 2e48b21f3..ed7f3f0a6 100644
--- a/assets/js/components/Loadpoint.vue
+++ b/assets/js/components/Loadpoints/Loadpoint.vue
@@ -93,18 +93,18 @@
 <script>
 import "@h2d2/shopicons/es/regular/lightning";
 import "@h2d2/shopicons/es/regular/adjust";
-import api from "../api";
+import api from "../../api.js";
 import Mode from "./Mode.vue";
-import Vehicle from "./Vehicle.vue";
+import Vehicle from "../Vehicles/Vehicle.vue";
 import Phases from "./Phases.vue";
-import LabelAndValue from "./LabelAndValue.vue";
-import formatter, { POWER_UNIT } from "../mixins/formatter";
-import collector from "../mixins/collector";
-import LoadpointSettingsButton from "./LoadpointSettingsButton.vue";
-import LoadpointSettingsModal from "./LoadpointSettingsModal.vue";
-import VehicleIcon from "./VehicleIcon";
-import LoadpointSessionInfo from "./LoadpointSessionInfo.vue";
-import smartCostAvailable from "../utils/smartCostAvailable";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import formatter, { POWER_UNIT } from "../../mixins/formatter.js";
+import collector from "../../mixins/collector.js";
+import SettingsButton from "./SettingsButton.vue";
+import SettingsModal from "./SettingsModal.vue";
+import VehicleIcon from "../VehicleIcon/index.js";
+import SessionInfo from "./SessionInfo.vue";
+import smartCostAvailable from "../../utils/smartCostAvailable.js";
 import Modal from "bootstrap/js/dist/modal";
 
 export default {
@@ -114,9 +114,9 @@ export default {
 		Vehicle,
 		Phases,
 		LabelAndValue,
-		LoadpointSettingsButton,
-		LoadpointSettingsModal,
-		LoadpointSessionInfo,
+		LoadpointSettingsButton: SettingsButton,
+		LoadpointSettingsModal: SettingsModal,
+		LoadpointSessionInfo: SessionInfo,
 		VehicleIcon,
 	},
 	mixins: [formatter, collector],
@@ -237,10 +237,10 @@ export default {
 			return this.collectProps(Mode);
 		},
 		sessionInfoProps: function () {
-			return this.collectProps(LoadpointSessionInfo);
+			return this.collectProps(SessionInfo);
 		},
 		settingsModal: function () {
-			return this.collectProps(LoadpointSettingsModal);
+			return this.collectProps(SettingsModal);
 		},
 		vehicleProps: function () {
 			return this.collectProps(Vehicle);
diff --git a/assets/js/components/Loadpoints.story.vue b/assets/js/components/Loadpoints/Loadpoints.story.vue
similarity index 100%
rename from assets/js/components/Loadpoints.story.vue
rename to assets/js/components/Loadpoints/Loadpoints.story.vue
diff --git a/assets/js/components/Loadpoints.vue b/assets/js/components/Loadpoints/Loadpoints.vue
similarity index 100%
rename from assets/js/components/Loadpoints.vue
rename to assets/js/components/Loadpoints/Loadpoints.vue
diff --git a/assets/js/components/Mode.story.vue b/assets/js/components/Loadpoints/Mode.story.vue
similarity index 100%
rename from assets/js/components/Mode.story.vue
rename to assets/js/components/Loadpoints/Mode.story.vue
diff --git a/assets/js/components/Mode.vue b/assets/js/components/Loadpoints/Mode.vue
similarity index 100%
rename from assets/js/components/Mode.vue
rename to assets/js/components/Loadpoints/Mode.vue
diff --git a/assets/js/components/Phases.story.vue b/assets/js/components/Loadpoints/Phases.story.vue
similarity index 100%
rename from assets/js/components/Phases.story.vue
rename to assets/js/components/Loadpoints/Phases.story.vue
diff --git a/assets/js/components/Phases.vue b/assets/js/components/Loadpoints/Phases.vue
similarity index 100%
rename from assets/js/components/Phases.vue
rename to assets/js/components/Loadpoints/Phases.vue
diff --git a/assets/js/components/LoadpointSessionInfo.vue b/assets/js/components/Loadpoints/SessionInfo.vue
similarity index 94%
rename from assets/js/components/LoadpointSessionInfo.vue
rename to assets/js/components/Loadpoints/SessionInfo.vue
index 46d6448e9..949dc7484 100644
--- a/assets/js/components/LoadpointSessionInfo.vue
+++ b/assets/js/components/Loadpoints/SessionInfo.vue
@@ -24,10 +24,10 @@
 </template>
 
 <script>
-import LabelAndValue from "./LabelAndValue.vue";
-import formatter from "../mixins/formatter";
-import CustomSelect from "./CustomSelect.vue";
-import { getSessionInfo, setSessionInfo } from "../sessionInfo";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import formatter from "../../mixins/formatter.js";
+import CustomSelect from "../Helper/CustomSelect.vue";
+import { getSessionInfo, setSessionInfo } from "./sessionInfo.js";
 
 export default {
 	name: "LoadpointSessionInfo",
diff --git a/assets/js/components/LoadpointSettingsBatteryBoost.vue b/assets/js/components/Loadpoints/SettingsBatteryBoost.vue
similarity index 97%
rename from assets/js/components/LoadpointSettingsBatteryBoost.vue
rename to assets/js/components/Loadpoints/SettingsBatteryBoost.vue
index b4c40526b..530522fb0 100644
--- a/assets/js/components/LoadpointSettingsBatteryBoost.vue
+++ b/assets/js/components/Loadpoints/SettingsBatteryBoost.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	mixins: [formatter],
diff --git a/assets/js/components/LoadpointSettingsButton.vue b/assets/js/components/Loadpoints/SettingsButton.vue
similarity index 100%
rename from assets/js/components/LoadpointSettingsButton.vue
rename to assets/js/components/Loadpoints/SettingsButton.vue
diff --git a/assets/js/components/LoadpointSettingsModal.vue b/assets/js/components/Loadpoints/SettingsModal.vue
similarity index 95%
rename from assets/js/components/LoadpointSettingsModal.vue
rename to assets/js/components/Loadpoints/SettingsModal.vue
index 652880917..f7fb8fe8c 100644
--- a/assets/js/components/LoadpointSettingsModal.vue
+++ b/assets/js/components/Loadpoints/SettingsModal.vue
@@ -156,11 +156,11 @@
 </template>
 
 <script>
-import collector from "../mixins/collector";
-import formatter from "../mixins/formatter";
-import SmartCostLimit from "./SmartCostLimit.vue";
-import smartCostAvailable from "../utils/smartCostAvailable";
-import LoadpointSettingsBatteryBoost from "./LoadpointSettingsBatteryBoost.vue";
+import collector from "../../mixins/collector.js";
+import formatter from "../../mixins/formatter.js";
+import SmartCostLimit from "../Tariff/SmartCostLimit.vue";
+import smartCostAvailable from "../../utils/smartCostAvailable.js";
+import SettingsBatteryBoost from "./SettingsBatteryBoost.vue";
 
 const V = 230;
 
@@ -179,7 +179,7 @@ const insertSorted = (arr, num) => {
 
 export default {
 	name: "LoadpointSettingsModal",
-	components: { SmartCostLimit, LoadpointSettingsBatteryBoost },
+	components: { SmartCostLimit, LoadpointSettingsBatteryBoost: SettingsBatteryBoost },
 	mixins: [formatter, collector],
 	props: {
 		id: [String, Number],
@@ -226,7 +226,7 @@ export default {
 			return [PHASES_3, PHASES_1];
 		},
 		batteryBoostProps() {
-			return this.collectProps(LoadpointSettingsBatteryBoost);
+			return this.collectProps(SettingsBatteryBoost);
 		},
 		maxPower() {
 			if (this.chargerPhases1p3p) {
diff --git a/assets/js/sessionInfo.js b/assets/js/components/Loadpoints/sessionInfo.js
similarity index 87%
rename from assets/js/sessionInfo.js
rename to assets/js/components/Loadpoints/sessionInfo.js
index 605d8fbb0..434419426 100644
--- a/assets/js/sessionInfo.js
+++ b/assets/js/components/Loadpoints/sessionInfo.js
@@ -1,4 +1,4 @@
-import settings from "./settings";
+import settings from "../../settings.js";
 
 export function getSessionInfo(index, fallback) {
   return settings.sessionInfo[index - 1] || fallback;
diff --git a/assets/js/components/LiveCommunity.story.vue b/assets/js/components/Savings/LiveCommunity.story.vue
similarity index 100%
rename from assets/js/components/LiveCommunity.story.vue
rename to assets/js/components/Savings/LiveCommunity.story.vue
diff --git a/assets/js/components/LiveCommunity.vue b/assets/js/components/Savings/LiveCommunity.vue
similarity index 94%
rename from assets/js/components/LiveCommunity.vue
rename to assets/js/components/Savings/LiveCommunity.vue
index fdf0a22e8..be7183086 100644
--- a/assets/js/components/LiveCommunity.vue
+++ b/assets/js/components/Savings/LiveCommunity.vue
@@ -36,16 +36,16 @@
 </template>
 
 <script>
-import SavingsTile from "./SavingsTile.vue";
+import Tile from "./Tile.vue";
 
-import formatter from "../mixins/formatter";
-import communityApi from "../communityApi";
+import formatter from "../../mixins/formatter.js";
+import communityApi from "./communityApi.js";
 
 const UPDATE_INTERVAL_SECONDS = 10;
 
 export default {
 	name: "LiveCommunity",
-	components: { SavingsTile },
+	components: { SavingsTile: Tile },
 	mixins: [formatter],
 	props: {},
 	data() {
diff --git a/assets/js/components/Savings.story.vue b/assets/js/components/Savings/Savings.story.vue
similarity index 100%
rename from assets/js/components/Savings.story.vue
rename to assets/js/components/Savings/Savings.story.vue
diff --git a/assets/js/components/Savings.vue b/assets/js/components/Savings/Savings.vue
similarity index 95%
rename from assets/js/components/Savings.vue
rename to assets/js/components/Savings/Savings.vue
index 9dc5326c9..cb22c8324 100644
--- a/assets/js/components/Savings.vue
+++ b/assets/js/components/Savings/Savings.vue
@@ -203,20 +203,20 @@
 
 <script>
 import Modal from "bootstrap/js/dist/modal";
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 import Sponsor from "./Sponsor.vue";
-import SavingsTile from "./SavingsTile.vue";
+import Tile from "./Tile.vue";
 import LiveCommunity from "./LiveCommunity.vue";
-import TelemetrySettings from "./TelemetrySettings.vue";
-import CustomSelect from "./CustomSelect.vue";
-import co2Reference from "../co2Reference";
-import settings from "../settings";
-import api from "../api";
-import { docsPrefix } from "../i18n";
+import TelemetrySettings from "../TelemetrySettings.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
+import co2Reference from "./co2Reference.js";
+import settings from "../../settings.js";
+import api from "../../api.js";
+import { docsPrefix } from "../../i18n.js";
 
 export default {
 	name: "Savings",
-	components: { Sponsor, SavingsTile, LiveCommunity, TelemetrySettings, CustomSelect },
+	components: { Sponsor, SavingsTile: Tile, LiveCommunity, TelemetrySettings, CustomSelect },
 	mixins: [formatter],
 	props: {
 		statistics: { type: Object, default: () => ({}) },
diff --git a/assets/js/components/Sponsor.story.vue b/assets/js/components/Savings/Sponsor.story.vue
similarity index 100%
rename from assets/js/components/Sponsor.story.vue
rename to assets/js/components/Savings/Sponsor.story.vue
diff --git a/assets/js/components/Sponsor.vue b/assets/js/components/Savings/Sponsor.vue
similarity index 98%
rename from assets/js/components/Sponsor.vue
rename to assets/js/components/Savings/Sponsor.vue
index 95994dd3e..155915ae4 100644
--- a/assets/js/components/Sponsor.vue
+++ b/assets/js/components/Savings/Sponsor.vue
@@ -66,7 +66,7 @@ import confetti from "canvas-confetti";
 import "@h2d2/shopicons/es/regular/heart";
 import "@h2d2/shopicons/es/regular/stars";
 import "@h2d2/shopicons/es/regular/clock";
-import { docsPrefix } from "../i18n";
+import { docsPrefix } from "../../i18n.js";
 
 export const TRIAL = "trial";
 export const VICTRON_DEVICE = "victron";
diff --git a/assets/js/components/SponsorTokenExpires.story.vue b/assets/js/components/Savings/SponsorTokenExpires.story.vue
similarity index 100%
rename from assets/js/components/SponsorTokenExpires.story.vue
rename to assets/js/components/Savings/SponsorTokenExpires.story.vue
diff --git a/assets/js/components/SponsorTokenExpires.vue b/assets/js/components/Savings/SponsorTokenExpires.vue
similarity index 94%
rename from assets/js/components/SponsorTokenExpires.vue
rename to assets/js/components/Savings/SponsorTokenExpires.vue
index 47d92990c..ba3215bb2 100644
--- a/assets/js/components/SponsorTokenExpires.vue
+++ b/assets/js/components/Savings/SponsorTokenExpires.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 import { TRIAL } from "./Sponsor.vue";
 
 export default {
diff --git a/assets/js/components/SavingsTile.story.vue b/assets/js/components/Savings/Tile.story.vue
similarity index 77%
rename from assets/js/components/SavingsTile.story.vue
rename to assets/js/components/Savings/Tile.story.vue
index 0343852bf..06fdc2479 100644
--- a/assets/js/components/SavingsTile.story.vue
+++ b/assets/js/components/Savings/Tile.story.vue
@@ -1,10 +1,10 @@
 <script setup>
-import SavingsTile from "./SavingsTile.vue";
+import Tile from "./Tile.vue";
 </script>
 
 <template>
 	<Story>
-		<SavingsTile
+		<Tile
 			icon="coinjar"
 			title="Ersparnis"
 			value="14,2"
diff --git a/assets/js/components/SavingsTile.vue b/assets/js/components/Savings/Tile.vue
similarity index 94%
rename from assets/js/components/SavingsTile.vue
rename to assets/js/components/Savings/Tile.vue
index 36972b3c3..03040a115 100644
--- a/assets/js/components/SavingsTile.vue
+++ b/assets/js/components/Savings/Tile.vue
@@ -38,8 +38,8 @@ import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/receivepayment";
 import "@h2d2/shopicons/es/regular/car3";
 import "@h2d2/shopicons/es/regular/eco1";
-import AnimatedNumber from "./AnimatedNumber.vue";
-import formatter from "../mixins/formatter";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "SavingsTile",
diff --git a/assets/js/co2Reference.js b/assets/js/components/Savings/co2Reference.js
similarity index 100%
rename from assets/js/co2Reference.js
rename to assets/js/components/Savings/co2Reference.js
diff --git a/assets/js/communityApi.js b/assets/js/components/Savings/communityApi.js
similarity index 100%
rename from assets/js/communityApi.js
rename to assets/js/components/Savings/communityApi.js
diff --git a/assets/js/components/Sessions/DateNavigator.vue b/assets/js/components/Sessions/DateNavigator.vue
index 0b5a94800..34a180566 100644
--- a/assets/js/components/Sessions/DateNavigator.vue
+++ b/assets/js/components/Sessions/DateNavigator.vue
@@ -94,7 +94,7 @@
 </template>
 
 <script>
-import CustomSelect from "../CustomSelect.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
 import DateNavigatorButton from "./DateNavigatorButton.vue";
 import formatter from "../../mixins/formatter";
 
diff --git a/assets/js/components/Sessions/PeriodSelector.vue b/assets/js/components/Sessions/PeriodSelector.vue
index d951d069b..527a39b34 100644
--- a/assets/js/components/Sessions/PeriodSelector.vue
+++ b/assets/js/components/Sessions/PeriodSelector.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import SelectGroup from "../SelectGroup.vue";
+import SelectGroup from "../Helper/SelectGroup.vue";
 
 export default {
 	name: "PeriodSelector",
diff --git a/assets/js/components/Sessions/SessionDetailsModal.vue b/assets/js/components/Sessions/SessionDetailsModal.vue
index b2d0aee26..f0f8ecfad 100644
--- a/assets/js/components/Sessions/SessionDetailsModal.vue
+++ b/assets/js/components/Sessions/SessionDetailsModal.vue
@@ -198,14 +198,14 @@
 import "@h2d2/shopicons/es/regular/checkmark";
 import Modal from "bootstrap/js/dist/modal";
 import formatter from "../../mixins/formatter";
-import VehicleOptions from "../VehicleOptions.vue";
-import CustomSelect from "../CustomSelect.vue";
+import Options from "../Vehicles/Options.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
 import { distanceUnit, distanceValue } from "../../units";
 import api from "../../api";
 
 export default {
 	name: "SessionDetailsModal",
-	components: { VehicleOptions, CustomSelect },
+	components: { VehicleOptions: Options, CustomSelect },
 	mixins: [formatter],
 	props: {
 		session: Object,
diff --git a/assets/js/components/Sessions/SessionTable.vue b/assets/js/components/Sessions/SessionTable.vue
index 871ab4bf1..1502d5817 100644
--- a/assets/js/components/Sessions/SessionTable.vue
+++ b/assets/js/components/Sessions/SessionTable.vue
@@ -157,7 +157,7 @@
 </template>
 
 <script>
-import CustomSelect from "../CustomSelect.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
 import formatter, { POWER_UNIT } from "../../mixins/formatter";
 import breakpoint from "../../mixins/breakpoint";
 import settings from "../../settings";
diff --git a/assets/js/components/Site.vue b/assets/js/components/Site/Site.vue
similarity index 92%
rename from assets/js/components/Site.vue
rename to assets/js/components/Site/Site.vue
index 164365c84..4479cc5da 100644
--- a/assets/js/components/Site.vue
+++ b/assets/js/components/Site/Site.vue
@@ -64,13 +64,13 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/arrowup";
-import TopNavigation from "./TopNavigation.vue";
-import Notifications from "./Notifications.vue";
-import Energyflow from "./Energyflow/Energyflow.vue";
-import Loadpoints from "./Loadpoints.vue";
-import Footer from "./Footer.vue";
-import formatter from "../mixins/formatter";
-import collector from "../mixins/collector";
+import Navigation from "../Top/Navigation.vue";
+import Notifications from "../Top/Notifications.vue";
+import Energyflow from "../Energyflow/Energyflow.vue";
+import Loadpoints from "../Loadpoints/Loadpoints.vue";
+import Footer from "../Footer/Footer.vue";
+import formatter from "../../mixins/formatter.js";
+import collector from "../../mixins/collector.js";
 import WelcomeIcons from "./WelcomeIcons.vue";
 
 export default {
@@ -80,7 +80,7 @@ export default {
 		Energyflow,
 		Footer,
 		Notifications,
-		TopNavigation,
+		TopNavigation: Navigation,
 		WelcomeIcons,
 	},
 	mixins: [formatter, collector],
@@ -164,7 +164,7 @@ export default {
 		},
 		topNavigation: function () {
 			const vehicleLogins = this.auth ? this.auth.vehicles : {};
-			return { vehicleLogins, ...this.collectProps(TopNavigation) };
+			return { vehicleLogins, ...this.collectProps(Navigation) };
 		},
 		showParkingLot: function () {
 			// work in progess
diff --git a/assets/js/components/WelcomeIcons.vue b/assets/js/components/Site/WelcomeIcons.vue
similarity index 95%
rename from assets/js/components/WelcomeIcons.vue
rename to assets/js/components/Site/WelcomeIcons.vue
index 0e561d966..37fa0ae77 100644
--- a/assets/js/components/WelcomeIcons.vue
+++ b/assets/js/components/Site/WelcomeIcons.vue
@@ -26,9 +26,9 @@ import "@h2d2/shopicons/es/regular/powersupply";
 import "@h2d2/shopicons/es/regular/receivepayment";
 import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/clock";
-import BatteryBoost from "./MaterialIcon/BatteryBoost.vue";
-import SunUp from "./MaterialIcon/SunUp.vue";
-import DynamicPrice from "./MaterialIcon/DynamicPrice.vue";
+import BatteryBoost from "../MaterialIcon/BatteryBoost.vue";
+import SunUp from "../MaterialIcon/SunUp.vue";
+import DynamicPrice from "../MaterialIcon/DynamicPrice.vue";
 import { markRaw } from "vue";
 
 export default {
diff --git a/assets/js/components/SmartCostLimit.vue b/assets/js/components/Tariff/SmartCostLimit.vue
similarity index 98%
rename from assets/js/components/SmartCostLimit.vue
rename to assets/js/components/Tariff/SmartCostLimit.vue
index aed033742..e6e4d5ea1 100644
--- a/assets/js/components/SmartCostLimit.vue
+++ b/assets/js/components/Tariff/SmartCostLimit.vue
@@ -83,10 +83,10 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 import TariffChart from "./TariffChart.vue";
-import { CO2_TYPE } from "../units";
-import api from "../api";
+import { CO2_TYPE } from "../../units.js";
+import api from "../../api.js";
 
 export default {
 	name: "SmartCostLimit",
diff --git a/assets/js/components/TariffChart.vue b/assets/js/components/Tariff/TariffChart.vue
similarity index 97%
rename from assets/js/components/TariffChart.vue
rename to assets/js/components/Tariff/TariffChart.vue
index 23de0d985..b8a90351c 100644
--- a/assets/js/components/TariffChart.vue
+++ b/assets/js/components/Tariff/TariffChart.vue
@@ -54,9 +54,9 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/arrowright";
-import PlanEndIcon from "./MaterialIcon/PlanEnd.vue";
-import formatter from "../mixins/formatter";
-import { CO2_TYPE } from "../units";
+import PlanEndIcon from "../MaterialIcon/PlanEnd.vue";
+import formatter from "../../mixins/formatter.js";
+import { CO2_TYPE } from "../../units.js";
 
 const BAR_WIDTH = 20;
 
diff --git a/assets/js/components/TopHeader.vue b/assets/js/components/Top/Header.vue
similarity index 85%
rename from assets/js/components/TopHeader.vue
rename to assets/js/components/Top/Header.vue
index 254295f20..1aaa327b8 100644
--- a/assets/js/components/TopHeader.vue
+++ b/assets/js/components/Top/Header.vue
@@ -24,14 +24,14 @@
 <script>
 import "@h2d2/shopicons/es/regular/home";
 import "@h2d2/shopicons/es/regular/settings";
-import TopNavigation from "./TopNavigation.vue";
-import collector from "../mixins/collector";
-import store from "../store";
+import Navigation from "./Navigation.vue";
+import collector from "../../mixins/collector.js";
+import store from "../../store.js";
 
 export default {
 	name: "TopHeader",
 	components: {
-		TopNavigation,
+		TopNavigation: Navigation,
 	},
 	mixins: [collector],
 	props: {
@@ -41,7 +41,7 @@ export default {
 	computed: {
 		topNavigation: function () {
 			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
-			return { vehicleLogins, ...this.collectProps(TopNavigation, store.state) };
+			return { vehicleLogins, ...this.collectProps(Navigation, store.state) };
 		},
 	},
 };
diff --git a/assets/js/components/TopNavigation.story.vue b/assets/js/components/Top/Navigation.story.vue
similarity index 82%
rename from assets/js/components/TopNavigation.story.vue
rename to assets/js/components/Top/Navigation.story.vue
index 85dfb6246..7c53e3dae 100644
--- a/assets/js/components/TopNavigation.story.vue
+++ b/assets/js/components/Top/Navigation.story.vue
@@ -1,14 +1,14 @@
 <script setup>
-import TopNavigation from "./TopNavigation.vue";
+import Navigation from "./Navigation.vue";
 </script>
 
 <template>
 	<Story title="Top Navigation">
 		<Variant title="standard">
-			<TopNavigation />
+			<Navigation />
 		</Variant>
 		<Variant title="vehicle logins">
-			<TopNavigation
+			<Navigation
 				:vehicleLogins="{
 					['Mercedes EQS']: {
 						authenticated: true,
@@ -22,7 +22,7 @@ import TopNavigation from "./TopNavigation.vue";
 			/>
 		</Variant>
 		<Variant title="pending vehicle logins">
-			<TopNavigation
+			<Navigation
 				:vehicleLogins="{
 					['Mercedes EQS']: {
 						authenticated: true,
@@ -36,7 +36,7 @@ import TopNavigation from "./TopNavigation.vue";
 			/>
 		</Variant>
 		<Variant title="token expires">
-			<TopNavigation :sponsor="{ expiresSoon: true }" />
+			<Navigation :sponsor="{ expiresSoon: true }" />
 		</Variant>
 	</Story>
 </template>
diff --git a/assets/js/components/TopNavigation.vue b/assets/js/components/Top/Navigation.vue
similarity index 95%
rename from assets/js/components/TopNavigation.vue
rename to assets/js/components/Top/Navigation.vue
index 1678d205b..d66addf9f 100644
--- a/assets/js/components/TopNavigation.vue
+++ b/assets/js/components/Top/Navigation.vue
@@ -130,11 +130,11 @@ import "@h2d2/shopicons/es/regular/gift";
 import "@h2d2/shopicons/es/regular/moonstars";
 import "@h2d2/shopicons/es/regular/menu";
 import "@h2d2/shopicons/es/regular/newtab";
-import collector from "../mixins/collector";
-import { logout, isLoggedIn, openLoginModal } from "../auth";
-import baseAPI from "../baseapi";
-import { isApp, sendToApp } from "../utils/native";
-import { isUserConfigError } from "../utils/fatal";
+import collector from "../../mixins/collector.js";
+import { logout, isLoggedIn, openLoginModal } from "../Auth/auth.js";
+import baseAPI from "./baseapi.js";
+import { isApp, sendToApp } from "../../utils/native.js";
+import { isUserConfigError } from "../../utils/fatal.js";
 
 export default {
 	name: "TopNavigation",
diff --git a/assets/js/components/Notifications.story.vue b/assets/js/components/Top/Notifications.story.vue
similarity index 100%
rename from assets/js/components/Notifications.story.vue
rename to assets/js/components/Top/Notifications.story.vue
diff --git a/assets/js/components/Notifications.vue b/assets/js/components/Top/Notifications.vue
similarity index 98%
rename from assets/js/components/Notifications.vue
rename to assets/js/components/Top/Notifications.vue
index 7b8f5236b..969218f49 100644
--- a/assets/js/components/Notifications.vue
+++ b/assets/js/components/Top/Notifications.vue
@@ -88,7 +88,7 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/exclamationtriangle";
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "Notifications",
diff --git a/assets/js/baseapi.js b/assets/js/components/Top/baseapi.js
similarity index 100%
rename from assets/js/baseapi.js
rename to assets/js/components/Top/baseapi.js
diff --git a/assets/js/components/LimitEnergySelect.vue b/assets/js/components/Vehicles/LimitEnergySelect.vue
similarity index 91%
rename from assets/js/components/LimitEnergySelect.vue
rename to assets/js/components/Vehicles/LimitEnergySelect.vue
index 2322b62bc..53d5397d3 100644
--- a/assets/js/components/LimitEnergySelect.vue
+++ b/assets/js/components/Vehicles/LimitEnergySelect.vue
@@ -34,10 +34,10 @@
 </template>
 
 <script>
-import LabelAndValue from "./LabelAndValue.vue";
-import AnimatedNumber from "./AnimatedNumber.vue";
-import formatter from "../mixins/formatter";
-import { estimatedSoc, energyOptions, optionStep, fmtEnergy } from "../utils/energyOptions";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
+import formatter from "../../mixins/formatter.js";
+import { estimatedSoc, energyOptions, optionStep, fmtEnergy } from "../../utils/energyOptions.js";
 
 export default {
 	name: "LimitEnergySelect",
diff --git a/assets/js/components/LimitSocSelect.vue b/assets/js/components/Vehicles/LimitSocSelect.vue
similarity index 91%
rename from assets/js/components/LimitSocSelect.vue
rename to assets/js/components/Vehicles/LimitSocSelect.vue
index e8b179b3b..3e382316e 100644
--- a/assets/js/components/LimitSocSelect.vue
+++ b/assets/js/components/Vehicles/LimitSocSelect.vue
@@ -20,10 +20,10 @@
 </template>
 
 <script>
-import LabelAndValue from "./LabelAndValue.vue";
-import AnimatedNumber from "./AnimatedNumber.vue";
-import { distanceUnit } from "../units";
-import formatter from "../mixins/formatter";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import AnimatedNumber from "../Helper/AnimatedNumber.vue";
+import { distanceUnit } from "../../units.js";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "LimitSocSelect",
diff --git a/assets/js/components/VehicleOptions.vue b/assets/js/components/Vehicles/Options.vue
similarity index 100%
rename from assets/js/components/VehicleOptions.vue
rename to assets/js/components/Vehicles/Options.vue
diff --git a/assets/js/components/VehicleSoc.vue b/assets/js/components/Vehicles/Soc.vue
similarity index 99%
rename from assets/js/components/VehicleSoc.vue
rename to assets/js/components/Vehicles/Soc.vue
index 3aa5c0fe0..242354087 100644
--- a/assets/js/components/VehicleSoc.vue
+++ b/assets/js/components/Vehicles/Soc.vue
@@ -72,7 +72,7 @@
 <script>
 import Tooltip from "bootstrap/js/dist/tooltip";
 import "@h2d2/shopicons/es/regular/clock";
-import formatter from "../mixins/formatter";
+import formatter from "../../mixins/formatter.js";
 
 export default {
 	name: "VehicleSoc",
diff --git a/assets/js/components/VehicleStatus.story.vue b/assets/js/components/Vehicles/Status.story.vue
similarity index 78%
rename from assets/js/components/VehicleStatus.story.vue
rename to assets/js/components/Vehicles/Status.story.vue
index df3c82b3c..4a7be38f2 100644
--- a/assets/js/components/VehicleStatus.story.vue
+++ b/assets/js/components/Vehicles/Status.story.vue
@@ -1,5 +1,5 @@
 <script setup>
-import VehicleStatus from "./VehicleStatus.vue";
+import Status from "./Status.vue";
 
 function getFutureTime(hours, minutes) {
 	const now = new Date();
@@ -16,54 +16,44 @@ const planProjectedEnd = getFutureTime(5, 43);
 <template>
 	<Story title="VehicleStatus" :layout="{ type: 'grid', iframe: false, width: 320 }">
 		<Variant title="status: disconnected">
-			<VehicleStatus />
+			<Status />
 		</Variant>
 		<Variant title="status: connected">
-			<VehicleStatus connected />
+			<Status connected />
 		</Variant>
 		<Variant title="status: enabled">
-			<VehicleStatus connected enabled />
+			<Status connected enabled />
 		</Variant>
 		<Variant title="status: charging">
-			<VehicleStatus connected charging />
+			<Status connected charging />
 		</Variant>
 		<Variant title="solar: pv enable">
-			<VehicleStatus connected pvAction="enable" :pvRemainingInterpolated="90" />
+			<Status connected pvAction="enable" :pvRemainingInterpolated="90" />
 		</Variant>
 		<Variant title="solar: charging">
-			<VehicleStatus connected enabled charging :sessionSolarPercentage="94" />
+			<Status connected enabled charging :sessionSolarPercentage="94" />
 		</Variant>
 		<Variant title="solar: pv disable">
-			<VehicleStatus connected charging pvAction="disable" :pvRemainingInterpolated="90" />
+			<Status connected charging pvAction="disable" :pvRemainingInterpolated="90" />
 		</Variant>
 		<Variant title="solar: pv reduce phases">
-			<VehicleStatus
-				connected
-				charging
-				phaseAction="scale1p"
-				:phaseRemainingInterpolated="181"
-			/>
+			<Status connected charging phaseAction="scale1p" :phaseRemainingInterpolated="181" />
 		</Variant>
 		<Variant title="solar: pv increase phases">
-			<VehicleStatus
-				connected
-				charging
-				phaseAction="scale3p"
-				:phaseRemainingInterpolated="44"
-			/>
+			<Status connected charging phaseAction="scale3p" :phaseRemainingInterpolated="44" />
 		</Variant>
 		<Variant title="min soc">
-			<VehicleStatus connected charging :minSoc="20" :vehicleSoc="10" />
+			<Status connected charging :minSoc="20" :vehicleSoc="10" />
 		</Variant>
 		<Variant title="plan: start soon">
-			<VehicleStatus
+			<Status
 				connected
 				:effectivePlanTime="effectivePlanTime"
 				:planProjectedStart="planProjectedStart"
 			/>
 		</Variant>
 		<Variant title="plan: start soon, charging">
-			<VehicleStatus
+			<Status
 				connected
 				charging
 				:effectivePlanTime="effectivePlanTime"
@@ -71,7 +61,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="plan: active">
-			<VehicleStatus
+			<Status
 				connected
 				charging
 				planActive
@@ -81,7 +71,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="plan: active, not reachable">
-			<VehicleStatus
+			<Status
 				connected
 				charging
 				planActive
@@ -93,16 +83,16 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="vehicle: climating">
-			<VehicleStatus connected enabled vehicleClimaterActive />
+			<Status connected enabled vehicleClimaterActive />
 		</Variant>
 		<Variant title="vehicle: limit">
-			<VehicleStatus connected enabled :vehicleSoc="33" :vehicleLimitSoc="70" />
+			<Status connected enabled :vehicleSoc="33" :vehicleLimitSoc="70" />
 		</Variant>
 		<Variant title="vehicle: limit reached">
-			<VehicleStatus connected enabled :vehicleSoc="70" :vehicleLimitSoc="70" />
+			<Status connected enabled :vehicleSoc="70" :vehicleLimitSoc="70" />
 		</Variant>
 		<Variant title="vehicle: limit unreachable">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				:vehicleSoc="40"
@@ -111,7 +101,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: clean energy set">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -121,7 +111,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: clean energy next start">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				:smartCostLimit="500"
@@ -130,7 +120,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: clean energy active">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -141,7 +131,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: cheap energy set">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -152,7 +142,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: cheap but not connected">
-			<VehicleStatus
+			<Status
 				currency="EUR"
 				:tariffGrid="0.091"
 				:smartCostLimit="0.12"
@@ -160,7 +150,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: cheap energy next start">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -171,7 +161,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="smart cost: cheap energy active">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -183,7 +173,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="combination: minsoc, cheap">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				charging
@@ -195,7 +185,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="combination: pv disable, plan">
-			<VehicleStatus
+			<Status
 				connected
 				charging
 				pvAction="disable"
@@ -205,7 +195,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="combination: vehicle limit, plan">
-			<VehicleStatus
+			<Status
 				connected
 				charging
 				:sessionSolarPercentage="94"
@@ -216,7 +206,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="combination: maximal">
-			<VehicleStatus
+			<Status
 				connected
 				enabled
 				:sessionSolarPercentage="94"
@@ -232,7 +222,7 @@ const planProjectedEnd = getFutureTime(5, 43);
 			/>
 		</Variant>
 		<Variant title="welcome charge">
-			<VehicleStatus connected charging vehicleWelcomeActive />
+			<Status connected charging vehicleWelcomeActive />
 		</Variant>
 	</Story>
 </template>
diff --git a/assets/js/components/VehicleStatus.test.js b/assets/js/components/Vehicles/Status.test.js
similarity index 98%
rename from assets/js/components/VehicleStatus.test.js
rename to assets/js/components/Vehicles/Status.test.js
index fa56a8f94..ad3f4e50c 100644
--- a/assets/js/components/VehicleStatus.test.js
+++ b/assets/js/components/Vehicles/Status.test.js
@@ -1,6 +1,6 @@
 import { mount, config } from "@vue/test-utils";
 import { describe, expect, test } from "vitest";
-import VehicleStatus from "./VehicleStatus.vue";
+import Status from "./Status.vue";
 
 const serializeData = (data) => (data ? `:${JSON.stringify(data)}` : "");
 config.global.mocks["$t"] = (key, data) => `${key}${serializeData(data)}`;
@@ -21,7 +21,7 @@ const allEntries = {
 const expectEntries = (props, entries) => {
   const expectedEntries = { ...allEntries, ...entries };
 
-  const wrapper = mount(VehicleStatus, { props });
+  const wrapper = mount(Status, { props });
 
   Object.entries(expectedEntries).forEach(([key, value]) => {
     const selector = `[data-testid=vehicle-status-${key}]`;
diff --git a/assets/js/components/VehicleStatus.vue b/assets/js/components/Vehicles/Status.vue
similarity index 94%
rename from assets/js/components/VehicleStatus.vue
rename to assets/js/components/Vehicles/Status.vue
index 0c138b74d..fc366fd3d 100644
--- a/assets/js/components/VehicleStatus.vue
+++ b/assets/js/components/Vehicles/Status.vue
@@ -182,25 +182,25 @@ import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/eco1";
 import "@h2d2/shopicons/es/regular/angledoublerightsmall";
 import "@h2d2/shopicons/es/regular/clock";
-import DynamicPriceIcon from "./MaterialIcon/DynamicPrice.vue";
-import { DEFAULT_LOCALE } from "../i18n";
-import formatter from "../mixins/formatter";
-import { CO2_TYPE } from "../units";
-import ClimaterIcon from "./MaterialIcon/Climater.vue";
-import PlanEndIcon from "./MaterialIcon/PlanEnd.vue";
-import PlanStartIcon from "./MaterialIcon/PlanStart.vue";
-import ReconnectIcon from "./MaterialIcon/Reconnect.vue";
-import RfidWaitIcon from "./MaterialIcon/RfidWait.vue";
-import SunDownIcon from "./MaterialIcon/SunDown.vue";
-import SunUpIcon from "./MaterialIcon/SunUp.vue";
-import TempLimitIcon from "./MaterialIcon/TempLimit.vue";
+import DynamicPriceIcon from "../MaterialIcon/DynamicPrice.vue";
+import { DEFAULT_LOCALE } from "../../i18n.js";
+import formatter from "../../mixins/formatter.js";
+import { CO2_TYPE } from "../../units.js";
+import ClimaterIcon from "../MaterialIcon/Climater.vue";
+import PlanEndIcon from "../MaterialIcon/PlanEnd.vue";
+import PlanStartIcon from "../MaterialIcon/PlanStart.vue";
+import ReconnectIcon from "../MaterialIcon/Reconnect.vue";
+import RfidWaitIcon from "../MaterialIcon/RfidWait.vue";
+import SunDownIcon from "../MaterialIcon/SunDown.vue";
+import SunUpIcon from "../MaterialIcon/SunUp.vue";
+import TempLimitIcon from "../MaterialIcon/TempLimit.vue";
 import Tooltip from "bootstrap/js/dist/tooltip";
-import VehicleLimitIcon from "./MaterialIcon/VehicleLimit.vue";
-import VehicleLimitReachedIcon from "./MaterialIcon/VehicleLimitReached.vue";
-import VehicleLimitWarningIcon from "./MaterialIcon/VehicleLimitWarning.vue";
-import VehicleMinSocIcon from "./MaterialIcon/VehicleMinSoc.vue";
-import WelcomeIcon from "./MaterialIcon/Welcome.vue";
-import BatteryBoostIcon from "./MaterialIcon/BatteryBoost.vue";
+import VehicleLimitIcon from "../MaterialIcon/VehicleLimit.vue";
+import VehicleLimitReachedIcon from "../MaterialIcon/VehicleLimitReached.vue";
+import VehicleLimitWarningIcon from "../MaterialIcon/VehicleLimitWarning.vue";
+import VehicleMinSocIcon from "../MaterialIcon/VehicleMinSoc.vue";
+import WelcomeIcon from "../MaterialIcon/Welcome.vue";
+import BatteryBoostIcon from "../MaterialIcon/BatteryBoost.vue";
 const REASON_AUTH = "waitingforauthorization";
 const REASON_DISCONNECT = "disconnectrequired";
 
diff --git a/assets/js/components/VehicleTitle.vue b/assets/js/components/Vehicles/Title.vue
similarity index 90%
rename from assets/js/components/VehicleTitle.vue
rename to assets/js/components/Vehicles/Title.vue
index b22b91dda..b8245c849 100644
--- a/assets/js/components/VehicleTitle.vue
+++ b/assets/js/components/Vehicles/Title.vue
@@ -55,15 +55,15 @@
 import "@h2d2/shopicons/es/regular/cablecharge";
 import Tooltip from "bootstrap/js/dist/tooltip";
 import Modal from "bootstrap/js/dist/modal";
-import VehicleIcon from "./VehicleIcon";
-import VehicleOptions from "./VehicleOptions.vue";
-import CloudOffline from "./MaterialIcon/CloudOffline.vue";
-import Sync from "./MaterialIcon/Sync.vue";
-import collector from "../mixins/collector";
+import VehicleIcon from "../VehicleIcon/index.js";
+import Options from "./Options.vue";
+import CloudOffline from "../MaterialIcon/CloudOffline.vue";
+import Sync from "../MaterialIcon/Sync.vue";
+import collector from "../../mixins/collector.js";
 
 export default {
 	name: "VehicleTitle",
-	components: { VehicleOptions, VehicleIcon, Sync, CloudOffline },
+	components: { VehicleOptions: Options, VehicleIcon, Sync, CloudOffline },
 	mixins: [collector],
 	props: {
 		connected: Boolean,
@@ -108,7 +108,7 @@ export default {
 			return this.vehicleKnown || this.vehicles.length;
 		},
 		vehicleOptionsProps: function () {
-			return this.collectProps(VehicleOptions);
+			return this.collectProps(Options);
 		},
 	},
 	watch: {
diff --git a/assets/js/components/Vehicle.story.vue b/assets/js/components/Vehicles/Vehicle.story.vue
similarity index 100%
rename from assets/js/components/Vehicle.story.vue
rename to assets/js/components/Vehicles/Vehicle.story.vue
diff --git a/assets/js/components/Vehicle.vue b/assets/js/components/Vehicles/Vehicle.vue
similarity index 91%
rename from assets/js/components/Vehicle.vue
rename to assets/js/components/Vehicles/Vehicle.vue
index 45a947eb7..8e1027483 100644
--- a/assets/js/components/Vehicle.vue
+++ b/assets/js/components/Vehicles/Vehicle.vue
@@ -68,23 +68,23 @@
 </template>
 
 <script>
-import collector from "../mixins/collector";
-import formatter, { POWER_UNIT } from "../mixins/formatter";
-import LabelAndValue from "./LabelAndValue.vue";
-import VehicleTitle from "./VehicleTitle.vue";
-import VehicleSoc from "./VehicleSoc.vue";
-import VehicleStatus from "./VehicleStatus.vue";
-import ChargingPlan from "./ChargingPlan.vue";
+import collector from "../../mixins/collector.js";
+import formatter, { POWER_UNIT } from "../../mixins/formatter.js";
+import LabelAndValue from "../Helper/LabelAndValue.vue";
+import Title from "./Title.vue";
+import Soc from "./Soc.vue";
+import Status from "./Status.vue";
+import ChargingPlan from "../ChargingPlans/ChargingPlan.vue";
 import LimitSocSelect from "./LimitSocSelect.vue";
 import LimitEnergySelect from "./LimitEnergySelect.vue";
-import { distanceUnit, distanceValue } from "../units";
+import { distanceUnit, distanceValue } from "../../units.js";
 
 export default {
 	name: "Vehicle",
 	components: {
-		VehicleTitle,
-		VehicleSoc,
-		VehicleStatus,
+		VehicleTitle: Title,
+		VehicleSoc: Soc,
+		VehicleStatus: Status,
 		LabelAndValue,
 		ChargingPlan,
 		LimitSocSelect,
@@ -164,13 +164,13 @@ export default {
 			return this.vehicle?.minSoc || 0;
 		},
 		vehicleSocProps: function () {
-			return this.collectProps(VehicleSoc);
+			return this.collectProps(Soc);
 		},
 		vehicleStatus: function () {
-			return this.collectProps(VehicleStatus);
+			return this.collectProps(Status);
 		},
 		vehicleTitleProps: function () {
-			return this.collectProps(VehicleTitle);
+			return this.collectProps(Title);
 		},
 		chargingPlan: function () {
 			return this.collectProps(ChargingPlan);
diff --git a/assets/js/router.js b/assets/js/router.js
index 2e5202d3c..f8cceab11 100644
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -1,7 +1,13 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import Modal from "bootstrap/js/dist/modal";
 import { ensureCurrentLocaleMessages } from "./i18n";
-import { openLoginModal, statusUnknown, updateAuthStatus, isLoggedIn, isConfigured } from "./auth";
+import {
+  openLoginModal,
+  statusUnknown,
+  updateAuthStatus,
+  isLoggedIn,
+  isConfigured,
+} from "./components/Auth/auth.js";
 
 function hideAllModals() {
   [...document.querySelectorAll(".modal.show")].forEach((modal) => {
diff --git a/assets/js/views/App.vue b/assets/js/views/App.vue
index 59281eaf9..98a686426 100644
--- a/assets/js/views/App.vue
+++ b/assets/js/views/App.vue
@@ -14,12 +14,12 @@
 
 <script>
 import store from "../store";
-import GlobalSettingsModal from "../components/GlobalSettingsModal.vue";
-import BatterySettingsModal from "../components/BatterySettingsModal.vue";
-import ForecastModal from "../components/ForecastModal.vue";
-import OfflineIndicator from "../components/OfflineIndicator.vue";
-import PasswordModal from "../components/PasswordModal.vue";
-import LoginModal from "../components/LoginModal.vue";
+import GlobalSettingsModal from "../components/GlobalSettings/GlobalSettingsModal.vue";
+import BatterySettingsModal from "../components/Battery/BatterySettingsModal.vue";
+import ForecastModal from "../components/Forecast/ForecastModal.vue";
+import OfflineIndicator from "../components/Footer/OfflineIndicator.vue";
+import PasswordModal from "../components/Auth/PasswordModal.vue";
+import LoginModal from "../components/Auth/LoginModal.vue";
 import HelpModal from "../components/HelpModal.vue";
 import collector from "../mixins/collector";
 
diff --git a/assets/js/views/Config.vue b/assets/js/views/Config.vue
index af085911f..7a6378def 100644
--- a/assets/js/views/Config.vue
+++ b/assets/js/views/Config.vue
@@ -389,7 +389,7 @@ import restart, { performRestart } from "../restart";
 import SponsorModal from "../components/Config/SponsorModal.vue";
 import store from "../store";
 import TariffsModal from "../components/Config/TariffsModal.vue";
-import TopHeader from "../components/TopHeader.vue";
+import Header from "../components/Top/Header.vue";
 import VehicleIcon from "../components/VehicleIcon";
 import VehicleModal from "../components/Config/VehicleModal.vue";
 
@@ -422,7 +422,7 @@ export default {
 		NotificationIcon,
 		SponsorModal,
 		TariffsModal,
-		TopHeader,
+		TopHeader: Header,
 		VehicleIcon,
 		VehicleModal,
 	},
diff --git a/assets/js/views/Energy.vue b/assets/js/views/Energy.vue
index 74e99a156..4e1a6a8c3 100644
--- a/assets/js/views/Energy.vue
+++ b/assets/js/views/Energy.vue
@@ -42,10 +42,10 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import TopHeader from "../components/TopHeader.vue";
-import ForecastChart from "../components/ForecastChart.vue";
-import IconSelectItem from "../components/IconSelectItem.vue";
-import IconSelectGroup from "../components/IconSelectGroup.vue";
+import Header from "../components/Top/Header.vue";
+import Chart from "../components/Forecast/Chart.vue";
+import IconSelectItem from "../components/Helper/IconSelectItem.vue";
+import IconSelectGroup from "../components/Helper/IconSelectGroup.vue";
 import DynamicPriceIcon from "../components/MaterialIcon/DynamicPrice.vue";
 import { type PriceSlot } from "../utils/forecast";
 import formatter from "../mixins/formatter";
@@ -66,10 +66,10 @@ export const TYPES = {
 export default defineComponent({
 	name: "Energy",
 	components: {
-		TopHeader,
+		TopHeader: Header,
 		IconSelectGroup,
 		IconSelectItem,
-		ForecastChart,
+		ForecastChart: Chart,
 	},
 	mixins: [formatter],
 	data() {
diff --git a/assets/js/views/Log.vue b/assets/js/views/Log.vue
index c752972b4..44c9f8168 100644
--- a/assets/js/views/Log.vue
+++ b/assets/js/views/Log.vue
@@ -107,10 +107,10 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/download";
-import TopHeader from "../components/TopHeader.vue";
+import Header from "../components/Top/Header.vue";
 import Play from "../components/MaterialIcon/Play.vue";
 import Record from "../components/MaterialIcon/Record.vue";
-import MultiSelect from "../components/MultiSelect.vue";
+import MultiSelect from "../components/Helper/MultiSelect.vue";
 import api from "../api";
 import store from "../store";
 
@@ -123,7 +123,7 @@ const levelMatcher = new RegExp(`\\[.*?\\] (${LEVELS.map((l) => l.toUpperCase())
 export default {
 	name: "Log",
 	components: {
-		TopHeader,
+		TopHeader: Header,
 		Play,
 		Record,
 		MultiSelect,
diff --git a/assets/js/views/Main.vue b/assets/js/views/Main.vue
index fb8d1abec..d9bb7258d 100644
--- a/assets/js/views/Main.vue
+++ b/assets/js/views/Main.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import Site from "../components/Site.vue";
+import Site from "../components/Site/Site.vue";
 import store from "../store";
 
 export default {
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index be4260fda..121aaab7b 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -208,11 +208,11 @@ import SolarYearChart from "../components/Sessions/SolarYearChart.vue";
 import CostHistoryChart from "../components/Sessions/CostHistoryChart.vue";
 import CostGroupedChart from "../components/Sessions/CostGroupedChart.vue";
 import AvgCostGroupedChart from "../components/Sessions/AvgCostGroupedChart.vue";
-import TopHeader from "../components/TopHeader.vue";
-import IconSelectGroup from "../components/IconSelectGroup.vue";
-import IconSelectItem from "../components/IconSelectItem.vue";
-import SelectGroup from "../components/SelectGroup.vue";
-import CustomSelect from "../components/CustomSelect.vue";
+import Header from "../components/Top/Header.vue";
+import IconSelectGroup from "../components/Helper/IconSelectGroup.vue";
+import IconSelectItem from "../components/Helper/IconSelectItem.vue";
+import SelectGroup from "../components/Helper/SelectGroup.vue";
+import CustomSelect from "../components/Helper/CustomSelect.vue";
 import colors from "../colors";
 import settings from "../settings";
 import PeriodSelector from "../components/Sessions/PeriodSelector.vue";
@@ -225,7 +225,7 @@ export default {
 	components: {
 		SessionDetailsModal,
 		SessionTable,
-		TopHeader,
+		TopHeader: Header,
 		EnergyHistoryChart,
 		EnergyGroupedChart,
 		IconSelectGroup,