diff --git a/Penilaian Literasi/iClOP-V2/resources/views/dashboard_student.blade.php b/Penilaian Literasi/iClOP-V2/resources/views/dashboard_student.blade.php
index 6f592ee..27aa468 100644
--- a/Penilaian Literasi/iClOP-V2/resources/views/dashboard_student.blade.php	
+++ b/Penilaian Literasi/iClOP-V2/resources/views/dashboard_student.blade.php	
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    {{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --}}
 
 
     <title>iCLOP</title>
@@ -63,17 +64,19 @@
 @auth
 
     <!-- CONTENT -->
-    <div class="container" style="margin-top: 70px; justify-content: center; align-items: center;">
-        <p style="font-size: 22px;">Choose your<br><span style="font-size: 35px; font-weight: 600; color: #34364A;">Learning Materials</span></p>
+    <div class="container px-4 px-md-0" style="margin-top: 70px;">
+    <!-- Judul -->
+    <p style="font-size: 22px;">Choose your<br>
+        <span style="font-size: 35px; font-weight: 600; color: #34364A;">Learning Materials</span>
+    </p>
 
         <!-- CARD 1 -->
         <!-- <div class="row" style="margin-top: 45px; display: flex; justify-content: center; align-items: center;"> -->
-        <div class="row" style="margin-top: 45px;">
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src={{asset("./images/cards/Android.png")}} class="card-img-top" style="width: auto; height: 200px;">
+        <div class="d-flex flex-wrap" style="gap: 25px; margin-top: 45px;">
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/Android.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
-                    <h5 class="card-title">Android programming
-                        with Java and Kotlin</h5>
+                    <h5 class="card-title">Android programming with Java and Kotlin</h5>
                     <div class="row align-items-start">
                         <div class="col-1">
                             <img src={{asset("./images/book.png")}} style="width: 13px; height: 16px;">
@@ -82,43 +85,43 @@
                             <p>18 learning topics</p>
                         </div>
                     </div>
-                    <div style="margin-top: auto;">
+                    <div class="mt-auto">
                         <a href="/android23/topic" class="btn btn-primary">Start Learning</a>
                     </div>
                 </div>
             </div>
 
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src={{asset("./images/cards/Flutter.png")}} class="card-img-top" style="width: auto; height: 200px;">
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/Flutter.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">Mobile programming with Flutter</h5>
                     <div class="row align-items-start">
                         <div class="col-1">
-                            <img src={{asset("./images/book.png")}} style="width: 13px; height: 16px;">
+                            <img src="{{asset("./images/book.png ")}}" style="width: 13px; height: 16px;">
                         </div>
                         <div class="col">
                             <p>18 learning topics</p>
                         </div>
                     </div>
-                    <div style="margin-top: auto;">
+                    <div class="mt-auto">
                         <a href="/flutter/start" class="btn btn-primary">Start Learning</a>
                     </div>
                 </div>
             </div>
 
-            <div class="card p-0" style="width: 305px; height:375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src={{asset("./images/cards/Node.js.png")}} class="card-img-top" style="width: auto; height: 200px;">
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/Node.js.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">Web application with Node.JS</h5>
                     <div class="row align-items-start">
                         <div class="col-1">
-                            <img src={{asset("./images/book.png ")}} style="width: 13px; height: 16px;">
+                            <img src="{{asset("./images/book.png ")}}" style="width: 13px; height: 16px;">
                         </div>
                         <div class="col">
                             <p>18 learning topics</p>
                         </div>
                     </div>
-                    <div style="margin-top: auto;">
+                    <div class="mt-auto">
                         <a href="/nodejs" class="btn btn-primary">Start Learning</a>
                     </div>
                 </div>
@@ -128,9 +131,9 @@
 
         <!-- CARD 2 -->
         <!-- <div class="row" style="margin-top: 45px; display: flex; justify-content: center; align-items: center;"> -->
-        <div class="row" style="margin-top: 45px;">
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src="{{asset("./images/cards/Python.png")}}" class="card-img-top" style="width: auto; height: 200px;">
+        <div class="d-flex flex-wrap" style="gap: 25px; margin-top: 45px;">
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/Python.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">Python programming</h5>
                     <div class="row align-items-start">
@@ -147,8 +150,8 @@
                 </div>
             </div>
 
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src="{{asset("./images/cards/MySQL.png")}}" class="card-img-top" style="width: auto; height: 200px;">
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/MySQL.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">SQL Querying with MySQL</h5>
                     <div class="row align-items-start">
