diff --git a/web/src/App.tsx b/web/src/App.tsx
index 10746bc..6090e63 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -2,14 +2,14 @@ import { Component } from 'solid-js'
 import { Route, Router } from '@solidjs/router'
 
 import styles from './css/menu.module.css';
-import { Country } from './country/Country';
-import { Cities } from './cities/Cities';
-import { Database } from './database/Database';
-import { Station } from './station/Station';
+import { Country } from './pages/country/Country';
+import { Cities } from './pages/cities/Cities';
+import { Database } from './pages/database/Database';
+import { Station } from './pages/station/Station';
 import { apiHost } from './consts';
 import { WeatherIconStub } from './components/weatherIcons/WeatherIconStub';
-import { Harmonie } from './harmonie/Harmonie'
-import { LvgmcForecast } from './lvgmc-forecast/LvgmcForecast'
+import { Harmonie } from './pages/harmonie/Harmonie'
+import { LvgmcForecast } from './pages/lvgmc-forecast/LvgmcForecast'
 
 console.log("env:", import.meta.env.MODE)
 console.log("api host:", apiHost)
diff --git a/web/src/components/chart/CityChart.tsx b/web/src/components/chart/CityChart.tsx
index 293d33b..06e24ed 100644
--- a/web/src/components/chart/CityChart.tsx
+++ b/web/src/components/chart/CityChart.tsx
@@ -3,7 +3,7 @@ import { Chart } from "chart.js";
 
 import { CityLargeChart } from "./CityLargeChart";
 import { createCustomChart } from "./CustomChart";
