diff --git a/app/controllers/PremiumController.php b/app/controllers/PremiumController.php
index 3179044f18c5809bbe08a5d038b8f46fdd292df8..4282e12b42f9bad95affddeb29c715231cdc6c2b 100644
--- a/app/controllers/PremiumController.php
+++ b/app/controllers/PremiumController.php
@@ -24,5 +24,19 @@
             // Meneruskan data ke view
             return $this->view('premium','index',["page_number"=>$page_number,"courses"=>$courses,"type"=>"lists","max_page"=>$total_page]);
         }
+
+        public function preview($params){
+            $middleware = $this->middleware("LoginMiddleware");
+            $middleware->hasLoggedIn();
+            $raw_modules = file_get_contents("http://host.docker.internal:8000/api/modul/course/".$params);
+            $raw_course = file_get_contents("http://host.docker.internal:8000/api/course/".$params);
+
+            $data = json_decode($raw_modules,true);
+            $data_course = json_decode($raw_course,true);
+            $course = $data_course["data"];
+            $modules = $data["data"];
+
+            return $this->view('premium','detailCourse',["course"=>$course,"modules"=>$modules]);
+        }
     }
 ?>
\ No newline at end of file
diff --git a/app/views/premium/detailCourse.php b/app/views/premium/detailCourse.php
new file mode 100644
index 0000000000000000000000000000000000000000..2a613454d26db4ec8d230e0b4dbbacf910db42d5
--- /dev/null
+++ b/app/views/premium/detailCourse.php
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="../../public/css/course/detail.css">
+    <script src="../../public/js/details.js" defer></script>
+    <script src="../../public/js/detailsCourse.js" defer></script>
+</head>
+<body>
+    <?php include __DIR__ . '/../navbar/navbar.php' ?>
+    <section class="home-section">
+        <div class="wrapper">
+            <div class="header">
+                <?php
+                $course = $data["course"];
+                echo "<h1 class='course'>$course[title]</h1>";
+                ?>
+            </div>
+            <div class="course-section">
+                <div class="modules">
+                    <div class="header-intro">
+                        <p>Modules</p>
+                    </div>
+                    <div class="table-container">
+                        <table class="table-module">
+                            <tbody>
+                                <?php
+                                $modules = $data["modules"];
+                                $course = $data["course"];
+                                foreach ($modules as $module) { ?>
+                                    <tr>
+                                        <td>
+                                            <div class='row-container'>
+                                                <div class='module-title' onclick='navigateToMaterials(<?php echo $module["module_id"] ?>)'>
+                                                    <span><?php echo $module['title'] ?></span>
+                                                </div>
+                            
+                                            </div>
+                                        </td>
+                                    </tr>
+                                <?php } ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="module-material-container" style='width:100%'>
+                    <div class="material-box" style='width:100%'>
+                        <div class="titles">
+                            <?php
+                            $course = $data["course"];
+                            echo "<h3 id='course-title'>$course[title]</h3>";
+                            ?>
+                        </div>
+                        <div class="material-content" style='width:auto;'>
+                            <div class="material-text">
+                                <p id="course-desc">
+                                    Welcome to this course!
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                </div>
+            </div>
+        </div>
+    </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/app/views/premium/index.php b/app/views/premium/index.php
index a7a84cbf3159d196eb9a3f134d58d40baf5f4008..43209316e7ff129a08c2e967f3d07641fa9ac169 100644
--- a/app/views/premium/index.php
+++ b/app/views/premium/index.php
@@ -71,7 +71,8 @@
                         $image_path = isset($course["image_path"]) ? $course["image_path"]:"../../public/asset/banner1.png";
                         $formattedDate = date('d-m-y', strtotime($course['release_date']));
                         echo"
-                        <div class='card' onclick='openModal(\"$joined\",\"$course[id]\",\"$course[title]\",\"$course[description]\",\"$formattedDate\")' style='cursor: pointer;'>
+                        <a href='/premium/preview/$course[id]' style='text-decoration: none; color: inherit; cursor: pointer;'>
+                        <div class='card' style='cursor: pointer;'>
                             <div class='card-top'>
                                 <img src='$image_path' alt='Blog Name'>
                             </div>
@@ -85,6 +86,7 @@
                                 <p>$formattedDate</p>
                             </div>
                         </div>
+                        </a>
                         ";
                     }
                 ?>