@@ -165,8 +168,8 @@
                 </div>
             </div>
 
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src="{{asset("./images/cards/PostgreSQL.png")}}" class="card-img-top" style="width: auto; height: 200px;">
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/PostgreSQL.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">SQL Querying with PostgreSQL</h5>
                     <div class="row align-items-start">
@@ -187,9 +190,9 @@
 
         <!-- CARD 3 -->
         <!-- <div class="row" style="margin-top: 45px; display: flex; justify-content: center; align-items: center;"> -->
-        <div class="row" style="margin-top: 45px;">
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src="{{asset("./images/cards/Network.png ")}}" class="card-img-top" style="width: auto; height: 200px;">
+        <div class="d-flex flex-wrap" style="gap: 25px; margin-top: 45px;">
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/Network.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">Network programming with Java</h5>
                     <div class="row align-items-start">
@@ -206,8 +209,8 @@
                 </div>
             </div>
 
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src="{{asset("./images/cards/Unity.png")}}" class="card-img-top" style="width: auto; height: 200px;">
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/Unity.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">Game programming with Unity</h5>
                     <div class="row align-items-start">
@@ -224,8 +227,8 @@
                 </div>
             </div>
 
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src="{{asset("./images/cards/Data analytic.png ")}}" class="card-img-top" style="width: auto; height: 200px;">
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/Data analytic.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">Data Analytics with Python</h5>
                     <div class="row align-items-start">
@@ -242,9 +245,13 @@
                 </div>
             </div>
         </div>
-        <div class="row" style="margin-top: 45px;">
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src="{{asset("./images/cards/DB.png ")}}" class="card-img-top" style="width: auto; height: 200px;">
+        <!-- ---------------------------------------------------------------------------------------------------- -->
+
+        <!-- CARD 4 -->
+        <!-- <div class="row" style="margin-top: 45px; display: flex; justify-content: center; align-items: center;"> -->
+        <div class="d-flex flex-wrap" style="gap: 25px; margin-top: 45px;">
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/DB.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">Database with PHP Programming</h5>
                     <div class="row align-items-start">
@@ -260,8 +267,9 @@
                     </div>
                 </div>
             </div>
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src="{{asset("./images/cards/React.jpg")}}" class="card-img-top" style="width: auto; height: 200px;">
+
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/React.jpg') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">Learn React JS</h5>
                     <div class="row align-items-start">
@@ -276,16 +284,15 @@
                         <a href="{{ route('react_welcome') }}" class="btn btn-primary">Start Learning</a>
                     </div>
                 </div>
-            </div> 
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <!-- Hapus class mt-3 biar gambar mepet ke atas -->
-                <img src="{{asset('./images/cards/literacy.png')}}" class="card-img-top" 
-                     style="width: 100%; height: 200px; object-fit: cover; border-radius: 5px 5px 0 0;">
+            </div>
+
+            <div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
+                <img src="{{ asset('./images/cards/literacy.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                 <div class="card-body d-flex flex-column">
                     <h5 class="card-title">Learn Literacy</h5>
                     <div class="row align-items-start">
                         <div class="col-1">
-                            <img src="{{asset('./images/book.png')}}" style="width: 13px; height: 16px;">
+                            <img src="{{asset("./images/book.png ")}}" style="width: 13px; height: 16px;">
                         </div>
                         <div class="col">
                             <p>6 learning topics</p>
@@ -297,28 +304,11 @@
                         @elseif(Auth::user()->role === 'student')
                             <a href="{{ route('literacy_student_materials') }}" class="btn btn-primary">Start Learning</a>
                         @endif
-                    </div>           
-                </div>
-            </div>                                
-            <!-- <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-                <img src="{{asset("./images/cards/DB.png ")}}" class="card-img-top" style="width: auto; height: 200px;">
-                <div class="card-body d-flex flex-column">
-                    <h5 class="card-title">Database Programming with PHP</h5>
-                    <div class="row align-items-start">
-                        <div class="col-1">
-                            <img src="{{asset("./images/book.png ")}}" style="width: 13px; height: 16px;">
-                        </div>
-                        <div class="col">
-                            <p>18 learning topics</p>
-                        </div>
-                    </div>
-                    <div style="margin-top: auto;">
-                        <a href="{{ route('welcome') }}" class="btn btn-primary">Start Learning</a>
                     </div>
                 </div>
-            </div> -->
+            </div>
         </div>
