diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
index c8da327..718f696 100644
Binary files a/public/android-chrome-192x192.png and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
index 7013321..d34d2ca 100644
Binary files a/public/android-chrome-512x512.png and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
index ba8dd42..8aae8ae 100644
Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ
diff --git a/public/images/courses/canva.jpg b/public/images/courses/canva.jpg
index 85ffdfa..c85c876 100644
Binary files a/public/images/courses/canva.jpg and b/public/images/courses/canva.jpg differ
diff --git a/public/images/courses/excel.jpg b/public/images/courses/excel.jpg
index 2833917..000c12c 100644
Binary files a/public/images/courses/excel.jpg and b/public/images/courses/excel.jpg differ
diff --git a/public/images/courses/internet.jpg b/public/images/courses/internet.jpg
index 985d468..0ca40f1 100644
Binary files a/public/images/courses/internet.jpg and b/public/images/courses/internet.jpg differ
diff --git a/public/images/courses/notfound.png b/public/images/courses/notfound.png
index 3ad4ca2..d79fb6a 100644
Binary files a/public/images/courses/notfound.png and b/public/images/courses/notfound.png differ
diff --git a/public/images/courses/storytelling.jpg b/public/images/courses/storytelling.jpg
index 37a8b74..c8ceefa 100644
Binary files a/public/images/courses/storytelling.jpg and b/public/images/courses/storytelling.jpg differ
diff --git a/public/images/tutorial/add-new-course.png b/public/images/tutorial/add-new-course.png
index d434bf3..65d4b33 100644
Binary files a/public/images/tutorial/add-new-course.png and b/public/images/tutorial/add-new-course.png differ
diff --git a/public/images/tutorial/course-details-page.png b/public/images/tutorial/course-details-page.png
index f9a7b3e..1e53ef8 100644
Binary files a/public/images/tutorial/course-details-page.png and b/public/images/tutorial/course-details-page.png differ
diff --git a/public/images/tutorial/courses-page.png b/public/images/tutorial/courses-page.png
index 65cc342..dfd81ec 100644
Binary files a/public/images/tutorial/courses-page.png and b/public/images/tutorial/courses-page.png differ
diff --git a/public/images/tutorial/dashboard.png b/public/images/tutorial/dashboard.png
index 9365ce0..1187f52 100644
Binary files a/public/images/tutorial/dashboard.png and b/public/images/tutorial/dashboard.png differ
diff --git a/src/Pages/CourseDetails.js b/src/Pages/CourseDetails.js
index 3786d8d..e3f66e7 100644
--- a/src/Pages/CourseDetails.js
+++ b/src/Pages/CourseDetails.js
@@ -2,6 +2,7 @@ import {useState,useEffect} from 'react';
 import {useParams} from "react-router-dom";
 import LoadingSpinner from '../components/Utilities/Loaders/LoadingSpinner.js';
 import Buttons from "../components/Utilities/Buttons/buttons";
