diff --git a/package-lock.json b/package-lock.json
index 2a0b519301..3a1e03d2d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
                 "@popperjs/core": "^2.11.8",
                 "alpinejs": "^3.12.3",
                 "bootstrap": "^5.3.0",
-                "date-fns": "^2.30.0"
+                "date-fns": "^2.30.0",
+                "store2": "^2.14.2"
             },
             "devDependencies": {
                 "axios": "^1.1.2",
@@ -884,6 +885,11 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/store2": {
+            "version": "2.14.2",
+            "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz",
+            "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w=="
+        },
         "node_modules/to-regex-range": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1460,6 +1466,11 @@
             "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
             "dev": true
         },
+        "store2": {
+            "version": "2.14.2",
+            "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz",
+            "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w=="
+        },
         "to-regex-range": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index 46de4dca9c..bbaafc7517 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
         "@popperjs/core": "^2.11.8",
         "alpinejs": "^3.12.3",
         "bootstrap": "^5.3.0",
-        "date-fns": "^2.30.0"
+        "date-fns": "^2.30.0",
+        "store2": "^2.14.2"
     }
 }
diff --git a/resources/assets/v4/api/preferences/index.js b/resources/assets/v4/api/preferences/index.js
index 21dff68292..f02087b82f 100644
--- a/resources/assets/v4/api/preferences/index.js
+++ b/resources/assets/v4/api/preferences/index.js
@@ -21,8 +21,8 @@
 import {api} from "../../boot/axios";
 
 export default class Preferences {
-    async getByName(name) {
-        return await api.get('/api/v1/preferences/' + name);
+    getByName(name) {
+        return api.get('/api/v1/preferences/' + name);
     }
 
     postByName(name, value) {
diff --git a/resources/assets/v4/api/summary/index.js b/resources/assets/v4/api/summary/index.js
new file mode 100644
index 0000000000..0744ce9070
--- /dev/null
+++ b/resources/assets/v4/api/summary/index.js
@@ -0,0 +1,28 @@
+/*
+ * index.js
+ * Copyright (c) 2023 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {api} from "../../boot/axios.js";
+
+export default class Summary {
+    get(start, end, code) {
+        return api.get('/api/v1/summary/basic', {params: {start: start, end: end, code: code}});
+    }
+}
diff --git a/resources/assets/v4/app.js b/resources/assets/v4/app.js
index 7dbb940f35..446f0fe87e 100644
--- a/resources/assets/v4/app.js
+++ b/resources/assets/v4/app.js
@@ -27,37 +27,48 @@ class MainApp {
     language = 'en-US';
 
     constructor() {
-        let start = window.BasicStore.getFromLocalStorage('start');
-        let end = window.BasicStore.getFromLocalStorage('end');
+        console.log('MainApp constructor');
+        let start = window.BasicStore.get('start');
+        let end = window.BasicStore.get('end');
         if (null !== start && null !== end) {
+            console.log('start + end is not null, recycle it.');
             this.range = {
                 start: new Date(start),
                 end: new Date(end),
             };
+            return;
         }
+        console.log('start + end = null!');
+
     }
 
     init() {
+        console.log('MainApp init');
         // get values from store and use them accordingly.
-        this.viewRange = window.BasicStore.viewRange;
-        this.locale = window.BasicStore.locale;
-        this.language = window.BasicStore.language;
+        this.viewRange = window.BasicStore.get('viewRange');
+        this.locale = window.BasicStore.get('locale');
+        this.language = window.BasicStore.get('language');
         this.locale = 'equal' === this.locale ? this.language : this.locale;
         window.__localeId__ = this.language;
 
         // the range is always null but later on we will store it in BasicStore.
-        if (null === this.range.start && null === this.range.end && null === this.defaultRange.start && null === this.defaultRange.end) {
-            this.range.start = new Date;
-            this.setDatesFromViewRange();
+        if (null === this.range.start && null === this.range.end) {
+            console.log('start + end = null, calling setDatesFromViewRange()');
+            this.range = this.setDatesFromViewRange(new Date);
         }
+        console.log('MainApp: set defaultRange');
+        this.defaultRange = this.setDatesFromViewRange(new Date);
+        // default range is always the current period (initialized ahead)
     }
 
-    setDatesFromViewRange() {
+    setDatesFromViewRange(today) {
+        console.log('MainApp: setDatesFromViewRange');
         let start;
         let end;
         let viewRange = this.viewRange;
 
-        let today = this.range.start;
+        console.log('MainApp: viewRange: ' + viewRange);
+
         switch (viewRange) {
             case 'last365':
                 start = startOfDay(subDays(today, 365));
@@ -143,11 +154,12 @@ class MainApp {
                 end = endOfDay(end);
                 break;
         }
-        this.range = {start: start, end: end};
-        this.defaultRange = {start: start, end: end};
+        console.log('MainApp: setDatesFromViewRange done!');
+        return {start: start, end: end};
     }
 
     buildDateRange() {
+        console.log('MainApp: buildDateRange');
         // generate ranges
         let nextRange = this.getNextRange();
         let prevRange = this.getPrevRange();
@@ -164,9 +176,9 @@ class MainApp {
 
         // set the current one
         element = document.getElementsByClassName('daterange-current')[0];
-        element.textContent = format(this.range.start) + ' - ' + format(this.range.end);
-        element.setAttribute('data-start', format(this.range.start, 'yyyy-MM-dd'));
-        element.setAttribute('data-end', format(this.range.end, 'yyyy-MM-dd'));
+        element.textContent = format(this.defaultRange.start) + ' - ' + format(this.defaultRange.end);
+        element.setAttribute('data-start', format(this.defaultRange.start, 'yyyy-MM-dd'));
+        element.setAttribute('data-end', format(this.defaultRange.end, 'yyyy-MM-dd'));
 
         // generate next range
         element = document.getElementsByClassName('daterange-next')[0];
@@ -201,6 +213,7 @@ class MainApp {
         element.setAttribute('data-end', format(ytd.end, 'yyyy-MM-dd'));
 
         // custom range.
+        console.log('MainApp: buildDateRange end');
     }
 
     getNextRange() {
@@ -237,23 +250,29 @@ class MainApp {
     }
 
     changeDateRange(e) {
+        console.log('MainApp: changeDateRange');
         let target = e.currentTarget;
         //alert('OK 3');
         let start = new Date(target.getAttribute('data-start'));
         let end = new Date(target.getAttribute('data-end'));
+        console.log('MainApp: Change date range', start, end);
         e.preventDefault();
+        // TODO send start + end to the store and trigger this again?
         window.app.setStart(start);
         window.app.setEnd(end);
         window.app.buildDateRange();
+        console.log('MainApp: end changeDateRange');
         return false;
     }
 
     setStart(date) {
+        console.log('MainApp: setStart');
         this.range.start = date;
         window.BasicStore.store('start', date);
     }
 
     setEnd(date) {
+        console.log('MainApp: setEnd');
         this.range.end = date;
         window.BasicStore.store('end', date);
     }
@@ -263,13 +282,19 @@ let app = new MainApp();
 
 // Listen for the basic store, we need it to continue with the
 document.addEventListener("BasicStoreReady", (e) => {
+    console.log('MainApp: app.js from event handler');
     app.init();
     app.buildDateRange();
+    const event = new Event("AppReady");
+    document.dispatchEvent(event);
 }, false,);
 
 if (window.BasicStore.isReady()) {
+    console.log('MainApp: app.js from store ready');
     app.init();
     app.buildDateRange();
+    const event = new Event("AppReady");
+    document.dispatchEvent(event);
 }
 
 window.app = app;
diff --git a/resources/assets/v4/bootstrap.js b/resources/assets/v4/bootstrap.js
index 9f1d518ab3..f7c8bb9a3c 100644
--- a/resources/assets/v4/bootstrap.js
+++ b/resources/assets/v4/bootstrap.js
@@ -40,9 +40,5 @@ import * as bootstrap from 'bootstrap'
 // });
 
 
-window.Alpine = Alpine
-Alpine.start()
-
-
 window.BasicStore = new BasicStore;
 window.BasicStore.init();
diff --git a/resources/assets/v4/index.js b/resources/assets/v4/index.js
index 699be04403..7d47a4f0ad 100644
--- a/resources/assets/v4/index.js
+++ b/resources/assets/v4/index.js
@@ -1,15 +1,80 @@
-//import './bootstrap';
+import Summary from "./api/summary/index.js";
+import {format} from 'date-fns'
+import Alpine from "alpinejs";
 
+//let amounts = [];
 
-//import {onDOMContentLoaded} from "./util/index.js";
+class IndexApp {
 
+    balanceBox = {foo: 'bar'};
 
-// alert('hallo');
+    constructor() {
+        console.log('IndexApp constructor');
+    }
 
+    init() {
+        console.log('IndexApp init');
+        this.loadBoxes();
+    }
 
-// onDOMContentLoaded(() => {
-//    //alert('OK dan!');
-// })
+    loadBoxes() {
+        console.log('IndexApp loadBoxes');
+        let getter = new Summary();
+        let start = window.BasicStore.get('start');
+        let end = window.BasicStore.get('end');
 
+        // check on NULL values:
+        if (start !== null && end !== null) {
+            start = new Date(start);
+            end = new Date(end);
+        }
 
-//alert('OK dan 2!');
+        getter.get(format(start, 'yyyy-MM-dd'), format(end, 'yyyy-MM-dd'), null).then((response) => {
+            //
+            console.log('IndexApp done!');
+            console.log(response.data);
+            document.querySelector('#balanceAmount').innerText = 'ok dan';
+            //window.$refs.balanceAmount.text = 'bar!';
+            for (const i in response.data) {
+                if (response.data.hasOwnProperty(i)) {
+                    const current = response.data[i];
+                    if (i.startsWith('balance-in-')) {
+                        //amounts.push(current);
+                        console.log('Balance in: ', current);
+                    }
+                }
+            }
+        });
+
+    }
+}
+
+let index = new IndexApp();
+
+document.addEventListener("AppReady", (e) => {
+    index.init();
+}, false,);
+
+if (window.BasicStore.isReady()) {
+    index.init();
+}
+document.addEventListener('alpine:init', () => {
+    Alpine.data('balanceBox', () => ({
+        foo: 'barX'
+    }))
+})
+
+export function amounts() {
+    return {
+        amounts: ['bar', 'boo', 'baz'],
+        add() {
+            this.amounts.push('foo');
+        },
+        get() {
+            return this.amounts[1];
+        }
+    }
+}
+
+window.Alpine = Alpine
+Alpine.start()
diff --git a/resources/assets/v4/store/Basic.js b/resources/assets/v4/store/Basic.js
index c13daa1002..428253a9a2 100644
--- a/resources/assets/v4/store/Basic.js
+++ b/resources/assets/v4/store/Basic.js
@@ -1,55 +1,68 @@
 // basic store for preferred date range and some other vars.
 // used in layout.
 import Get from '../api/preferences/index.js';
+import store from 'store2';
 
+/**
+ * A basic store for Firefly III persistent UI data and preferences.
+ */
 class Basic {
+
+    // currently availabel variables:
     viewRange = '1M';
     darkMode = 'browser';
     language = 'en-US';
     locale = 'en-US';
+    // start and end are used by most pages to allow the user to browse back and forth.
+    start = null;
+    end = null;
 
     // others, to be used in the future.
     listPageSize = 10;
     currencyCode = 'AAA';
     currencyId = '0';
     ready = false;
+
+    // a very basic way to signal the store now contains all variables.
     count = 0;
     readyCount = 4;
-    start = null;
-    end = null;
 
+    /**
+     *
+     */
     constructor() {
+        console.log('Basic constructor')
     }
 
+    /**
+     *
+     */
     init() {
+        console.log('Basic init')
         this.loadVariable('viewRange')
         this.loadVariable('darkMode')
         this.loadVariable('language')
         this.loadVariable('locale')
     }
 
+    /**
+     * Load a variable, fresh or from storage.
+     * @param name
+     */
     loadVariable(name) {
+
+        // currently unused, window.X can be used by the blade template
+        // to make things available quicker than if the store has to grab it through the API.
+        // then again, it's not that slow.
         if (window.hasOwnProperty(name)) {
             this[name] = window[name];
-            this.count++;
-            if (this.count === this.readyCount) {
-                // trigger event:
-                const event = new Event("BasicStoreReady");
-                document.dispatchEvent(event);
-            }
-
+            this.triggerReady();
             return;
         }
-        // load from local storage
-        if (localStorage.getItem(name)) {
-            this[name] = localStorage.getItem(name);
-            this.count++;
-            if (this.count === this.readyCount) {
-                // trigger event:
-                const event = new Event("BasicStoreReady");
-                document.dispatchEvent(event);
-            }
-
+        // load from store2
+        if (store.has(name)) {
+            this[name] = store.get(name);
+            this.triggerReady();
             return;
         }
         // grab
@@ -58,29 +71,34 @@ class Basic {
     }
 
     parseResponse(name, response) {
-        this.count++;
         let value = response.data.data.attributes.data;
         this[name] = value;
-        localStorage.setItem(name, value);
-        if (this.count === this.readyCount) {
-            // trigger event:
-            const event = new Event("BasicStoreReady");
-            document.dispatchEvent(event);
-        }
+        store.set(name, value);
+        this.triggerReady();
     }
 
-    store(name, value) {
+    set(name, value) {
         this[name] = value;
-        localStorage.setItem(name, value);
+        store.set(name, value);
     }
 
-    getFromLocalStorage(name) {
-        return localStorage.getItem(name);
+    get(name) {
+        return store.get(name, this[name]);
     }
 
     isReady() {
         return this.count === this.readyCount;
     }
+
+    triggerReady() {
+        this.count++;
+        if (this.count === this.readyCount) {
+            console.log('Basic store is ready!')
+            // trigger event:
+            const event = new Event("BasicStoreReady");
+            document.dispatchEvent(event);
+        }
+    }
 }
 
 export default Basic;
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 3514897657..34643e79f9 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -1,28 +1,17 @@
 @extends('layout.v4.default')
 @section('vite')
-    @vite(['resources/assets/v4/index.js'])
+    @vite(['resources/assets/v4/sass/app.scss', 'resources/assets/v4/app.js', 'resources/assets/v4/index.js'])
 @endsection
 @section('content')
 
     <div class="app-content">
         <!--begin::Container-->
         <div class="container-fluid">
-            Here be content.
+            @include('partials.dashboard.boxes')
 
-            <!-- /.row (main row) -->
-            <div x-data="{ count: 0 }">
-                <button x-on:click="count++">Increment</button>
-
-                <span x-text="count"></span>
-                <button x-on:click="app.changeDateRange">KLIK</button>
-            </div>
 
         </div>
 
-        Icon: <i class="fa-solid fa-user"></i><br>
-        <!-- uses solid style -->
-        Icon: <i class="fa-brands fa-github-square"></i>
-        <!--end::Container-->
     </div>
 
 @endsection
diff --git a/resources/views/layout/v4/default.blade.php b/resources/views/layout/v4/default.blade.php
index 15642f8aff..5e1eef3a74 100644
--- a/resources/views/layout/v4/default.blade.php
+++ b/resources/views/layout/v4/default.blade.php
@@ -36,11 +36,11 @@
                 <li class="nav-item dropdown">
                     <a class="nav-link daterange-holder" data-bs-toggle="dropdown" href="#"></a>
                     <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end" x-data="">
-                        <a href="#" class="dropdown-item daterange-current">
+                        <a href="#" class="dropdown-item daterange-current" @click="app.changeDateRange">
 
                         </a>
                         <div class="dropdown-divider"></div>
-                        <a href="#" x-on:click="app.changeDateRange" class="dropdown-item daterange-next">
+                        <a href="#" @click="app.changeDateRange" class="dropdown-item daterange-next">
                             next
                         </a>
                         <div class="dropdown-divider"></div>
@@ -65,7 +65,7 @@
                         </a>
                         <div class="dropdown-divider"></div>
                         <a href="#" class="dropdown-item dropdown-footer daterange-custom" @click="app.doCustomRange">
-                            {{ __('firefly.customRange') }}
+                            TODO {{ __('firefly.customRange') }}
                         </a>
                     </div>
                 </li>
diff --git a/resources/views/partials/dashboard/boxes.blade.php b/resources/views/partials/dashboard/boxes.blade.php
new file mode 100644
index 0000000000..c987b5ff29
--- /dev/null
+++ b/resources/views/partials/dashboard/boxes.blade.php
@@ -0,0 +1,81 @@
+<div class="row">
+    <!--begin::Col-->
+    <div class="col-lg-3 col-6">
+        <!--begin::Small Box Widget 1-->
+        <div class="small-box text-bg-primary" x-data="amounts">
+            <div class="inner">
+                <h3 id="balanceAmount" x-text="get">TODO amount</h3>
+
+                <p>
+                    <a href="{{ route('reports.report.default', ['allAssetAccounts',$start->format('Ymd'),$end->format('Ymd')]) }}">{{ __('firefly.in_out_period') }}</a>
+                </p>
+            </div>
+            <span class="small-box-icon">
+                <i class="fa-solid fa-scale-balanced"></i>
+            </span>
+
+            <span class="small-box-footer">
+                TODO amount + amount
+            </span>
+        </div>
+        <!--end::Small Box Widget 1-->
+    </div>
+    <!--end::Col-->
+    <div class="col-lg-3 col-6">
+        <!--begin::Small Box Widget 2-->
+        <div class="small-box text-bg-success">
+            <div class="inner">
+                <h3>TODO amount</h3>
+
+                <p><a href="{{ route('bills.index') }}">{{ __('firefly.bills_to_pay') }}</a></p>
+            </div>
+            <span class="small-box-icon">
+                <em class="fa-regular fa-calendar"></em>
+            </span>
+            <span class="small-box-footer">
+                {{ __('firefly.paid') }}: TODO amount
+            </span>
+        </div>
+        <!--end::Small Box Widget 2-->
+    </div>
+    <!--end::Col-->
+    <div class="col-lg-3 col-6">
+        <!--begin::Small Box Widget 3-->
+        <div class="small-box text-bg-warning">
+            <div class="inner">
+                <h3>TODO amount</h3>
+
+                <p><a href="{{ route('budgets.index') }}">{{ __('firefly.left_to_spend') }}</a></p>
+            </div>
+            <span class="small-box-icon">
+                <em class="fa-solid fa-money-check-dollar"></em>
+            </span>
+            <span class="small-box-footer">
+                {{ __('firefly.per_day') }}: TODO amount
+            </span>
+        </div>
+        <!--end::Small Box Widget 3-->
+    </div>
+    <!--end::Col-->
+    <div class="col-lg-3 col-6">
+        <!--begin::Small Box Widget 4-->
+        <div class="small-box text-bg-danger">
+            <div class="inner">
+                <h3>TODO amount</h3>
+
+                <p>
+                    <a href="{{ route('reports.report.default', ['allAssetAccounts','currentYearStart','currentYearEnd']) }}">{{ __('firefly.net_worth') }}</a>
+                </p>
+            </div>
+            <span class="small-box-icon">
+                <i class="fa-solid fa-chart-line"></i>
+            </span>
+            <span class="small-box-footer">
+                &nbsp;
+            </span>
+        </div>
+        <!--end::Small Box Widget 4-->
+    </div>
+    <!--end::Col-->
+</div>
+<!--end::Row-->
diff --git a/resources/views/partials/layout/v4/head.blade.php b/resources/views/partials/layout/v4/head.blade.php
index 620eed9128..a9603fd061 100644
--- a/resources/views/partials/layout/v4/head.blade.php
+++ b/resources/views/partials/layout/v4/head.blade.php
@@ -41,8 +41,6 @@
     <!--begin::Required Plugin(AdminLTE)-->
     <link rel="stylesheet" href="v4/css/adminlte.css">
     <!--end::Required Plugin(AdminLTE)-->
-
-    @vite(['resources/assets/v4/sass/app.scss', 'resources/assets/v4/app.js'])
     @yield('vite')
 
 </head>