diff --git a/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx b/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx
index 9050267e..4be9365a 100644
--- a/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx
+++ b/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx
@@ -1,9 +1,13 @@
+"use client";
+
 import { graphql, usePreloadedQuery } from "react-relay";
 
 import { type SerializablePreloadedQuery } from "@kampus/relay";
 import useSerializablePreloadedQuery from "@kampus/relay/use-serializable-preloaded-query";
 
 import { type OdinLessonQuery } from "~/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql";
+import { OdinLessonBody } from "./OdinLessonBody";
+import { OdinLessonTitle } from "./OdinLessonTitle";
 
 interface Props {
   preloadedQuery: SerializablePreloadedQuery<OdinLessonQuery>;
@@ -18,8 +22,9 @@ export const OdinLessonContainer = (props: Props) => {
         odin {
           lesson(id: $id) {
             body {
-              html
+              ...OdinLessonBody_body
             }
+            ...OdinLessonTitle_title
           }
         }
       }
@@ -30,9 +35,9 @@ export const OdinLessonContainer = (props: Props) => {
   const lesson = data.odin.lesson;
 
   return (
-    <div
-      className="prose dark:prose-invert lg:prose-xl hover:prose-a:text-blue-500"
-      dangerouslySetInnerHTML={{ __html: lesson?.body?.html ?? "" }}
-    />
+    <>
+      <OdinLessonTitle lesson={data.odin.lesson} />
+      <OdinLessonBody body={lesson?.body ?? null} />
+    </>
   );
 };
diff --git a/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonBody.tsx b/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonBody.tsx
new file mode 100644
index 00000000..c476475b
--- /dev/null
+++ b/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonBody.tsx
@@ -0,0 +1,28 @@
+import { graphql, useFragment } from "react-relay";
+
+import { type OdinLessonBody_body$key } from "./__generated__/OdinLessonBody_body.graphql";
+
+interface Props {
+  body: OdinLessonBody_body$key | null;
+}
+
+const useOdinLessonBodyFragment = (key: OdinLessonBody_body$key | null) =>
+  useFragment(
+    graphql`
+      fragment OdinLessonBody_body on OdinLessonBody {
+        html
+      }
+    `,
+    key
+  );
+
+export const OdinLessonBody = (props: Props) => {
+  const body = useOdinLessonBodyFragment(props.body);
+
+  return (
+    <div
+      className="prose dark:prose-invert hover:prose-a:text-blue-500"
+      dangerouslySetInnerHTML={{ __html: body?.html ?? "" }}
+    />
+  );
+};
diff --git a/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonTitle.tsx b/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonTitle.tsx
new file mode 100644
index 00000000..c16b54e3
--- /dev/null
+++ b/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonTitle.tsx
@@ -0,0 +1,23 @@
+import { graphql, useFragment } from "react-relay";
+
+import { type OdinLessonTitle_title$key } from "./__generated__/OdinLessonTitle_title.graphql";
+
+interface Props {
+  lesson: OdinLessonTitle_title$key | null;
+}
+
+const useOdinLessonTitleFragment = (key: OdinLessonTitle_title$key | null) =>
+  useFragment(
+    graphql`
+      fragment OdinLessonTitle_title on OdinLesson {
+        title
+      }
+    `,
+    key
+  );
+
+export const OdinLessonTitle = (props: Props) => {
+  const lesson = useOdinLessonTitleFragment(props.lesson);
+
+  return <h2 className="text-3xl font-bold">{lesson?.title}</h2>;
+};
diff --git a/apps/kampus/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonBody_body.graphql.ts b/apps/kampus/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonBody_body.graphql.ts
new file mode 100644
index 00000000..a53822e1
--- /dev/null
+++ b/apps/kampus/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonBody_body.graphql.ts
@@ -0,0 +1,42 @@
+/**
+ * @generated SignedSource<<31c0f63eaf50e1b0e1f0c68ecdf8574b>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { Fragment, ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type OdinLessonBody_body$data = {
+  readonly html: string;
+  readonly " $fragmentType": "OdinLessonBody_body";
+};
+export type OdinLessonBody_body$key = {
+  readonly " $data"?: OdinLessonBody_body$data;
+  readonly " $fragmentSpreads": FragmentRefs<"OdinLessonBody_body">;
+};
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "OdinLessonBody_body",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "html",
+      "storageKey": null
+    }
+  ],
+  "type": "OdinLessonBody",
+  "abstractKey": null
+};
+
+(node as any).hash = "fd029028bff783a95f18495de0112ae8";
+
+export default node;
diff --git a/apps/kampus/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql.ts b/apps/kampus/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql.ts
index 32b98510..0d17d17e 100644
--- a/apps/kampus/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql.ts
+++ b/apps/kampus/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<64c17bb347ae9c86c1eb931f750c2232>>
+ * @generated SignedSource<<1f9b6633a32b19230f062d501df84ad1>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,6 +9,7 @@
 // @ts-nocheck
 
 import { ConcreteRequest, Query } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
 export type OdinLessonQuery$variables = {
   id: string;
 };
@@ -16,10 +17,9 @@ export type OdinLessonQuery$data = {
   readonly odin: {
     readonly lesson: {
       readonly body: {
-        readonly html: string;
-        readonly raw: string;
+        readonly " $fragmentSpreads": FragmentRefs<"OdinLessonBody_body">;
       };
-      readonly title: string;
+      readonly " $fragmentSpreads": FragmentRefs<"OdinLessonTitle_title">;
     } | null;
   };
 };
@@ -42,39 +42,7 @@ v1 = [
     "name": "id",
     "variableName": "id"
   }
-],
-v2 = {
-  "alias": null,
-  "args": null,
-  "kind": "ScalarField",
-  "name": "title",
-  "storageKey": null
-},
-v3 = {
-  "alias": null,
-  "args": null,
-  "concreteType": "OdinLessonBody",
-  "kind": "LinkedField",
-  "name": "body",
-  "plural": false,
-  "selections": [
-    {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "html",
-      "storageKey": null
-    },
-    {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "raw",
-      "storageKey": null
-    }
-  ],
-  "storageKey": null
-};
+];
 return {
   "fragment": {
     "argumentDefinitions": (v0/*: any*/),
