diff --git a/apps/web/components/canvas/custom_nodes/textcard.tsx b/apps/web/components/canvas/custom_nodes/textcard.tsx
index e778eabb..db881fb4 100644
--- a/apps/web/components/canvas/custom_nodes/textcard.tsx
+++ b/apps/web/components/canvas/custom_nodes/textcard.tsx
@@ -31,24 +31,13 @@ export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> {
     return (
       <HTMLContainer
         onPointerDown={isEditing ? stopEventPropagation : undefined}
-        className="flex h-full w-full items-center justify-center"
-        style={{
-          pointerEvents: isEditing ? "all" : "none",
-        }}
+        className={`flex h-full w-full items-center justify-center ${isEditing ? "pointer-events-auto" : "pointer-events-none"}`}
       >
         <div
-        className="overflow-hidden"
-          style={{
-            height: s.props.h,
-            width: s.props.w,
-            pointerEvents: "all",
-            background: "#232c2f",
-            borderRadius: "16px",
-            border: "2px solid #374151",
-            padding: "8px 14px",
-          }}
+        className={`overflow-hidden bg-[#232c2f] pointer-events-auto rounded-md border-2 border-[#374151] py-2 px-4
+        h-[${s.props.h}]px w-[${s.props.w}]px`}
         >
-          <h2 style={{ color: "#95A0AB" }}>{s.props.type}</h2>
+          <h2 className="text-[#95A0AB]">{s.props.type}</h2>
           {isEditing ? (
             <input
               value={s.props.content}
diff --git a/apps/web/lib/ExternalDroppedContent.ts b/apps/web/lib/ExternalDroppedContent.ts
index 75ca8b6f..c1f35b36 100644
--- a/apps/web/lib/ExternalDroppedContent.ts
+++ b/apps/web/lib/ExternalDroppedContent.ts
@@ -160,10 +160,11 @@ function formatTextToRatio(text: string): { height: number; width: number } {
 }
 
 type CardData = {
-  type: string;
   title: string;
+  type: string;
+  source: string;
   content: string;
-  url: string;
+  numChunks: string;
 };
 
 type DroppedData = CardData | string | { imageUrl: string };
@@ -183,47 +184,32 @@ export function handleExternalDroppedContent({
     const processedURL = processURL(droppedData);
     if (processedURL) {
       createEmbedsFromUrl({ editor, url: processedURL });
-      return;
     } else {
-      const { height, width } = formatTextToRatio(droppedData);
-      editor.createShape({
-        type: "Textcard",
-        x: position.x - width / 2,
-        y: position.y - height / 2,
-        props: {
-          content: "",
-          extrainfo: droppedData,
-          type: "note",
-          w: 300,
-          h: 200,
-        },
-      });
+      createTextCard(editor, position, droppedData, "String Content");
     }
   } else if ("imageUrl" in droppedData) {
+    // Handle image URL (implementation not provided in original code)
   } else {
-    const { content, title, url, type } = droppedData;
-    const processedURL = processURL(url);
-    if (processedURL) {
-      createEmbedsFromUrl({ editor, url: processedURL });
-      return;
-    }
-    const { height, width } = formatTextToRatio(content);
-
-    editor.createShape({
-      type: "Textcard",
-      x: position.x - 250,
-      y: position.y - 150,
-      props: {
-        type,
-        content: title,
-        extrainfo: content,
-        w: height,
-        h: width,
-      },
-    });
+    const { content, title, source, type } = droppedData;
+    const processedURL = processURL(source);
+    // if (processedURL) {
+    //   createEmbedsFromUrl({ editor, url: processedURL });
+    // } else {
+      // }
+        createTextCard(editor, position, title, type, content);
   }
 }
 
+function createTextCard(editor: Editor, position: { x: number; y: number }, content: string, type: string, extraInfo: string = "") {
+  const { height, width } = formatTextToRatio(content);
+  editor.createShape({
+    type: "Textcard",
+    x: position.x - width / 2,
+    y: position.y - height / 2,
+    props: { content, type, extrainfo: extraInfo, h: 200, w: 400 },
+  });
+}
+
 function centerSelectionAroundPoint(editor: Editor, position: VecLike) {
   // Re-position shapes so that the center of the group is at the provided point
   const viewportPageBounds = editor.getViewportPageBounds();