diff --git a/package-lock.json b/package-lock.json
index 29824a7a..b753c433 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,8 @@
         "node-sass": "^6.0.0",
         "polka": "next",
         "sapper-environment": "^1.0.1",
-        "sirv": "^1.0.0"
+        "sirv": "^1.0.0",
+        "svelte-easy-crop": "^1.0.4"
       },
       "devDependencies": {
         "@babel/core": "^7.0.0",
@@ -5754,6 +5755,14 @@
       "integrity": "sha512-DuSfie7xukV3AXlA9vFnIkit97LYNSDpKFmUBgL0RansnBrFvJoFpnsnuUW2ULfsYR1NpqZGmHAsgKQUeBf6Lg==",
       "dev": true
     },
+    "node_modules/svelte-easy-crop": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/svelte-easy-crop/-/svelte-easy-crop-1.0.4.tgz",
+      "integrity": "sha512-YWbayjPenBYx1b8Usbh70jXXSy/e2ggY7fYBnemefyXhnrccS6Ke4h2uBB07uGDZdwxQNZvS5ruoXwxxZQVo0g==",
+      "engines": {
+        "node": "14"
+      }
+    },
     "node_modules/svelte-loading-spinners": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz",
@@ -10987,6 +10996,11 @@
       "integrity": "sha512-DuSfie7xukV3AXlA9vFnIkit97LYNSDpKFmUBgL0RansnBrFvJoFpnsnuUW2ULfsYR1NpqZGmHAsgKQUeBf6Lg==",
       "dev": true
     },
+    "svelte-easy-crop": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/svelte-easy-crop/-/svelte-easy-crop-1.0.4.tgz",
+      "integrity": "sha512-YWbayjPenBYx1b8Usbh70jXXSy/e2ggY7fYBnemefyXhnrccS6Ke4h2uBB07uGDZdwxQNZvS5ruoXwxxZQVo0g=="
+    },
     "svelte-loading-spinners": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz",
diff --git a/package.json b/package.json
index 99562b8a..050b0889 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
     "node-sass": "^6.0.0",
     "polka": "next",
     "sapper-environment": "^1.0.1",
-    "sirv": "^1.0.0"
+    "sirv": "^1.0.0",
+    "svelte-easy-crop": "^1.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -59,4 +60,4 @@
     "tslib": "^2.3.1",
     "typescript": "^4.1.3"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Course/components/Lesson/Exercises/index.svelte b/src/components/Course/components/Lesson/Exercises/index.svelte
index c765696c..6105f7d0 100644
--- a/src/components/Course/components/Lesson/Exercises/index.svelte
+++ b/src/components/Course/components/Lesson/Exercises/index.svelte
@@ -1,5 +1,7 @@
 <script>
   import { onMount } from 'svelte';
+  import AudioConsole32 from 'carbon-icons-svelte/lib/AudioConsole32';
+  import Box from '../../../../Box/index.svelte';
   import PrimaryButton from '../../../../PrimaryButton/index.svelte';
   import PageBody from '../../../../PageBody/index.svelte';
   import Modal from '../../../../Modal/index.svelte';
@@ -144,6 +146,11 @@
           <h3 class="text-xl">{exercise.title}</h3>
           <p class="mt-4 text-sm">Created Jul 3, 2021</p>
         </a>
+      {:else}
+        <Box>
+          <AudioConsole32 class="carbon-icon w-80" />
+          <h3 class="text-3xl text-gray-500">No Exercise Added</h3>
+        </Box>
       {/each}
     </div>
   </PageBody>
diff --git a/src/components/Course/components/Lesson/Materials/constants.js b/src/components/Course/components/Lesson/Materials/constants.js
index 716855d7..0cc46f97 100644
--- a/src/components/Course/components/Lesson/Materials/constants.js
+++ b/src/components/Course/components/Lesson/Materials/constants.js
@@ -1,14 +1,14 @@
 export const tabs = [
   {
-    label: 'Note',
+    label: 'Slide',
     value: 1,
   },
   {
-    label: 'Video',
+    label: 'Note',
     value: 2,
   },
   {
-    label: 'Slide',
+    label: 'Video',
     value: 3,
   },
 ];
