diff --git a/src/index.php b/src/index.php
index 6fbaad9..afd1db7 100644
--- a/src/index.php
+++ b/src/index.php
@@ -1,13 +1,15 @@
 <?php 
 session_start();
 include "config/db.php";
+include "notif.php";
 
 if(isset($_POST['login'])){
     $username = $_POST['username'];
     $password = $_POST['password'];
 
     if(empty($username)||empty($password)){
-        echo "semua data    harus terisi";
+        $msg = "data harus diisi!";
+        echo "<script>showNotif(" . json_encode($msg) . ");</script>";
     }else{
         $sql = "SELECT * FROM users WHERE username =?";
         $stmt = $db -> prepare($sql);
@@ -24,7 +26,8 @@ if(isset($_POST['login'])){
                 header("location:leaderboard.php");
                 exit();
             }else{
-                echo "password salah";
+                $msg = "Password Salah!";
+                echo "<script>showNotif(" . json_encode($msg) . ");</script>";
             }
         }else{
             echo "username salah";
@@ -56,6 +59,7 @@ $db->close();
             <button type="submit" name="login" placeholder="input your password" data-aos="fade-up" data-aos-duration="3000">LOGIN</button>
             <p placeholder="input your password" data-aos="fade-up" data-aos-duration="3000"><a href="register.php">don't have account yet?<span> register now!</span></a></p>
         </form>
+        <div id="notif" class="notif"></div>
     </div>
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script>
diff --git a/src/profile.php b/src/js/main.js
similarity index 100%
rename from src/profile.php
rename to src/js/main.js
diff --git a/src/notif.php b/src/notif.php
new file mode 100644
index 0000000..780c38f
--- /dev/null
+++ b/src/notif.php
@@ -0,0 +1,40 @@
+<div id="notif" class="notif"></div>
+
+<style>
+.notif {
+    position: fixed;
+    top: 100px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #00000060;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: yellow;
+    padding: 12px 18px;
+    width: 500px;
+    height: 200px;
+    font-size: 30px;
+    border: 1px solid white;
+    border-radius: 8px;
+    opacity: 0;
+    transition: .3s;
+    z-index: 9999;
+}
+.notif.show {
+    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>