Added router

frontend/src/App.jsx

@@ -1,12 +1,18 @@
 import { useEffect, useState } from "react";
+import { Routes, Route, useNavigate, useLocation } from "react-router-dom";
+
 import LoginPage from "./pages/LoginPage";
 import ModeSelectPage from "./pages/ModeSelectPage";
 import QuizPage from "./pages/QuizPage";
+import SolutionsPage from "./pages/SolutionsPage";
 
 function App() {
   const [authenticated, setAuthenticated] = useState(false);
   const [mode, setMode] = useState(null);
 
+  const location = useLocation();
+  const navigate = useNavigate();
+
   useEffect(() => {
     const isAuth = sessionStorage.getItem("authenticated") === "true";
     const savedMode = sessionStorage.getItem("mode");
@@ -19,6 +25,11 @@ function App() {
     setMode(newMode);
   };
 
+
+  if (location.pathname === "/solutions") {
+    return <SolutionsPage mode={mode || "d"} onBack={() => navigate("/")} />;
+  }
+
   if (!authenticated) return <LoginPage onSuccess={() => setAuthenticated(true)} />;
   if (!mode) return <ModeSelectPage onSelect={handleModeSelect} />;
   return <QuizPage mode={mode} onBack={() => setMode(null)} />;

frontend/src/main.jsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import {BrowserRouter} from "react-router-dom"
 import App from './App.jsx'
 import './index.css'
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

frontend/src/pages/QuizPage.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import QuestionCard from "../components/QuestionCard";
 import ResultPage from "./ResultPage";
+import {useNavigate} from "react-router-dom";
 
 export default function QuizPage({ mode, onBack, customQuestions }) {
   const [questions, setQuestions] = useState([]);
@@ -10,6 +11,7 @@ export default function QuizPage({ mode, onBack, customQuestions }) {
   const [showResult, setShowResult] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
   const [answerStatus, setAnswerStatus] = useState([]); // "correct" | "wrong" | undefined
+  const navigate = useNavigate();
 
 
 useEffect(() => {
@@ -127,15 +129,22 @@ useEffect(() => {
         <p className="text-sm text-gray-600 dark:text-gray-300">
           Frage {currentIdx + 1} / {questions.length}
         </p>
-        <div className="flex items-center gap-3">
-          <button onClick={() => navigate("/solutions")} className="...">Alle Lösungen anzeigen</button>
-          <button
-            className="text-sm text-blue-600 dark:text-blue-400 underline"
-            onClick={onBack}
-          >
-            Modus wechseln
-          </button>
-        </div>
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => navigate("/solutions")}
+              className="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 hover:underline transition"
+              title="Lösungen durchsuchen"
+            >
+              Lösungen anzeigen
+            </button>
+            <span className="text-gray-300">|</span>
+            <button
+              onClick={onBack}
+              className="text-sm text-blue-600 dark:text-blue-400 underline hover:text-blue-800 transition"
+            >
+              Modus wechseln
+            </button>
+          </div>
       </div>
 
       {/* Segmentierter Balken */}