diff --git a/src/lib/components/Course/components/Ceritficate/StudentCertificate/LockedCertificate.svelte b/src/lib/components/Course/components/Ceritficate/StudentCertificate/LockedCertificate.svelte
index 76f85894..3b3c2bee 100644
--- a/src/lib/components/Course/components/Ceritficate/StudentCertificate/LockedCertificate.svelte
+++ b/src/lib/components/Course/components/Ceritficate/StudentCertificate/LockedCertificate.svelte
@@ -1,20 +1,14 @@
 <script>
-  import { course } from '$lib/components/Course/store';
+  import Box from '$lib/components/Box/index.svelte';
 </script>
 
-<section class="studentContainer flex items-center justify-center w-full">
+<Box>
   <div class="flex flex-col items-center justify-center w-max h-full gap-2">
-    <img src={`./${$course.certificate_theme}.svg`} alt="Certificate" />
+    <img src="/professional.svg" alt="Certificate" />
     <p class="text-xl font-normal text-center">Certificates not available</p>
     <p class="text-sm font-normal text-center">
-      Your instructor needs to unlock your certificate. <br /> If you need your certificate,
-      please contact your instructor.
+      Your instructor needs to unlock your certificate. <br /> If you need your certificate, please contact
+      your instructor.
     </p>
   </div>
-</section>
-
-<style>
-  .studentContainer {
-    height: 80vh;
-  }
-</style>
+</Box>
diff --git a/src/lib/components/Course/components/Ceritficate/StudentCertificate/UnlockedCertificate.svelte b/src/lib/components/Course/components/Ceritficate/StudentCertificate/UnlockedCertificate.svelte
index 9f33102e..98a2d251 100644
--- a/src/lib/components/Course/components/Ceritficate/StudentCertificate/UnlockedCertificate.svelte
+++ b/src/lib/components/Course/components/Ceritficate/StudentCertificate/UnlockedCertificate.svelte
@@ -3,29 +3,27 @@
   import { currentOrg } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import Box from '$lib/components/Box/index.svelte';
 
   let isLoading = false;
 
   const downLoadCertificate = async () => {
     isLoading = true;
-    const response = await fetch(
-      'https://classroomio-server.fly.dev/downloadCertificate',
-      {
-        method: 'POST',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          theme: `${$course.certificate_theme}`,
-          studentName: `${$profile.fullname}`,
-          courseName: `${$course.title}`,
-          courseDescription: `${$course.description}`,
-          orgLogoUrl: `${$currentOrg.avatar_url}`,
-          orgName: `${$currentOrg.name}`,
-        }),
-      }
-    );
+    const response = await fetch('https://classroomio-server.fly.dev/downloadCertificate', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        theme: `${$course.certificate_theme}`,
+        studentName: `${$profile.fullname}`,
+        courseName: `${$course.title}`,
+        courseDescription: `${$course.description}`,
+        orgLogoUrl: `${$currentOrg.avatar_url}`,
+        orgName: `${$currentOrg.name}`
+      })
+    });
     const data = await response.blob();
     console.log(data);
     const file = new Blob([data], { type: 'application/pdf' });
@@ -35,9 +33,9 @@
   };
 </script>
 
-<section class="studentContainer flex items-center justify-center w-full">
+<Box>
   <div class="flex flex-col items-center justify-center w-max h-full gap-5">
-    <img src={`./${$course.certificate_theme}.svg`} alt="Certificate" />
+    <img src="/professional.svg" alt="Certificate" />
     <p class="text-xl font-normal text-center">Certificate is now available</p>
     <PrimaryButton
       label="DownLoad Certificate"
@@ -46,10 +44,4 @@
       {isLoading}
     />
   </div>
-</section>
-
-<style>
-  .studentContainer {
-    height: 80vh;
-  }
-</style>
+</Box>