+import CourseDetailsItem from './../components/Utilities/Cards/CourseDetailsItem';
 export default function CourseDetails(){
     const API = 'https://chain-legendary-strawflower.glitch.me/courses/';
     const params = useParams();
@@ -18,8 +19,7 @@ export default function CourseDetails(){
     useEffect(()=>{
         fetchDetails()
     },[]);
-
-
+    
     if (!course) {
         return(<div><LoadingSpinner/></div>);
     }else{
@@ -34,31 +34,12 @@ export default function CourseDetails(){
                         <h3 className="text-3xl font-bold text-indigo-500 underline underline-offset-8 hover:text-gray-600 hover:duration-600">{course.title}</h3>
                         <p className="mt-3 mb-3 text-lg leading-relaxed text-slate-700 border-b-2 border-gray-500 py-2 antialiased">{course.description}</p>
                         <ul className="list-none flex-wrap grid grid-cols-2 mb-3 mt-5">
-                            <li className="py-2 flex flex-col">
-                                <div className="flex items-center">
-                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-calendar-minus"></i></span></div>
-                                <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">Start Date:<span>{course.dates.start_date.split("-").reverse().join("/")}</span></h4></div></div>
-                            </li>
-                        <li className="py-2 flex flex-col">
-                            <div className="flex items-center">
-                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-calendar-plus"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">End Date:<span>{course.dates.end_date.split("-").reverse().join("/")}</span></h4></div></div></li>
-                        <li className="py-2 flex flex-col">
-                            <div className="flex items-center">
-                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-clock"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">Duration:<span>{course.duration}</span></h4></div></div></li>
-                        <li className="py-2 flex flex-col">
-                            <div className="flex items-center">
-                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-gray-100 bg-indigo-600 mr-3"><i className="fa-solid fa-globe"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">Online:<span>{course.online ? "Yes" : " No"}</span></h4></div></div></li>
-                        <li className="py-2 flex flex-col">
-                            <div className="flex items-center">
-                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-coins"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">Normal Price:<span>{course.price.normal}</span></h4></div></div></li>
-                        <li className="py-2 flex flex-col">
-                            <div className="flex items-center">
-                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-gift"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">Early-bird Price:<span>{course.price.early_bird}</span></h4></div></div></li>
+                            <CourseDetailsItem heading={"Start Date"} content={course.dates.start_date.split("-").reverse().join("/")} IconTitle={"fa-solid fa-calendar-minus"}/>
+                            <CourseDetailsItem heading={"End Date"} content={course.dates.end_date.split("-").reverse().join("/")} IconTitle={"fa-solid fa-calendar-plus"}/>
+                            <CourseDetailsItem heading={"Duration"} content={course.duration} IconTitle={"fa-solid fa-clock"}/>
+                            <CourseDetailsItem heading={"Online"} content={course.online ? "Yes" : " No"} IconTitle={"fa-solid fa-globe"}/>
+                            <CourseDetailsItem heading={"Normal Price"} content={course.price.normal} IconTitle={"fa-solid fa-coins"}/>
+                            <CourseDetailsItem heading={"Early-bird Price"} content={course.price.early_bird} IconTitle={"fa-solid fa-gift"}/>
                         </ul>
                         <Buttons fetchDetails={fetchDetails()} data={course} idNumber={course.id} />
                         </div>
diff --git a/src/components/Utilities/Buttons/buttondelete.js b/src/components/Utilities/Buttons/buttondelete.js
index c33cb20..844fce4 100644
--- a/src/components/Utilities/Buttons/buttondelete.js
+++ b/src/components/Utilities/Buttons/buttondelete.js
@@ -14,7 +14,7 @@ export default function ButtonDelete(props){
 
     return (
         <>
-        <button onClick={() => openModal()} className="text-white bg-red-600 hover:bg-gray-900 hover:ease-out hover:duration-300 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2">
+        <button onClick={() => openModal()} className="text-white bg-red-600 hover:bg-gray-900 hover:ease-out hover:duration-300 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 shadow-sm">
         <i class="fa-solid fa-trash-can"></i> Delete
         </button>
             <DelleteMessage idNumber={props.idNumber} closeModal={closeModal} open={isModalOpen} close={closeModal} />
diff --git a/src/components/Utilities/Buttons/buttonedit.js b/src/components/Utilities/Buttons/buttonedit.js
index 22c0b32..8901b2f 100644
--- a/src/components/Utilities/Buttons/buttonedit.js
+++ b/src/components/Utilities/Buttons/buttonedit.js
@@ -7,7 +7,7 @@ export default function ButtonEdit(props){
     function openModal() {setIsModalOpen(true);}
     return (
        <div style={{ position: 'relative', zIndex: '1' }}>
-            <button onClick={() => openModal()} className="text-white  bg-indigo-400 border border-gray-300  hover:bg-white hover:ease-out hover:duration-300 hover:text-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2">
+            <button onClick={() => openModal()} className="text-white  bg-indigo-400 border border-gray-300  hover:bg-white hover:ease-out hover:duration-300 hover:text-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 shadow-sm">
             <i class="fa-solid fa-pen-to-square"></i> Edit</button>
             <EditPage fetchDetails={props.fetchDetails}  data={props.data} idNumber={props.idNumber} open={isModalOpen} close={closeModal} />
         </div>
diff --git a/src/components/Utilities/Cards/CourseDetailsItem.js b/src/components/Utilities/Cards/CourseDetailsItem.js
index 3858f19..5212e1f 100644
--- a/src/components/Utilities/Cards/CourseDetailsItem.js
+++ b/src/components/Utilities/Cards/CourseDetailsItem.js
@@ -5,9 +5,9 @@ export default function CourseDetailsItem({IconTitle,heading,content}){
         <li className="py-2 flex flex-col">
             <div className="flex items-center">
             <div>
-                <span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className={IconTitle}></i></span></div>
+                <span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-gray-100 bg-indigo-600 mr-3 "><i className={IconTitle}></i></span></div>
             <div>
-                <h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">{heading}: <span>{content}</span></h4>
+                <h4 className="text-gray-600 hover:text-indigo-500 font-normal text-normal hover:border-b-2 hover:border-indigo-400">{heading}: <span className="font-bold">&nbsp; {content}</span></h4>
             </div>
             </div>
         </li>
diff --git a/src/styles/index.css b/src/styles/index.css
index 32ae982..1f11154 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,6 +7,7 @@ body{
     margin:0;
 	min-height:100vh;
     font-family: 'Open Sans', sans-serif;
+    
 }
 
 #footer {