-
+        <!-- ---------------------------------------------------------------------------------------------------- -->
     </div>
 
     <!-- FOOTER -->
@@ -375,7 +365,9 @@
     </div>
     </div>
     @endauth
-
+    <script 
+        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
+    </script>
 </body>
     <script src="script.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
diff --git a/Penilaian Literasi/iClOP-V2/resources/views/partials/header.blade.php b/Penilaian Literasi/iClOP-V2/resources/views/partials/header.blade.php
index 3f59e31..b108a8f 100644
--- a/Penilaian Literasi/iClOP-V2/resources/views/partials/header.blade.php	
+++ b/Penilaian Literasi/iClOP-V2/resources/views/partials/header.blade.php	
@@ -1,12 +1,13 @@
+<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
-    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
-  <link href="{{asset('css/style.css')}}" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-<title>iCLOP</title>
\ No newline at end of file
+
+<title>iCLOP</title>
+
+<!-- Bootstrap 5 (CSS & JS Bundle) -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="{{ asset('css/style.css') }}" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+
+<!-- Bootstrap 5 Bundle JS (includes Popper, NO jQuery needed) -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
\ No newline at end of file
diff --git a/Penilaian Literasi/iClOP-V2/resources/views/partials/navbar.blade.php b/Penilaian Literasi/iClOP-V2/resources/views/partials/navbar.blade.php
index 2c07bd2..5ae5a9c 100644
--- a/Penilaian Literasi/iClOP-V2/resources/views/partials/navbar.blade.php	
+++ b/Penilaian Literasi/iClOP-V2/resources/views/partials/navbar.blade.php	
@@ -1,97 +1,118 @@
 <style>
   .btn-google {
-  text-decoration: none;
-  border: 1px solid #1466C2;
-  color: #1466C2;
-  display: inline-block;
-  padding: 10px 100px;
-  border-radius: 5px;
-}
-
-.btn-google:hover {
-  background-color: #0056b3; /* Warna latar saat di-hover */
-  color: white; /* Warna teks saat di-hover */
-}
+    text-decoration: none;
+    border: 1px solid #1466C2;
+    color: #1466C2;
+    display: inline-block;
+    padding: 10px 100px;
+    border-radius: 5px;
+  }
 
+  .btn-google:hover {
+    background-color: #0056b3;
+    /* Warna latar saat di-hover */
+    color: white;
+    /* Warna teks saat di-hover */
+  }
 </style>
 <nav class="navbar navbar-expand-lg" style="background-color: #fff; ">
-<div class="container-fluid">
-  <!-- <a class="navbar-brand" href="#">Navbar</a> -->
-  <img src="./images/logo.png" alt="logo" width="104" height="65">
-  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <div class="collapse navbar-collapse" id="navbarSupportedContent">
-    <div class="mx-auto">
-      <ul class="navbar-nav mb-2 mb-lg-0 justify-content-center">
-        <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="/">Home</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="#">Tutorials</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="#">Contact Us</a>
-        </li>
-      </ul>
-    </div>
+  <div class="container-fluid">
+    <!-- <a class="navbar-brand" href="#">Navbar</a> -->
+    <img src="./images/logo.png" alt="logo" width="104" height="65">
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="mx-auto">
+        <ul class="navbar-nav mb-2 mb-lg-0 justify-content-center">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="/">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Tutorials</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Contact Us</a>
+          </li>
+        </ul>
+      </div>
 
-    <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal" style="border-radius: 20px; margin-right: 10px; width: 100px; height: 35px;">Sign In</button>
-    <button class="btn btn-primary custom-button-sign-up" onclick="window.location.href='{{ route('signup') }}'">Sign Up</button>
+      <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#loginModal"
+        style="border-radius: 20px; margin-right: 10px; width: 100px; height: 35px;">Sign In</button>
+      <button class="btn btn-primary custom-button-sign-up" onclick="window.location.href='{{ route('signup') }}'">Sign
+        Up</button>
+    </div>
   </div>
-</div>
 </nav>
 
 <!-- MODAL -->
-<div class="modal" id="loginModal">
-<div class="modal-dialog modal-xl">
-  <div class="modal-content">
+<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-centered">
+    <div class="modal-content">
 
-    <!-- Modal Header -->
-    <div class="modal-header border-0">
-      <button type="button" class="btn-close" aria-label="Close" data-dismiss="modal"></button>
-    </div>
+      <!-- Modal Header -->
+      <div class="modal-header border-0">
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
 
