Bugfix genre store

Limit nr of top genres on homepage
Bugfixes: No startup after packaging, infinity loading on concert booking page if user comes from band page
2025-09-01 15:08:13 +02:00 · 2025-09-01 14:49:02 +02:00 · 2025-09-01 14:22:53 +02:00 · 2025-08-31 11:47:56 +02:00 · 2025-08-31 11:33:25 +02:00 · 2025-08-30 14:11:18 +02:00
50 changed files with 1307 additions and 525 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,5 +11,6 @@
  "i18n-ally.enabledFrameworks": [
    "vue"
  ],
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.extract.autoDetect": true,
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,34 @@
-# v.0.3.0 (Release Candidate 1)
+# v.0.4.0 MuC-Edition (2025-09-01)
+
+## 🚀 Features
+
+- Exercise selection system
+
+## 🌟 Enhancements
+
+- Tooltips on append icons in toolbar
+- Exercise page icon adds open exercises badge
+- Finished english translation
+- Icons on exercise groups on help page
+- Welcome dialog: New page for look and feel, merge database and exercise creation in one step
+- Add links to GitHub and project page on settings
+- New section on homepage for popular genres
+
+## 🐛 Bugfixes
+
+- Filter on band page changes visible bands on homepage
+- No startup after packaging
+- Infinity loading on concert booking page is user comes from band page
+
+# v.0.3.0 (2025-02-28)
 ## 🚀 Features
 - Swagger Documentation
+- RPM Image

 ## 🐛 Bugfixes
 - Bugfix on search page for Band datasets

-# v.0.2.0 (Beta)
+# v.0.2.0 (2024-12-05)
 ## 🚀 Features
 - Adding "Test Environment" banner in the bottom right corner
 - License handling system
@@ -24,8 +47,7 @@
 - More server stability
 - Bugfix file manager in Electron application

-
-# v.0.1.0 (Alpha)
+# v.0.1.0 (2024-11-21)
 ## 🚀 Features
 - Frontend
  - VueJS frontend framework with Vuetify UI library
--- a/backend/data/exercises.json
+++ b/backend/data/exercises.json
@@ -3,127 +3,144 @@
    {
      "nameDe": "Den Shop kennenlernen",
      "nameEn": "Getting to know the shop",
+      "icon": "mdi-human-greeting",
      "groupNr": 0,
      "descriptionDe": "Vor einem Angriff ist es wichtig zu verstehen, wie die Webseite aufgebaut ist. Wie sind die URLs strukturiert? Wo befinden sich Eingabefelder welche im Backend eine SQL Abfrage stellen?",
-      "descriptionEn": "todo",
+      "descriptionEn": "Before an attack, it's important to understand how the website is structured. How are the URLs structured? Where are input fields located that execute SQL queries in the backend?",
      "exercises": [
        {
+          "uuid": "getting-known-register",
          "nameDe": "Registrieren",
          "nameEn": "Register",
          "exerciseNr": 1,
          "descriptionDe": "Wir richten uns einen gewöhnlichen Account auf der Plattform ein. Navigiere hierzu auf die Account-Seite und registriere dich.",
-          "descriptionEn": "Create a new account in the online shop"
+          "descriptionEn": "We'll set up a regular account on the platform. To do this, navigate to the account page and register."
        },
        {
+          "uuid": "getting-known-profile",
          "nameDe": "Profil vervollständigen",
          "nameEn": "Complete profile",
          "exerciseNr": 2,
          "descriptionDe": "Bestellungen sind erst möglich, wenn das Account-Profil vervollständigt ist. Logge dich ein, navigiere zu den Account-Einstellungen, fülle den Namen aus und füge je eine Adresse und Bezahlart hinzu. Speichere alles zum Schluss ab.",
-          "descriptionEn": "Search for an event of choice and buy a ticket for"
+          "descriptionEn": "Orders are only possible once your account profile is complete. Log in, navigate to your account settings, fill in your name, and add an address and payment method. Finally, save everything."
        },
        {
+          "uuid": "getting-known-buy-ticket",
          "nameDe": "Ein Ticket kaufen",
          "nameEn": "Buy a ticket",
          "exerciseNr": 3,
          "descriptionDe": "Wir führen nun einen Bestellvorgang durch. Wähle hierzu ein Konzert deiner Wahl und lege Tickets in den Warenkorb. Öffne diesen und schließe die Bestellung ab. Beachte die Struktur der URL wenn du ein Konzert buchen willst. Sieh dir ruhig 2-3 Buchungsseiten an, wie sich die URL jeweils verändert.",
-          "descriptionEn": "Search for an event of choice and buy a ticket for"
+          "descriptionEn": "We'll now complete the order process. Select a concert of your choice and add tickets to your shopping cart. Open the shopping cart and complete your order. Pay attention to the URL structure when booking a concert. Feel free to look at two or three booking pages to see how the URL changes each time."
        }
      ]
    },
    {
      "nameDe": "Broken Access Control",
      "nameEn": "Broken Access Control",
+      "icon": "mdi-application-outline",
      "groupNr": 1,
      "descriptionDe": "Eine Webseite beinhaltet öffentlich einsehbare und einige geschützte Seiten. Letztere sind nur mit passenden Berechtigungen erreichbar. Beispiele hierfür sind ein Admin-Panel oder der persönliche Warenkorb. Der Zugriff wird oft über Cookies oder eine Authentifizierung an einem Backend-Server geregelt. Bei Broken Access Control ist dieser Sicherheits-Mechanismus nicht oder fehlerhaft implementiert. Somit lassen sich Seiten unberechtigterweise über die URL erreichen.",
-      "descriptionEn": "todo",
+      "descriptionEn": "A website contains publicly visible pages and some protected pages. The latter can only be accessed with appropriate permissions. Examples include an admin panel or the personal shopping cart. Access is often controlled via cookies or authentication on a backend server. With broken access control, this security mechanism is either not implemented or is incorrectly implemented. This allows pages to be accessed without authorization via the URL.",
      "exercises": [
        {
+          "uuid": "broken-access-control-exercise-page",
          "nameDe": "Hilfe-Seite aufrufen",
          "nameEn": "Access Help Page",
          "exerciseNr": 1,
          "descriptionDe": "Die Hilfe-Seite erlaubt dir einen Einblick auf den Bearbeitungszustand der Aufgaben. Sie ist dementsprechend nicht abgesichert, aber auch (noch) nicht in der Titel-Leiste als Button erreichbar. Erweitere die URL in der Adresszeile so, dass du auf die Hilfeseite gelangst.",
-          "descriptionEn": "Manipulate the URL and access the help page"
+          "descriptionEn": "The help page provides insight into the processing status of tasks. It's therefore not secure, but it's also not (yet) accessible as a button in the title bar. Expand the URL in the address bar to access the help page."
        },
        {
+          "uuid": "broken-access-control-hidden-concert",
          "nameDe": "Das versteckte Konzert buchen",
          "nameEn": "Book the hidden concert",
          "exerciseNr": 2,
          "descriptionDe": "Die Band >>Arctic Monkeys<< will auf ihrer >>European Tour<< drei Konzerte spielen. Im Shop finden sich allerdings nur zwei Einträge. Zwischen den beiden Tourdaten soll eine Show in der Lanxess Arena in Köln stattfinden, der Datensatz hierfür ist bereits angelegt, jedoch nicht freigeschaltet. Besuche die Seite der Band. Sieh dir den Zeitraum zwischen beiden Konzerten an, in denen das versteckte Event liegen könnte. Öffne eine Buchungsseite eines anderen Konzertes und ändere die URL so ab, dass du das versteckte Konzert buchen kannst. Reserviere dir mindestens ein Ticket und schließe den Bestellprozess ab.",
-          "descriptionEn": "Manipulate the URL and access the sold out concert and buy a ticket"
+          "descriptionEn": "The band >>Arctic Monkeys<< plans to play three shows on their >>European Tour<<. However, there are only two entries in the shop. A show at the Lanxess Arena in Cologne is scheduled to take place between the two tour dates. The dataset for this has already been created but is not yet activated. Visit the band's website. Look at the time period between the two concerts, where the hidden event could take place. Open a booking page for another concert and change the URL so that you can book the hidden concert. Reserve at least one ticket and complete the order process."
        }
      ]
    },
    {
      "nameDe": "SQL Injections",
      "nameEn": "SQL Injections",
+      "icon": "mdi-needle",
      "groupNr": 2,
      "descriptionDe": "Eine Datenbank arbeitet mit SQL Befehlen um Datensätze anzulegen, abzurufen, zu verändern und löschen. Ein Server wird über API-Schnittstellen angesprochen, führt die Befehle in der Datenbank aus und liefert das Ergebnis zurück. Der Client darf keinen direkten Zugriff auf die Datenbank haben. Bei SQL Injections wird versucht, diesen Sicherheitsmechanismus zu umgehen und über die API-Schnittstellen direkte SQL Befehle auszuführen.",
-      "descriptionEn": "todo",
+      "descriptionEn": "A database uses SQL commands to create, retrieve, modify, and delete records. A server is accessed via API interfaces, executes the commands in the database, and returns the results. The client must not have direct access to the database. SQL injection attempts to circumvent this security mechanism and execute SQL commands directly via the API interfaces.",
      "exercises": [
        {
+          "uuid": "sql-injection-database-scheme",
          "nameDe": "Wie sieht die Datenbank aus?",
          "nameEn": "How does the database look like?",
          "exerciseNr": 1,
          "descriptionDe": "Wir versuchen nun die Datenbank im Hintergrund anzugreifen. Aktuell wissen wir aber noch nicht wie die Datenbank aussieht, also welche Tabellen sie beinhaltet. Wir können uns aber mit einem SQL-Befehl ausgeben. Gehe zur globalen Suchseite. Öffne mit der Tastenkombination >>Strg<< + >>D<< die >>Developer Tools<<. Klicke auf den Reiter >>Network<<. Hier siehst du, wie das Frontend mit dem Server kommuniziert. Schreibe nun eine SQL-Injection, welche den Suchbegriff ignoriert und dir stattdessen alle Datensätze der Tabelle >>sqlite_master<< zurück gibt, sofern die Bedingung >>type='table'<< erfüllt ist. Kopiere dir bei erfolgreicher Rückmeldung des Backends die Namen der Tabellen in eine Text-Datei, damit wir für die kommenden Aufgaben die richtigen Namen der Tabellen angeben können.",
-          "descriptionEn": "todo"
+          "descriptionEn": "We'll now attempt to attack the database in the background. Currently, we don't yet know what the database looks like, or which tables it contains. However, we can use an SQL command to inject it. Go to the global search page. Open the Developer Tools using the keyboard shortcut Ctrl + D. Click on the Network tab. Here you can see how the frontend communicates with the server. Now write an SQL injection that ignores the search term and instead returns all records in the sqlite_master table, provided the type='table' condition is met. If the backend responds successfully, copy the table names into a text file so that we can specify the correct table names for future tasks."
        },
        {
+          "uuid": "sql-injection-all-accounts",
          "nameDe": "Alle Accounts ausspähen",
          "nameEn": "Get all accounts",
          "exerciseNr": 2,
          "descriptionDe": "Schreibe nun eine SQL-Injection, welche den Suchbegriff ignoriert und dir stattdessen alle Datensätze der Account-Tabelle zurück liefert. Führe den Angriff über das Suchfeld aus. Sieh dir die Rückmeldung des Servers an.",
-          "descriptionEn": "Execute an SQL-Injection on the Search page to get all datasets from >>Accounts<< table."
+          "descriptionEn": "Now write an SQL injection that ignores the search term and instead returns all records in the account table. Execute the attack using the search field. Watch the server's response."
        },
        {
+          "uuid": "sql-injection-account-roles",
          "nameDe": "Alle Berechtigungsgruppen ausspähen",
          "nameEn": "Get all account roles",
          "exerciseNr": 3,
          "descriptionDe": "Wir sehen nun alle Accounts. Jeder hat eine Berechtigungs-ID (accountRoleId) mit der Berechtigungen wie der Zugriff aufs Admin-Panel geregelt werden. Wir wissen aber nicht, was die ID's bedeuten. Schreibe darum eine SQL-Injection, welche den Suchbegriff ignoriert und dir stattdessen alle Datensätze der Tabelle >>AccountRoles<< zurück liefert. Führe den Angriff über das Suchfeld aus. Beobachte die Rückmeldung des Servers über den >>Network<<-Tab.",
-          "descriptionEn": "Execute an SQL-Injection on the Search page to get all datasets from >>AccountRoles<< table."
+          "descriptionEn": "We now see all the accounts. Each has an authorization ID (accountRoleId) that controls permissions such as access to the admin panel. However, we don't know what the IDs mean. Therefore, write an SQL injection that ignores the search term and instead returns all records in the >>AccountRoles<< table. Execute the attack via the search field. Observe the server's response via the >>Network<< tab."
        },
        {
+          "uuid": "sql-injection-upgrade-privileges",
          "nameDe": "Eigene Berechtigungen erhöhen",
          "nameEn": "Upgrade your privileges",
          "exerciseNr": 4,
          "descriptionDe": "Jetzt bearbeiten wir unseren eigenen Account. Schreibe hierfür einen >>UPDATE<<-SQL-Befehl, welcher die >>accountRoleId<< auf das Niveau eines >>Admin<< erhöht für deinen Account-Namen.",
-          "descriptionEn": "Change the privileges of your account"
+          "descriptionEn": "Now we'll edit our own account. To do this, write an >>UPDATE<< SQL command that elevates the >>accountRoleId<< to the level of >>Admin<< for your account name."
        },
        {
+          "uuid": "sql-injection-capture-account",
          "nameDe": "Einen fremden Account übernehmen",
          "nameEn": "Capture another account",
          "exerciseNr": 5,
          "descriptionDe": "Statt unsere eigenen Berechtigungen zu erhöhen, können wir auch einen Account übernehmen, welcher bereits ein >>Super-Admin<< ist. Suche dir dafür aus der Liste der in Aufgabe 2.1 erhaltenen Accounts einen aus, welcher die Rolle >>Super-Admin<< inne hat. Nur damit lässt sich die Dateiverwaltung öffnen, welche wir später brauchen. Hast du den Account-Namen gefunden, gehe ins Login-Menü (logge dich aus, falls du noch angemeldet bist). Führe nun einen SQL-Injektion durch um diesen Account zu übernehmen.",
-          "descriptionEn": "todo"
+          "descriptionEn": "Instead of increasing our own permissions, we can also take over an account that is already a >>super admin<<. To do this, select one from the list of accounts obtained in Task 2.1 that has the >>super admin<< role. Only then can we open the file manager, which we'll need later. Once you've found the account name, go to the login menu (log out if you're still logged in). Now perform an SQL injection to take over this account."
        },
        {
+          "uuid": "sql-injection-delete-rating",
          "nameDe": "Bewertungen löschen",
          "nameEn": "Delete ratings",
          "exerciseNr": 6,
          "descriptionDe": "Jede Band hat Bewertungen auf einer Skala von eins bis fünf Sternen erhalten. Wir wollen alle Fünf-Sterne Bewertungen aus der Datenbank löschen. Schreibe eine SQL Injection, welche in der Bewertungs-Tabelle alle Einträge mit der Bedingung >>rating = 5<< entfernt. Führe die Injection über die globale Suche aus.",
-          "descriptionEn": "todo"
+          "descriptionEn": "Each band has received ratings on a scale of one to five stars. We want to delete all five-star ratings from the database. Write an SQL injection that removes all entries in the ratings table with the condition >>rating = 5<<. Execute the injection via the global search."
        }
      ]
    },
    {
      "nameDe": "Cross-Site Scripting (XSS)",
      "nameEn": "Cross-Site Scripting (XSS)",
+      "icon": "mdi-code-brackets",
      "groupNr": 3,
      "descriptionDe": "Als nächstes wollen wir Schadcode in die Web-Applikation einschleusen. Zunächst testen wir, ob die Webseite hierfür anfällig ist. Manipuliere die URL der Band-Seite so, dass du eine >>Hallo Welt!<<-Nachricht als >>alert<< siehst. Hinweis: Nutze einen image tag! Setze als >>src<< die Zahl >>1<<. Den Befehl kannst du im Tag >>onerror<< ausführen.",
-      "descriptionEn": "todo",
+      "descriptionEn": "Next, we want to inject malicious code into the web application. First, we'll test whether the website is vulnerable to this. Manipulate the URL of the band's page so that you see a >>Hello World!<< message as an >>alert<<. Note: Use an image tag! Set the number >>1<< as the >>src<<. You can execute the command in the >>onerror<< tag.",
      "exercises": [
        {
+          "uuid": "cross-site-scripting-hello-world",
          "nameDe": "Hallo Welt!",
          "nameEn": "Hello World!",
          "exerciseNr": 1,
          "descriptionDe": "Als nächstes wollen wir Schadcode in die Web-Applikation einschleusen. Zunächst testen wir, ob die Webseite hierfür anfällig ist. Gehe hierzu auf die Seite >>Alle Bands<< und filtere die Einträge nach einem beliebigen Genre deiner Wahl. In der URL-Leiste siehst du nun, dass hinter der URL und dem Ressourcen-Ziel ein Parameter angegeben ist (der Part hinter dem Fragezeichen). Wir tauschen diesen Parameter gegen einen HTML Tag aus. Der Trick hierbei: Als Quelle geben wir den Zahlenwert >>1<< an, wodurch automatisch das ausgeführt wird, was im >>onerror<<-Tag drinnen steht. Genau hier soll eine Alert-Meldung mit >>Hello World!<< als JavaScript Code eingefügt werden. Verändere die URL so, dass sie die Meldung ausgibt. Falls du nicht mit JavaScript vertraut bist, sieh dir die letzte Seite mit nützlichen Befehlen an.",
-          "descriptionEn": "Take an URL of the shop and extend it with JavaScript code so that a 'Hello World' message appears whent the link is opened"
+          "descriptionEn": "Next, we want to inject malicious code into the web application. First, we'll test whether the website is vulnerable to malicious code. To do this, go to the >>All Bands<< page and filter the entries by any genre of your choice. In the URL bar, you'll now see that a parameter is specified after the URL and the resource target (the part after the question mark). We'll replace this parameter with an HTML tag. The trick here: We specify the numeric value >>1<< as the source, which automatically executes what's contained in the >>onerror<< tag. This is exactly where we want to insert an alert message with >>Hello World!<< as JavaScript code. Change the URL so that it displays the message. If you're not familiar with JavaScript, check out the last page for useful commands."
        },
        {
+          "uuid": "cross-site-scripting-external-script",
          "nameDe": "Ein externes Script aufrufen",
          "nameEn": "Run an external script",
          "exerciseNr": 2,
          "descriptionDe": "Wir haben festgestellt, dass die Seite für Cross-Site-Scripting durch Reflected XSS angreifbar ist! Im zweiten Schritt binden wir nun das Script ein. Es wurde bereits auf den Server hochgeladen. Logge dich wahlweise mit einem Admin-Account (Aufgabe 2.5) oder deinem eigenen nun berechtigten Account (Aufgabe 2.4) ein. Öffne nun das Admin-Panel über den Button rechts oben. Suche über die Dateiverwaltung im Admin-Panel nach dem Skript und notiere dir die darunter angezeigte Adresse auf dem Backend-Server. Logge dich aus. Wir wollen das Skript auf der nun sichtbaren Login-Seite über eine veränderte URL einbinden. Nutze hierfür das gleiche Prinzip wie in Aufgabe 3.1. Statt >>genreName<< kannst du einen beliebigen anderen Parameter-Namen verwenden. Nutze die Konsole mit der Tastenkombination Strg + D vor dem Abschicken der URL.Logge dich nach erfolgreicher Aufgabenlösung ein und sieh in der Konsole, wie deine Login-Daten abgegriffen werden.",
-          "descriptionEn": "Create an URL of the shop, which calls the script"
+          "descriptionEn": "We've determined that the page is vulnerable to cross-site scripting through Reflected XSS! In the second step, we'll integrate the script. It's already been uploaded to the server. Log in either with an admin account (Task 2.5) or your own, now authorized account (Task 2.4). Now open the admin panel using the button in the top right. Search for the script using the file manager in the admin panel and note the address displayed below it on the backend server. Log out. We want to integrate the script into the now visible login page using a modified URL. Use the same principle as in Task 3.1. Instead of >>genreName<<, you can use any other parameter name. Use the console by pressing Ctrl + D before submitting the URL. After successfully completing the task, log in and watch in the console how your login data is being retrieved."
        }
      ]
    }
