diff --git a/app/src/app/certificates/[certificate].js b/app/src/app/certificates/[certificate]/page.js
similarity index 51%
rename from app/src/app/certificates/[certificate].js
rename to app/src/app/certificates/[certificate]/page.js
index 5aac4d0a..71256fa4 100644
--- a/app/src/app/certificates/[certificate].js
+++ b/app/src/app/certificates/[certificate]/page.js
@@ -1,15 +1,15 @@
+"use client"
+
 import React from "react";
 import Certificate from "@/components/certificate/certificate";
-import { useRouter } from 'next/router';
+import { useParams } from "next/navigation";
 
 const CertificatePage = () => {
-    const { query: { certificate: slug } } = useRouter();
+    const { certificate: slug } = useParams();
 
     return (
-        <>
-            <Certificate slug={slug} />
-        </>
+        <Certificate slug={slug} />
     );
-}
+};
 
 export default CertificatePage;
\ No newline at end of file
diff --git a/app/src/shared/certificatesData.js b/app/src/shared/certificatesData.js
index 27e40954..f6417a9e 100644
--- a/app/src/shared/certificatesData.js
+++ b/app/src/shared/certificatesData.js
@@ -1,9 +1,5 @@
-import Image from 'next/image';
-
-// Function to create slugs from titles
 export const createSlug = (title) => title.toLowerCase().replace(/\s+/g, '-');
 
-// Array of certificate objects
 export const certificates = [
     { 
         title: "Cookoff 9",