-    <!-- Modal Body -->
-    <div class="modal-body" style="margin-bottom:100px;">
-      <div class="row">
-        <div class="col-lg-6 content-left">
-          <img src="./images/sign-in.png" alt="Illustration" style="width: 450px; height: 450px; margin-right: 50px; margin-left: 50px;">
-        </div>
-        <!-- IMAGE -->
-        <div class="col-lg-6 content-right" style="padding-right: 180px;">
-          <!-- TITLE -->
-          <p class="sign-in-modal">Sign In</p>
-          <p class="welcome-modal">Welcome back! Please enter<br>your details.</p>
-          <!-- FORM -->
-          <form action="{{route('login')}}" method="post">
-            @csrf
-            <div class="form-modal">
-              <label for="email" class="form-label" style="text-align: left; font-weight: 500">Email</label>
-              <input class="form-control" list="datalistOptions" id="email" placeholder="Email" name="email" style=" margin-bottom: 20px;">
+      <!-- Modal Body -->
+      <div class="modal-body">
+        <div class="row align-items-center">
+
+          <!-- IMAGE SECTION -->
+          <div class="col-12 col-lg-6 text-center mb-4 mb-lg-0">
+            <img src="./images/sign-in.png" alt="Illustration" class="img-fluid" style="max-height: 400px;">
+          </div>
+
+          <!-- FORM SECTION -->
+          <div class="col-12 col-lg-6 px-4 px-lg-5">
+            <!-- TITLE -->
+            <p class="sign-in-modal fs-3 fw-bold mb-1">Sign In</p>
+            <p class="welcome-modal text-muted mb-4">Welcome back! Please enter your details.</p>
+
+            <!-- FORM -->
+            <form action="{{ route('login') }}" method="post">
+              @csrf
+
+              <!-- Email -->
+              <div class="mb-3">
+                <label for="email" class="form-label fw-medium">Email</label>
+                <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
+              </div>
+
+              <!-- Password -->
+              <div class="mb-3">
+                <label for="password" class="form-label fw-medium">Password</label>
+                <input type="password" class="form-control" id="password" name="password" placeholder="Password"
+                  required>
+              </div>
+
+              <!-- Sign In Button -->
+              <div class="d-grid mb-3">
+                <button type="submit" class="btn btn-primary">Sign In</button>
+              </div>
+            </form>
+
+            <!-- Google Sign In -->
+            <div class="d-grid mb-3">
+              <a href="{{ route('google.redirect') }}"
+                class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2">
+                <img src="./images/google.png" alt="Google Icon" style="width: 16px; height: 16px;">
+                Sign In with Google
+              </a>
             </div>
-            
-            <div class="form-modal">
-              <label for="password" class="form-label" style="text-align: left; font-weight: 500">Password</label>
-              <input type="password" class="form-control" list="datalistOptions" id="password" name="password" placeholder="Password" style=" margin-bottom: 20px;">
-            </div>
-            <!-- BUTTON SIGN IN -->
-            <button type="submit" class="btn btn-primary custom-button-sign-in-modal">Sign In</button>
-            {{-- <button class="btn btn-primary custom-button-sign-in-modal" type="submit" value="login"> --}}
-          </form>
-          <a href="{{ route('google.redirect') }}" class="btn-google mt-3">
-            <img src="./images/google.png" style="width: 15px; height: 15px;" alt="Google Icon"> Sign In with Google
-          </a>
-          <p class="dont-have-account-modal">Don’t have an account? <span style="color: #1466C2;" onclick="window.location.href='signup'"><a href="javascript:void(0)" style="text-decoration: none;">Sign Up</a></span></p>
+
+            <!-- Sign Up Link -->
+            <p class="text-center mb-0">
+              Don’t have an account?
+              <a href="{{ route('signup') }}" class="text-primary text-decoration-none">Sign Up</a>
+            </p>
+
+          </div>
         </div>
       </div>
     </div>
-
-    <!-- Modal Footer -->
-    <!-- <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-      </div> -->
-
   </div>
 </div>
 </div>
\ No newline at end of file
diff --git a/Penilaian Literasi/iClOP-V2/resources/views/welcome.blade.php b/Penilaian Literasi/iClOP-V2/resources/views/welcome.blade.php
index 69a7256..b7a839d 100644
--- a/Penilaian Literasi/iClOP-V2/resources/views/welcome.blade.php	
+++ b/Penilaian Literasi/iClOP-V2/resources/views/welcome.blade.php	
@@ -1,123 +1,111 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-  @extends('partials.header') <!-- Menggunakan bagian header -->
-  <link rel="icon" href="./images/logo.png" type="image/png">
+  @include('partials.header')
+  <link rel="icon" href="{{ asset('images/logo.png') }}" type="image/png">
 </head>
 
 <body>