--- a/backend/models/exercises/exercise.model.ts
+++ b/backend/models/exercises/exercise.model.ts
@@ -3,6 +3,9 @@ import { ExerciseGroup } from "./exerciseGroup.model";

@Table({ timestamps: false })
 export class Exercise extends Model {
+  @Column
+  uuid: string
+
  @Column
  nameDe: string

--- a/backend/models/exercises/exerciseGroup.model.ts
+++ b/backend/models/exercises/exerciseGroup.model.ts
@@ -9,6 +9,9 @@ export class ExerciseGroup extends Model {
  @Column
  nameEn: string

+  @Column
+  icon: string
+
  @Column
  groupNr: number

--- a/backend/server.ts
+++ b/backend/server.ts
@@ -36,7 +36,7 @@ app.use("/files", files)

 // Add delay for more realistic response times
 app.use((req, res, next) => {
-  setTimeout(next, Math.floor((Math.random() * 1000) + 100))
+  setTimeout(next, Math.floor((Math.random() * 500) + 100))
 })

 // Routes
--- a/electron-builder.json
+++ b/electron-builder.json
@@ -19,7 +19,7 @@
    "icon": "public/logo-small.png"
  },
  "linux":  {
-    "target": ["deb"],
+    "target": ["deb", "rpm"],
    "maintainer": "Tobias Zoghaib",
    "icon": "public/logo-small.png",
    "category": "Education"
@@ -35,6 +35,8 @@
    "!release",
    "!src",
    "!dist",
-    "!out"
+    "!out",
+    "!misc",
+    "!database.sqlite"
  ]
 }
--- a/example-config.json
+++ b/example-config.json
@@ -0,0 +1,19 @@
+{
+  "theme": "dark",
+  "language": "en",
+  "notAvailableExercises": [
+    "getting-known-register",
+    "getting-known-profile",
+    "getting-known-buy-ticket",
+    "broken-access-control-exercise-page",
+    "broken-access-control-hidden-concert",
+    "sql-injection-database-schema",
+    "sql-injection-all-accounts",
+    "sql-injection-account-roles",
+    "sql-injection-upgrade-privileges",
+    "sql-injection-capture-account",
+    "sql-injection-delete-rating",
+    "cross-site-scripting-hello-world",
+    "cross-site-scripting-external-script"
+  ]
+}
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
  "name": "eventmaster",
-  "version": "0.3.0",
+  "version": "0.4.0",
  "author": "Tobias Zoghaib",
  "description": "Hackable ticket store for educational purposes",
  "license": "MIT",
-  "homepage": "www.uni-hannover.de",
+  "homepage": "https://www.itsec.uni-hannover.de/de/usec/forschung/eventmaster-learning-web-attacks",
  "main": "build/src/electron/index.js",
  "private": true,
  "scripts": {
--- a/src/components/basics/cardViewOneLine.vue
+++ b/src/components/basics/cardViewOneLine.vue
@@ -3,17 +3,33 @@ defineProps({
  /** Displayed smaller text on the left side */
  descriptionText: {
    type: String,
-    default: ""
+    default: "",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
  },

  /** Displayed bigger text on the right side */
-  valueText: [ String, Number ]
-})
+  valueText: [String, Number],
+});
 </script>

 <template>
  <v-card variant="outlined" class="my-1 px-2">
-    <v-row class="d-flex justify-center align-center">
+    <v-row v-if="loading">
+      <v-col>
+        <v-skeleton-loader
+          type="heading"
+          :loading="loading"
+          style="background-color: transparent"
+        >
+        sdasd
+        </v-skeleton-loader>
+      </v-col>
+    </v-row>
+
+    <v-row class="d-flex justify-center align-center" v-else>
      <v-col class="text-caption text-left" v-if="descriptionText.length > 0">
        {{ descriptionText }}
      </v-col>
@@ -23,4 +39,4 @@ defineProps({
      </v-col>
    </v-row>
  </v-card>
-</template>
+</template>
--- a/src/components/navigation/navigationAppendItems.vue
+++ b/src/components/navigation/navigationAppendItems.vue
@@ -1,50 +1,122 @@
 <script setup lang="ts">
-import { useAccountStore } from '@/stores/account.store';
-import { useBasketStore } from '@/stores/basket.store';
-import { useExerciseStore } from '@/stores/exercise.store';
+import { useAccountStore } from "@/stores/account.store";
+import { useBasketStore } from "@/stores/basket.store";
+import { useExerciseStore } from "@/stores/exercise.store";
+import { ref, watch } from "vue";

-const accountStore = useAccountStore()
-const basketStore = useBasketStore()
-const exerciseStore = useExerciseStore()
+const accountStore = useAccountStore();
+const basketStore = useBasketStore();
+const exerciseStore = useExerciseStore();
+const basketItems = ref(0);

-exerciseStore.getAllExercises()
+exerciseStore.getAllExercises();
+
+watch(
+  () => basketStore.itemsInBasket,
+  () => {
+    basketItems.value = basketStore.itemsInBasket.reduce((tot, item) => {
+      return tot + item.seats.length;
+    }, 0);
+  }
+);
 </script>

 <template>
-  <v-btn variant="plain" icon="mdi-magnify" to="/search" />
+  <!-- Global search -->
+  <v-tooltip :text="$t('misc.search.globalsearch')" location="bottom">
+    <template #activator="{ props }">
+      <v-btn v-bind="props" variant="plain" icon="mdi-magnify" to="/search" />
+    </template>
+  </v-tooltip>

-  <v-btn
-    v-if="accountStore.userAccountToken == ''"
-    variant="plain"
-    icon="mdi-account"
-    to="/account/login"
-  />
-  
-  <v-btn v-else variant="plain" icon="mdi-account-check" to="/account/home" />
+  <!-- Account -->
+  <v-tooltip :text="$t('account.account')" location="bottom">
+    <template #activator="{ props }">
+      <v-btn
+        v-if="accountStore.userAccountToken == ''"
+        v-bind="props"
+        variant="plain"
+        icon="mdi-account"
+        to="/account/login"
+      />

-  <div>
-    <v-badge
-      :content="basketStore.itemsInBasket.reduce((tot, item) => {
-        return tot + item.seats.length
-      }, 0)"
-      color="error" offset-x="8" offset-y="8">
-      <v-btn variant="plain" icon="mdi-cart" to="/basket" />
-    </v-badge>
-  </div>
+      <v-btn
+        v-else
+        v-bind="props"
+        variant="plain"
+        icon="mdi-account-check"
+        to="/account/home"
+      />
+    </template>
+  </v-tooltip>

