diff --git a/src/css/game.css b/src/css/game.css
index e59beb7..e84378d 100644
--- a/src/css/game.css
+++ b/src/css/game.css
@@ -142,6 +142,17 @@
     font-size: 40px;
 }
 
+.container-first #scoreAlert {
+    margin-bottom: 30px;
+    padding: 10px;
+    color: #ffdf12;
+    font-size: 40px;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    position: absolute;
+}
+
 .container-first .content .quiz #btn-answer {
     color: #ffdf12;
     display: flex;
diff --git a/src/game/firstperson.html b/src/game/firstperson.html
index 346de6e..50ade11 100644
--- a/src/game/firstperson.html
+++ b/src/game/firstperson.html
@@ -26,7 +26,7 @@
                 <img id="h2" src="/assets/Design/Heartfull.png">
                 <img id="h3" src="/assets/Design/Heartfull.png">
             </div>
-            <div class="quiz">
+            <div class="quiz" id="border">
                 <h2 id="question"></h2>
                 <div id="btn-answer">
                     <button class="btn"></button>
@@ -35,6 +35,7 @@
                     <button class="btn"></button>
                 </div>
             </div>
+            <h2 id="scoreAlert"></h2>
         </div>
     </div>
     <script type="module" src="/js/firstperson.js"></script>
diff --git a/src/js/firstperson.js b/src/js/firstperson.js
index 32c0180..490a40e 100644
--- a/src/js/firstperson.js
+++ b/src/js/firstperson.js
@@ -2,6 +2,7 @@ import { questions } from "./soal.js";
 
 const questionElement = document.getElementById("question")
 const answerBtn = document.getElementById("btn-answer")
+const answerBorder = document.getElementById("border")
 
 let currentQuestionIndex = 0;
 let score = 0;
@@ -119,7 +120,16 @@ function selectAnswer(e){
 
 function showScore(){
     resetState();
-    const show = questionElement.innerHTML = `you scored ${score} out of 200 !`;
+    answerBorder.remove();
+    document.getElementById("h1").remove();
+    document.getElementById("h2").remove();
+    document.getElementById("h3").remove();
+    setTimeout(()=> {
+        const bgm = document.getElementById("sfxhrt");
+        bgm.play()
+        const alerts = document.getElementById("scoreAlert")
+        alerts.textContent = `you scored ${score} out of 200 !`;
+    }, 600);
     postScore(score);
 }
 
diff --git a/src/js/notif.js b/src/js/notif.js
new file mode 100644
index 0000000..41ddb93
--- /dev/null
+++ b/src/js/notif.js
@@ -0,0 +1,9 @@
+function showNotif(msg) {
+    const n = document.getElementById("notif");
+    n.textContent = msg;
+    n.classList.add("show");
+
+    setTimeout(() => {
+        n.classList.remove("show");
+    }, 3000);
+}
\ No newline at end of file
diff --git a/src/notif.php b/src/notif.php
index 68702cd..a822293 100644
--- a/src/notif.php
+++ b/src/notif.php
@@ -1,5 +1,10 @@
-<div id="notif" class="notif"></div>
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
 <style>
 .notif {
     position: fixed;
@@ -26,15 +31,8 @@
     opacity: 1;
 }
 </style>
-
-<script>
-function showNotif(msg) {
-    const n = document.getElementById("notif");
-    n.textContent = msg;
-    n.classList.add("show");
-
-    setTimeout(() => {
-        n.classList.remove("show");
-    }, 3000);
-}
-</script>
+<body>
+    <div id="notif" class="notif"></div>
+    <script src="/js/notif.js"></script>
+</body>
+</html>
\ No newline at end of file