-import { DataQuery, formatDateString } from "../../cities/helpers";
+import { DataQuery, formatDateString } from "../../pages/cities/helpers";
 
 export const CityChart: Component<{
     city: () => string;
diff --git a/web/src/components/chart/CityLargeChart.tsx b/web/src/components/chart/CityLargeChart.tsx
index 0574abb..e352d6d 100644
--- a/web/src/components/chart/CityLargeChart.tsx
+++ b/web/src/components/chart/CityLargeChart.tsx
@@ -3,7 +3,7 @@ import { Chart } from "chart.js";
 
 import "../../css/overlay.css"
 import { createCustomChart } from "./CustomChart";
-import { DataQuery, formatDateString } from "../../cities/helpers";
+import { DataQuery, formatDateString } from "../../pages/cities/helpers";
 
 export const CityLargeChart: Component<{
     city: () => string;
diff --git a/web/src/cities/map/MapView.tsx b/web/src/components/map/MapView.tsx
similarity index 95%
rename from web/src/cities/map/MapView.tsx
rename to web/src/components/map/MapView.tsx
index 3cb43c5..e3e1ea0 100644
--- a/web/src/cities/map/MapView.tsx
+++ b/web/src/components/map/MapView.tsx
@@ -4,10 +4,10 @@ import { ResultKeyVal } from "../../consts";
 import { WindInputs, WindSignals } from "./WindInputs";
 
 import arrowUrl from "../../assets/arrow.webp";
-import { cityCoords } from "../../components/cityCoords";
+import { cityCoords } from "../cityCoords";
 import { MapResolution, resolutionProps, windProps, WindProps } from "./mapConsts";
 import { CityData, drawOnMap } from "./canvasDraw";
-import { IconInputs } from "../../components/weatherIcons/IconInputs";
+import { IconInputs } from "../weatherIcons/IconInputs";
 
 export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[] }> = ({ type, data }) => {
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
diff --git a/web/src/cities/map/WindInputs.tsx b/web/src/components/map/WindInputs.tsx
similarity index 100%
rename from web/src/cities/map/WindInputs.tsx
rename to web/src/components/map/WindInputs.tsx
diff --git a/web/src/cities/map/canvasDraw.ts b/web/src/components/map/canvasDraw.ts
similarity index 100%
rename from web/src/cities/map/canvasDraw.ts
rename to web/src/components/map/canvasDraw.ts
diff --git a/web/src/cities/map/mapConsts.ts b/web/src/components/map/mapConsts.ts
similarity index 100%
rename from web/src/cities/map/mapConsts.ts
rename to web/src/components/map/mapConsts.ts
diff --git a/web/src/cities/map/windAngles.ts b/web/src/components/map/windAngles.ts
similarity index 100%
rename from web/src/cities/map/windAngles.ts
rename to web/src/components/map/windAngles.ts
diff --git a/web/src/components/LoadingSpinner.tsx b/web/src/components/spinner/LoadingSpinner.tsx
similarity index 58%
rename from web/src/components/LoadingSpinner.tsx
rename to web/src/components/spinner/LoadingSpinner.tsx
index b2f6fd1..0107be2 100644
--- a/web/src/components/LoadingSpinner.tsx
+++ b/web/src/components/spinner/LoadingSpinner.tsx
@@ -1,10 +1,12 @@
-import { Component } from "solid-js";
+import { Component } from 'solid-js'
+
+import styles from './spinner.module.css'
 
 export const LoadingSpinner: Component<{ text: string; }> = ({ text }) => {
     return (
         <div>
-            <span class="spinner"></span>
+            <span class={styles.spinner}></span>
             <span style={{ "padding-left": "16px" }}>{ text }</span>
         </div>
-    );
+    )
 }
\ No newline at end of file
diff --git a/web/src/css/spinner.css b/web/src/components/spinner/spinner.module.css
similarity index 74%
rename from web/src/css/spinner.css
rename to web/src/components/spinner/spinner.module.css
index 06725d2..0b7ebe3 100644
--- a/web/src/css/spinner.css
+++ b/web/src/components/spinner/spinner.module.css
@@ -2,8 +2,9 @@
     display: inline-block;
     width: 16px;
     height: 16px;
-  }
-  .spinner:after {
+}
+
+.spinner:after {
     content: " ";
     display: block;
     width: 14px;
@@ -13,12 +14,13 @@
     border: 6px solid #333;
     border-color: #333 transparent #333 transparent;
     animation: spinner 1.2s linear infinite;
-  }
-  @keyframes spinner {
+}
+
+@keyframes spinner {
     0% {
-      transform: rotate(0deg);
+        transform: rotate(0deg);
     }
     100% {
-      transform: rotate(360deg);
+        transform: rotate(360deg);
     }
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/src/helpers/interpolateColors.ts b/web/src/helpers/interpolateColors.ts
index 3139d1a..e373fe3 100644
--- a/web/src/helpers/interpolateColors.ts
+++ b/web/src/helpers/interpolateColors.ts
@@ -1,4 +1,4 @@
-import { ColorEntry } from '../harmonie/draw/constants'
+import { ColorEntry } from '../pages/harmonie/draw/constants'
 
 type RGBu8 = [number, number, number]
 type RGBAu8 = [number, number, number, number]
diff --git a/web/src/cities/Cities.tsx b/web/src/pages/cities/Cities.tsx
similarity index 92%
rename from web/src/cities/Cities.tsx
rename to web/src/pages/cities/Cities.tsx
index 055dc07..4454139 100644
--- a/web/src/cities/Cities.tsx
+++ b/web/src/pages/cities/Cities.tsx
@@ -1,9 +1,9 @@
 import moment from "moment";
 import { createSignal } from "solid-js";
 
-import { SelectCity } from "../components/SelectCity";
-import { SelectTimeRange } from "../components/SelectTimeRange";
-import { SelectField } from "../components/SelectField";
+import { SelectCity } from "../../components/SelectCity";
+import { SelectTimeRange } from "../../components/SelectTimeRange";
+import { SelectField } from "../../components/SelectField";
 
 import { SelectGranularity } from "./SelectGranularity";
 import { SelectKey } from "./SelectKey";
diff --git a/web/src/cities/SelectGranularity.tsx b/web/src/pages/cities/SelectGranularity.tsx
similarity index 92%
rename from web/src/cities/SelectGranularity.tsx
rename to web/src/pages/cities/SelectGranularity.tsx
index 7cce69a..f2f8fdb 100644
--- a/web/src/cities/SelectGranularity.tsx
+++ b/web/src/pages/cities/SelectGranularity.tsx
@@ -1,6 +1,6 @@
 import { Accessor, Component, Setter } from "solid-js";
 
-import { aggregateGranularity } from "../consts";
+import { aggregateGranularity } from "../../consts";
 
 export const SelectGranularity: Component<{
     getGranularity: Accessor<string>,
diff --git a/web/src/cities/SelectKey.tsx b/web/src/pages/cities/SelectKey.tsx
similarity index 93%
rename from web/src/cities/SelectKey.tsx
rename to web/src/pages/cities/SelectKey.tsx
index c1776f9..dbfd4df 100644
--- a/web/src/cities/SelectKey.tsx
+++ b/web/src/pages/cities/SelectKey.tsx
@@ -1,6 +1,6 @@
 import { Accessor, Component, Setter } from "solid-js";
 
-import { aggregateKey } from "../consts";
+import { aggregateKey } from "../../consts";
 
 export const SelectKey: Component<{
     getKey: Accessor<string>,
diff --git a/web/src/cities/SelectOrder.tsx b/web/src/pages/cities/SelectOrder.tsx
similarity index 91%
rename from web/src/cities/SelectOrder.tsx
rename to web/src/pages/cities/SelectOrder.tsx
index 150596d..3636685 100644
--- a/web/src/cities/SelectOrder.tsx
+++ b/web/src/pages/cities/SelectOrder.tsx
@@ -1,5 +1,5 @@
 import { Accessor, Component, Setter } from "solid-js";
-import { resultOrder, ResultOrderKeys } from "../consts";
+import { resultOrder, ResultOrderKeys } from "../../consts";
 
 export const SelectOrder: Component<{
     getter: Accessor<ResultOrderKeys>,
diff --git a/web/src/cities/helpers.ts b/web/src/pages/cities/helpers.ts
similarity index 100%
rename from web/src/cities/helpers.ts
rename to web/src/pages/cities/helpers.ts
diff --git a/web/src/cities/result/GridResult.tsx b/web/src/pages/cities/result/GridResult.tsx
similarity index 94%
rename from web/src/cities/result/GridResult.tsx
rename to web/src/pages/cities/result/GridResult.tsx
index 0a5be63..63bdb5b 100644
--- a/web/src/cities/result/GridResult.tsx
+++ b/web/src/pages/cities/result/GridResult.tsx
@@ -1,6 +1,6 @@
 import { Component, Match, Switch } from "solid-js";
 
-import { CityChart } from "../../components/chart/CityChart";
+import { CityChart } from "../../../components/chart/CityChart";
 import { DataQuery } from "../helpers";
 
 export const GridResult: Component<{ city: string, query: DataQuery, result: any }> = ({ city, query, result }) => {
diff --git a/web/src/cities/result/QueryView.tsx b/web/src/pages/cities/result/QueryView.tsx
similarity index 90%
rename from web/src/cities/result/QueryView.tsx
rename to web/src/pages/cities/result/QueryView.tsx
index 46c827e..b902eaf 100644
--- a/web/src/cities/result/QueryView.tsx
+++ b/web/src/pages/cities/result/QueryView.tsx
@@ -1,10 +1,10 @@
-import moment from "moment";
+import moment from 'moment'
 import { Accessor, Component, createResource, createSignal } from "solid-js";
 
-import "../../css/Result.css"
-import { FETCH_DELAY_MS, apiHost } from "../../consts";
+import "../../../css/Result.css"
+import { FETCH_DELAY_MS, apiHost } from "../../../consts";
 import { isQueryResult } from "../helpers";
-import { LoadingSpinner } from "../../components/LoadingSpinner";
+import { LoadingSpinner } from "../../../components/spinner/LoadingSpinner";
 import { ResultView } from "./ResultView";
 
 export const QueryView: Component<{
diff --git a/web/src/cities/result/ResultView.tsx b/web/src/pages/cities/result/ResultView.tsx
similarity index 97%
rename from web/src/cities/result/ResultView.tsx
rename to web/src/pages/cities/result/ResultView.tsx
index 0c90f2a..87356dc 100644
--- a/web/src/cities/result/ResultView.tsx
+++ b/web/src/pages/cities/result/ResultView.tsx
@@ -1,10 +1,10 @@
 import { Component, createSignal, JSXElement, Resource, Show } from "solid-js";
 
-import "../../css/Result.css"
-import { ResultKeyVal, resultOrder, ResultOrderKeys } from "../../consts";
+import "../../../css/Result.css"
+import { ResultKeyVal, resultOrder, ResultOrderKeys } from "../../../consts";
 import { SelectOrder } from "../SelectOrder";
 import { QueryResult } from "../helpers";
-import { MapView } from "../map/MapView";
+import { MapView } from "../../../components/map/MapView";
 import { GridResult } from "./GridResult";
 
 type ResultView = "grid" | "list" | "map_1920x1080" | "map_1920x1080_wind" | "map_3840x1440" | "map_3840x1440_wind";
diff --git a/web/src/country/Country.tsx b/web/src/pages/country/Country.tsx
similarity index 92%
rename from web/src/country/Country.tsx
rename to web/src/pages/country/Country.tsx
index 7867a01..ac8c972 100644
--- a/web/src/country/Country.tsx
+++ b/web/src/pages/country/Country.tsx
@@ -2,8 +2,8 @@ import moment from "moment";
 import { createSignal } from "solid-js";
 
 import { QueryResult } from "./result/QueryResult";
-import { SelectTimeRange } from "../components/SelectTimeRange";
-import { weatherFieldNumeric } from "../consts";
+import { SelectTimeRange } from "../../components/SelectTimeRange";
+import { weatherFieldNumeric } from "../../consts";
 import { MultiSelectField } from "./MultiSelectField";
 
 const nowRounded = new Date(new Date().setMinutes(30));
diff --git a/web/src/country/MultiSelectField.tsx b/web/src/pages/country/MultiSelectField.tsx
similarity index 96%
rename from web/src/country/MultiSelectField.tsx
rename to web/src/pages/country/MultiSelectField.tsx
index d6c4bc0..972fac7 100644
--- a/web/src/country/MultiSelectField.tsx
+++ b/web/src/pages/country/MultiSelectField.tsx
@@ -1,5 +1,5 @@
 import { Accessor, Component, Setter } from "solid-js";
-import { weatherFieldNumeric } from "../consts";
+import { weatherFieldNumeric } from "../../consts";
 
 export const MultiSelectField: Component<{
     getFields: Accessor<string[]>,
diff --git a/web/src/country/result/QueryResult.tsx b/web/src/pages/country/result/QueryResult.tsx
similarity index 92%
rename from web/src/country/result/QueryResult.tsx
rename to web/src/pages/country/result/QueryResult.tsx
index d4fddd8..1e3369d 100644
--- a/web/src/country/result/QueryResult.tsx
+++ b/web/src/pages/country/result/QueryResult.tsx
@@ -1,9 +1,9 @@
 import moment from "moment";
 import { Accessor, Component, createResource, createSignal } from "solid-js";
 
-import { FETCH_DELAY_MS, apiHost } from "../../consts";
+import { FETCH_DELAY_MS, apiHost } from "../../../consts";
 import { Result } from "./Result";
-import { LoadingSpinner } from "../../components/LoadingSpinner";
+import { LoadingSpinner } from "../../../components/spinner/LoadingSpinner";
 
 
 export const QueryResult: Component<{
diff --git a/web/src/country/result/Result.tsx b/web/src/pages/country/result/Result.tsx
similarity index 100%
rename from web/src/country/result/Result.tsx
rename to web/src/pages/country/result/Result.tsx
diff --git a/web/src/database/Calendar.tsx b/web/src/pages/database/Calendar.tsx
similarity index 98%
rename from web/src/database/Calendar.tsx
rename to web/src/pages/database/Calendar.tsx
index c217ead..ef1916b 100644
--- a/web/src/database/Calendar.tsx
+++ b/web/src/pages/database/Calendar.tsx
@@ -1,7 +1,7 @@
 import moment from "moment";
 import { Accessor, Component, Setter } from "solid-js";
 
-import "../css/calendar.css";
+import "../../css/calendar.css";
 
 export const Calendar: Component<{
     getSelectedDate: Accessor<Date>,
diff --git a/web/src/database/Database.tsx b/web/src/pages/database/Database.tsx
similarity index 96%
rename from web/src/database/Database.tsx
rename to web/src/pages/database/Database.tsx
index 2c6216f..c27b300 100644
--- a/web/src/database/Database.tsx
+++ b/web/src/pages/database/Database.tsx
@@ -1,7 +1,7 @@
 import moment from "moment";
 import { createSignal } from "solid-js";
 
-import "../css/FileManager.css"
+import "../../css/FileManager.css"
 import { DateList } from "./DateList";
 import { FetchFiles } from "./FetchFiles";
 import { FileContent } from "./FileContent";
diff --git a/web/src/database/DateList.tsx b/web/src/pages/database/DateList.tsx
similarity index 87%
rename from web/src/database/DateList.tsx
rename to web/src/pages/database/DateList.tsx
index 34096c3..c575db9 100644
--- a/web/src/database/DateList.tsx
+++ b/web/src/pages/database/DateList.tsx
@@ -1,11 +1,9 @@
-import moment from "moment";
-import { Accessor, Component, createResource, createSignal, Setter } from "solid-js";
+import moment from "moment"
+import { Accessor, Component, createResource, createSignal, Setter } from "solid-js"
 
-import { apiHost, FETCH_DELAY_MS } from "../consts";
-
-import "../css/spinner.css";
-import { Calendar } from "./Calendar";
-import { LoadingSpinner } from "../components/LoadingSpinner";
+import { apiHost, FETCH_DELAY_MS } from "../../consts"
+import { Calendar } from "./Calendar"
+import { LoadingSpinner } from "../../components/spinner/LoadingSpinner"
 
 export const DateList: Component<{getDate: Accessor<Date>, setDate: Setter<Date>;}> = (props) => {
     const [getCurrentMonth, setCurrentMonth] = createSignal(new Date());
diff --git a/web/src/database/FetchFiles.tsx b/web/src/pages/database/FetchFiles.tsx
similarity index 98%
rename from web/src/database/FetchFiles.tsx
rename to web/src/pages/database/FetchFiles.tsx
index 9ca178c..89237d1 100644
--- a/web/src/database/FetchFiles.tsx
+++ b/web/src/pages/database/FetchFiles.tsx
@@ -1,6 +1,6 @@
 import moment from "moment";
 import { createSignal } from "solid-js";
-import { apiHost } from "../consts";
+import { apiHost } from "../../consts";
 
 export function FetchFiles() {
     const [getStart, setStart] = createSignal(new Date());
diff --git a/web/src/database/FileContent.tsx b/web/src/pages/database/FileContent.tsx
similarity index 88%
rename from web/src/database/FileContent.tsx
rename to web/src/pages/database/FileContent.tsx
index c791457..8d98bbb 100644
--- a/web/src/database/FileContent.tsx
+++ b/web/src/pages/database/FileContent.tsx
@@ -1,7 +1,7 @@
 import { Accessor, Component, createResource, JSXElement } from "solid-js";
-import { apiHost, FETCH_DELAY_MS } from "../consts";
+import { apiHost, FETCH_DELAY_MS } from "../../consts";
 import { PrettifyCSV } from "./PrettifyCSV";
-import { LoadingSpinner } from "../components/LoadingSpinner";
+import { LoadingSpinner } from "../../components/spinner/LoadingSpinner";
 
 export const FileContent: Component<{getFileName: Accessor<string>}> = (props) => {
     const fetchFileContent = async (fileName: string) => {
diff --git a/web/src/database/FileNameList.tsx b/web/src/pages/database/FileNameList.tsx
similarity index 87%
rename from web/src/database/FileNameList.tsx
rename to web/src/pages/database/FileNameList.tsx
index db7d6d1..54d8690 100644
--- a/web/src/database/FileNameList.tsx
+++ b/web/src/pages/database/FileNameList.tsx
@@ -1,9 +1,7 @@
-import moment from "moment";
-import { Accessor, Component, createResource, Setter } from "solid-js";
-import { apiHost, FETCH_DELAY_MS } from "../consts";
-
-import "../css/spinner.css";
-import { LoadingSpinner } from "../components/LoadingSpinner";
+import moment from "moment"
+import { Accessor, Component, createResource, Setter } from "solid-js"
+import { apiHost, FETCH_DELAY_MS } from "../../consts"
+import { LoadingSpinner } from "../../components/spinner/LoadingSpinner"
 
 export const FileNameList: Component<{
     getDate: Accessor<Date>,
diff --git a/web/src/database/PrettifyCSV.tsx b/web/src/pages/database/PrettifyCSV.tsx
similarity index 100%
rename from web/src/database/PrettifyCSV.tsx
rename to web/src/pages/database/PrettifyCSV.tsx
diff --git a/web/src/harmonie/DrawView.tsx b/web/src/pages/harmonie/DrawView.tsx
similarity index 95%
rename from web/src/harmonie/DrawView.tsx
rename to web/src/pages/harmonie/DrawView.tsx
index 416a41c..dad998a 100644
--- a/web/src/harmonie/DrawView.tsx
+++ b/web/src/pages/harmonie/DrawView.tsx
@@ -1,6 +1,6 @@
 import { Component, createEffect, Signal } from 'solid-js'
 
-import { LoadingSpinner } from '../components/LoadingSpinner'
+import { LoadingSpinner } from '../../components/spinner/LoadingSpinner'
 import { CROP_BOUNDS, DrawOptions, GribMessage } from './interfaces'
 import { drawGrib } from './draw/drawGrib'
 
diff --git a/web/src/harmonie/GribFile.tsx b/web/src/pages/harmonie/GribFile.tsx
similarity index 100%
rename from web/src/harmonie/GribFile.tsx
rename to web/src/pages/harmonie/GribFile.tsx
diff --git a/web/src/harmonie/Harmonie.tsx b/web/src/pages/harmonie/Harmonie.tsx
similarity index 100%
rename from web/src/harmonie/Harmonie.tsx
rename to web/src/pages/harmonie/Harmonie.tsx
diff --git a/web/src/harmonie/ReferenceTimes.tsx b/web/src/pages/harmonie/ReferenceTimes.tsx
similarity index 98%
rename from web/src/harmonie/ReferenceTimes.tsx
rename to web/src/pages/harmonie/ReferenceTimes.tsx
index ef59774..45c8bfe 100644
--- a/web/src/harmonie/ReferenceTimes.tsx
+++ b/web/src/pages/harmonie/ReferenceTimes.tsx
@@ -5,7 +5,7 @@ import { fetchGribBinaries } from './fetchGrib'
 import { drawGrib } from './draw/drawGrib'
 
 import styles from './harmonie.module.css'
-import { processPromisesInBatches } from '../helpers/progressivePromises'
+import { processPromisesInBatches } from '../../helpers/progressivePromises'
 
 const METEO_PARAMS: [string, MeteoParam][] = [
     ['temperature', { discipline: 0, category: 0, product: 0, levelType: -1, levelValue: -1, subType: 'now' }],
diff --git a/web/src/harmonie/SlideShow.tsx b/web/src/pages/harmonie/SlideShow.tsx
similarity index 98%
rename from web/src/harmonie/SlideShow.tsx
rename to web/src/pages/harmonie/SlideShow.tsx
index 7be8863..ce85bf5 100644
--- a/web/src/harmonie/SlideShow.tsx
+++ b/web/src/pages/harmonie/SlideShow.tsx
@@ -1,7 +1,7 @@
 import { Accessor, Component, createEffect, createSignal, onMount } from 'solid-js'
 
 import styles from './harmonie.module.css'
-import { downloadImagesAsZip } from '../helpers/download'
+import { downloadImagesAsZip } from '../../helpers/download'
 
 export const SlideShow: Component<{
     getIsLoading: Accessor<boolean>,
diff --git a/web/src/harmonie/draw/bitmask.ts b/web/src/pages/harmonie/draw/bitmask.ts
similarity index 94%
rename from web/src/harmonie/draw/bitmask.ts
rename to web/src/pages/harmonie/draw/bitmask.ts
index 72629ce..bf6e088 100644
--- a/web/src/harmonie/draw/bitmask.ts
+++ b/web/src/pages/harmonie/draw/bitmask.ts
@@ -1,4 +1,4 @@
-import { u8ToBits } from '../../helpers/u8ToBits.js'
+import { u8ToBits } from '../../../helpers/u8ToBits.js'
 import { MeteoGrid } from '../interfaces.js'
 
 export function applyBitmask(
diff --git a/web/src/harmonie/draw/bounds.ts b/web/src/pages/harmonie/draw/bounds.ts
similarity index 100%
rename from web/src/harmonie/draw/bounds.ts
rename to web/src/pages/harmonie/draw/bounds.ts
diff --git a/web/src/harmonie/draw/categoricalRain.ts b/web/src/pages/harmonie/draw/categoricalRain.ts
similarity index 100%
rename from web/src/harmonie/draw/categoricalRain.ts
rename to web/src/pages/harmonie/draw/categoricalRain.ts
diff --git a/web/src/harmonie/draw/constants.ts b/web/src/pages/harmonie/draw/constants.ts
similarity index 100%
rename from web/src/harmonie/draw/constants.ts
rename to web/src/pages/harmonie/draw/constants.ts
diff --git a/web/src/harmonie/draw/drawGrib.ts b/web/src/pages/harmonie/draw/drawGrib.ts
similarity index 98%
rename from web/src/harmonie/draw/drawGrib.ts
rename to web/src/pages/harmonie/draw/drawGrib.ts
index 0e0de64..ea4e844 100644
--- a/web/src/harmonie/draw/drawGrib.ts
+++ b/web/src/pages/harmonie/draw/drawGrib.ts
@@ -1,4 +1,4 @@
-import { interpolateColors } from '../../helpers/interpolateColors'
+import { interpolateColors } from '../../../helpers/interpolateColors'
 import { CropBounds, GribMessage, MeteoParam } from '../interfaces'
 import { applyBitmask } from './bitmask'
 import { extractFromBounds } from './bounds'
@@ -7,7 +7,7 @@ import { hourPrecipitationColors, precipitationColors } from './precipitation'
 import { temperatureColors } from './temperature'
 import { isCalculatedWindDirection, windDirectionArrows, windDirectionColors, windSpeedColors } from './windDirection'
 
-import latvia_border from '../../assets/latvia_contour.webp'
+import latvia_border from '../../../assets/latvia_contour.webp'
 const latviaBoderImg = new Image()
 latviaBoderImg.onload = () => console.log('latvia_contour loaded...')
 latviaBoderImg.src = latvia_border
diff --git a/web/src/harmonie/draw/precipitation.ts b/web/src/pages/harmonie/draw/precipitation.ts
similarity index 97%
rename from web/src/harmonie/draw/precipitation.ts
rename to web/src/pages/harmonie/draw/precipitation.ts
index 874b6e7..e99270b 100644
--- a/web/src/harmonie/draw/precipitation.ts
+++ b/web/src/pages/harmonie/draw/precipitation.ts
@@ -1,9 +1,9 @@
 import moment from 'moment'
-import { valueToColorInterpolated, valueToColorThreshold } from '../../helpers/interpolateColors'
+import { valueToColorInterpolated, valueToColorThreshold } from '../../../helpers/interpolateColors'
 import { GribMessage, MeteoConversion } from '../interfaces'
 import { PRECIPITATION } from './constants'
-import { fetchBuffer } from '../../helpers/fetch'
-import { apiHost } from '../../consts'
+import { fetchBuffer } from '../../../helpers/fetch'
+import { apiHost } from '../../../consts'
 
 
 export function precipitationColors(
diff --git a/web/src/harmonie/draw/temperature.ts b/web/src/pages/harmonie/draw/temperature.ts
similarity index 94%
rename from web/src/harmonie/draw/temperature.ts
rename to web/src/pages/harmonie/draw/temperature.ts
index 79ab289..7e4f6c3 100644
--- a/web/src/harmonie/draw/temperature.ts
+++ b/web/src/pages/harmonie/draw/temperature.ts
@@ -1,4 +1,4 @@
-import { valueToColorInterpolated, valueToColorThreshold } from '../../helpers/interpolateColors'
+import { valueToColorInterpolated, valueToColorThreshold } from '../../../helpers/interpolateColors'
 import { MeteoConversion } from '../interfaces'
 import { TEMPERATURES } from './constants'
 
diff --git a/web/src/harmonie/draw/windDirection.ts b/web/src/pages/harmonie/draw/windDirection.ts
similarity index 98%
rename from web/src/harmonie/draw/windDirection.ts
rename to web/src/pages/harmonie/draw/windDirection.ts
index d510677..379a680 100644
--- a/web/src/harmonie/draw/windDirection.ts
+++ b/web/src/pages/harmonie/draw/windDirection.ts
@@ -1,6 +1,6 @@
-import { apiHost } from '../../consts'
-import { fetchBuffer } from '../../helpers/fetch'
-import { valueToColorInterpolated, valueToColorThreshold } from '../../helpers/interpolateColors'
+import { apiHost } from '../../../consts'
+import { fetchBuffer } from '../../../helpers/fetch'
+import { valueToColorInterpolated, valueToColorThreshold } from '../../../helpers/interpolateColors'
 import { CropBounds, GribMessage, MeteoConversion } from '../interfaces'
 import { WIND_SPEED } from './constants'
 import { drawRotate, flipCanvasV } from './drawGrib'
diff --git a/web/src/harmonie/draw/windRotate.ts b/web/src/pages/harmonie/draw/windRotate.ts
similarity index 100%
rename from web/src/harmonie/draw/windRotate.ts
rename to web/src/pages/harmonie/draw/windRotate.ts
diff --git a/web/src/harmonie/fetchGrib.ts b/web/src/pages/harmonie/fetchGrib.ts
similarity index 96%
rename from web/src/harmonie/fetchGrib.ts
rename to web/src/pages/harmonie/fetchGrib.ts
index 91781a3..fee1d15 100644
--- a/web/src/harmonie/fetchGrib.ts
+++ b/web/src/pages/harmonie/fetchGrib.ts
@@ -1,5 +1,5 @@
-import { apiHost } from '../consts'
-import { fetchBuffer, fetchJson } from '../helpers/fetch'
+import { apiHost } from '../../consts'
+import { fetchBuffer, fetchJson } from '../../helpers/fetch'
 import { getFakeHourPrecipitation, isPrecipitation } from './draw/precipitation'
 import { getFakeWindDirection, isWindSpeed } from './draw/windDirection'
 import { GribMessage } from './interfaces'
diff --git a/web/src/harmonie/harmonie.module.css b/web/src/pages/harmonie/harmonie.module.css
similarity index 100%
rename from web/src/harmonie/harmonie.module.css
rename to web/src/pages/harmonie/harmonie.module.css
diff --git a/web/src/harmonie/interfaces.ts b/web/src/pages/harmonie/interfaces.ts
similarity index 100%
rename from web/src/harmonie/interfaces.ts
rename to web/src/pages/harmonie/interfaces.ts
diff --git a/web/src/lvgmc-forecast/CsvMapData.tsx b/web/src/pages/lvgmc-forecast/CsvMapData.tsx
similarity index 85%
rename from web/src/lvgmc-forecast/CsvMapData.tsx
rename to web/src/pages/lvgmc-forecast/CsvMapData.tsx
index 55595be..ae62f58 100644
--- a/web/src/lvgmc-forecast/CsvMapData.tsx
+++ b/web/src/pages/lvgmc-forecast/CsvMapData.tsx
@@ -1,13 +1,13 @@
 import { Component, createSignal, onMount } from 'solid-js'
-import { apiHost } from '../consts'
-import { fetchText } from '../helpers/fetch'
-import { codeToIcon } from '../components/weatherIcons/iconConsts'
-import { cityCoords } from '../components/cityCoords'
-import { CityData, drawOnMap } from '../cities/map/canvasDraw'
+import { apiHost } from '../../consts'
+import { fetchText } from '../../helpers/fetch'
+import { codeToIcon } from '../../components/weatherIcons/iconConsts'
+import { cityCoords } from '../../components/cityCoords'
+import { CityData, drawOnMap } from '../../components/map/canvasDraw'
 import { citiesToShow, csvCityListInOrder } from './consts'
 
-import arrowUrl from '../assets/arrow.webp'
-import { resolutionProps, windProps, WindProps } from '../cities/map/mapConsts'
+import arrowUrl from '../../assets/arrow.webp'
+import { resolutionProps, windProps, WindProps } from '../../components/map/mapConsts'
 
 export const CsvMapData: Component<{
     csvUrl: string,
diff --git a/web/src/lvgmc-forecast/LvgmcForecast.tsx b/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx
similarity index 83%
rename from web/src/lvgmc-forecast/LvgmcForecast.tsx
rename to web/src/pages/lvgmc-forecast/LvgmcForecast.tsx
index 246cc35..17153b3 100644
--- a/web/src/lvgmc-forecast/LvgmcForecast.tsx
+++ b/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'solid-js'
 
-import dayBgMap from '../assets/map_3840x1440_wind.webp'
-import nightBgMap from '../assets/map_night_3840x1440_wind.webp'
+import dayBgMap from '../../assets/map_3840x1440_wind.webp'
+import nightBgMap from '../../assets/map_night_3840x1440_wind.webp'
 import { CsvMapData } from './CsvMapData'
 
 //  Eiropa_LTV_pilsetas_nakama_dn.csv
diff --git a/web/src/lvgmc-forecast/consts.ts b/web/src/pages/lvgmc-forecast/consts.ts
similarity index 100%
rename from web/src/lvgmc-forecast/consts.ts
rename to web/src/pages/lvgmc-forecast/consts.ts
diff --git a/web/src/station/MapResult.tsx b/web/src/pages/station/MapResult.tsx
similarity index 94%
rename from web/src/station/MapResult.tsx
rename to web/src/pages/station/MapResult.tsx
index 427eb6d..b508de8 100644
--- a/web/src/station/MapResult.tsx
+++ b/web/src/pages/station/MapResult.tsx
@@ -1,11 +1,11 @@
 import { Accessor, Component, Setter, createEffect, createResource, createSignal, onMount } from "solid-js";
 
 import { coordToCity } from "./coordToCity";
-import mapUrl from "../assets/map_1000x570.webp";
+import mapUrl from "../../assets/map_1000x570.webp";
 import moment from "moment";
-import { FETCH_DELAY_MS, apiHost, cityList } from "../consts";
-import { LoadingSpinner } from "../components/LoadingSpinner";
-import { cityCoords } from "../components/cityCoords";
+import { FETCH_DELAY_MS, apiHost, cityList } from "../../consts";
+import { LoadingSpinner } from "../../components/spinner/LoadingSpinner";
+import { cityCoords } from "../../components/cityCoords";
 
 export const MapResult: Component<{
     setCity: Setter<string | undefined>,
diff --git a/web/src/station/Result.tsx b/web/src/pages/station/Result.tsx
similarity index 86%
rename from web/src/station/Result.tsx
rename to web/src/pages/station/Result.tsx
index 1033b8d..e2866b8 100644
--- a/web/src/station/Result.tsx
+++ b/web/src/pages/station/Result.tsx
@@ -1,7 +1,8 @@
 import { Accessor, Component, createResource } from "solid-js";
-import { FETCH_DELAY_MS, apiHost } from "../consts";
+import { FETCH_DELAY_MS, apiHost } from "../../consts";
 import moment from "moment";
-import { CityChart } from "../components/chart/CityChart";
+import { CityChart } from "../../components/chart/CityChart";
+import { LoadingSpinner } from '../../components/spinner/LoadingSpinner'
 
 export const Result: Component<{
     getCity: Accessor<string | undefined>,
@@ -49,12 +50,7 @@ export const Result: Component<{
             }
 
             { /* City weather field as chart  */}
-            { listResource.loading && (
-                <div>
-                    <span class="spinner"></span>
-                    <span style={{ "padding-left": "16px" }}>Loading chart</span>
-                </div>
-            )}
+            { listResource.loading && <LoadingSpinner text="Loading chart" /> }
             { listResource.error && (
                 <div>Error while querying: ${listResource.error}</div>
             )}
@@ -73,12 +69,7 @@ export const Result: Component<{
             }
 
             { /* City all weather fields with double values */}
-            { meteoResource.loading && (
-                <div>
-                    <span class="spinner"></span>
-                    <span style={{ "padding-left": "16px" }}>Loading meteo data</span>
-                </div>
-            )}
+            { meteoResource.loading && <LoadingSpinner text="Loading meteo data" /> }
             { meteoResource.error && (
                 <div>Error while querying: ${meteoResource.error}</div>
             )}
diff --git a/web/src/station/Station.tsx b/web/src/pages/station/Station.tsx
similarity index 93%
rename from web/src/station/Station.tsx
rename to web/src/pages/station/Station.tsx
index 10bcee6..78923e9 100644
--- a/web/src/station/Station.tsx
+++ b/web/src/pages/station/Station.tsx
@@ -1,12 +1,12 @@
 import { Component, batch, createSignal } from "solid-js";
 import moment from "moment";
 
-import { SelectCity } from "../components/SelectCity";
-import { SelectField } from "../components/SelectField";
+import { SelectCity } from "../../components/SelectCity";
+import { SelectField } from "../../components/SelectField";
 import { Result } from "./Result";
 import { MapResult } from "./MapResult";
-import "../css/station.css"
-import { Spacer } from "../components/Spacer";
+import "../../css/station.css"
+import { Spacer } from "../../components/Spacer";
 
 export const Station: Component<{}> = () => {
     const [getShowCities, setShowCities] = createSignal(false);
diff --git a/web/src/station/coordToCity.ts b/web/src/pages/station/coordToCity.ts
similarity index 100%
rename from web/src/station/coordToCity.ts
rename to web/src/pages/station/coordToCity.ts