-  <v-btn
-    v-if="accountStore.adminPanelVisible"
-    variant="plain"
-    icon="mdi-table-cog"
-    to="/admin"
-  />
+  <!-- Basket -->
+  <v-tooltip :text="$t('basket.basket')" location="bottom">
+    <template #activator="{ props }">
+      <v-badge
+        v-if="basketItems > 0"
+        :content="basketItems"
+        color="error"
+        offset-x="8"
+        offset-y="8"
+      >
+        <v-btn v-bind="props" variant="plain" icon="mdi-cart" to="/basket" />
+      </v-badge>

-  <v-btn
-    v-if="exerciseStore.helpPageVisible"
-    variant="plain"
-    icon="mdi-help"
-    to="/help"
-  />
-  
-  <v-btn variant="plain" icon="mdi-cog" to="/preferences"/>
-</template>
+      <v-btn
+        v-else
+        v-bind="props"
+        variant="plain"
+        icon="mdi-cart"
+        to="/basket"
+      />
+    </template>
+  </v-tooltip>
+
+  <!-- Exercise page -->
+  <v-tooltip :text="$t('misc.firstStartup.exercises')" location="bottom">
+    <template #activator="{ props }">
+      <v-badge
+        v-if="exerciseStore.exercisePageVisible"
+        :content="
+          exerciseStore.exercises.reduce((tot, exercise) => {
+            if (exercise.available && !exercise.solved) {
+              return tot + 1;
+            } else {
+              return tot;
+            }
+          }, 0)
+        "
+        color="error"
+        offset-x="8"
+        offset-y="8"
+      >
+        <v-btn
+          v-bind="props"
+          variant="plain"
+          icon="mdi-book-open-blank-variant"
+          to="/help"
+        />
+      </v-badge>
+    </template>
+  </v-tooltip>
+
+  <!-- Admin panel -->
+  <v-tooltip :text="$t('admin.adminpanel')" location="bottom">
+    <template #activator="{ props }">
+      <v-btn
+        v-if="accountStore.adminPanelVisible"
+        v-bind="props"
+        variant="plain"
+        icon="mdi-table-cog"
+        to="/admin"
+      />
+    </template>
+  </v-tooltip>
+
+  <v-tooltip :text="$t('preferences.preferences')" location="bottom">
+    <template #activator="{ props }">
+      <v-btn v-bind="props" variant="plain" icon="mdi-cog" to="/preferences" />
+    </template>
+  </v-tooltip>
+</template>
--- a/src/components/pageParts/concertListItem.vue
+++ b/src/components/pageParts/concertListItem.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import { BandModel } from '@/data/models/acts/bandModel';
-import { ConcertModel } from '@/data/models/acts/concertModel';
-import { LocationModel } from '@/data/models/locations/locationModel';
-import { useRouter } from 'vue-router';
+import cardViewHorizontal from "@/components/basics/cardViewHorizontal.vue";
+import { BandModel } from "@/data/models/acts/bandModel";
+import { ConcertModel } from "@/data/models/acts/concertModel";
+import { LocationModel } from "@/data/models/locations/locationModel";
+import { useRouter } from "vue-router";

-const router = useRouter()
+const router = useRouter();

 defineProps({
  /** Concert to display */
  concert: {
    type: ConcertModel,
-    required: true
+    required: true,
  },

  band: {
    type: BandModel,
-    required: true
+    required: true,
  },

  location: {
    type: LocationModel,
-    required: true
+    required: true,
  },

  /** Display text parts as skeleton */
@@ -30,9 +30,9 @@ defineProps({
  /** Show or hide the button on the right side */
  showButton: {
    type: Boolean,
-    default: true
-  }
-})
+    default: true,
+  },
+});
 </script>

 <template>
@@ -40,7 +40,13 @@ defineProps({
    :title="concert.name"
    v-if="!loading"
    :link="showButton && concert.inStock > 0"
-    @click="showButton && concert.inStock > 0 ? router.push('/concerts/booking/' + location.urlName + '/' + concert.date) : () => {}"
+    @click="console.log(concert.date);
+      showButton && concert.inStock > 0
+        ? router.push(
+            '/concerts/booking/' + location.urlName + '/' + concert.date
+          )
+        : () => {}
+    "
  >
    <template #prepend>
      <div>
@@ -49,7 +55,9 @@ defineProps({
        </div>

        <div class="text-h6">
-          {{ new Date(concert.date).toLocaleString('default', { month: 'long' }) }}
+          {{
+            new Date(concert.date).toLocaleString("default", { month: "long" })
+          }}
        </div>

        <div class="text-h6">
@@ -71,28 +79,23 @@ defineProps({
    <template #append>
      <div>
        <div class="text-secondary font-weight-medium text-h6 pb-1">
-          {{ $t('misc.from') + ' ' + concert.price.toFixed(2) + ' €' }}
+          {{ $t("misc.from") + " " + concert.price.toFixed(2) + " €" }}
        </div>

        <div v-if="concert.inStock == 0 && showButton" class="text-h6">
-          {{ $t('concert.concertSoldOut') }}
+          {{ $t("concert.concertSoldOut") }}
        </div>

        <div v-else-if="showButton">
          <v-btn variant="flat" color="secondary">
-            {{ $t('concert.goToTheConcert') }}
+            {{ $t("concert.goToTheConcert") }}
          </v-btn>
        </div>
-
      </div>
    </template>
  </card-view-horizontal>

-  <card-view-horizontal 
-    v-else
-    :loading="loading"
-  >
-    <v-skeleton-loader
-      type="text" />
+  <card-view-horizontal v-else :loading="loading">
+    <v-skeleton-loader type="text" />
  </card-view-horizontal>
-</template>
+</template>
--- a/src/data/models/exercises/exerciseGroupModel.ts
+++ b/src/data/models/exercises/exerciseGroupModel.ts
@@ -2,6 +2,7 @@ export class ExerciseGroupModel {
  id = -1
  nameDe: string = ""
  nameEn: string = ""
+  icon: string = ""
  groupNr: number = 0
  descriptionDe: string = ""
  descriptionEn: string = ""
--- a/src/data/models/exercises/exerciseModel.ts
+++ b/src/data/models/exercises/exerciseModel.ts
@@ -1,7 +1,8 @@
 import { ExerciseGroupModel } from "./exerciseGroupModel"

 export class ExerciseModel {
-  id = -1
+  id: number = -1
+  uuid: string = ""
  nameDe: string = ""
  nameEn: string = ""
  exerciseNr: number = 0
@@ -9,4 +10,5 @@ export class ExerciseModel {
  descriptionEn: string = ""
  solved: boolean = false
  exerciseGroup: ExerciseGroupModel
+  available: boolean = true
 }
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -97,7 +97,8 @@
      "postalCode": "Postleitzahl",
      "placeOfResidence": "Wohnort",
      "bankName": "Name der Bank",
-      "iban": "IBAN"
+      "iban": "IBAN",
+      "actions": "Aktionen"
    },
    "deleteAccount": {
      "deleteAccount": "Account löschen",
@@ -130,7 +131,8 @@
    "noOrdersText": "Bisher wurden keine Bestellungen von diesem Account getätigt. Gehe zum Warenkorb und bestelle!",
    "ordersDescription": "Übersicht aller getätigten Bestellungen",
    "order": "Bestellung | Bestellungen",
-    "notShipped": "noch nicht versendet"
+    "notShipped": "noch nicht versendet",
+    "orderState": "Bestellstatus"
  },
  "basket": {
    "addToBasket": "Zum Warenkorb hinzufügen",
@@ -166,12 +168,26 @@
        "title": "Auf Werkseinstellungen zurücksetzen?",
        "description": "Sollen alle Einstellungen und Daten auf Werkseinstellungen zurückgesetzt werden? Alle Änderungen und Fortschritte gehen verloren!"
      }
-    }
+    },
+    "exercises": {
+      "available": "{0} von {1} Aufgaben verfügbar",
+      "edit": "Verfügbare Aufgaben bearbeiten",
+      "settings": "Aufgaben-Konfiguration"
+    },
+    "importExport": {
+      "title": "Import/Export Konfiguration",
+      "selectConfigFile": "Konfigurations-Datei auswählen",
+      "download": "Konfiguration exportieren",
+      "upload": "Datei hochladen"
+    },
+    "preferences": "Einstellungen"
  },
  "help": {
    "scoreBoard": {
      "exerciseGroupNr": "Aufgabengruppe {0}: ",
-      "exerciseNr": "Aufgabe {0}.{1}: "
+      "exerciseNr": "Aufgabe {0}.{1}: ",
+      "generatePdf": "PDF generieren",
+      "personalSolutionKey": "Persönlicher Lösungsschlüssel"
    }
  },
  "bannerMessages": {
@@ -225,6 +241,7 @@
      "cancel": "Abbrechen",
      "more": "Mehr",
      "confirm": "Bestätigen",
+      "back": "Zurück",
      "next": "Weiter"
    },
    "validation": {
@@ -241,7 +258,7 @@
    "firstStartup": {
      "title": "Ersteinrichtung",
      "description": "Die Datenbank wird eingerichtet. Bitte warten...",
-      "createDatabase": "Erstelle Datenbank...",
+      "createDatabase": "Datenbank Einrichtung",
      "complete": "Fertig",
      "finished": "Abgeschlossen",
      "createExercises": "Erstelle Aufgaben...",
@@ -249,6 +266,7 @@
      "database": "Datenbank",
      "exercises": "Aufgaben",
      "userData": "Persönliche Daten",
+      "lookAndFeel": "Look and feel",
      "enterYourPersonalData": "Bitte gebe nun deinen Namen und deine Matrikelnummer von der Universität ein. Überprüfe die Angaben vor dem Absenden genau! Die Angaben können später nicht ohne Verlust des Bearbeitungsfortschrittes geändert werden!"
    },
    "user": "Angaben zur Person",
@@ -263,10 +281,26 @@
      "empty": {
        "headline": "So leer hier..."
      },
-      "searchterm": "Suchbegriff"
-    }
+      "searchterm": "Suchbegriff",
+      "globalsearch": "Globale Suche"
+    },
+    "submit": "Absenden",
+    "content": "Inhalt",
+    "source": "Quelle",
+    "softwareVersion": "Software Version",
+    "license": "Lizenz",
+    "developer": "Entwickler",
+    "developedFor": "Entwickelt im Auftrag",
+    "copyright": "Copyright",
+    "githubRepository": "GitHub Repository",
+    "projectPage": "Projektseite"
  },
  "genre": {
-    "withoutBand": "ohne Band"
+    "withoutBand": "ohne Band",
+    "popular": "Beliebte Genres",
+    "allGenres": "Alle Genres"
+  },
+  "admin": {
+    "adminpanel": "Admin Panel"
  }
 }
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -97,7 +97,8 @@
      "postalCode": "Postal code",
      "placeOfResidence": "Place of residence",
      "bankName": "Name of bank",
-      "iban": "IBAN"
+      "iban": "IBAN",
+      "actions": "Actions"
    },
    "deleteAccount": {
      "deleteAccount": "Delete Account",
@@ -127,10 +128,11 @@
    "takeOrder": "Execute order",
    "noOrders": "No orders found",
    "orderedAt": "Ordered at",
-    "noOrdersText": "Bisher wurden keine Bestellungen von diesem Account getätigt. Gehe zum Warenkorb und bestelle!",
+    "noOrdersText": "No orders have been placed with this account yet. Go to your shopping cart and place your order!",
    "ordersDescription": "Overview of all placed orders",
    "order": "Order | Orders",
-    "notShipped": "don't shipped"
+    "notShipped": "don't shipped",
+    "orderState": "Order state"
  },
  "basket": {
    "addToBasket": "Add to basket",
@@ -166,12 +168,28 @@
        "title": "Factory reset?",
        "description": "Do you really want to reset everything? Every change will be lost!"
      }
-    }
+    },
+    "exercises": {
+      "settings": "Exercise Configuration",
+      "available": "{0} of {1} exercises are available",
+      "uploadExerciseConfig": "Upload exercise config",
+      "edit": "Edit available exercises",
+      "upload": "Upload exercises config"
+    },
+    "importExport": {
+      "title": "Import/Export config",
+      "selectConfigFile": "Select config file",
+      "upload": "Upload file",
+      "download": "Export config"
+    },
+    "preferences": "Preferences"
  },
  "help": {
    "scoreBoard": {
      "exerciseGroupNr": "Exercise Group {0}: ",
-      "exerciseNr": "Exercise {0}.{1}: "
+      "exerciseNr": "Exercise {0}.{1}: ",
+      "generatePdf": "Generate PDF",
+      "personalSolutionKey": "Personal solution key"
    }
  },
  "bannerMessages": {
@@ -225,6 +243,7 @@
      "cancel": "Cancel",
      "more": "More",
      "confirm": "Confirm",
+      "back": "Back",
      "next": "Next"
    },
    "validation": {
@@ -241,14 +260,13 @@
    "firstStartup": {
      "title": "First startup",
      "description": "Creating database. Please wait...",
-      "createDatabase": "Create Database...",
+      "createDatabase": "Create Database",
      "complete": "Complete",
-      "createExercises": "Create Exercises...",
-      "finished": "Finished",
      "connectToServer": "Server",
      "database": "Database",
      "exercises": "Exercises",
      "userData": "User data",
+      "lookAndFeel": "Look and feel",
      "enterYourPersonalData": "Please enter your name and your Matrikel number from your university. Check it twice! You can't change it later without loosing your exercise progress!"
    },
    "user": "About person",
@@ -263,10 +281,26 @@
      "empty": {
        "headline": "So empty here..."
      },
-      "searchterm": "Search term"
-    }
+      "searchterm": "Search term",
+      "globalsearch": "Global Search"
+    },
+    "submit": "Submit",
+    "content": "Content",
+    "source": "Source",
+    "softwareVersion": "Software Version",
+    "license": "License",
+    "developer": "Developer",
+    "developedFor": "Developed for",
+    "copyright": "Copyright",
+    "githubRepository": "GitHub Repository",
+    "projectPage": "Project page"
  },
  "genre": {
-    "withoutBand": "without Band"
+    "withoutBand": "without Band",
+    "popular": "Popular Genres",
+    "allGenres": "All Genres"
+  },
+  "admin": {
+    "adminpanel": "Admin Panel"
  }
 }
