diff --git a/public/global/movies/script.js b/public/global/movies/script.js
index 994f55c..040d9fd 100644
--- a/public/global/movies/script.js
+++ b/public/global/movies/script.js
@@ -1,9 +1,12 @@
-$(document).ready(async function() {
+
+document.addEventListener('DOMContentLoaded', async () => {
     await loadmovie();
 });
 
 async function loadmovie() {
-    await $.get("/api/movies", rendermovie);
+    fetch("/api/movies")
+    .then(response => response.json())
+    .then(data => { rendermovie(data); });
 }
 
 function splitByTitle(movies) {
@@ -73,20 +76,22 @@ function sortMoviesByDate(movies) {
 function rendermovie(movies) {
     split = splitByTitle(movies);
 
+    body = document.getElementById("movie_tbody");
+
     for (var key in split) {
 
         var header = createHeader(key);
-        $("#movie_tbody").append(header);
+        body.append(header);
 
         movies = document.createElement("div");
-        movies.className = "row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3";
+        movies.className = "row row-cols-3 row-cols-sm-3 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3";
 
         split[key].forEach(function(movie) {
             var row = createMElement(movie);
             movies.append(row);
         });
 
-        $("#movie_tbody").append(movies);
+        body.append(movies);
     }
 
 }
\ No newline at end of file
diff --git a/views/movies/show.hbs b/views/movies/show.hbs
index 103be1b..7109632 100644
--- a/views/movies/show.hbs
+++ b/views/movies/show.hbs
@@ -1,10 +1,8 @@
-
 <script defer src="/global/movies/script.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
 
 <div class="album py-5 bg-body-tertiary">
 <div class="container" id="movie_tbody">
-  
-  
+
+
 </div>
 </div>
\ No newline at end of file