diff --git a/frontend/src/components/DetailsDialog.tsx b/frontend/src/components/DetailsDialog.tsx
index 709da46..2436f79 100644
--- a/frontend/src/components/DetailsDialog.tsx
+++ b/frontend/src/components/DetailsDialog.tsx
@@ -1,108 +1,117 @@
 import { useMemo, useState } from "react";
 import {
-    Dialog,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-    DialogFooter,
-    DialogClose,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { MoreHorizontal } from "lucide-react";
 
 type DetailsCellProps = {
-    text?: string | null;
-    limit?: number;
-    title?: string;
-    triggerVariant?: "text" | "icon";
-    justify?: "between" | "start" | "center"
+  text?: string | null;
+  limit?: number;
+  title?: string;
+  triggerVariant?: "text" | "icon";
+  justify?: "between" | "start" | "center";
 };
 
 export function DetailsDialog({
-    text,
-    limit = 25,
-    title = "Details",
-    triggerVariant = "text",
-    justify = "between"
+  text,
+  limit = 25,
+  title = "Details",
+  triggerVariant = "text",
+  justify = "between",
 }: DetailsCellProps) {
-    const [open, setOpen] = useState(false);
-    const value = text ?? "";
-
-    const isTruncated = value.length > limit;
-    const wrapperJustifyClass = justify === "start" ? "justify-start" : justify === "center" ? "justify-center" : "justify-between"
-
-    const display = useMemo(() => {
-        if (!value) return "";
-
-        if (!isTruncated) return value;
-
-        if (triggerVariant === "text") {
-            return value.slice(0, limit) + "...";
-        }
-
-        return value.slice(0, limit);
-    }, [value, limit, isTruncated, triggerVariant]);
-
-    const handleOpen = () => setOpen(true);
-
-    return (
-        <>
-            <div className={`flex flex-row items-center ${wrapperJustifyClass} gap-1 w-full`}>
-                <div className="min-w-0 whitespace-nowrap overflow-hidden truncate">
-                    {display}
-                </div>
-
-
-                {isTruncated && (
-                    <>
-                        {triggerVariant === "text" && (
-                            <button
-                                type="button"
-                                onClick={handleOpen}
-                                className="text-xs underline shrink-0"
-                            >
-                                See More
-                            </button>
-                        )}
-
-                        {triggerVariant === "icon" && (
-                            <button
-                                type="button"
-                                onClick={handleOpen}
-                                className="shrink-0 inline-flex items-center justify-center rounded-md
+  const [open, setOpen] = useState(false);
+  const value = text ?? "";
+
+  const isTruncated = value.length > limit;
+  const wrapperJustifyClass =
+    justify === "start"
+      ? "justify-start"
+      : justify === "center"
+        ? "justify-center"
+        : "justify-between";
+
+  const display = useMemo(() => {
+    if (!value) return "";
+
+    if (!isTruncated) return value;
+
+    if (triggerVariant === "text") {
+      return value.slice(0, limit) + "...";
+    }
+
+    return value.slice(0, limit);
+  }, [value, limit, isTruncated, triggerVariant]);
+
+  const handleOpen = () => setOpen(true);
+
+  return (
+    <>
+      <div
+        dir="auto"
+        className={`flex flex-row items-center ${wrapperJustifyClass} gap-1 w-full`}
+      >
+        <div
+          dir="auto"
+          className="min-w-0 whitespace-nowrap overflow-hidden truncate text-start"
+        >
+          {display}
+        </div>
+
+        {isTruncated && (
+          <>
+            {triggerVariant === "text" && (
+              <button
+                type="button"
+                onClick={handleOpen}
+                className="text-xs underline shrink-0"
+              >
+                See More
+              </button>
+            )}
+
+            {triggerVariant === "icon" && (
+              <button
+                type="button"
+                onClick={handleOpen}
+                className="shrink-0 inline-flex items-center justify-center rounded-md
                         hover:bg-gray-200 transition-all group mt-1 p-1"
-                                title="See More"
-                            >
-                                <MoreHorizontal className="w-5 h-5 text-gray-600 group-hover:text-gray-900" />
-                            </button>
-                        )}
-                    </>
-                )}
+                title="See More"
+              >
+                <MoreHorizontal className="w-5 h-5 text-gray-600 group-hover:text-gray-900" />
+              </button>
+            )}
+          </>
+        )}
+      </div>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-2xl w-[90vw] max-w-[900px] p-0 overflow-hidden">
+          <div className="flex flex-col max-h-[80vh]">
+            <DialogHeader className="px-6 pt-6">
+              <DialogTitle dir="auto">{title}</DialogTitle>
+              <div className="mt-1 border-b border-gray-300" />
+            </DialogHeader>
+
+            <div className="px-6 py-4 overflow-auto text-justify">
+              <div dir="auto" className="whitespace-pre-wrap break-words">
+                {value || "No details available."}
+              </div>
             </div>
 
-
-            <Dialog open={open} onOpenChange={setOpen}>
-                <DialogContent className="sm:max-w-2xl w-[90vw] max-w-[900px] p-0 overflow-hidden">
-                    <div className="flex flex-col max-h-[80vh]">
-                        <DialogHeader className="px-6 pt-6">
-                            <DialogTitle>{title}</DialogTitle>
-                            <div className="mt-1 border-b border-gray-300" />
-                        </DialogHeader>
-
-                        <div className="px-6 py-4 overflow-auto text-justify">
-                            <div className="whitespace-pre-wrap break-words">
-                                {value || "No details available."}
-                            </div>
-                        </div>
-
-                        <DialogFooter className="px-6 pb-6 pt-3">
-                            <DialogClose asChild>
-                                <Button>Close</Button>
-                            </DialogClose>
-                        </DialogFooter>
-                    </div>
-                </DialogContent>
-            </Dialog>
-        </>
-    );
+            <DialogFooter className="px-6 pb-6 pt-3">
+              <DialogClose asChild>
+                <Button>Close</Button>
+              </DialogClose>
+            </DialogFooter>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
 }
diff --git a/frontend/src/components/OBSViewDialog.tsx b/frontend/src/components/OBSViewDialog.tsx
index e755946..9a81b0e 100644
--- a/frontend/src/components/OBSViewDialog.tsx
+++ b/frontend/src/components/OBSViewDialog.tsx
@@ -613,7 +613,7 @@ export const OBSViewDialog = ({
               className="flex-1 overflow-auto border rounded"
             >
               {!editMode && (
-                <div className="p-3 bg-gray-50">
+                <div dir="auto" className="p-3 bg-gray-50">
                   {previewMode ? (
                     <ReactMarkdown
                       components={{
@@ -641,6 +641,7 @@ export const OBSViewDialog = ({
               {/* EDIT MODE */}
               {editMode && (
                 <div
+                  dir="auto"
                   ref={editableRef}
                   className="p-4 bg-white outline-none min-h-full whitespace-pre-wrap font-mono text-sm tracking-wide"
                   contentEditable
diff --git a/frontend/src/utils/obsParser.ts b/frontend/src/utils/obsParser.ts
index 800c2b4..9fbc44e 100644
--- a/frontend/src/utils/obsParser.ts
+++ b/frontend/src/utils/obsParser.ts
@@ -3,10 +3,39 @@ import type { OBSStory } from "./types";
 
 const ISL_HEADERS = ["storyNo", "title", "url", "description"];
 
+// Supports:
+// # 1. Creation
+// # 1۔ تخلیق
+const OBS_HEADING_REGEX = /^#+\s*(\d+)\s*[^\p{L}\p{N}]\s*(.+)$/u;
+
+const cleanHeader = (header: string) =>
+  header
+    .replace(/^\uFEFF/, "")
+    .trim()
+    .toLowerCase();
+
 export const isISLOBSCSV = (headers: string[]) =>
-  ISL_HEADERS.every((h) =>
-    headers.map((x) => x.toLowerCase()).includes(h.toLowerCase()),
-  );
+  ISL_HEADERS.every((h) => headers.map(cleanHeader).includes(h.toLowerCase()));
+
+function extractHeadingData(headingLine: string): {
+  story_no: number;
+  title: string;
+} {
+  const normalized = headingLine.normalize("NFC");
+
+  const match = normalized.match(OBS_HEADING_REGEX);
+
+  if (!match) {
+    throw new Error(
+      "Invalid OBS heading. Expected '# 1. Title' or '# 1۔ عنوان'",
+    );
+  }
+
+  return {
+    story_no: Number(match[1]),
+    title: match[2].trim(),
+  };
+}
 
 export function parseISLOBSCSV(file: File): Promise<OBSStory[]> {
   return new Promise((resolve, reject) => {
@@ -40,23 +69,16 @@ export function parseISLOBSCSV(file: File): Promise<OBSStory[]> {
 
 export async function parseOBSMarkdown(file: File): Promise<OBSStory> {
   const content = await file.text();
-  const lines = content.split("\n");
 
-  // markdown heading
-  const headingLine = lines.find((l) => l.startsWith("#"));
+  const lines = normalizeContent(content).split("\n");
+
+  const headingLine = lines.find((l) => l.trim().startsWith("#"));
 
   if (!headingLine) {
     throw new Error("Invalid OBS markdown: missing heading");
   }
 
-  const match = headingLine.match(/^#+\s*(\d+)[.\s]+(.+)/);
-
-  if (!match) {
-    throw new Error("Invalid OBS heading. Expected format: '# 1. Title'");
-  }
-
-  const story_no = Number(match[1]);
-  const title = match[2].trim();
+  const { story_no, title } = extractHeadingData(headingLine);
 
   return {
     story_no,
@@ -77,21 +99,19 @@ export function extractOBSMetadataFromMarkdown(markdown: string): {
   story_no: number;
   title: string;
 } {
-  const lines = markdown.split("\n");
-  const headingLine = lines.find((l) => l.startsWith("#"));
+  const lines = normalizeContent(markdown).split("\n");
+
+  const headingLine = lines.find((l) => l.trim().startsWith("#"));
 
   if (!headingLine) {
     throw new Error("Invalid OBS markdown: missing heading");
   }
 
-  const match = headingLine.match(/^#+\s*(\d+)[.\s]+(.+)/);
-
-  if (!match) {
-    throw new Error("Invalid OBS heading. Expected format: '# 1. Title'");
-  }
-
-  return {
-    story_no: Number(match[1]),
-    title: match[2].trim(),
-  };
+  return extractHeadingData(headingLine);
 }
+
+const normalizeContent = (content: string) =>
+  content
+    .replace(/^\uFEFF/, "")
+    .replace(/\r\n/g, "\n")
+    .replace(/\r/g, "\n");
\ No newline at end of file