--- a/src/pages/account/accountAddressesPage/index.vue
+++ b/src/pages/account/accountAddressesPage/index.vue
@@ -12,7 +12,7 @@ const headers = [
  { title: feedbackStore.i18n.t('account.userData.houseNumber'), value: "houseNumber" },
  { title: feedbackStore.i18n.t('account.userData.postalCode'), value: "postalCode" },
  { title: feedbackStore.i18n.t('account.userData.placeOfResidence'), value: "city" },
-  { title: "Aktionen", value: "actions", width: 130 }
+  { title: feedbackStore.i18n.t('account.userData.actions'), value: "actions", width: 130 }
 ]

 accountStore.refreshAccount()
--- a/src/pages/account/accountPaymentsPage/index.vue
+++ b/src/pages/account/accountPaymentsPage/index.vue
@@ -10,7 +10,7 @@ const feedbackStore = useFeedbackStore()
 const headers = [
  { title: feedbackStore.i18n.t('account.userData.bankName'), value: "bankName" },
  { title: feedbackStore.i18n.t('account.userData.iban'), value: "iban" },
-  { title: "Aktionen", value: "actions", width: 130 }
+  { title: feedbackStore.i18n.t('account.userData.actions'), value: "actions", width: 130 }
 ]

 accountStore.refreshAccount()
--- a/src/pages/admin/concertsAdminPage/index.vue
+++ b/src/pages/admin/concertsAdminPage/index.vue
@@ -40,7 +40,7 @@ concertStore.getConcerts()
      </template>

      <template #item.price="{ item }">
-        {{ item.price.toFixed(2) }} €
+        {{ item.price.toFixed(2) + '€' }}
      </template>

      <template #item.image="{ item }">
--- a/src/pages/admin/filesAdminPage/fileUploadDialog.vue
+++ b/src/pages/admin/filesAdminPage/fileUploadDialog.vue
@@ -46,7 +46,7 @@ const test = ref()
        </v-row>
      </v-container>

-      <v-btn type="submit">Submit</v-btn>
+      <v-btn type="submit">{{ $t('misc.submit') }}</v-btn>
    </v-form>

    <template #actions>
--- a/src/pages/admin/filesAdminPage/index.vue
+++ b/src/pages/admin/filesAdminPage/index.vue
@@ -67,7 +67,7 @@ filesStore.getStaticFolders()
              v-if="filesStore.selectedFile != undefined && filesStore.selectedFile.name.endsWith('js')"
              :model-value="filesStore.selectedFile.content"
              variant="outlined"
-              label="Content"
+              :label="$t('misc.content')"
              height="300"
              rows="30"
            />
@@ -104,7 +104,7 @@ filesStore.getStaticFolders()
                  prepend-icon="mdi-web"
                  v-if="filesStore.selectedFile.copyright.url.length > 0"
                >
-                  <a :href="filesStore.selectedFile.copyright.url" target="_blank" >Quelle</a>
+                  <a :href="filesStore.selectedFile.copyright.url" target="_blank" >{{ $t('misc.source') }}</a>
                </v-list-item>
              </template>
            </v-list>
--- a/src/pages/admin/genresAdminPage/index.vue
+++ b/src/pages/admin/genresAdminPage/index.vue
@@ -2,12 +2,14 @@
 import dataLayout from '@/layouts/dataLayout.vue';
 import genreEditDialog from './genreEditDialog.vue';
 import { useGenreStore } from '@/stores/genre.store';
+import { useFeedbackStore } from '@/stores/feedback.store';

 const genreStore = useGenreStore()
+const feedbackStore = useFeedbackStore()

 const headers = [
-  { title: "Name", value: "name" },
-  { title: "Bands", value: "bands" },
+  { title: feedbackStore.i18n.t('band.genre'), value: "name" },
+  { title: feedbackStore.i18n.t('band.name'), value: "bands" },
  { title: "", value: "edit", width: 130 }
 ]

--- a/src/pages/admin/ordersAdminPage/index.vue
+++ b/src/pages/admin/ordersAdminPage/index.vue
@@ -3,17 +3,19 @@ import dataLayout from '@/layouts/dataLayout.vue';
 import { useOrderStore } from '@/stores/order.store';
 import moment from 'moment';
 import OrderDetailDialog from './orderDetailDialog.vue';
+import { useFeedbackStore } from '@/stores/feedback.store';

 const orderStore = useOrderStore()
+const feedbackStore = useFeedbackStore()

 const headers = [
-  { title: "Account", value: "account.username" },
-  { title: "Name", value: "account" },
-  { title: "Bestellt am", value: "orderedAt" },
-  { title: "Adresse", value: "street" },
-  { title: "Stadt", value: "city" },
-  { title: "Versendet", value: "shipped" },
-  { title: "Aktionen", value: "edit", width: 130 }
+  { title: feedbackStore.i18n.t('account.userData.username'), value: "account.username" },
+  { title: feedbackStore.i18n.t('account.userData.firstName'), value: "account" },
+  { title: feedbackStore.i18n.t('order.orderedAt'), value: "orderedAt" },
+  { title: feedbackStore.i18n.t('account.userData.address'), value: "street" },
+  { title: feedbackStore.i18n.t('account.userData.placeOfResidence'), value: "city" },
+  { title: feedbackStore.i18n.t('order.orderState'), value: "shipped" },
+  { title: "", value: "edit", width: 130 }
 ]

 orderStore.getAllOrders()
--- a/src/pages/bands/bandDetailPage/index.vue
+++ b/src/pages/bands/bandDetailPage/index.vue
@@ -7,9 +7,13 @@ import concertSection from './concertSection.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import { useBandStore } from '@/stores/band.store';
 import { onMounted, watch } from 'vue';
+import { useConcertStore } from '@/stores/concert.store';

 const router = useRouter()
 const bandStore = useBandStore()
+const concertStore = useConcertStore()
+
+concertStore.getConcerts()

 onMounted(async () => {
  bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))