-  <!-- NAVBAR -->
-  @include('partials.navbar') <!-- Menggunakan bagian navbar -->
+  @include('partials.navbar')
 
-  <!-- CONTENT -->
-  <div class="container" style="margin-top: 50px;">
+  <div class="container mt-5">
     <div class="row">
-      <!-- TEXT -->
       <div class="col-lg-6 content-left">
         <p class="welcome-to-iclop">Welcome To iCLOP</p>
-        <p class="where-education" style="line-height:60px ;">Where Your <span class="education">Education</span> Has No
-          Limit</p>
+        <p class="where-education" style="line-height:60px;">Where Your <span class="education">Education</span> Has No Limit</p>
         <p class="subtext">iCLOP (intelligent computer assisted programming learning platform)</p>
-        <p class="subtext">With our easy-to-follow tutorials and examples, you can learn to code in no time. Learn to
-          code by reading tutorials, trying out examples, and writing applications.</p>
+        <p class="subtext">With our easy-to-follow tutorials and examples, you can learn to code in no time...</p>
       </div>
-      <!-- IMAGE -->
       <div class="col-lg-6 content-right">
-        <img src="./images/Edeucation.png" alt="Illustration" style="width: 500px; height: auto;">
+        <img src="{{ asset('images/Edeucation.png') }}" alt="Illustration" class="img-fluid">
       </div>
     </div>
   </div>
 
-  <div class="container" style="margin-top: 10px">
+  <div class="container mt-3">
     <div class="row">
-      <!-- IMAGE -->
       <div class="col-lg-6 content-left">
-        <img src="./images/online_virtual_machine.png" alt="Illustration" style="width: 500px; height: auto;">
+        <img src="{{ asset('images/online_virtual_machine.png') }}" alt="VM" class="img-fluid">
       </div>
-      <!-- TEXT -->
       <div class="col-lg-6 content-right">
         <p class="where-education" style="font-size: 40px;">Online Virtual Machine</p>
-        <p style="font-size: 20px; margin-top: 35px;">Make learning an easy process with support for an online virtual
-          machine which will relieve you from the hustle of finding the right computer for your learning needs.</p>
-      </div>
-    </div>
-
-    <div class="container" style="background-color: #FAFAFA; height: 750px; margin-top: 50px; display: flex; flex-direction: column; align-items: center;">
-      <p class="where-education" style="font-size: 35px; text-align: center; margin-top: 50px;">Choose What You Want To
-        Study</p>
-      <p class="popular-languages" style="font-size: 20px; text-align: center;">Begin By Studying Some of The Most
-        Popular Programming Languages</p>
-      <div class="row" style="margin-top: 50px;">
-
-        <div class="container text-center" style="margin-top: 35px;">
-          <div class="row">
-            @foreach ($cards as $card)
-            <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-              <img src="{{ $card['image'] }}" class="card-img-top" style="width: auto; height: 200px;">
-              <div class="card-body d-flex flex-column">
-                <h5 class="card-title">{{ $card['title'] }}</h5>
-                <div class="row align-items-start">
-                  <div class="col-1">
-                    <img src="./images/book.png" style="width: 13px; height: 16px;">
-                  </div>
-                  <div class="col">
-                    <p>{{ $card['topics'] }}</p>
-                  </div>
-                </div>
-                <div style="margin-top: auto;">
-                  <a href="#" class="btn btn-primary">Start Learning</a>
-                </div>
-              </div>
-            </div>
-            @endforeach
-          </div>
-        </div>
-
-      </div>
-      <button class="btn btn-primary custom-button-sign-up" style="width: 252px; height: 42px; margin-top: 60px;">Load
-        More</button>
-    </div>
-
-    <p class="where-education" style="font-size: 40px; text-align: center; margin-top: 50px;">Our Services</p>
-    <p style="font-size: 25px; text-align: center; margin-top: 25px; color: #636363;">Make Your Learning
-      Experience<br>Extraordinary With The Services We Provide</p>
-
-    <!-- CARD 1 -->
-    <div class="container text-center" style="margin-top: 100px;">
-      <div class="row">
-        @foreach ($cardsData as $card)
-        <div class="col" style="width: 430px; height: 440px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-          <div class="container">
-            <img src="{{ $card['image'] }}" alt="computer" style="height: 102px; margin-left: 30px; margin-top: 20px;">
-            <p style="font-size: 22px; font-weight: 600; color: #34364A; margin-top: 24px;">{{ $card['title'] }}</p>
-            <p style="font-size: 18px;">{{ $card['description'] }}<br>
-          </div>
-        </div>
-        @endforeach
-      </div>
-    </div>
-
-    <!-- CARD 2 -->
-    <div class="container text-center" style="margin-top: 35px;">
-      <div class="row">
-        @foreach ($cardsData2 as $card)
-        <div class="col" style="width: 430px; height: 440px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
-          <div class="container">
-            <img src="{{ $card['image'] }}" alt="computer" style="height: 102px; margin-left: 30px; margin-top: 20px;">
-            <p style="font-size: 22px; font-weight: 600; color: #34364A; margin-top: 24px;">{{ $card['title'] }}</p>
-            <p style="font-size: 18px;">{{ $card['description'] }}<br>
-          </div>
-        </div>
-        @endforeach
+        <p style="font-size: 20px; margin-top: 35px;">Make learning an easy process...</p>
       </div>
     </div>
   </div>
 
