diff --git a/src/components/Course/components/Ceritficate/Design.svelte b/src/components/Course/components/Ceritficate/Design.svelte
index ae5b7723..ba2d8930 100644
--- a/src/components/Course/components/Ceritficate/Design.svelte
+++ b/src/components/Course/components/Ceritficate/Design.svelte
@@ -5,6 +5,7 @@
     Toggle,
   } from 'carbon-components-svelte';
   import { goto } from '@sapper/app';
+  import { updateCourse } from '../../../../utils/services/courses';
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
   import TextArea from '../../../Form/TextArea.svelte';
   import Professional from './certificates/Professional.svelte';
@@ -13,24 +14,26 @@
   import { currentOrg } from '../../../../utils/store/org';
 
   const studentNamePlaceholder = 'Name of student';
-
   const themes = ['professional', 'plain'];
 
   let isSaving = false;
+  let Saved = false;
+  let errors = {};
 
-  const saveCertificate = () => {
-    // set isSaving to true
-    // Validation - make sure description isn't empty
-    /**
-     * Update course description, is_certificate_downloadable and certificate_theme (like in src/components/Course/components/Settings/index.svelte)
-     * 
-     * await updateCourse($course.id, undefined, {
-        description: $course.description,
-        is_certificate_downloadable: $course.is_certificate_downloadable,
-        certificate_theme: $course.certificate_theme
-      });
-     * */
-    // set isSaving to false
+  const saveCertificate = async () => {
+    isSaving = true;
+    if (!$course.description) {
+      errors.description = 'Description cannot be empty';
+      isSaving = false;
+      return;
+    }
+    await updateCourse($course.id, undefined, {
+      description: $course.description,
+      is_certificate_downloadable: $course.is_certificate_downloadable,
+      certificate_theme: $course.certificate_theme,
+    });
+    Saved = true;
+    isSaving = false;
   };
 </script>
 
@@ -82,6 +85,7 @@
             placeholder="a little description about the course"
             bgColor="bg-gray-100"
             bind:value={$course.description}
+            errorMessage={errors.description}
           />
         </span>
         <Toggle
@@ -109,7 +113,7 @@
   </div>
   <div class="h-1/5">
     <PrimaryButton
-      label="Save Changes"
+      label={Saved == true ? 'Saved' : 'Save Changes'}
       className="rounded-md"
       onClick={saveCertificate}
       isLoading={isSaving}
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/components/Course/components/Ceritficate/certificates/Plain.svelte b/src/components/Course/components/Ceritficate/certificates/Plain.svelte
index 75627219..5c6b4998 100644
--- a/src/components/Course/components/Ceritficate/certificates/Plain.svelte
+++ b/src/components/Course/components/Ceritficate/certificates/Plain.svelte
@@ -31,7 +31,7 @@
     </div>
     <div class="mb-2">
       <p class="text-xs text-black font-medium">
-        has successfully completed a courses in
+        has successfully completed the course
       </p>
       <div>
         <p
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" />
diff --git a/src/utils/services/courses/index.ts b/src/utils/services/courses/index.ts
index 024dfb4f..82bb24fb 100644
--- a/src/utils/services/courses/index.ts
+++ b/src/utils/services/courses/index.ts
@@ -39,6 +39,8 @@ export async function fetchCourse(
       cost,
       currency,
       metadata,
+      is_certificate_downloadable,
+      certificate_theme,
       lessons:lesson(
         id, title,public, lesson_at, call_url, is_complete, order, created_at,
         note, video_url, slide_url, call_url, totalExercises:exercise(count),