diff --git a/package-lock.json b/package-lock.json
index e78ade862d533a7d112420f1f668bac627a0904c..e17e6f4cb886b1f2a6059647cb8f07ba1e78599e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2273,6 +2273,7 @@
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
       "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
       "dependencies": {
         "dijkstrajs": "^1.0.1",
         "pngjs": "^5.0.0",
diff --git a/src/routes/community/DetailQuiz/detailQuiz.tsx b/src/routes/community/DetailQuiz/detailQuiz.tsx
index 6a4cab8409945249ef990641ee090a7b2f0a9aa6..1138dfe04c901aaed454a8083c1ec559a2f59d57 100644
--- a/src/routes/community/DetailQuiz/detailQuiz.tsx
+++ b/src/routes/community/DetailQuiz/detailQuiz.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import "./detailQuiz.css";
 import "../../../index.css";
 import { useNavigate } from "react-router-dom";
+import { useQuizService } from "../../../services/QuizService.ts";
 import { Quiz } from "../../../models/Quiz.ts";
 import { useMultiplayerService } from "../../../services/MultiplayerService.ts";
 import Swal from "sweetalert2";
@@ -14,6 +15,7 @@ interface Props {
 // right side for community. after choose A Quiz. Show the detail of this quiz and allow you to play it.
 export function DetailQuiz({ quiz, isMulty }: Props) {
     const navigate = useNavigate();
+    const { createRun } = useQuizService();
     const { createLobby } = useMultiplayerService();
     const handlePlay = async () => {
         if (isMulty) {
@@ -37,7 +39,9 @@ export function DetailQuiz({ quiz, isMulty }: Props) {
             navigate("/lobby/" + code.id);
             return;
         }
-        navigate(`/quiz/${quiz.id}`);
+        const quizId = quiz.id;
+        const runId = await createRun(quizId);
+        navigate(`/quiz/${runId}`, { state: { quizId: quizId } });
     };
     return (
         <div className="container-left">
diff --git a/src/routes/quiz/quizTop/quizTop.css b/src/routes/quiz/quizTop/quizTop.css
index 8e308e003cf156a94d4e22df3984a74a6f4d6462..ed572cddeab52c033819f81e1ceda7b3d607a59e 100644
--- a/src/routes/quiz/quizTop/quizTop.css
+++ b/src/routes/quiz/quizTop/quizTop.css
@@ -3,7 +3,7 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     color: white;
 }
diff --git a/src/routes/quiz/quizTop/quizTop.tsx b/src/routes/quiz/quizTop/quizTop.tsx
index 657aecfc5fab8623337e34590f9b770709b75163..0312fb4a661576a3441a2c6d42eaa8f3d9cb91a1 100644
--- a/src/routes/quiz/quizTop/quizTop.tsx
+++ b/src/routes/quiz/quizTop/quizTop.tsx
@@ -28,7 +28,7 @@ export function QuizTop({quizInformations, actualQuestion, score, setStopQuizMod
                 </div>
 
                 <div>
-                    <p className="text-category">{quizInformations.category.name}</p>
+                    <p className="text-category">{quizInformations.category?.name ?? ''}</p>
                 </div>
 
                 <div className="quiz-top-text-question">