-</body>
-<script src="script.js"></script>
-<footer>
-  @include('partials.footer')
-</footer>
+  <div class="container py-5" style="background-color: #FAFAFA;">
+    <p class="where-education text-center" style="font-size: 35px;">Choose What You Want To Study</p>
+    <p class="popular-languages text-center" style="font-size: 20px;">Begin By Studying Some of The Most Popular Programming Languages</p>
 
+    <div class="row gx-4 gy-4 justify-content-center mt-4">
+      @foreach ($cards as $card)
+        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4 d-flex justify-content-center">
+          <div class="card p-0 shadow-sm" style="width: 100%; max-width: 305px; height: 375px;">
+            <img src="{{ $card['image'] }}" class="card-img-top" style="height: 200px; object-fit: cover;">
+            <div class="card-body d-flex flex-column">
+              <h5 class="card-title">{{ $card['title'] }}</h5>
+              <div class="row align-items-start">
+                <div class="col-1">
+                  <img src="{{ asset('images/book.png') }}" style="width: 13px; height: 16px;">
+                </div>
+                <div class="col">
+                  <p>{{ $card['topics'] }}</p>
+                </div>
+              </div>
+              <div class="mt-auto">
+                <a href="#" class="btn btn-primary">Start Learning</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+
+    <div class="text-center mt-4">
+      <button class="btn btn-primary custom-button-sign-up" style="width: 252px; height: 42px;">Load More</button>
+    </div>
+  </div>
+
+  <div class="container text-center mt-5">
+    <p class="where-education" style="font-size: 40px;">Our Services</p>
+    <p style="font-size: 25px; color: #636363;">Make Your Learning Experience<br>Extraordinary With The Services We Provide</p>
+  </div>
+
+  <div class="container text-center mt-5">
+    <div class="row gx-4 gy-4 justify-content-center">
+      @foreach ($cardsData as $card)
+        <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex justify-content-center">
+          <div class="card shadow-sm" style="width: 100%; max-width: 430px; height: 440px;">
+            <div class="card-body">
+              <img src="{{ $card['image'] }}" alt="icon" style="height: 102px; margin-top: 20px;">
+              <p style="font-size: 22px; font-weight: 600; color: #34364A; margin-top: 24px;">{{ $card['title'] }}</p>
+              <p style="font-size: 18px;">{{ $card['description'] }}</p>
+            </div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  </div>
+
+  <div class="container text-center mt-4">
+    <div class="row gx-4 gy-4 justify-content-center">
+      @foreach ($cardsData2 as $card)
+        <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex justify-content-center">
+          <div class="card shadow-sm" style="width: 100%; max-width: 430px; height: 440px;">
+            <div class="card-body">
+              <img src="{{ $card['image'] }}" alt="icon" style="height: 102px; margin-top: 20px;">
+              <p style="font-size: 22px; font-weight: 600; color: #34364A; margin-top: 24px;">{{ $card['title'] }}</p>
+              <p style="font-size: 18px;">{{ $card['description'] }}</p>
+            </div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  </div>
+
+  <script src="{{ asset('script.js') }}"></script>
+
+  @include('partials.footer')
+</body>
 </html>
\ No newline at end of file