@@ -98,8 +66,27 @@ return {
             "name": "lesson",
             "plural": false,
             "selections": [
-              (v2/*: any*/),
-              (v3/*: any*/)
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "OdinLessonBody",
+                "kind": "LinkedField",
+                "name": "body",
+                "plural": false,
+                "selections": [
+                  {
+                    "args": null,
+                    "kind": "FragmentSpread",
+                    "name": "OdinLessonBody_body"
+                  }
+                ],
+                "storageKey": null
+              },
+              {
+                "args": null,
+                "kind": "FragmentSpread",
+                "name": "OdinLessonTitle_title"
+              }
             ],
             "storageKey": null
           }
@@ -132,8 +119,31 @@ return {
             "name": "lesson",
             "plural": false,
             "selections": [
-              (v2/*: any*/),
-              (v3/*: any*/),
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "OdinLessonBody",
+                "kind": "LinkedField",
+                "name": "body",
+                "plural": false,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "html",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "title",
+                "storageKey": null
+              },
               {
                 "alias": null,
                 "args": null,
@@ -150,16 +160,16 @@ return {
     ]
   },
   "params": {
-    "cacheID": "2610fdb51c1eae7bd764ecf82c5430fe",
+    "cacheID": "4a4f62ede402f2c78b6c617405ff04a0",
     "id": null,
     "metadata": {},
     "name": "OdinLessonQuery",
     "operationKind": "query",
-    "text": "query OdinLessonQuery(\n  $id: ID!\n) {\n  odin {\n    lesson(id: $id) {\n      title\n      body {\n        html\n        raw\n      }\n      id\n    }\n  }\n}\n"
+    "text": "query OdinLessonQuery(\n  $id: ID!\n) {\n  odin {\n    lesson(id: $id) {\n      body {\n        ...OdinLessonBody_body\n      }\n      ...OdinLessonTitle_title\n      id\n    }\n  }\n}\n\nfragment OdinLessonBody_body on OdinLessonBody {\n  html\n}\n\nfragment OdinLessonTitle_title on OdinLesson {\n  title\n}\n"
   }
 };
 })();
 
-(node as any).hash = "47aa11e6a96a9d4e7de89ae051bb35af";
+(node as any).hash = "e6c2ac9ec9d395036a370b7eb281512d";
 
 export default node;
diff --git a/apps/kampus/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonTitle_title.graphql.ts b/apps/kampus/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonTitle_title.graphql.ts
new file mode 100644
index 00000000..2119ced8
--- /dev/null
+++ b/apps/kampus/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonTitle_title.graphql.ts
@@ -0,0 +1,42 @@
+/**
+ * @generated SignedSource<<7278aba7cd13753f0abba74cb737f7ea>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { Fragment, ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type OdinLessonTitle_title$data = {
+  readonly title: string;
+  readonly " $fragmentType": "OdinLessonTitle_title";
+};
+export type OdinLessonTitle_title$key = {
+  readonly " $data"?: OdinLessonTitle_title$data;
+  readonly " $fragmentSpreads": FragmentRefs<"OdinLessonTitle_title">;
+};
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "OdinLessonTitle_title",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "title",
+      "storageKey": null
+    }
+  ],
+  "type": "OdinLesson",
+  "abstractKey": null
+};
+
+(node as any).hash = "53753beb777de94d98970a9f14b44e1e";
+
+export default node;