diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx
index 4086f673..ccec39b9 100644
--- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx
+++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx
@@ -1,7 +1,6 @@
 "use client";
 import Link from "next/link";
-import React from "react";
-import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
+import { getUriWithOrg } from "@services/config/config";
 import Canva from "@components/Pages/Activities/DynamicCanva/DynamicCanva";
 import VideoActivity from "@components/Pages/Activities/Video/Video";
 import { Check } from "lucide-react";
@@ -41,8 +40,6 @@ function ActivityClient(props: ActivityClientProps) {
 
 
 
-
-
   return (
     <>
       <GeneralWrapperStyled>
@@ -74,18 +71,12 @@ function ActivityClient(props: ActivityClientProps) {
           </div>
 
           {activity ? (
-            <div className={`p-7 pt-2 drop-shadow-sm rounded-lg ${activity.type == 'dynamic' ? 'bg-white' : 'bg-zinc-950'}`}>
+            <div className={`p-7 pt-4 drop-shadow-sm rounded-lg ${activity.type == 'dynamic' ? 'bg-white' : 'bg-zinc-950'}`}>
               <div>
                 {activity.type == "dynamic" && <Canva content={activity.content} activity={activity} />}
                 {/* todo : use apis & streams instead of this */}
                 {activity.type == "video" && <VideoActivity course={course} activity={activity} />}
-
                 {activity.type == "documentpdf" && <DocumentPdfActivity course={course} activity={activity} />}
-
-                <div className="py-10">
-
-
-                </div>
               </div>
             </div>
           ) : (<div></div>)}
diff --git a/front/components/Objects/Editor/Editor.tsx b/front/components/Objects/Editor/Editor.tsx
index 0b44e7a6..79b35d47 100644
--- a/front/components/Objects/Editor/Editor.tsx
+++ b/front/components/Objects/Editor/Editor.tsx
@@ -2,16 +2,13 @@
 import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import Collaboration from "@tiptap/extension-collaboration";
-import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
 import { AuthContext } from "../../Security/AuthProvider";
 import learnhouseIcon from "public/learnhouse_icon.png";
 import { ToolbarButtons } from "./Toolbar/ToolbarButtons";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
 import Image from "next/image";
 import styled from "styled-components";
-import { getBackendUrl, getUriWithOrg } from "@services/config/config";
-import { DividerVerticalIcon, EyeOpenIcon, SlashIcon } from "@radix-ui/react-icons";
+import { DividerVerticalIcon, SlashIcon } from "@radix-ui/react-icons";
 import Avvvatars from "avvvatars-react";
 // extensions
 import InfoCallout from "./Extensions/Callout/Info/InfoCallout";
@@ -19,7 +16,7 @@ import WarningCallout from "./Extensions/Callout/Warning/WarningCallout";
 import ImageBlock from "./Extensions/Image/ImageBlock";
 import Youtube from "@tiptap/extension-youtube";
 import VideoBlock from "./Extensions/Video/VideoBlock";
-import { Eye, Save } from "lucide-react";
+import { Eye } from "lucide-react";
 import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock";
 import PDFBlock from "./Extensions/PDF/PDFBlock";
 import QuizBlock from "./Extensions/Quiz/QuizBlock";
@@ -120,7 +117,7 @@ function Editor(props: Editor) {
               <Link href="/">
                 <EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" />
               </Link>
-              <Link target="_blank" href={`/course/${course_id}`}>
+              <Link target="_blank" href={`/course/${course_id}/edit`}>
                 <EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.course.course.org_id,props.course.course.course_id,props.course.course.thumbnail)}`} alt=""></EditorInfoThumbnail>
               </Link>
               <EditorInfoDocName>
diff --git a/front/components/Objects/Editor/EditorWrapper.tsx b/front/components/Objects/Editor/EditorWrapper.tsx
index ed09a6d9..a82ea11d 100644
--- a/front/components/Objects/Editor/EditorWrapper.tsx
+++ b/front/components/Objects/Editor/EditorWrapper.tsx
@@ -1,7 +1,6 @@
 'use client';
 import { default as React, } from "react";
 import * as Y from "yjs";
-import { WebrtcProvider } from "y-webrtc";
 import Editor from "./Editor";
 import { updateActivity } from "@services/courses/activities";
 import { toast } from "react-hot-toast";
diff --git a/front/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx b/front/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
index b04503b9..e6037a5c 100644
--- a/front/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
+++ b/front/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
@@ -6,7 +6,7 @@ import styled from "styled-components";
 function InfoCalloutComponent(props: any) {
   return (
     <NodeViewWrapper>
-      <InfoCalloutWrapper contentEditable={props.extension.options.editable}>
+      <InfoCalloutWrapper className="flex space-x-2 items-center bg-blue-200 rounded-lg text-blue-900 px-3 shadow-inner" contentEditable={props.extension.options.editable}>
         <AlertCircle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
       </InfoCalloutWrapper>
     </NodeViewWrapper>
@@ -14,16 +14,6 @@ function InfoCalloutComponent(props: any) {
 }
 
 const InfoCalloutWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  color: #1f3a8a;
-  background-color: #dbe9fe;
-  border: 1px solid #c1d9fb;
-  border-radius: 16px;
-  margin: 1rem 0;
-  align-items: center;
-  padding-left: 15px;
-  
   svg{
     padding: 3px;
   }
diff --git a/front/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx b/front/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
index 10f250ec..d168350c 100644
--- a/front/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
+++ b/front/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
@@ -6,23 +6,15 @@ import styled from "styled-components";
 function WarningCalloutComponent(props: any) {
   return (
     <NodeViewWrapper>
-      <CalloutWrapper contentEditable={props.extension.options.editable}>
-        <AlertTriangle/> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
+      <CalloutWrapper className="flex space-x-2 items-center bg-yellow-200 rounded-lg text-yellow-900 px-3 shadow-inner" contentEditable={props.extension.options.editable}>
+        <AlertTriangle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
       </CalloutWrapper>
     </NodeViewWrapper>
   );
 }
 
 const CalloutWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  background: #fefce8;
-  color: #713f11;
-  border: 1px solid #fff103;
-  border-radius: 16px;
-  margin: 1rem 0;
-  align-items: center;
-  padding-left: 15px;
+  
 
   svg {
     padding: 3px;
diff --git a/front/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx b/front/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
index 02fdb9a6..6e3c21d4 100644
--- a/front/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
+++ b/front/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
@@ -2,11 +2,9 @@ import { NodeViewWrapper } from "@tiptap/react";
 import React from "react";
 import styled from "styled-components";
 import { Resizable } from 're-resizable';
-
-import * as AspectRatio from '@radix-ui/react-aspect-ratio';
-import { AlertCircle, AlertTriangle, Image, ImagePlus, Info } from "lucide-react";
-import { getImageFile, uploadNewImageFile } from "../../../../../services/blocks/Image/images";
-import { getBackendUrl } from "../../../../../services/config/config";
+import { AlertTriangle, Image, Loader } from "lucide-react";
+import { uploadNewImageFile } from "../../../../../services/blocks/Image/images";
+import { UploadIcon } from "@radix-ui/react-icons";
 import { getActivityBlockMediaDirectory } from "@services/media/media";
 
 function ImageBlockComponent(props: any) {
@@ -34,33 +32,30 @@ function ImageBlockComponent(props: any) {
 
   return (
     <NodeViewWrapper className="block-image">
-      {!blockObject && (
-        <BlockImageWrapper contentEditable={props.extension.options.editable}>
-          <div>
-            <Image color="#e1e0e0" size={50} />
-            <br />
-          </div>
-          <input onChange={handleImageChange} type="file" name="" id="" />
-          <br />
-          <button onClick={handleSubmit}>Submit</button>
+      {!blockObject && props.extension.options.editable && (
+        <BlockImageWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
+          {isLoading ? (
+            <Loader className="animate-spin animate-pulse text-gray-200" size={50} />
+          ) : (
+            <>
+              <div>
+                <Image className="text-gray-200" size={50} />
+              </div>
+              <input className="p-3 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 hover:file:cursor-pointer  file:bg-gray-200 cursor-pointer file:text-gray-500" onChange={handleImageChange} type="file" name="" id="" />
+              <button className='p-2 px-3 bg-gray-200 rounded-lg text-gray-500 hover:bg-gray-300 transition space-x-2 items-center flex' onClick={handleSubmit}><UploadIcon></UploadIcon><p>Submit</p></button>
+            </>
+          )}
         </BlockImageWrapper>
       )}
       {blockObject && (
         <Resizable defaultSize={{ width: imageSize.width, height: "100%" }}
           handleStyles={{
-            right: { width: '10px', height: '100%', cursor: 'col-resize' },
-            top: { width: 0 },
-            bottom: { width: 0 },
-            left: { width: 0 },
-            topRight: { width: 0 },
-            bottomRight: { width: 0 },
-            bottomLeft: { width: 0 },
-            topLeft: { width: 0 },
+            right: { position: 'unset', width: 7, height: 30, borderRadius: 20, cursor: 'col-resize', backgroundColor: 'black', opacity: '0.3', margin: 'auto', marginLeft:5 },
 
           }}
-          style={{ margin: "auto" }}
-          maxWidth={850}
-          minWidth={400}
+          style={{ margin: "auto", display: "flex", justifyContent: "center", alignItems: "center", height: "100%"  }}
+          maxWidth={1000}
+          minWidth={200}
           onResizeStop={(e, direction, ref, d) => {
             props.updateAttributes({
               size: {
@@ -73,21 +68,17 @@ function ImageBlockComponent(props: any) {
           }}
         >
 
-          <BlockImage>
-            <AspectRatio.Root ratio={16 / 9}>
-              <img
-                src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
-                  props.extension.options.activity.course_id,
-                  props.extension.options.activity.activity_id,
-                  blockObject.block_id,
-                  blockObject ? fileId : ' ', 'imageBlock')}`}
-                alt=""
-              />
-              {blockObject.block_id}
-            </AspectRatio.Root>
+            <img
+              src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
+                props.extension.options.activity.course_id,
+                props.extension.options.activity.activity_id,
+                blockObject.block_id,
+                blockObject ? fileId : ' ', 'imageBlock')}`}
+              alt=""
+              className="rounded-lg shadow "
+            />
 
 
-          </BlockImage>
         </Resizable>
       )}
       {isLoading && (
@@ -102,19 +93,11 @@ function ImageBlockComponent(props: any) {
 export default ImageBlockComponent;
 
 const BlockImageWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  background: #f9f9f9;
-  border-radius: 3px;
-  padding: 30px;
-  min-height: 74px;
-  border: ${(props) => (props.contentEditable ? "2px dashed #713f1117" : "none")};
-
-  // center
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 14px;
+  
 `;
 
 const BlockImage = styled.div`
@@ -128,11 +111,5 @@ const BlockImage = styled.div`
   font-size: 14px;
 
   
