diff --git a/src/components/Course/components/Ceritficate/StudentCertificate/Index.svelte b/src/components/Course/components/Ceritficate/StudentCertificate/Index.svelte
new file mode 100644
index 00000000..2320ccdd
--- /dev/null
+++ b/src/components/Course/components/Ceritficate/StudentCertificate/Index.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { course } from '../../../store';
+  import UnlockedCertificate from './UnlockedCertificate.svelte';
+  import LockedCertificate from './LockedCertificate.svelte';
+</script>
+
+<div>
+  {#if $course.is_certificate_downloadable == true}
+    <UnlockedCertificate />
+  {:else}
+    <LockedCertificate />
+  {/if}
+</div>
diff --git a/src/components/Course/components/Ceritficate/StudentCertificate/LockedCertificate.svelte b/src/components/Course/components/Ceritficate/StudentCertificate/LockedCertificate.svelte
new file mode 100644
index 00000000..768170a1
--- /dev/null
+++ b/src/components/Course/components/Ceritficate/StudentCertificate/LockedCertificate.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { course } from '../../../store';
+</script>
+
+<section class="studentContainer flex items-center justify-center w-full">
+  <div class="flex flex-col items-center justify-center w-max h-full gap-2">
+    <img src={`./${$course.certificate_theme}.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.
+    </p>
+  </div>
+</section>
+
+<style>
+  .studentContainer {
+    height: 80vh;
+  }
+</style>
diff --git a/src/components/Course/components/Ceritficate/StudentCertificate/UnlockedCertificate.svelte b/src/components/Course/components/Ceritficate/StudentCertificate/UnlockedCertificate.svelte
new file mode 100644
index 00000000..8e67ad34
--- /dev/null
+++ b/src/components/Course/components/Ceritficate/StudentCertificate/UnlockedCertificate.svelte
@@ -0,0 +1,55 @@
+<script>
+  import { course } from '../../../store';
+  import { currentOrg } from '../../../../../utils/store/org';
+  import { profile } from '../../../../../utils/store/user';
+  import PrimaryButton from '../../../../PrimaryButton/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 data = await response.blob();
+    console.log(data);
+    const file = new Blob([data], { type: 'application/pdf' });
+    const fileURL = URL.createObjectURL(file);
+    isLoading = false;
+    window.open(fileURL);
+  };
+</script>
+
+<section class="studentContainer flex items-center justify-center w-full">
+  <div class="flex flex-col items-center justify-center w-max h-full gap-5">
+    <img src={`./${$course.certificate_theme}.svg`} alt="Certificate" />
+    <p class="text-xl font-normal text-center">Certificate is now available</p>
+    <PrimaryButton
+      label="DownLoad Certificate"
+      className="rounded-md"
+      onClick={downLoadCertificate}
+      {isLoading}
+    />
+  </div>
+</section>
+
+<style>
+  .studentContainer {
+    height: 80vh;
+  }
+</style>
diff --git a/src/routes/courses/[id]/certificates.svelte b/src/routes/courses/[id]/certificates.svelte
index 796366e4..e38086f8 100644
--- a/src/routes/courses/[id]/certificates.svelte
+++ b/src/routes/courses/[id]/certificates.svelte
@@ -20,7 +20,7 @@
   // import { issueCertificateModal } from '../../../components/Course/components/Ceritficate/store';
   // import { Tabs, Tab } from 'carbon-components-svelte';
   // import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
-
+  import StudentCertificate from '../../../components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
   export let courseId: string = '';
   let isStudent = false;
 
@@ -48,7 +48,13 @@
   </PageNav>
 
   <PageBody className="w-full mx-0" padding="px-3">
-    <Design />
+    <RoleBasedSecurity allowedRoles={[1, 2]}>
+      <Design />
+    </RoleBasedSecurity>
+    <RoleBasedSecurity allowedRoles={[3]}>
+      <StudentCertificate />
+    </RoleBasedSecurity>
+
     <!-- <Tabs autoWidth class="border-b border-gray-200">
       <Tab label="Design" />
       <Tab label="Reports" />