--- a/src/pages/bands/bandsPage/index.vue
+++ b/src/pages/bands/bandsPage/index.vue
@@ -39,8 +39,8 @@ watch(() => router.currentRoute.value.query, () => {
        </v-row>

        <v-row
-          v-else-if="bandStore.bands.length > 0"
-          v-for="band in bandStore.bands"
+          v-else-if="bandStore.filteredBands.length > 0"
+          v-for="band in bandStore.filteredBands"
        >
          <v-col>
            <band-list-item
--- a/src/pages/concerts/concertBookingPage/index.vue
+++ b/src/pages/concerts/concertBookingPage/index.vue
@@ -72,7 +72,7 @@ watch(() => router.currentRoute.value.params.date, () => {
            <circular-progress-indeterminate />

            <div class="pt-5 text-h3">
-              {{ $t('misc.loading') }}...
+              {{ $t('misc.loading') }}
            </div>
          </v-col>

--- a/src/pages/concerts/concertsPage/concertsListSection.vue
+++ b/src/pages/concerts/concertsPage/concertsListSection.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { useConcertStore } from '@/stores/concert.store';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
-import concertFilterbar from './concertFilterbar.vue';
+import { useConcertStore } from "@/stores/concert.store";
+import concertListItem from "@/components/pageParts/concertListItem.vue";
+import cardViewHorizontal from "@/components/basics/cardViewHorizontal.vue";
+import sectionDivider from "@/components/basics/sectionDivider.vue";
+import concertFilterbar from "./concertFilterbar.vue";

-const concertStore = useConcertStore()
+const concertStore = useConcertStore();
 </script>

 <template>
-  <div
-    v-if="concertStore.fetchInProgress"
-  >
+  <div v-if="concertStore.fetchInProgress">
    <section-divider :loading="true" />
    <v-row v-for="i in 3">
      <v-col>
@@ -25,14 +23,22 @@ const concertStore = useConcertStore()
    v-for="(concert, index) of concertStore.concerts"
  >
    <div v-if="concert.offered">
-      <v-row 
-        v-if="index == 0 || 
-        new Date(concertStore.concerts[index - 1].date).getMonth() != 
-        new Date(concertStore.concerts[index].date).getMonth()"
+      <v-row
+        v-if="
+          index == 0 ||
+          new Date(concertStore.concerts[index - 1].date).getMonth() !=
+            new Date(concertStore.concerts[index].date).getMonth()
+        "
      >
        <v-col>
          <section-divider
-            :title="new Date(concert.date).toLocaleString('default', { month: 'long' }) + ' ' + new Date(concert.date).getFullYear()"
+            :title="
+              new Date(concert.date).toLocaleString('default', {
+                month: 'long',
+              }) +
+              ' ' +
+              new Date(concert.date).getFullYear()
+            "
          />
        </v-col>
      </v-row>
@@ -48,4 +54,4 @@ const concertStore = useConcertStore()
      </v-row>
    </div>
  </div>
-</template>
+</template>
--- a/src/pages/misc/basketPage/index.vue
+++ b/src/pages/misc/basketPage/index.vue
@@ -43,7 +43,7 @@ const showOrderingDialog = ref()
          </template>

          <v-card-text class="text-right text-h5" v-if="basketStore.itemsInBasket.length > 0">
-            {{ $t('misc.totalPrice') }}: {{ (basketStore.getTotalPrice).toFixed(2) }} €
+            {{ $t('misc.totalPrice') }}: {{ (basketStore.getTotalPrice).toFixed(2) + '€' }}
          </v-card-text>
          

--- a/src/pages/misc/basketPage/ticketsTable.vue
+++ b/src/pages/misc/basketPage/ticketsTable.vue
@@ -44,19 +44,19 @@ function removeFromBasket(basketItem: BasketItemModel) {

        <!-- Quantity -->
        <td class="text-center">
-          {{ basketItem.seats.length }}x
+          {{ basketItem.seats.length + 'x' }}
        </td>

        <!-- Price per event -->
        <td class="text-right">
          <div v-if="basketItem.seats">
-            {{ basketItem.price.toFixed(2) }} €
+            {{ basketItem.price.toFixed(2) + '€' }}
          </div>
        </td>

        <!-- Total price -->
        <td class="text-right">
-          {{ (calcPrice(basketItem.concert.price, basketItem.seats.length)).toFixed(2) }} €
+          {{ (calcPrice(basketItem.concert.price, basketItem.seats.length)).toFixed(2) + '€' }}
        </td>

        <td class="text-right">
--- a/src/pages/misc/helpPage/index.vue
+++ b/src/pages/misc/helpPage/index.vue
@@ -1,39 +1,34 @@
 <script setup lang="ts">
-import { useExerciseStore } from '@/stores/exercise.store';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-import { generateResultsPdf } from '@/scripts/pdfScripts';
-import { usePreferencesStore } from '@/stores/preferences.store';
-import cardView from '@/components/basics/cardView.vue';
-import { LanguageEnum } from '@/data/enums/languageEnum';
+import { useExerciseStore } from "@/stores/exercise.store";
+import outlinedButton from "@/components/basics/outlinedButton.vue";
+import { generateResultsPdf } from "@/scripts/pdfScripts";
+import { usePreferencesStore } from "@/stores/preferences.store";
+import cardView from "@/components/basics/cardView.vue";
+import { LanguageEnum } from "@/data/enums/languageEnum";
+import { ExerciseModel } from "@/data/models/exercises/exerciseModel";
+import { getExerciseDotColor } from "@/scripts/colorScripts";
+import { getExerciseDescriptionLanguage, getExerciseNameLanguage } from "@/scripts/languageScripts";

-const exerciseStore = useExerciseStore()
-const preferencesStore = usePreferencesStore()
+const exerciseStore = useExerciseStore();
+const preferencesStore = usePreferencesStore();

-exerciseStore.solveExercise(1, 1)
-
-function getDotColor(exerciseGroupNr: number) {
-  switch(exerciseGroupNr) {
-    case 0: return "purple"
-    case 1: return "orange"
-    case 2: return "blue"
-    case 3: return "pink"
-  }
-}
+// Mark this exercise as solved if page was opened
+exerciseStore.solveExercise(1, 1);

 function generateExerciseKey() {
  try {
-    let code = ""
+    let code = "";

    for (let i = 0; i < 13; i++) {
      if (exerciseStore.exercises[i].solved) {
-        code += "3"
+        code += "3";
      } else {
-        code += "0"
+        code += "0";
      }
    }

-    return (Number(code) + Number(preferencesStore.registrationNumber)) * 237
-  } catch(e) {}
+    return (Number(code) + Number(preferencesStore.registrationNumber)) * 237;
+  } catch (e) {}
 }
 </script>

@@ -46,9 +41,12 @@ function generateExerciseKey() {
        <outlined-button
          prepend-icon="mdi-file-pdf-box"
          @click="generateResultsPdf()"
-          :disabled="preferencesStore.studentName.length < 3 || preferencesStore.registrationNumber.length < 7"
+          :disabled="
+            preferencesStore.studentName.length < 3 ||
+            preferencesStore.registrationNumber.length < 7
+          "
        >
-          PDF generieren
+          {{ $t("help.scoreBoard.generatePdf") }}
        </outlined-button>
      </v-col>
    </v-row>
@@ -56,7 +54,7 @@ function generateExerciseKey() {
    <v-row>
      <v-col class="text-h5 text-center">
        <div>
-          Persönlicher Lösungsschlüssel:
+          {{ $t("help.scoreBoard.personalSolutionKey") + ":" }}
        </div>
        <div>
          {{ generateExerciseKey() }}
@@ -71,46 +69,55 @@ function generateExerciseKey() {
          icon="mdi-checkbox-marked-circle-auto-outline"
        >
          <template #borderless>
-            <v-timeline
-              side="end"
-              class="px-5"
-              align="start"
-            >
+            <v-timeline side="end" class="px-5" align="start">
              <template v-for="exercise of exerciseStore.exercises">
-                <v-timeline-item v-if="exercise.exerciseNr == 1"
-                  dot-color="grey"
+                <!-- Add exercise group description item -->
+                <v-timeline-item
+                  v-if="exercise.exerciseNr == 1"
+                  :dot-color="
+                    getExerciseDotColor(exercise.exerciseGroup.groupNr)
+                  "
+                  :icon="exercise.exerciseGroup.icon"
                  fill-dot
                >
                  <div
-                    :class="`pt-1 text-h5 font-weight-bold text-${getDotColor(exercise.exerciseGroup.groupNr)}`"
+                    :class="`pt-1 text-h5 font-weight-bold text-${getExerciseDotColor(
+                      exercise.exerciseGroup.groupNr
+                    )}`"
                  >
                    {{
-                      (preferencesStore.language == LanguageEnum.GERMAN 
-                      ? exercise.exerciseGroup.nameDe 
-                      : exercise.exerciseGroup.nameEn) 
+                      preferencesStore.language == LanguageEnum.GERMAN
+                        ? exercise.exerciseGroup.nameDe
+                        : exercise.exerciseGroup.nameEn
                    }}
                  </div>

                  <div>
                    {{
-                      (preferencesStore.language == LanguageEnum.GERMAN 
-                      ? exercise.exerciseGroup.descriptionDe 
-                      : exercise.exerciseGroup.descriptionEn) 
+                      preferencesStore.language == LanguageEnum.GERMAN
+                        ? exercise.exerciseGroup.descriptionDe
+                        : exercise.exerciseGroup.descriptionEn
                    }}
                  </div>
                </v-timeline-item>

+                <!-- Exercise item -->
                <v-timeline-item
-                  :dot-color="getDotColor(exercise.exerciseGroup.groupNr)"
+                  v-if="exercise.available"
+                  :dot-color="exercise.solved ? 'green' : 'primary'"
                  :icon="exercise.solved ? 'mdi-check' : 'mdi-pencil'"
                >
-                   <!-- Right side -->
+                  <!-- Right side -->
                  <card-view
-                    :title="$t('help.scoreBoard.exerciseNr', [exercise.exerciseGroup.groupNr, exercise.exerciseNr]) + 
-                      (preferencesStore.language == LanguageEnum.GERMAN ? exercise.nameDe : exercise.nameEn)"
+                    :title="
+                      $t('help.scoreBoard.exerciseNr', [
+                        exercise.exerciseGroup.groupNr,
+                        exercise.exerciseNr,
+                      ]) + getExerciseNameLanguage(exercise)
+                    "
                    :color="exercise.solved ? 'green' : 'primary'"
                  >
-                    {{ preferencesStore.language == LanguageEnum.GERMAN ? exercise.descriptionDe : exercise.descriptionEn }}
+                    {{ getExerciseDescriptionLanguage(exercise) }}
                  </card-view>
                </v-timeline-item>
              </template>
@@ -120,4 +127,4 @@ function generateExerciseKey() {
      </v-col>
    </v-row>
  </v-container>
-</template>
+</template>
--- a/src/pages/misc/homePage/index.vue
+++ b/src/pages/misc/homePage/index.vue
@@ -1,24 +1,25 @@
 <script setup lang="ts">
-import { useConcertStore } from '@/stores/concert.store';
-import { useLocationStore } from '@/stores/location.store';
-import bandSection from './bandsSection.vue';
-import UpcomingConcertsSection from './upcomingConcertsSection.vue';
-import TopLocationsSection from './topLocationsSection.vue';
-import { usePreferencesStore } from '@/stores/preferences.store';
-import welcomeDialog from './welcomeDialog.vue';
-import { ref } from 'vue';
+import { useConcertStore } from "@/stores/concert.store";
+import { useLocationStore } from "@/stores/location.store";
+import bandSection from "./bandsSection.vue";
+import UpcomingConcertsSection from "./upcomingConcertsSection.vue";
+import TopLocationsSection from "./topLocationsSection.vue";
+import { usePreferencesStore } from "@/stores/preferences.store";
+import welcomeDialog from "./welcomeDialog/dialog.vue";
+import { ref } from "vue";
+import genresSection from "./topGenresSection.vue";

-const concertStore = useConcertStore()
-const locationStore = useLocationStore()
-const preferencesStore = usePreferencesStore()
-const showWelcomeDialog = ref(false)
+const concertStore = useConcertStore();
+const locationStore = useLocationStore();
+const preferencesStore = usePreferencesStore();
+const showWelcomeDialog = ref(false);

-concertStore.getUpcomingConcerts()
-locationStore.getTopLocations()
+concertStore.getUpcomingConcerts();
+locationStore.getTopLocations();

 // First startup
 if (preferencesStore.firstStartup) {
-  showWelcomeDialog.value = true
+  showWelcomeDialog.value = true;
 }
 </script>

@@ -33,7 +34,9 @@ if (preferencesStore.firstStartup) {

      <v-col cols="10">
        <upcoming-concerts-section />
-        
+
+        <genres-section />
+
        <top-locations-section />
      </v-col>

@@ -42,4 +45,4 @@ if (preferencesStore.firstStartup) {
  </v-container>

  <welcome-dialog :model-value="showWelcomeDialog" />
-</template>
+</template>
--- a/src/pages/misc/homePage/topGenresSection.vue
+++ b/src/pages/misc/homePage/topGenresSection.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import CardView from "@/components/basics/cardView.vue";
+import CardViewOneLine from "@/components/basics/cardViewOneLine.vue";
+import SectionDivider from "@/components/basics/sectionDivider.vue";
+import { GenreApiModel } from "@/data/models/acts/genreApiModel";
+import { useGenreStore } from "@/stores/genre.store";
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import outlinedButton from "@/components/basics/outlinedButton.vue";
+
+const genreStore = useGenreStore();
+const genresByNumberOfBands = ref<Array<GenreApiModel>>([]);
+const router = useRouter();
+
+genreStore.getGenres();
+
+watch(
+  () => genreStore.genres,
+  () => {
+    genresByNumberOfBands.value = genreStore.genres;
+
+    genresByNumberOfBands.value.sort((a, b) => {
+      return b.bands.length - a.bands.length;
+    });
+  }
+);
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <section-divider :title="$t('genre.popular')" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col v-if="genreStore.fetchInProgress" v-for="n in 4" cols="6" md="">
+      <v-skeleton-loader :loading="true" type="card" />
+    </v-col>
+
+    <v-col v-else v-for="genre in genreStore.topGenres" cols="6" md="3">
+      <card-view
+        @click="router.push({ path: '/bands', query: { genreName: genre.name }})"
+        :title="genre.name"
+        :subtitle="genre.bands.length + ' ' + $t('band.band', genre.bands.length)"
+      />
+    </v-col>
+  </v-row>
+
+  <!-- todo?
+  <v-row>
+    <v-col>
+      <outlined-button
+        append-icon="mdi-chevron-right"
+        @click="router.push('/')"
+        block
+      >
+        {{ $t('genre.allGenres') }}
+      </outlined-button>
+    </v-col>
+  </v-row> -->
+</template>
--- a/src/pages/misc/homePage/welcomeDialog/dialog.vue
+++ b/src/pages/misc/homePage/welcomeDialog/dialog.vue
@@ -1,43 +1,36 @@
 <script setup lang="ts">
 import actionDialog from '@/components/basics/actionDialog.vue';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
-import ServerStateText from '@/components/pageParts/serverStateText.vue';
-import { getRegisterNumberRules, getStringRules } from '@/scripts/validationRules';
 import { useFeedbackStore } from '@/stores/feedback.store';
 import { usePreferencesStore } from '@/stores/preferences.store';
 import { ref, watch } from 'vue';
+import step1 from './step1.vue';
+import step2 from './step2.vue';
+import step3 from './step3.vue';
+import step4 from './step4.vue';

 const preferencesStore = usePreferencesStore()
 const feedbackStore = useFeedbackStore()
 const showDialog = defineModel()
-const currentStep = ref(0)
+const currentStep = ref(1)
+const databaseCreated = ref(false)

 const steps = [
  feedbackStore.i18n.t('misc.firstStartup.connectToServer'),
+  feedbackStore.i18n.t('misc.firstStartup.lookAndFeel'),
  feedbackStore.i18n.t('misc.firstStartup.database'),
-  feedbackStore.i18n.t('misc.firstStartup.exercises'),
  feedbackStore.i18n.t('misc.firstStartup.userData'),
 ]

 preferencesStore.getServerState()


-watch(() => currentStep.value, () => {
-  switch(currentStep.value) {
-    case 2: {
-      preferencesStore.resetDb();
-      break;
-    }
+watch(() => currentStep.value, async () => {
+  if (currentStep.value == 3 && !databaseCreated.value) {
+    await preferencesStore.resetDb();
+    await preferencesStore.resetExerciseProg();

-    case 3: {
-      preferencesStore.resetExerciseProg();
-      break;
-    }
-
-    case 4: {
-      
-      break;
-    }
+    databaseCreated.value = true;
  }
 })
 </script>
@@ -77,83 +70,31 @@ watch(() => currentStep.value, () => {
          <!-- Step 1: Check connection to backend server -->
          <v-stepper-window-item
            :value="1"
-            class="text-h4 text-center"
          >
-            <div>
-              {{ $t('preferences.serverState') }}:
-            </div>
-
-            <server-state-text />
+            <step1 />
          </v-stepper-window-item>

-          <!-- Step 2: Reset the database -->
+
+          <!-- Step 2: Select theme and language -->
          <v-stepper-window-item
            :value="2"
+            
          >
-            <div v-if="preferencesStore.fetchInProgress" class="text-center text-h4 pb-4">
-              <div class="pb-4">
-                {{ $t('misc.firstStartup.createDatabase') }}
-              </div>
-
-              <v-progress-linear indeterminate />
-            </div>
-
-            <div v-else class="text-center text-h4 pb-4 text-green">
-              <v-icon icon="mdi-check" /> {{ $t('misc.firstStartup.finished') }}
-            </div>
+            <step2 />
          </v-stepper-window-item>

-          <!-- Step 3: Create exercises -->
+          <!-- Step 3: Reset the database -->
          <v-stepper-window-item
            :value="3"
          >
-            <div v-if="preferencesStore.fetchInProgress" class="text-center text-h4 pb-4">
-              <div class="pb-4">
-                {{ $t('misc.firstStartup.createExercises') }}
-              </div>
-              
-              <v-progress-linear indeterminate />
-            </div>
-
-            <div v-else class="text-center text-h4 pb-4 text-green">
-              <v-icon icon="mdi-check" /> {{ $t('misc.firstStartup.finished') }}
-            </div>
+            <step3 />
          </v-stepper-window-item>

          <!-- Step 4: Personal data -->
          <v-stepper-window-item
            :value="4"
          >
-            <v-container class="px-0 py-2">
-              <v-row>
-                <v-col>
-                  <v-alert color="warning" icon="mdi-alert">
-                    {{ $t('misc.firstStartup.enterYourPersonalData') }}
-                  </v-alert>
-                </v-col>
-              </v-row>
-              <v-row>
-                <v-col>
-                  <v-text-field
-                    variant="outlined"
-                    :label="$t('misc.yourFullName')"
-                    v-model="preferencesStore.studentName"
-                    :rules="getStringRules(4)"
-                  />
-                </v-col>
-              </v-row>
-
-              <v-row>
-                <v-col>
-                  <v-text-field
-                    variant="outlined"
-                    :label="$t('misc.registrationNumber')"
-                    v-model="preferencesStore.registrationNumber"
-                    :rules="getRegisterNumberRules()"
-                  />
-                </v-col>
-              </v-row>
-            </v-container>
+            <step4 />
          </v-stepper-window-item>
        </v-stepper-window>

@@ -161,16 +102,25 @@ watch(() => currentStep.value, () => {
        <!-- Next/Previous buttons -->
        <v-stepper-actions
          @click:next="next"
+          @click:prev="prev"
        >
          <template #prev="{ props }">
-            <v-spacer />
+            <outlined-button
+              @click="props.onClick()"
+              :disabled="currentStep == 1 || preferencesStore.fetchInProgress"
+              color="grey"
+              prepend-icon="mdi-arrow-left"
+            >
+              {{ $t('misc.actions.back') }}
+            </outlined-button>
          </template>

          <template #next="{ props }">
            <outlined-button
-              v-if="currentStep < 4"
+              v-if="currentStep < steps.length"
              @click="props.onClick()"
              :disabled="preferencesStore.fetchInProgress"
+              append-icon="mdi-arrow-right"
            >
              {{ $t('misc.actions.next') }}
            </outlined-button>
@@ -180,7 +130,7 @@ watch(() => currentStep.value, () => {
              @click="showDialog = false; preferencesStore.firstStartup = false"
              :disabled="preferencesStore.studentName.length < 5 || 
                preferencesStore.registrationNumber.length < 8"
-              prepend-icon="mdi-check"
+              append-icon="mdi-check"
              color="success"
            >
              {{ $t('misc.firstStartup.complete') }}
--- a/src/pages/misc/homePage/welcomeDialog/step1.vue
+++ b/src/pages/misc/homePage/welcomeDialog/step1.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import ServerStateText from '@/components/pageParts/serverStateText.vue';
+</script>
+
+<template>
+  <v-container class="text-h4 text-center">
+    <v-row>
+      <v-col>
+        <v-icon icon="mdi-server" />
+      </v-col>
+    </v-row>
+    
+    <v-row>
+      <v-col>
+        <div>
+          {{ $t('preferences.serverState') + ':' }}
+        </div>
+
+        <server-state-text />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
--- a/src/pages/misc/homePage/welcomeDialog/step2.vue
+++ b/src/pages/misc/homePage/welcomeDialog/step2.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ThemeEnum } from '@/data/enums/themeEnums';
+import { usePreferencesStore } from '@/stores/preferences.store';
+
+const preferencesStore = usePreferencesStore()
+
+const themeEnums = Object.values(ThemeEnum)
+</script>
+
+<template>
+  <v-container width="600" class="text-h4 text-center">
+    <v-row>
+      <v-col>
+        <v-icon icon="mdi-palette" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        {{ $t('misc.firstStartup.lookAndFeel') }}
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-select
+          v-model="preferencesStore.theme"
+          :items="themeEnums"
+          :label="$t('preferences.selectedTheme')"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-select
+          v-model="preferencesStore.language"
+          :items="$i18n.availableLocales" 
+          :label="$t('preferences.language')"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
--- a/src/pages/misc/homePage/welcomeDialog/step3.vue
+++ b/src/pages/misc/homePage/welcomeDialog/step3.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { usePreferencesStore } from '@/stores/preferences.store';
+
+const preferencesStore = usePreferencesStore()
+</script>
+
+<template>
+  <v-container width="600" class="text-h4 text-center">
+    <v-row>
+      <v-col>
+        <v-icon icon="mdi-database" />
+      </v-col>
+    </v-row>
+    
+    <v-row>
+      <v-col>
+        {{ $t('misc.firstStartup.createDatabase') }}
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col v-if="preferencesStore.fetchInProgress">
+        <v-progress-linear indeterminate />
+      </v-col>
+
+      <v-col v-else class="text-green">
+        <v-icon icon="mdi-check" /> {{ $t('misc.firstStartup.finished') }}
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
--- a/src/pages/misc/homePage/welcomeDialog/step4.vue
+++ b/src/pages/misc/homePage/welcomeDialog/step4.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { getRegisterNumberRules, getStringRules } from '@/scripts/validationRules';
+import { usePreferencesStore } from '@/stores/preferences.store';
+
+const preferencesStore = usePreferencesStore()
+</script>
+
+<template>
+  <v-container class="px-0 py-2"  width="600">
+    <v-row>
+      <v-col class="text-h4 text-center">
+        <v-icon icon="mdi-account" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col class="text-h4 text-center">
+        {{ $t('misc.firstStartup.userData') }}
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-alert color="warning" icon="mdi-alert">
+          {{ $t('misc.firstStartup.enterYourPersonalData') }}
+        </v-alert>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          variant="outlined"
+          :label="$t('misc.yourFullName')"
+          v-model="preferencesStore.studentName"
+          :rules="getStringRules(4)"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          variant="outlined"
+          :label="$t('misc.registrationNumber')"
+          v-model="preferencesStore.registrationNumber"
+          :rules="getRegisterNumberRules()"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
--- a/src/pages/misc/preferencesPage/aboutSection.vue
+++ b/src/pages/misc/preferencesPage/aboutSection.vue
@@ -1,42 +1,56 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
-import packageJson from './../../../../package.json'
+import cardView from "@/components/basics/cardView.vue";
+import packageJson from "./../../../../package.json";

+function openExternal(url: string) {
+  window.open(url, "_blank");
+}
 </script>

 <template>
-  <card-view
-    :title="$t('preferences.aboutProject')"
-    icon="mdi-information"
-  >
+  <card-view :title="$t('preferences.aboutProject')" icon="mdi-information">
    <template #borderless>
      <v-list>
        <v-list-item
-          title="Software Version"
+          :title="$t('misc.softwareVersion')"
          :subtitle="packageJson.version"
          prepend-icon="mdi-counter"
        />
-        <v-list-item 
-          title="Lizenz"
+        <v-list-item
+          :title="$t('misc.license')"
          subtitle="MIT"
          prepend-icon="mdi-license"
        />
        <v-list-item
-          title="Entwickler"
+          :title="$t('misc.developer')"
          subtitle="Tobias Zoghaib"
          prepend-icon="mdi-account"
        />
-        <v-list-item 
-          title="Entwickelt im Auftrag"
+        <v-list-item
+          :title="$t('misc.developedFor')"
          subtitle="Uni Hannover, Institut für IT-Sicherheit, Fachgebiet Usable Security and Privacy"
          prepend-icon="mdi-school"
        />
-        <v-list-item 
-          title="Copyright"
-          subtitle="2024"
+        <v-list-item
+          :title="$t('misc.copyright')"
+          subtitle="2024-2025"
          prepend-icon="mdi-copyright"
        />
+        <v-list-item
+          :title="$t('misc.githubRepository')"
+          prepend-icon="mdi-web"
+          @click="openExternal('https://github.com/TobiZog/eventmaster')"
+        />
+        <v-list-item
+          :title="$t('misc.projectPage')"
+          prepend-icon="mdi-web"
+          @click="
+            openExternal(
+              'https://www.itsec.uni-hannover.de/de/usec/forschung/eventmaster-learning-web-attacks'
+            )
+          "
+        />
      </v-list>
    </template>
  </card-view>
-</template>
+</template>
--- a/src/pages/misc/preferencesPage/exerciseConfig/exerciseDialog.vue
+++ b/src/pages/misc/preferencesPage/exerciseConfig/exerciseDialog.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import actionDialog from "@/components/basics/actionDialog.vue";
+import OutlinedButton from "@/components/basics/outlinedButton.vue";
+import {
+  getExerciseGroupNameLanguage,
+  getExerciseNameLanguage,
+} from "@/scripts/languageScripts";
+import { useExerciseStore } from "@/stores/exercise.store";
+import { usePreferencesStore } from "@/stores/preferences.store";
+import { ModelRef } from "vue";
+
+const showDialog: ModelRef<boolean> = defineModel();
+const exerciseStore = useExerciseStore();
+const preferencesStore = usePreferencesStore();
+
+function saveConfig() {
+  preferencesStore.notAvailableExercises = []
+
+  for (let exercise of exerciseStore.exercises) {
+    if (!exercise.available) {
+      preferencesStore.notAvailableExercises.push(exercise.uuid)
+    }
+  }
+
+  showDialog.value = false
+}
+</script>
+
+<template>
+  <action-dialog
+    v-model="showDialog"
+    :title="$t('preferences.exercises.edit')"
+    icon="mdi-pencil"
+    width="800"
+    persistent
+  >
+    <v-container>
+      <v-list>
+        <div v-for="exercise in exerciseStore.exercises">
+          <div
+            v-if="exercise.exerciseNr == 1"
+          >
+            <v-divider v-if="exercise.exerciseGroup.groupNr != 0"></v-divider>
+            <v-list-item
+              type="subheader"
+              :title="getExerciseGroupNameLanguage(exercise.exerciseGroup)"
+            />
+          </div>
+
+          <v-list-item>
+            <v-checkbox
+              :label="getExerciseNameLanguage(exercise)"
+              v-model="exercise.available"
+              hide-details
+              density="compact"
+            />
+          </v-list-item>
+        </div>
+      </v-list>
+    </v-container>
+
+    <template #actions>
+      <outlined-button color="warning" prepend-icon="mdi-close" @click="showDialog = false">
+        {{ $t('misc.actions.cancel') }}
+      </outlined-button> 
+      <outlined-button color="success" prepend-icon="mdi-content-save" @click="saveConfig()">
+        {{ $t("misc.actions.save") }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>
--- a/src/pages/misc/preferencesPage/exerciseConfig/exerciseSection.vue
+++ b/src/pages/misc/preferencesPage/exerciseConfig/exerciseSection.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import cardView from "@/components/basics/cardView.vue";
+import OutlinedButton from "@/components/basics/outlinedButton.vue";
+import { ExerciseGroupModel } from "@/data/models/exercises/exerciseGroupModel";
+import { ExerciseModel } from "@/data/models/exercises/exerciseModel";
+import { getExerciseGroupNameLanguage } from "@/scripts/languageScripts";
+import { useExerciseStore } from "@/stores/exercise.store";
+import { ref, watch } from "vue";
+import exerciseDialog from "./exerciseDialog.vue";
+
+const exerciseStore = useExerciseStore();
+const exerciseGroups = ref<Array<ExerciseGroupModel>>([]);
+const showExerciseDialog = ref(false);
+
+exerciseStore.getAllExercises();
+
+/**
+ * Extract exercise groups from all exercises
+ */
+function groupExercises() {
+  exerciseStore.exercises.forEach((exercise) => {
+    if (
+      !exerciseGroups.value.find(
+        (exerciseGroup) => exerciseGroup.id == exercise.exerciseGroup.id
+      )
+    ) {
+      exerciseGroups.value.push(exercise.exerciseGroup);
+    }
+  });
+}
+
+function filterByExerciseGroup(
+  exercises: Array<ExerciseModel>,
+  group: ExerciseGroupModel
+) {
+  return exercises.filter((exercise) => exercise.exerciseGroup.id == group.id);
+}
+
+watch(
+  () => exerciseStore.exercises,
+  () => groupExercises()
+);
+</script>
+
+<template>
+  <card-view
+    :title="$t('preferences.exercises.settings')"
+    icon="mdi-book-open-blank-variant"
+  >
+    <template #borderless>
+      <v-list>
+        <v-list-item
+          v-for="group in exerciseGroups"
+          :title="getExerciseGroupNameLanguage(group)"
+          :subtitle="
+            $t('preferences.exercises.available', [
+              filterByExerciseGroup(exerciseStore.exercises, group).filter((exercise) => exercise.available)
+                .length,
+              filterByExerciseGroup(exerciseStore.exercises, group).length,
+            ])
+          "
+          :prepend-icon="group.icon"
+        />
+      </v-list>
+    </template>
+
+    <template #actions>
+      <outlined-button prepend-icon="mdi-pencil" @click="showExerciseDialog = true">
+        {{ $t("preferences.exercises.edit") }}
+      </outlined-button>
+    </template>
+  </card-view>
+
+  <exercise-dialog v-model="showExerciseDialog" />
+</template>
--- a/src/pages/misc/preferencesPage/importExportSection.vue
+++ b/src/pages/misc/preferencesPage/importExportSection.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import OutlinedButton from "@/components/basics/outlinedButton.vue";
+
+</script>
+
+<template>
+  <card-view
+    :title="$t('preferences.importExport.title')"
+    icon="mdi-swap-horizontal-bold"
+  >
+    <v-row>
+      <v-col>
+        <v-file-input
+          :label="$t('preferences.importExport.selectConfigFile')"
+          variant="outlined"
+          accept=".json"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+
+    <template #actions>
+      <outlined-button prepend-icon="mdi-export">
+        {{ $t("preferences.importExport.download") }}
+      </outlined-button>
+
+      <outlined-button prepend-icon="mdi-upload" color="green">
+        {{ $t("preferences.importExport.upload") }}
+      </outlined-button>
+    </template>
+
+  </card-view>
+</template>
--- a/src/pages/misc/preferencesPage/index.vue
+++ b/src/pages/misc/preferencesPage/index.vue
@@ -2,16 +2,29 @@
 import pageSetup from './pageSetupSection.vue';
 import systemSetup from './systemSetupSection.vue';
 import aboutSection from './aboutSection.vue';
+import exerciseSection from './exerciseConfig/exerciseSection.vue';
+import importExportSection from './importExportSection.vue';
 </script>

 <template>
  <v-container max-width="800">
+    <!-- <v-row>
+      <v-col>
+        <import-export-section />
+      </v-col>
+    </v-row> -->
    <v-row>
      <v-col>
        <page-setup />
      </v-col>
    </v-row>

+    <v-row>
+      <v-col>
+        <exercise-section />
+      </v-col>
+    </v-row>
+
    <v-row>
      <v-col>
        <system-setup />
--- a/src/pages/misc/preferencesPage/systemSetupSection.vue
+++ b/src/pages/misc/preferencesPage/systemSetupSection.vue
@@ -1,27 +1,24 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-import confirmDialog from '@/components/basics/confirmDialog.vue';
-import { ServerStateEnum } from '@/data/enums/serverStateEnum';
-import { usePreferencesStore } from '@/stores/preferences.store';
-import ServerStateText from '@/components/pageParts/serverStateText.vue';
-import { useRouter } from 'vue-router';
+import cardView from "@/components/basics/cardView.vue";
+import outlinedButton from "@/components/basics/outlinedButton.vue";
+import confirmDialog from "@/components/basics/confirmDialog.vue";
+import { ServerStateEnum } from "@/data/enums/serverStateEnum";
+import { usePreferencesStore } from "@/stores/preferences.store";
+import ServerStateText from "@/components/pageParts/serverStateText.vue";
+import { useRouter } from "vue-router";

-const preferenceStore = usePreferencesStore()
-const router = useRouter()
+const preferenceStore = usePreferencesStore();
+const router = useRouter();

-preferenceStore.getServerState()
+preferenceStore.getServerState();
 </script>

 <template>
-  <card-view
-    :title="$t('preferences.systemSetup')"
-    icon="mdi-engine"
-  >
+  <card-view :title="$t('preferences.systemSetup')" icon="mdi-engine">
    <template #borderless>
      <v-list>
        <v-list-item class="text-h6 text-center">
-          {{ $t('preferences.serverState') }}: <server-state-text />
+          {{ $t("preferences.serverState") + ":" }} <server-state-text />
        </v-list-item>

        <v-list-item class="text-center">
@@ -29,9 +26,12 @@ preferenceStore.getServerState()
            @click="preferenceStore.showDeleteDbDialog = true"
            prepend-icon="mdi-database-refresh"
            color="warning"
-            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+            :disabled="
+              preferenceStore.serverState != ServerStateEnum.ONLINE ||
+              preferenceStore.fetchInProgress
+            "
          >
-            {{ $t('preferences.resetDatabase.resetDatabase') }}
+            {{ $t("preferences.resetDatabase.resetDatabase") }}
          </outlined-button>
        </v-list-item>

@@ -40,9 +40,12 @@ preferenceStore.getServerState()
            @click="preferenceStore.showDeleteExerciseDialog = true"
            prepend-icon="mdi-progress-close"
            color="warning"
-            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+            :disabled="
+              preferenceStore.serverState != ServerStateEnum.ONLINE ||
+              preferenceStore.fetchInProgress
+            "
          >
-            {{ $t('preferences.resetExerciseProgress.resetExerciseProgress') }}
+            {{ $t("preferences.resetExerciseProgress.resetExerciseProgress") }}
          </outlined-button>
        </v-list-item>

@@ -51,9 +54,12 @@ preferenceStore.getServerState()
            @click="preferenceStore.showFactoryResetDialog = true"
            prepend-icon="mdi-factory"
            color="warning"
-            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+            :disabled="
+              preferenceStore.serverState != ServerStateEnum.ONLINE ||
+              preferenceStore.fetchInProgress
+            "
          >
-            {{ $t('preferences.factoryReset.factoryReset') }}
+            {{ $t("preferences.factoryReset.factoryReset") }}
          </outlined-button>
        </v-list-item>
      </v-list>
@@ -85,10 +91,12 @@ preferenceStore.getServerState()
    :description="$t('preferences.factoryReset.dialog.description')"
    v-model="preferenceStore.showFactoryResetDialog"
    icon="mdi-factory"
-    :onConfirm="() => {
-      preferenceStore.resetToFactorySettings()
-      router.push('/')
-    }"
+    :onConfirm="
+      () => {
+        preferenceStore.resetToFactorySettings();
+        router.push('/');
+      }
+    "
    :loading="preferenceStore.fetchInProgress"
  />
-</template>
+</template>
--- a/src/scripts/colorScripts.ts
+++ b/src/scripts/colorScripts.ts
@@ -19,4 +19,20 @@ export function getSeatColor(surcharge: number, state: number): string {
    case 1: return "grey"
    case 2: return "orange"
  }
+}
+
+/**
+ * Get color of exercise group
+ * 
+ * @param exerciseGroupNr Number of exercise group
+ * 
+ * @returns Color as string
+ */
+export function getExerciseDotColor(exerciseGroupNr: number) {
+  switch(exerciseGroupNr) {
+    case 0: return "purple"
+    case 1: return "orange"
+    case 2: return "blue"
+    case 3: return "pink"
+  }
 }
--- a/src/scripts/languageScripts.ts
+++ b/src/scripts/languageScripts.ts
@@ -0,0 +1,37 @@
+import { LanguageEnum } from "@/data/enums/languageEnum";
+import { ExerciseGroupModel } from "@/data/models/exercises/exerciseGroupModel";
+import { ExerciseModel } from "@/data/models/exercises/exerciseModel";
+import { usePreferencesStore } from "@/stores/preferences.store";
+
+export function getExerciseNameLanguage(exercise: ExerciseModel) {
+  let preferencesStore = usePreferencesStore()
+
+  switch (preferencesStore.language) {
+    case LanguageEnum.GERMAN:
+      return exercise.nameDe;
+    case LanguageEnum.ENGLISH:
+      return exercise.nameEn;
+  }
+}
+
+export function getExerciseDescriptionLanguage(exercise: ExerciseModel) {
+  let preferencesStore = usePreferencesStore()
+
+  switch (preferencesStore.language) {
+    case LanguageEnum.GERMAN:
+      return exercise.descriptionDe;
+    case LanguageEnum.ENGLISH:
+      return exercise.descriptionEn;
+  }
+}
+
+export function getExerciseGroupNameLanguage(exerciseGroup: ExerciseGroupModel) {
+  let preferencesStore = usePreferencesStore()
+
+  switch (preferencesStore.language) {
+    case LanguageEnum.GERMAN:
+      return exerciseGroup.nameDe;
+    case LanguageEnum.ENGLISH:
+      return exerciseGroup.nameEn;
+  }
+}
--- a/src/stores/band.store.ts
+++ b/src/stores/band.store.ts
@@ -12,6 +12,9 @@ export const useBandStore = defineStore("bandStore", {
    /** All available bands */
    bands: ref<Array<BandApiModel>>([]),

+    /** Available bands filtered by parameters */
+    filteredBands: ref<Array<BandApiModel>>([]),
+
    /** All information about a single band */
    band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),

@@ -32,7 +35,9 @@ export const useBandStore = defineStore("bandStore", {

      await fetchAllBands()
        .then(result => {
-          this.bands = result.data.filter((band: BandApiModel) => {
+          this.bands = result.data
+
+          this.filteredBands = result.data.filter((band: BandApiModel) => {
            if (genreStore.genre == null) {
              return true
            }
--- a/src/stores/concert.store.ts
+++ b/src/stores/concert.store.ts
@@ -64,6 +64,9 @@ export const useConcertStore = defineStore("concertStore", {
      const feedbackStore = useFeedbackStore()
      this.fetchInProgress = true

+      console.log("LOcation & Date:")
+      console.log(this.concerts)
+
      let id = this.concerts.find((concert: ConcertApiModel) => {
        return (concert.location.urlName == location && concert.date == date)
      }).id
@@ -75,6 +78,7 @@ export const useConcertStore = defineStore("concertStore", {
        })
        .catch(res => {
          feedbackStore.notFound = true
+          this.fetchInProgress = false
        })
    },

--- a/src/stores/exercise.store.ts
+++ b/src/stores/exercise.store.ts
@@ -4,6 +4,7 @@ import { ref } from "vue";
 import { useFeedbackStore } from "./feedback.store";
 import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
 import { ExerciseModel } from "@/data/models/exercises/exerciseModel";
+import { usePreferencesStore } from "./preferences.store";

 export const useExerciseStore = defineStore("exerciseStore", {
  state: () => ({
@@ -13,106 +14,155 @@ export const useExerciseStore = defineStore("exerciseStore", {
    /** Request to server sent, waiting for data response */
    fetchInProgress: ref(false),

-    helpPageVisible: ref(false)
+    exercisePageVisible: ref(false),
+
+    /** All available exercise uuids are stored here */
+    exerciseConfig: ref<Array<string>>(),
  }),

  actions: {
    /**
     * Get all exercises and exercise groups from server
+     *
+     * @param firstLoad True sets all exercises as available, for first load after database was initialised
     */
-    async getAllExercises() {
-      this.fetchInProgress = true
+    async getAllExercises(firstLoad: boolean = false) {
+      const preferencesStore = usePreferencesStore();
+      this.fetchInProgress = true;

-      await fetchAllExerciseGroups()
-        .then(result => {
-          this.exercises = result.data
+      await fetchAllExerciseGroups().then((result) => {
+        this.exercises = result.data;

-          this.helpPageVisible = this.getExercise(1, 1).solved
-          this.fetchInProgress = false
-        })
+        if (firstLoad) {
+          preferencesStore.notAvailableExercises = []
+        }
+
+        result.data.forEach((exercise) => {
+          if (firstLoad) {
+            exercise.available = true
+          } else {
+            exercise.available =
+              preferencesStore.notAvailableExercises.find(
+                (availableExercise: string) => {
+                  return availableExercise == exercise.uuid;
+                }
+              ) == undefined;
+          }
+        });
+
+        this.exercisePageVisible = this.getExercise(1, 1).solved;
+        this.fetchInProgress = false;
+      });
    },

    /**
     * Get a exercise by group and exercise number
-     * 
+     *
     * @param exerciseGroupNr Number of group of exercise
     * @param exerciseNr Number of exercise in group
-     * 
+     *
     * @returns ExerciseModel
     */
    getExercise(exerciseGroupNr: number, exerciseNr: number): ExerciseModel {
      return this.exercises.find((exercise: ExerciseModel) => {
-        return exercise.exerciseNr == exerciseNr && exercise.exerciseGroup.groupNr == exerciseGroupNr
-      })
+        return (
+          exercise.exerciseNr == exerciseNr &&
+          exercise.exerciseGroup.groupNr == exerciseGroupNr
+        );
+      });
    },

    /**
     * Mark an exercise as solved
-     * 
+     *
     * @param exerciseGroupNr Exercise group number (0-3)
     * @param exerciseNr Exercise number (1-3)
     */
    async solveExercise(exerciseGroupNr: number, exerciseNr: number) {
      // Request all exercises from server
-      await this.getAllExercises()
+      await this.getAllExercises();

-      const feedbackStore = useFeedbackStore()
-      this.fetchInProgress = true
+      const feedbackStore = useFeedbackStore();
+      this.fetchInProgress = true;

      // Change only if the exercise is not solved
-      updateExercise(exerciseGroupNr, exerciseNr, true)
-        .then(result => {
-          if (result.data.changed) {
+      updateExercise(exerciseGroupNr, exerciseNr, true).then((result) => {
+        if (result.data.changed) {
+          let bannerState = BannerStateEnum.ERROR;

-            let bannerState = BannerStateEnum.ERROR
-
-            switch(exerciseGroupNr) {
-              case 0: {
-                switch(exerciseNr) {
-                  case 1: bannerState = BannerStateEnum.EXERCISESOLVED01; break;
-                  case 2: bannerState = BannerStateEnum.EXERCISESOLVED02; break;
-                  case 3: bannerState = BannerStateEnum.EXERCISESOLVED03; break;
-                }
-
-                break;
+          switch (exerciseGroupNr) {
+            case 0: {
+              switch (exerciseNr) {
+                case 1:
+                  bannerState = BannerStateEnum.EXERCISESOLVED01;
+                  break;
+                case 2:
+                  bannerState = BannerStateEnum.EXERCISESOLVED02;
+                  break;
+                case 3:
+                  bannerState = BannerStateEnum.EXERCISESOLVED03;
+                  break;
              }

-              case 1: {
-                switch(exerciseNr) {
-                  case 1: bannerState = BannerStateEnum.EXERCISESOLVED11; break;
-                  case 2: bannerState = BannerStateEnum.EXERCISESOLVED12; break;
-                }
-
-                break;
-              }
-
-              case 2: {
-                switch(exerciseNr) {
-                  case 1: bannerState = BannerStateEnum.EXERCISESOLVED21; break;
-                  case 2: bannerState = BannerStateEnum.EXERCISESOLVED22; break;
-                  case 3: bannerState = BannerStateEnum.EXERCISESOLVED23; break;
-                  case 4: bannerState = BannerStateEnum.EXERCISESOLVED24; break;
-                  case 5: bannerState = BannerStateEnum.EXERCISESOLVED25; break;
-                  case 6: bannerState = BannerStateEnum.EXERCISESOLVED26; break;
-                }
-
-                break;
-              }
-
-              case 3: {
-                switch(exerciseNr) {
-                  case 1: bannerState = BannerStateEnum.EXERCISESOLVED31; break;
-                  case 2: bannerState = BannerStateEnum.EXERCISESOLVED32; break;
-                }
-
-                break;
-              }
+              break;
            }

-            feedbackStore.addSnackbar(bannerState)
-            this.getAllExercises()
+            case 1: {
+              switch (exerciseNr) {
+                case 1:
+                  bannerState = BannerStateEnum.EXERCISESOLVED11;
+                  break;
+                case 2:
+                  bannerState = BannerStateEnum.EXERCISESOLVED12;
+                  break;
+              }
+
+              break;
+            }
+
+            case 2: {
+              switch (exerciseNr) {
+                case 1:
+                  bannerState = BannerStateEnum.EXERCISESOLVED21;
+                  break;
+                case 2:
+                  bannerState = BannerStateEnum.EXERCISESOLVED22;
+                  break;
+                case 3:
+                  bannerState = BannerStateEnum.EXERCISESOLVED23;
+                  break;
+                case 4:
+                  bannerState = BannerStateEnum.EXERCISESOLVED24;
+                  break;
+                case 5:
+                  bannerState = BannerStateEnum.EXERCISESOLVED25;
+                  break;
+                case 6:
+                  bannerState = BannerStateEnum.EXERCISESOLVED26;
+                  break;
+              }
+
+              break;
+            }
+
+            case 3: {
+              switch (exerciseNr) {
+                case 1:
+                  bannerState = BannerStateEnum.EXERCISESOLVED31;
+                  break;
+                case 2:
+                  bannerState = BannerStateEnum.EXERCISESOLVED32;
+                  break;
+              }
+
+              break;
+            }
          }
-        })
-    }
-  }
-})
+
+          feedbackStore.addSnackbar(bannerState);
+          this.getAllExercises();
+        }
+      });
+    },
+  },
+});
--- a/src/stores/genre.store.ts
+++ b/src/stores/genre.store.ts
@@ -1,4 +1,9 @@
-import { deleteGenre, fetchAllGenres, patchGenre, postGenre } from "@/data/api/genreApi";
+import {
+  deleteGenre,
+  fetchAllGenres,
+  patchGenre,
+  postGenre,
+} from "@/data/api/genreApi";
 import { GenreApiModel } from "@/data/models/acts/genreApiModel";
 import { defineStore } from "pinia";
 import { ref } from "vue";
@@ -10,6 +15,8 @@ export const useGenreStore = defineStore("genreStore", {
    /** All available genres from server */
    genres: ref<Array<GenreApiModel>>([]),

+    topGenres: ref<Array<GenreApiModel>>([]),
+
    /** Currently selected genre */
    genre: ref<GenreApiModel>(null),

@@ -17,7 +24,7 @@ export const useGenreStore = defineStore("genreStore", {
    showEditDialog: ref(false),

    /** Request to server sent, waiting for data response */
-    fetchInProgress: ref(false)
+    fetchInProgress: ref(false),
  }),

  actions: {
@@ -25,98 +32,103 @@ export const useGenreStore = defineStore("genreStore", {
     * Get all genres from the database
     */
    getGenres() {
-      this.fetchInProgress = true
+      this.fetchInProgress = true;

-      fetchAllGenres()
-        .then(response => {
-          this.genres = response.data
-          this.fetchInProgress = false
-        })
+      fetchAllGenres().then((response) => {
+        this.genres = response.data;
+
+        let genresByNumberOfBands = this.genres.slice();
+
+        genresByNumberOfBands.sort((a, b) => {
+          return b.bands.length - a.bands.length;
+        });
+
+        this.topGenres = genresByNumberOfBands.splice(0, 8)
+
+        this.fetchInProgress = false;
+      });
    },

    /**
     * Prepare edit dialog for new genre, opens it
     */
    newGenre() {
-      this.genre = new GenreApiModel()
-      this.showEditDialog = true
+      this.genre = new GenreApiModel();
+      this.showEditDialog = true;
    },

    /**
     * Edit a Genre object, move parameter to this.genre, opens dialog
-     * 
+     *
     * @param genre Selected Genre object
     */
    editGenre(genre: GenreApiModel) {
-      this.genre = genre
-      this.showEditDialog = true
+      this.genre = genre;
+      this.showEditDialog = true;
    },

    /**
     * Save edited genre to the backend server
     */
    saveGenre() {
-      const feedbackStore = useFeedbackStore()
-      this.fetchInProgress = true
+      const feedbackStore = useFeedbackStore();
+      this.fetchInProgress = true;

      if (this.genre.id == undefined) {
        // Creating new Genre
-        postGenre(this.genre)
-          .then(response => {
-            if (response.status == 200) {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL)
-              this.getGenres()
-              this.showEditDialog = false
-            } else {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR)
-            }
-          })
+        postGenre(this.genre).then((response) => {
+          if (response.status == 200) {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL);
+            this.getGenres();
+            this.showEditDialog = false;
+          } else {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR);
+          }
+        });
      } else {
        // Update existing Genre
-        patchGenre(this.genre)
-          .then(response => {
-            if (response.status == 200) {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL)
-              this.getGenres()
-              this.showEditDialog = false
-            } else {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR)
-            }
-          })
+        patchGenre(this.genre).then((response) => {
+          if (response.status == 200) {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL);
+            this.getGenres();
+            this.showEditDialog = false;
+          } else {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR);
+          }
+        });
      }
    },

    /**
     * Delete a Genre object
-     * 
+     *
     * @param genre Genre to delete
     */
    deleteGenre(genre: GenreApiModel) {
-      const feedbackStore = useFeedbackStore()
-      this.fetchInProgress = true
+      const feedbackStore = useFeedbackStore();
+      this.fetchInProgress = true;

-      deleteGenre(genre)
-        .then(response => {
-          if (response.status == 200) {
-            feedbackStore.addSnackbar(BannerStateEnum.GENREDELETESUCCESSFUL)
-            this.getGenres()
-          } else {
-            feedbackStore.addSnackbar(BannerStateEnum.GENREDELETEERROR)
-          }
-        })
+      deleteGenre(genre).then((response) => {
+        if (response.status == 200) {
+          feedbackStore.addSnackbar(BannerStateEnum.GENREDELETESUCCESSFUL);
+          this.getGenres();
+        } else {
+          feedbackStore.addSnackbar(BannerStateEnum.GENREDELETEERROR);
+        }
+      });
    },

    setGenreByName(name: string) {
-      this.genre = null
-      name = name.replace("+", " ")
+      this.genre = null;
+      name = name.replace("+", " ");

-      let newGenre = this.genres.find(genre => {
-        return genre.name == name
-      })
+      let newGenre = this.genres.find((genre) => {
+        return genre.name == name;
+      });

      if (newGenre != undefined) {
-        this.genre = newGenre
+        this.genre = newGenre;
      }
-    }
-  }
-})
+    },
+  },
+});
--- a/src/stores/preferences.store.ts
+++ b/src/stores/preferences.store.ts
@@ -3,7 +3,11 @@ import { useLocalStorage } from "@vueuse/core";
 import { ThemeEnum } from "../data/enums/themeEnums";
 import { LanguageEnum } from "../data/enums/languageEnum";
 import { ref } from "vue";
-import { fetchServerState,resetDatabase, resetExerciseProgress } from "@/data/api/mainApi";
+import {
+  fetchServerState,
+  resetDatabase,
+  resetExerciseProgress,
+} from "@/data/api/mainApi";
 import { ServerStateEnum } from "@/data/enums/serverStateEnum";
 import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
 import { useFeedbackStore } from "./feedback.store";
@@ -12,13 +16,19 @@ import { useExerciseStore } from "./exercise.store";
 import { useAccountStore } from "./account.store";
 import { AccountApiModel } from "@/data/models/user/accountApiModel";

-export const usePreferencesStore = defineStore('preferencesStore', {
+export const usePreferencesStore = defineStore("preferencesStore", {
  state: () => ({
    /** Selected theme by user */
-    theme: useLocalStorage<ThemeEnum>("eventMaster/preferencesStore/theme", ThemeEnum.DARK),
+    theme: useLocalStorage<ThemeEnum>(
+      "eventMaster/preferencesStore/theme",
+      ThemeEnum.DARK
+    ),

    /** Selected language by user */
-    language: useLocalStorage<LanguageEnum>("eventMaster/preferencesStore/language", LanguageEnum.GERMAN),
+    language: useLocalStorage<LanguageEnum>(
+      "eventMaster/preferencesStore/language",
+      LanguageEnum.GERMAN
+    ),

    /** Request to server sent, waiting for data response */
    fetchInProgress: ref(false),
@@ -36,13 +46,27 @@ export const usePreferencesStore = defineStore('preferencesStore', {
    showFactoryResetDialog: ref(false),

    /** Marks the first run of the app */
-    firstStartup: useLocalStorage<Boolean>("eventMaster/preferencesStore/firstStartup", true),
+    firstStartup: useLocalStorage<Boolean>(
+      "eventMaster/preferencesStore/firstStartup",
+      true
+    ),

    /** Full name of student */
-    studentName: useLocalStorage<string>("eventMaster/preferencesStore/studentName", ""),
+    studentName: useLocalStorage<string>(
+      "eventMaster/preferencesStore/studentName",
+      ""
+    ),

    /** Matrikel number */
-    registrationNumber: useLocalStorage<string>("eventMaster/preferencesStore/registrationNumber", "")
+    registrationNumber: useLocalStorage<string>(
+      "eventMaster/preferencesStore/registrationNumber",
+      ""
+    ),
+
+    notAvailableExercises: useLocalStorage<Array<string>>(
+      "eventMaster/preferencesStore/notAvailableExercises",
+      []
+    ),
  }),

  actions: {
@@ -50,92 +74,90 @@ export const usePreferencesStore = defineStore('preferencesStore', {
     * Request the state of the backend server
     */
    async getServerState() {
-      this.fetchInProgress = true
+      this.fetchInProgress = true;

      fetchServerState()
-        .then(result => {
+        .then((result) => {
          if (result.status == 200) {
-            this.serverState = ServerStateEnum.ONLINE
+            this.serverState = ServerStateEnum.ONLINE;
          } else {
-            this.serverState = ServerStateEnum.OFFLINE
+            this.serverState = ServerStateEnum.OFFLINE;
          }

-          this.fetchInProgress = false
-        })
-        .catch(error => {
-          this.serverState = ServerStateEnum.OFFLINE
-          this.fetchInProgress = false
+          this.fetchInProgress = false;
        })
+        .catch((error) => {
+          this.serverState = ServerStateEnum.OFFLINE;
+          this.fetchInProgress = false;
+        });
    },

    /**
     * Resets the database (without exercise tables)
     */
    async resetDb() {
-      const feedbackStore = useFeedbackStore()
-      const accountStore = useAccountStore()
+      const feedbackStore = useFeedbackStore();
+      const accountStore = useAccountStore();

-      this.serverState = ServerStateEnum.PENDING
-      this.fetchInProgress = true
+      this.serverState = ServerStateEnum.PENDING;
+      this.fetchInProgress = true;

      // Logout user
-      accountStore.logout()
+      accountStore.logout();

-      await resetDatabase()
-        .then(result => {
-          if (result.status == 200) {
-            feedbackStore.addSnackbar(BannerStateEnum.DATABASERESETSUCCESSFUL)
-            this.serverState = ServerStateEnum.ONLINE
-          }
+      await resetDatabase().then((result) => {
+        if (result.status == 200) {
+          feedbackStore.addSnackbar(BannerStateEnum.DATABASERESETSUCCESSFUL);
+          this.serverState = ServerStateEnum.ONLINE;
+        }

-          this.fetchInProgress = false
-          this.showDeleteDbDialog = false
-        })
+        this.fetchInProgress = false;
+        this.showDeleteDbDialog = false;
+      });
    },

    /**
     * Resets the exercise progress
     */
    async resetExerciseProg() {
-      const feedbackStore = useFeedbackStore()
-      const exerciseStore = useExerciseStore()
+      const feedbackStore = useFeedbackStore();
+      const exerciseStore = useExerciseStore();

-      this.serverState = ServerStateEnum.PENDING
-      this.fetchInProgress = true
+      this.serverState = ServerStateEnum.PENDING;
+      this.fetchInProgress = true;

-      await resetExerciseProgress()
-        .then(result => {
-          if (result.status == 200) {
-            feedbackStore.addSnackbar(BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL)
-            this.serverState = ServerStateEnum.ONLINE
+      await resetExerciseProgress().then((result) => {
+        if (result.status == 200) {
+          feedbackStore.addSnackbar(
+            BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL
+          );
+          this.serverState = ServerStateEnum.ONLINE;

-            exerciseStore.getAllExercises()
-          }
+          exerciseStore.getAllExercises(true);
+        }

-          this.fetchInProgress = false
-          this.showDeleteExerciseDialog = false
-        })
+        this.fetchInProgress = false;
+        this.showDeleteExerciseDialog = false;
+      });
    },

    /**
     * Reset all store values to factory state
     */
    resetToFactorySettings() {
-      const basketStore = useBasketStore()
-      const accountStore = useAccountStore()
+      const basketStore = useBasketStore();
+      const accountStore = useAccountStore();

-      this.firstStartup = true
-      this.studentName = ""
-      this.registrationNumber = ""
-      this.theme = "dark"
-      this.language = LanguageEnum.GERMAN
-      basketStore.itemsInBasket = []
-      accountStore.userAccountToken = ""
-      accountStore.userAccount = new AccountApiModel()
+      this.firstStartup = true;
+      this.studentName = "";
+      this.registrationNumber = "";
+      this.theme = "dark";
+      this.language = LanguageEnum.GERMAN;
+      basketStore.itemsInBasket = [];
+      accountStore.userAccountToken = "";
+      accountStore.userAccount = new AccountApiModel();

-
-      
-      this.showFactoryResetDialog = false
-    }
-  }
-})
+      this.showFactoryResetDialog = false;
+    },
+  },
+});
Author	SHA1	Message	Date
TobiZog	409fa835a3	Bugfix genre store	2025-09-01 15:08:13 +02:00
TobiZog	9506156070	Limit nr of top genres on homepage	2025-09-01 14:49:02 +02:00
TobiZog	f98eb098f5	Bugfixes: No startup after packaging, infinity loading on concert booking page if user comes from band page	2025-09-01 14:22:53 +02:00
TobiZog	d730280876	Bugfix: Filter on band page changes visible bands on home page	2025-08-31 11:47:56 +02:00
TobiZog	2fd045c590	New section on homepage: popular genres	2025-08-31 11:33:25 +02:00
TobiZog	57a036bea2	Disable import section on preference page, upgrade version number	2025-08-30 14:11:18 +02:00
TobiZog	cde3c84bc7	Append icons in toolbar shows tooltips, exercise page icon adds open exercises badge	2025-08-30 13:39:16 +02:00
TobiZog	052bb7694a	Add links to project and GitHub page	2025-08-30 13:11:39 +02:00
TobiZog	3c13bb88e1	Exercises selection system	2025-08-30 12:54:29 +02:00
TobiZog	b69c63ea53	Welcome dialog: New page for look and feel, redesign pages, merge database and exercise creating in one step	2025-07-05 14:35:48 +02:00
TobiZog	48c59936ec	Finish english translation, add icons to exercise groups on help page	2025-07-05 13:39:01 +02:00
TobiZog	d75e91481f	RPM, Changelog	2025-02-28 17:39:04 +01:00