-  img{
-    object-fit: "cover";
-    width: 100%;
-    height: 100%;
-    border-radius: 6px;
-  }
   
 `;
diff --git a/front/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx b/front/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
index 906f723a..4c2938cb 100644
--- a/front/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
+++ b/front/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
@@ -22,26 +22,18 @@ function MathEquationBlockComponent(props: any) {
     props.updateAttributes({
       math_equation: equation,
     });
-    setIsEditing(false);
+    //setIsEditing(false);
   };
 
   return (
     <NodeViewWrapper className="block-math-equation">
-      <MathEqWrapper>
-        {isEditable && (
-          <MathEqTopMenu>
-            <button onClick={() => setIsEditing(true)}>
-              <Edit size={15}></Edit>
-            </button>
-            <span className="pl-2">Edit</span>
-          </MathEqTopMenu>
-        )}
+      <MathEqWrapper className="flex flex-col space-y-2 bg-gray-50 shadow-inner rounded-lg py-7 px-5">
         <BlockMath>{equation}</BlockMath>
         {isEditing && isEditable && (
           <>
             <EditBar>
               <input value={equation} onChange={handleEquationChange} placeholder="Insert a Math Equation (LaTeX) " type="text" />
-              <button onClick={() => saveEquation()}>
+              <button className="opacity-1" onClick={() => saveEquation()}>
                 <Save size={15}></Save>
               </button>
             </EditBar>
@@ -57,27 +49,6 @@ function MathEquationBlockComponent(props: any) {
 export default MathEquationBlockComponent;
 
 const MathEqWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  background: #f9f9f9a2;
-  border-radius: 8px;
-  margin: 20px;
-  padding: 20px;
-  min-height: 74px;
-  border: ${(props) => (props.contentEditable ? "2px dashed #713f1117" : "none")};
-`;
-
-const MathEqTopMenu = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  button {
-    margin-left: 10px;
-    cursor: pointer;
-    border: none;
-    background: none;
-    font-size: 14px;
-    color: #494949;
-  }
 `;
 
 const EditBar = styled.div`
