diff --git a/front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx b/front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx
new file mode 100644
index 00000000..b3fd3bc3
--- /dev/null
+++ b/front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx
@@ -0,0 +1,9 @@
+import PageLoading from "@components/Pages/PageLoading";
+
+export default function Loading() {
+    // Or a custom loading skeleton component
+    return (
+        <PageLoading></PageLoading>
+    )
+
+}
\ No newline at end of file
diff --git a/front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx b/front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx
index 8e6e2b82..ee63e047 100644
--- a/front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx
+++ b/front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx
@@ -1,34 +1,52 @@
-
-"use client";
-import { default as React, useEffect, useRef } from "react";
-
-
+import { default as React, } from "react";
 import { useRouter } from "next/navigation";
-import { getActivity } from "@services/courses/activities";
 import AuthProvider from "@components/Security/AuthProvider";
 import EditorWrapper from "@components/Editor/EditorWrapper";
-import useSWR, { mutate } from "swr";
-import { getAPIUrl, getOrgFromUri } from "@services/config/config";
+import { getAPIUrl } from "@services/config/config";
 import { swrFetcher } from "@services/utils/ts/requests";
+import { getOrganizationContextInfo } from "@services/organizations/orgs";
+import { getCourseMetadataWithAuthHeader } from "@services/courses/courses";
+import { cookies } from "next/headers";
+import { Metadata } from "next";
+import { getActivityWithAuthHeader } from "@services/courses/activities";
 
+type MetadataProps = {
+  params: { orgslug: string, courseid: string, activityid: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
 
-function EditActivity(params: any) {
-  const router = useRouter();
+export async function generateMetadata(
+  { params }: MetadataProps,
+): Promise<Metadata> {
+  const cookieStore = cookies();
+  const access_token_cookie: any = cookieStore.get('access_token_cookie');
+
+  // Get Org context information 
+  const course_meta = await getCourseMetadataWithAuthHeader(params.courseid, { revalidate: 360, tags: ['courses'] }, access_token_cookie.value)
+
+  return {
+    title: `Edit - ${course_meta.course.name} Activity`,
+    description: course_meta.course.mini_description,
+  };
+}
+
+const EditActivity = async (params: any) => {
+  const cookieStore = cookies();
+  const access_token_cookie: any = cookieStore.get('access_token_cookie');
   const activityid = params.params.activityid;
   const courseid = params.params.courseid;
   const orgslug = params.params.orgslug;
-  const { data: courseInfo, error: error_course } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher);
-  const { data: activity, error: error_activity } = useSWR(`${getAPIUrl()}activities/activity_${activityid}`, swrFetcher);
 
-  
+  const courseInfo = await getCourseMetadataWithAuthHeader(courseid, { revalidate: 0, tags: ['courses'] }, access_token_cookie.value)
+  const activity = await getActivityWithAuthHeader(activityid, { revalidate: 0, tags: ['activities'] }, access_token_cookie.value)
 
 
-  
-
   return (
-    <AuthProvider>
-      {!courseInfo || !activity  ? <div>Loading...</div> : <EditorWrapper orgslug={orgslug} course={courseInfo} activity={activity} content={activity.content}></EditorWrapper>}
-    </AuthProvider>
+    <div>
+      <AuthProvider>
+        <EditorWrapper orgslug={orgslug} course={courseInfo} activity={activity} content={activity.content}></EditorWrapper>
+      </AuthProvider>
+    </div>
   );
 }
 
diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx
index 34f12a21..19cfee84 100644
--- a/front/components/Editor/Editor.tsx
+++ b/front/components/Editor/Editor.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
diff --git a/front/components/Editor/EditorWrapper.tsx b/front/components/Editor/EditorWrapper.tsx
index 6b5bc38e..3119a71e 100644
--- a/front/components/Editor/EditorWrapper.tsx
+++ b/front/components/Editor/EditorWrapper.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { default as React, } from "react";
 import * as Y from "yjs";
 import { WebrtcProvider } from "y-webrtc";
diff --git a/front/components/UI/Modal/Modal.tsx b/front/components/UI/Modal/Modal.tsx
index 6b234cdc..dab976b9 100644
--- a/front/components/UI/Modal/Modal.tsx
+++ b/front/components/UI/Modal/Modal.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { styled, keyframes } from '@stitches/react';
@@ -44,7 +45,7 @@ const Modal = (params: ModalParams) => (
                 {params.addDefCloseButton ? (
                     <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
                         <Dialog.Close asChild>
-                        <ButtonBlack type="submit" css={{ marginTop: 10 }}>Close</ButtonBlack>
+                            <ButtonBlack type="submit" css={{ marginTop: 10 }}>Close</ButtonBlack>
                         </Dialog.Close>
                     </Flex>
                 ) : null}
diff --git a/front/components/UI/Toast/Toast.tsx b/front/components/UI/Toast/Toast.tsx
index b297ec45..e7d43ffe 100644
--- a/front/components/UI/Toast/Toast.tsx
+++ b/front/components/UI/Toast/Toast.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react'
 import { Toaster } from 'react-hot-toast';
 
diff --git a/front/components/UI/Tooltip/Tooltip.tsx b/front/components/UI/Tooltip/Tooltip.tsx
index c2291a3d..8a8cf0fe 100644
--- a/front/components/UI/Tooltip/Tooltip.tsx
+++ b/front/components/UI/Tooltip/Tooltip.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { styled, keyframes } from '@stitches/react';
@@ -6,14 +7,14 @@ import { PlusIcon } from '@radix-ui/react-icons';
 
 
 type TooltipProps = {
-    sideOffset?: number;
-    content: React.ReactNode;
-    children: React.ReactNode;
-    slateBlack?: boolean;
+  sideOffset?: number;
+  content: React.ReactNode;
+  children: React.ReactNode;
+  slateBlack?: boolean;
 };
 
 const ToolTip = (props: TooltipProps) => {
-  
+
   return (
     <Tooltip.Provider delayDuration={200}>
       <Tooltip.Root>
@@ -58,10 +59,10 @@ const closeAndFade = keyframes({
 
 const TooltipContent = styled(Tooltip.Content, {
 
-  variants : {
+  variants: {
     slateBlack: {
       true: {
-        backgroundColor:" #5a5a5a",
+        backgroundColor: " #5a5a5a",
         color: 'white',
       },
     },
@@ -71,7 +72,7 @@ const TooltipContent = styled(Tooltip.Content, {
   padding: '5px 10px',
   fontSize: 12,
   lineHeight: 1,
-  color:"black",
+  color: "black",
   backgroundColor: 'rgba(217, 217, 217, 0.50)',
   zIndex: 4,
   boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
@@ -97,7 +98,7 @@ const TooltipContent = styled(Tooltip.Content, {
 
 const TooltipArrow = styled(Tooltip.Arrow, {
   fill: 'white',
-  
+
 });
 
 const IconButton = styled('button', {