diff --git a/apps/website/src/app/components/editor/page.tsx b/apps/website/src/app/components/editor/page.tsx
index 417503484..6c9eeda63 100644
--- a/apps/website/src/app/components/editor/page.tsx
+++ b/apps/website/src/app/components/editor/page.tsx
@@ -13,23 +13,48 @@ const defaultContent = `
 
 <br />
 
-<strong>Integration with shadcn/cli</strong>
+<strong>Easy Integration</strong>
 
-<p>To ensure seamless integration and consistency within our codebase, we utilize the <code>shadcn/cli</code> tool. This CLI allows us to install all necessary dependencies and components directly into our project repository, maintaining a cohesive structure and simplifying management of the editor and its associated elements.</p>
+<p>To ensure seamless integration and consistency within your codebase, we've made it easy to add the Midday Editor to your project. You can simply copy and paste the necessary code from our dedicated documentation. This method allows you to quickly incorporate all required dependencies and components directly into your project repository.</p>
 
 <br />
 
-<p>If you already have shadcn/cli installed, you can run this command:</p>
+<p>We're actively working on adding the Midday Editor to the shadcn/cli, which will soon allow you to install it with just one command. Stay tuned for this upcoming feature!</p>
 
 <br />
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis congue tellus a lobortis. Curabitur sed velit at sem sagittis accumsan. Quisque non tortor eu orci rutrum iaculis. Nullam tincidunt bibendum lacus, eu dignissim nunc congue at. 
+<strong>Ongoing Development</strong>
+
+<p>As we continue to develop and expand Midday's features, we're constantly adding new functionality to the editor. Our team is committed to enhancing its capabilities, improving performance, and introducing innovative AI-powered tools to make your editing experience even more powerful and efficient.</p>
+
+<br />
 `;
 
 export default function Page() {
   return (
     <div className="container mt-24 max-w-[540px]">
       <Editor content={defaultContent} />
+
+      <div className="mt-8">
+        <div className="border bg-card text-card-foreground shadow-sm">
+          <div className="flex flex-col space-y-1.5 p-6">
+            <h3 className="text-xl font-medium">Install Midday Editor</h3>
+            <p className="text-sm text-[#878787]">
+              Get started with our powerful AI-enhanced text editor
+            </p>
+          </div>
+          <div className="p-6 pt-0">
+            <a
+              href="https://go.midday.ai/editor"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+            >
+              View implementation
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/bun.lockb b/bun.lockb
index 1c3a6c351..9a42a5183 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 3a79ae011..e401b7f82 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -108,7 +108,12 @@
     "@storybook/addon-themes": "^8.3.5",
     "@storybook/manager-api": "^8.3.5",
     "@tiptap/extension-bold": "^2.9.1",
+    "@tiptap/extension-document": "^2.9.1",
+    "@tiptap/extension-link": "^2.9.1",
+    "@tiptap/extension-paragraph": "^2.9.1",
     "@tiptap/extension-placeholder": "^2.9.1",
+    "@tiptap/extension-text": "^2.9.1",
+    "@tiptap/extension-underline": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
diff --git a/packages/ui/src/components/editor/extentions/register.ts b/packages/ui/src/components/editor/extentions/register.ts
index 292c25ee8..194ee607b 100644
--- a/packages/ui/src/components/editor/extentions/register.ts
+++ b/packages/ui/src/components/editor/extentions/register.ts
@@ -1,3 +1,6 @@
+// You can find the list of extensions here: https://tiptap.dev/docs/editor/extensions/functionality
+
+import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
 
@@ -5,4 +8,8 @@ import StarterKit from "@tiptap/starter-kit";
 export const extensions = [
   StarterKit,
   Placeholder.configure({ placeholder: "Write something..." }),
+  Link.configure({
+    openOnClick: false,
+    defaultProtocol: "https",
+  }),
 ];
diff --git a/packages/ui/src/components/editor/index.tsx b/packages/ui/src/components/editor/index.tsx
index 955556132..5d06d2185 100644
--- a/packages/ui/src/components/editor/index.tsx
+++ b/packages/ui/src/components/editor/index.tsx
@@ -2,18 +2,22 @@
 
 import "./styles.css";
 
-import { EditorContent, useEditor } from "@tiptap/react";
+import { EditorContent, type JSONContent, useEditor } from "@tiptap/react";
 import { BubbleMenu } from "./extentions/bubble-menu";
 import { extensions } from "./extentions/register";
 
 type EditorProps = {
   content?: string;
+  onChange?: (content: JSONContent) => void;
 };
 
-export function Editor({ content }: EditorProps) {
+export function Editor({ content, onChange }: EditorProps) {
   const editor = useEditor({
     extensions,
     content,
+    onUpdate: ({ editor }) => {
+      onChange?.(editor.getJSON());
+    },
   });
 
   return (