diff --git a/src/components/Course/components/Lesson/Materials/index.svelte b/src/components/Course/components/Lesson/Materials/index.svelte
index 16829fa9..90ba29ea 100644
--- a/src/components/Course/components/Lesson/Materials/index.svelte
+++ b/src/components/Course/components/Lesson/Materials/index.svelte
@@ -13,7 +13,6 @@
     isLessonDirty,
   } from '../store/lessons';
   import { tabs } from './constants';
-  import { onMount } from 'svelte';
 
   export let mode = MODES.view;
   export let prevMode = null;
@@ -64,6 +63,32 @@
 <Tabs {tabs} {currentTab} {onChange}>
   <slot:fragment slot="content">
     <TabContent value={tabs[0].value} index={currentTab}>
+      {#if mode === MODES.edit}
+        <TextField
+          label="Slide link"
+          bind:value={$lesson.materials.slide_url}
+          onChange={() => ($isLessonDirty = true)}
+        />
+      {:else if $lesson.materials.slide_url}
+        <iframe
+          title="Embeded Slides"
+          src={$lesson.materials.slide_url}
+          frameborder="0"
+          width="100%"
+          height="569"
+          allowfullscreen="true"
+          mozallowfullscreen="true"
+          webkitallowfullscreen="true"
+        />
+      {:else}
+        <Box>
+          <h3 class="text-3xl text-gray-500">No slide added</h3>
+          <img alt="Slide not found" src="/notfound.webp" class="w-80" />
+        </Box>
+      {/if}
+    </TabContent>
+
+    <TabContent value={tabs[1].value} index={currentTab}>
       {#if mode === MODES.edit}
         <EditContent
           writeLabel="Note"
@@ -80,7 +105,8 @@
         </Box>
       {/if}
     </TabContent>
-    <TabContent value={tabs[1].value} index={currentTab}>
+
+    <TabContent value={tabs[2].value} index={currentTab}>
       {#if mode === MODES.edit}
         <TextField
           label="Youtube link"
@@ -108,30 +134,5 @@
         </Box>
       {/if}
     </TabContent>
-    <TabContent value={tabs[2].value} index={currentTab}>
-      {#if mode === MODES.edit}
-        <TextField
-          label="Slide link"
-          bind:value={$lesson.materials.slide_url}
-          onChange={() => ($isLessonDirty = true)}
-        />
-      {:else if $lesson.materials.slide_url}
-        <iframe
-          title="Embeded Slides"
-          src={$lesson.materials.slide_url}
-          frameborder="0"
-          width="100%"
-          height="569"
-          allowfullscreen="true"
-          mozallowfullscreen="true"
-          webkitallowfullscreen="true"
-        />
-      {:else}
-        <Box>
-          <h3 class="text-3xl text-gray-500">No slide added</h3>
-          <img alt="Slide not found" src="/notfound.webp" class="w-80" />
-        </Box>
-      {/if}
-    </TabContent>
   </slot:fragment>
 </Tabs>
diff --git a/src/components/Course/components/People/DeleteConfirmation.svelte b/src/components/Course/components/People/DeleteConfirmation.svelte
new file mode 100644
index 00000000..9b2fba54
--- /dev/null
+++ b/src/components/Course/components/People/DeleteConfirmation.svelte
@@ -0,0 +1,43 @@
+<script>
+  import Modal from '../../../Modal/index.svelte';
+  import PrimaryButton from '../../../PrimaryButton/index.svelte';
+
+  import { VARIANTS } from '../../../PrimaryButton/constants';
+  import { deleteMemberModal } from './store';
+
+  export let email;
+  export let deletePerson = () => {};
+
+  async function handleDelete() {
+    deletePerson();
+    $deleteMemberModal.open = false;
+  }
+</script>
+
+<Modal
+  onClose={() => ($deleteMemberModal.open = false)}
+  bind:open={$deleteMemberModal.open}
+  width="w-96"
+  modalHeading="Delete"
+>
+  <div>
+    <h1 class="text-lg">
+      Are you sure you want to delete <strong>{email}</strong>?
+    </h1>
+
+    <div class="mt-5 flex items-center justify-between">
+      <PrimaryButton
+        className="px-6 py-2"
+        variant={VARIANTS.OUTLINED}
+        label="No"
+        onClick={() => ($deleteMemberModal.open = false)}
+      />
+      <PrimaryButton
+        className="px-6 py-2"
+        variant={VARIANTS.OUTLINED}
+        label="Yes"
+        onClick={handleDelete}
+      />
+    </div>
+  </div>
+</Modal>
diff --git a/src/components/Course/components/People/InviationModal.svelte b/src/components/Course/components/People/InviationModal.svelte
index aca32549..11f8a403 100644
--- a/src/components/Course/components/People/InviationModal.svelte
+++ b/src/components/Course/components/People/InviationModal.svelte
@@ -45,7 +45,6 @@
     }
 
     addGroupMember(membersStack).then(async (membersAdded) => {
-      console.log(`membersAdded`, membersAdded);
       const group = await fetchGroup($course.group.id);
 
       setCourseData(
diff --git a/src/components/Course/components/People/store.js b/src/components/Course/components/People/store.js
index 679df0ad..e12577ad 100644
--- a/src/components/Course/components/People/store.js
+++ b/src/components/Course/components/People/store.js
@@ -1,5 +1,9 @@
 import { writable } from 'svelte/store';
 
+export const deleteMemberModal = writable({
+  open: false,
+});
+
 export const invitationModal = writable({
   open: false,
   tutors: '',
diff --git a/src/components/Course/store.js b/src/components/Course/store.js
index 577063a1..c49a6ef9 100644
--- a/src/components/Course/store.js
+++ b/src/components/Course/store.js
@@ -24,6 +24,7 @@ export const group = writable({
   id: null,
   tutors: [],
   students: [],
+  people: [],
 });
 
 export async function setCourseData(data, setLesson = true) {
diff --git a/src/components/Courses/components/Card/index.svelte b/src/components/Courses/components/Card/index.svelte
new file mode 100644
index 00000000..98db67ac
--- /dev/null
+++ b/src/components/Courses/components/Card/index.svelte
@@ -0,0 +1,50 @@
+<script>
+  export let logo = '';
+  export let id = '';
+  export let title = '';
+  export let description = '';
+</script>
+
+<a
+  rel="prefetch"
+  class="root w-72 border bg-gray-100 px-2 py-7 mr-4 mb-4 rounded-md hover:shadow-2xl transition ease-in-out"
+  href="/courses/{id}"
+>
+  <img
+    class="w-24 h-24 rounded-full border mx-auto"
+    src={logo}
+    alt="Course Logo"
+  />
+  <div class="pt-3 text-center space-y-4">
+    <h3 class="text-lg font-semibold">
+      {title}
+    </h3>
+    <div
+      class="description text-left font-small flex flex-col text-gray-500"
+      title={description}
+    >
+      {description}
+    </div>
+  </div>
+</a>
+
+<style>
+  .root {
+    min-height: 300px;
+    text-decoration: none;
+  }
+
+  .description {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -ms-box-orient: vertical;
+    box-orient: vertical;
+    -webkit-line-clamp: 5;
+    -moz-line-clamp: 5;
+    -ms-line-clamp: 5;
+    line-clamp: 5;
+    overflow: hidden;
+  }
+</style>
diff --git a/src/components/Courses/index.svelte b/src/components/Courses/index.svelte
index 18b55f06..9962c941 100644
--- a/src/components/Courses/index.svelte
+++ b/src/components/Courses/index.svelte
@@ -1,55 +1,20 @@
 <script>
-  import Education16 from 'carbon-icons-svelte/lib/Education16';
-  import Catalog16 from 'carbon-icons-svelte/lib/Catalog16';
-  // import Chip from '../Chip/index.svelte';
+  import Box from '../Box/index.svelte';
+  import Card from './components/Card/index.svelte';
   import { courses } from './store';
 </script>
 
-<div class="courses">
+<div class="flex items-center flex-wrap my-4 m-auto">
   {#each $courses as courseData}
-    <div class="course">
-      <h4 class="course-title">
-        <a rel="prefetch" href="/courses/{courseData.id}">{courseData.title}</a>
-        <!-- <Chip
-          value={courseData.chipLabel}
-          className={courseData.chipClassName}
-        /> -->
-      </h4>
-      <p>{courseData.description}</p>
-      <!-- <div class="flex mt-3 mb-2">
-        <span class="flex mr-2"
-          ><Education16 class="mr-2" />
-          5</span
-        >
-        <span class="flex"
-          ><Catalog16 class="mr-2" />
-          20</span
-        >
-      </div> -->
-    </div>
+    <Card
+      id={courseData.id}
+      logo={courseData.logo}
+      title={courseData.title}
+      description={courseData.description}
+    />
+  {:else}
+    <Box>
+      <h3 class="text-2xl text-gray-500">No Course Assigned</h3>
+    </Box>
   {/each}
 </div>
-
-<style>
-  .courses {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 0 40px;
-  }
-
-  .course {
-    border-bottom: 1px solid var(--border-color);
-    padding: 5px 0 10px;
-  }
-
-  .course-title {
-    width: fit-content;
-    font-size: 18px;
-  }
-
-  span {
-    color: #586069;
-    font-size: 12px;
-    width: 40px;
-  }
-</style>
diff --git a/src/routes/courses.svelte b/src/routes/courses.svelte
index 6cee4ec6..77735c11 100644
--- a/src/routes/courses.svelte
+++ b/src/routes/courses.svelte
@@ -134,15 +134,15 @@
   <title>Courses</title>
 </svelte:head>
 
-<div class="root">
-  <PageNav title="Courses">
+<section class="w-11/12 m-auto">
+  <!-- <PageNav title="Courses">
     <div slot="widget">
       <PrimaryButton
         label="New"
         onClick={() => ($createCourseModal.open = true)}
       />
     </div>
-  </PageNav>
+  </PageNav> -->
 
   <Modal
     onClose={() => ($createCourseModal.open = false)}
@@ -198,13 +198,13 @@
   </Modal>
 
   <Courses />
-</div>
+</section>
 
 <style>
-  .root {
+  /* .root {
     min-width: 600px;
     margin: 0 auto;
     border-left: 1px solid var(--border-color);
     border-right: 1px solid var(--border-color);
-  }
+  } */
 </style>
diff --git a/src/routes/courses/[id]/people.svelte b/src/routes/courses/[id]/people.svelte
index 09b02598..a57504fd 100644
--- a/src/routes/courses/[id]/people.svelte
+++ b/src/routes/courses/[id]/people.svelte
@@ -1,5 +1,8 @@
 <script context="module">
-  import { fetchCourse } from '../../../utils/services/courses';
+  import {
+    fetchCourse,
+    deleteGroupMember,
+  } from '../../../utils/services/courses';
 
   export async function preload({ params }) {
     return { courseId: params.id };
@@ -9,24 +12,47 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import Delete24 from 'carbon-icons-svelte/lib/Delete24';
   import PageNav from '../../../components/PageNav/index.svelte';
   import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
+  import IconButton from '../../../components/IconButton/index.svelte';
   import PageBody from '../../../components/PageBody/index.svelte';
-  import { setCourseData, course } from '../../../components/Course/store';
+  import {
+    setCourseData,
+    course,
+    group,
+  } from '../../../components/Course/store';
   import InviationModal from '../../../components/Course/components/People/InviationModal.svelte';
-  import { invitationModal } from '../../../components/Course/components/People/store';
+  import DeleteConfirmation from '../../../components/Course/components/People/DeleteConfirmation.svelte';
+  import {
+    invitationModal,
+    deleteMemberModal,
+  } from '../../../components/Course/components/People/store';
   import type { Person } from '../../../components/Course/components/People/types';
-  import { ROLE_LABEL } from '../../../utils/constants/roles';
+  import { ROLE, ROLE_LABEL } from '../../../utils/constants/roles';
+  import { profile } from '../../../utils/store/user';
 
   export let courseId: string = '';
 
   let people: Array<Person> = [];
   let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
+  let member: { id?: string; email?: string; profile?: { email: string } } = {};
 
-  function setPeople(group) {
-    if (!group) return;
-    people = (group.people || []).sort((a, b) => a.role_id - b.role_id);
-    console.log(`group changed`, group);
+  // function setPeople(people: Array<Person>) {
+  //   if (!Array.isArray(people)) return;
+
+  //   people = (people || []).sort((a, b) => a.role_id - b.role_id);
+  //   console.log(`people changed`, people);
+  // }
+
+  async function deletePerson() {
+    console.log(`member`, member);
+    console.log(`$group.people`, $group.people);
+    $group.people = $group.people.filter(
+      (person: { id: string }) => person.id !== member.id
+    );
+
+    await deleteGroupMember(member.id);
   }
 
   onMount(async () => {
@@ -35,10 +61,14 @@
     setCourseData(data);
   });
 
-  $: setPeople($course.group);
+  $: people = ($group.people || []).sort((a, b) => a.role_id - b.role_id);
 </script>
 
 <InviationModal />
+<DeleteConfirmation
+  email={member.email || (member.profile && member.profile.email)}
+  {deletePerson}
+/>
 
 <CourseContainer>
   <PageNav title="People" disableSticky={true}>
@@ -57,14 +87,15 @@
       >
         <span class="mr-2">No</span>
         <!-- <span class="flex-grow" /> -->
-        <p class="text-lg w-1/4">Name</p>
-        <p class="text-lg w-1/4">Email</p>
-        <p class="text-lg w-1/4 ">Role</p>
+        <p class="text-lg text-center w-1/4">Name</p>
+        <p class="text-lg text-center w-1/4">Email</p>
+        <p class="text-lg text-center w-1/4 ">Role</p>
+        <p class="text-lg w-20 text-center" />
       </div>
 
       {#each people as person, index}
         <div
-          class="flex items-center justify-evenly p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+          class="flex text-center relative items-center justify-evenly p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
         >
           <span class="mr-2">{index + 1}</span>
           <!-- <span class="flex-grow" /> -->
@@ -90,6 +121,19 @@
             </a>
           {/if}
           <p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
+
+          <div class="w-20">
+            {#if person.profile && person.profile.id !== $profile.id}
+              <IconButton
+                onClick={() => {
+                  member = person;
+                  $deleteMemberModal.open = true;
+                }}
+              >
+                <Delete24 class="carbon-icon" />
+              </IconButton>
+            {/if}
+          </div>
         </div>
       {/each}
     </div>
diff --git a/src/utils/services/courses/index.js b/src/utils/services/courses/index.js
index fa4d2167..aa9da8a1 100644
--- a/src/utils/services/courses/index.js
+++ b/src/utils/services/courses/index.js
@@ -122,6 +122,10 @@ export function addGroupMember(member) {
   });
 }
 
+export function deleteGroupMember(groupMemberId) {
+  return supabase.from('groupmember').delete().match({ id: groupMemberId });
+}
+
 export function fetchLesson(lessonId) {
   return supabase
     .from('lesson')