diff --git a/front/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx b/front/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
index da38f04f..74fe0d77 100644
--- a/front/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
+++ b/front/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
@@ -1,9 +1,10 @@
 import { NodeViewWrapper } from "@tiptap/react";
 import React from "react";
 import styled from "styled-components";
-import { AlertCircle, AlertTriangle, FileText, Image, ImagePlus, Info } from "lucide-react";
+import { AlertCircle, AlertTriangle, FileText, Image, ImagePlus, Info, Loader } from "lucide-react";
 import { getPDFFile, uploadNewPDFFile } from "../../../../../services/blocks/Pdf/pdf";
 import { getBackendUrl } from "../../../../../services/config/config";
+import { UploadIcon } from "@radix-ui/react-icons";
 import { getActivityBlockMediaDirectory } from "@services/media/media";
 
 function PDFBlockComponent(props: any) {
@@ -30,19 +31,24 @@ function PDFBlockComponent(props: any) {
   return (
     <NodeViewWrapper className="block-pdf">
       {!blockObject && (
-        <BlockPDFWrapper contentEditable={props.extension.options.editable}>
-          <div>
-            <FileText color="#e1e0e0" size={50} />
-            <br />
-          </div>
-          <input onChange={handlePDFChange} type="file" name="" id="" />
-          <br />
-          <button onClick={handleSubmit}>Submit</button>
+        <BlockPDFWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
+          {isLoading ? (
+            <Loader className="animate-spin animate-pulse text-gray-200" size={50} />
+          ) : (
+            <>
+              <div>
+                <FileText className="text-gray-200" size={50} />
+              </div>
+              <input className="p-3 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 hover:file:cursor-pointer  file:bg-gray-200 cursor-pointer file:text-gray-500" onChange={handlePDFChange} type="file" name="" id="" />
+              <button className='p-2 px-3 bg-gray-200 rounded-lg text-gray-500 hover:bg-gray-300 transition space-x-2 items-center flex' onClick={handleSubmit}><UploadIcon></UploadIcon><p>Submit</p></button>
+            </>
+          )}
         </BlockPDFWrapper>
       )}
       {blockObject && (
         <BlockPDF>
           <iframe
+            className="shadow rounded-lg h-96 w-full object-scale-down bg-black"
             src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
               props.extension.options.activity.course_id,
               props.extension.options.activity.activity_id,
@@ -63,14 +69,7 @@ function PDFBlockComponent(props: any) {
 export default PDFBlockComponent;
 
 const BlockPDFWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  background: #f9f9f9;
-  border-radius: 3px;
-  padding: 30px;
-  min-height: 74px;
-  border: ${(props) => (props.contentEditable ? "2px dashed #713f1117" : "none")};
-
+  
   // center
   align-items: center;
   justify-content: center;
diff --git a/front/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx b/front/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
index c2c6a0cb..26026d81 100644
--- a/front/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
+++ b/front/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
@@ -1,10 +1,11 @@
 import { NodeViewWrapper } from "@tiptap/react";
-import { AlertTriangle, Image, Video } from "lucide-react";
+import { AlertTriangle, Image, Loader, Video } from "lucide-react";
 import React from "react";
 import styled from "styled-components";
 import { getBackendUrl } from "../../../../../services/config/config";
 import { uploadNewVideoFile } from "../../../../../services/blocks/Video/video";
 import { getActivityBlockMediaDirectory } from "@services/media/media";
+import { UploadIcon } from "@radix-ui/react-icons";
 
 function VideoBlockComponents(props: any) {
   const [video, setVideo] = React.useState(null);
@@ -30,20 +31,25 @@ function VideoBlockComponents(props: any) {
   return (
     <NodeViewWrapper className="block-video">
       {!blockObject && (
-        <BlockVideoWrapper contentEditable={props.extension.options.editable}>
-          <div>
-            <Video color="#e1e0e0" size={50} />
-            <br />
-          </div>
-          <input onChange={handleVideoChange} type="file" name="" id="" />
-          <br />
-          <button onClick={handleSubmit}>Submit</button>
+        <BlockVideoWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
+          {isLoading ? (
+            <Loader className="animate-spin animate-pulse text-gray-200" size={50} />
+          ) : (
+            <>
+              <div>
+                <Video className="text-gray-200" size={50} />
+              </div>
+              <input className="p-3 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 hover:file:cursor-pointer  file:bg-gray-200 cursor-pointer file:text-gray-500" onChange={handleVideoChange} type="file" name="" id="" />
+              <button className='p-2 px-3 bg-gray-200 rounded-lg text-gray-500 hover:bg-gray-300 transition space-x-2 items-center flex' onClick={handleSubmit}><UploadIcon></UploadIcon><p>Submit</p></button>
+            </>
+          )}
         </BlockVideoWrapper>
       )}
       {blockObject && (
         <BlockVideo>
           <video
             controls
+            className="rounded-lg shadow h-96 w-full object-scale-down bg-black"
             src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
               props.extension.options.activity.course_id,
               props.extension.options.activity.activity_id,
@@ -52,22 +58,13 @@ function VideoBlockComponents(props: any) {
           ></video>
         </BlockVideo>
       )}
-      {isLoading && (
-        <div>
-          <AlertTriangle color="#e1e0e0" size={50} />
-        </div>
-      )}
+
     </NodeViewWrapper>
   );
 }
 const BlockVideoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  background: #f9f9f9;
-  border-radius: 3px;
-  padding: 30px;
-  min-height: 74px;
-  border: ${(props) => (props.contentEditable ? "2px dashed #713f1117" : "none")};
+  
+  //border: ${(props) => (props.contentEditable ? "2px dashed #713f1117" : "none")};
 
   // center
   align-items: center;
@@ -79,12 +76,5 @@ const BlockVideoWrapper = styled.div`
 const BlockVideo = styled.div`
   display: flex;
   flex-direction: column;
-  video {
-    width: 100%;
-    border-radius: 6px;
-    height: 300px;
-    // cover
-    object-fit: cover;
-  }
 `;
 export default VideoBlockComponents;
diff --git a/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
index 7f04b6c7..212a3e54 100644
--- a/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
+++ b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
@@ -133,7 +133,7 @@ export const ToolbarButtons = ({ editor, props }: any) => {
           <FileText size={15} />
         </ToolBtn>
       </ToolTip>
-      <ToolTip content={"Interactive Quiz"}>
+      {/* <ToolTip content={"Interactive Quiz"}>
         <ToolBtn
           onClick={() =>
             editor
@@ -147,7 +147,7 @@ export const ToolbarButtons = ({ editor, props }: any) => {
         >
           <GraduationCap size={15} />
         </ToolBtn>
-      </ToolTip>
+      </ToolTip> */}
     </ToolButtonsWrapper>
   );
 };
diff --git a/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx b/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx
index c79b99fd..1b570d29 100644
--- a/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx
+++ b/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import { styled } from "styled-components";
@@ -63,9 +62,54 @@ function Canva(props: Editor) {
 }
 
 const CanvaWrapper = styled.div`
-  padding-top: 20px;
   width: 100%;
   margin: 0 auto;
+
+  // disable chrome outline
+
+  .ProseMirror {
+
+h1 {
+  font-size: 30px;  
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+h2 {
+  font-size: 25px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+h4 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+h5 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+
+&:focus {
+  outline: none !important;
+  outline-style: none !important;
+  box-shadow: none !important;
+}
+}
+
+
 `;
 
 export default Canva;
diff --git a/front/components/Pages/CourseEdit/Draggables/Activity.tsx b/front/components/Pages/CourseEdit/Draggables/Activity.tsx
index 9ffb110e..341d0629 100644
--- a/front/components/Pages/CourseEdit/Draggables/Activity.tsx
+++ b/front/components/Pages/CourseEdit/Draggables/Activity.tsx
@@ -1,10 +1,8 @@
 import Link from "next/link";
-import React from "react";
 import { Draggable } from "react-beautiful-dnd";
 import { EyeOpenIcon, Pencil2Icon } from '@radix-ui/react-icons'
-import styled from "styled-components";
 import { getUriWithOrg } from "@services/config/config";
-import { FileText, Video, Sparkles } from "lucide-react";
+import { FileText, Video, Sparkles, File } from "lucide-react";
 
 function Activity(props: any) {
 
@@ -12,14 +10,14 @@ function Activity(props: any) {
     <Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
       {(provided) => (
         <div
-          className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-105 hover:shadow space-x-2 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
-          <div className="px-3 text-gray-300 space-x-1" >
-            {props.activity.type === "video" && <Video size={16} />}
-            {props.activity.type === "documentpdf" && <FileText size={16} />}
-            {props.activity.type === "dynamic" && <Sparkles size={16} />}
+          className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-2 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+          <div className="px-3 text-gray-300 space-x-1 w-28" >
+            {props.activity.type === "video" && <><div className="flex space-x-2 items-center"><Video size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Video</div> </div></>}
+            {props.activity.type === "documentpdf" && <><div className="flex space-x-2 items-center"><FileText size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Document</div> </div></>}
+            {props.activity.type === "dynamic" && <><div className="flex space-x-2 items-center"><Sparkles size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Dynamic</div> </div></>}
           </div>
-          <div className="grow justify-end text-center items-center">
-            <p className="first-letter:uppercase">{props.activity.name} </p>
+          <div className="grow items-center space-x-1 flex">
+            <p className="first-letter:uppercase"> {props.activity.name} </p>
           </div>
           <div className="flex flex-row space-x-1 px-3"><Link
             href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}