diff --git a/src/pages/Merge/Merge.jsx b/src/pages/Merge/Merge.jsx
index 4326fbf..25f6e7e 100644
--- a/src/pages/Merge/Merge.jsx
+++ b/src/pages/Merge/Merge.jsx
@@ -19,7 +19,7 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
   import.meta.url,
 ).toString();
 
-// ─── helpers ──────────────────────────────────────────────────────────────────
+// ─── helpers 
 let _uid = 0;
 function makeId() { return ++_uid; }
 
@@ -58,10 +58,10 @@ function PdfCard({ item, onRemove, onPreview, onDragStart, onDragEnter, onDragEn
       onDragOver={(e) => e.preventDefault()}
       onDrop={() => { onDragEnd(); setOver(false); }}
       className={[
-        "relative group flex flex-col items-center gap-2 border rounded-2xl p-2.5 cursor-grab active:cursor-grabbing select-none transition-all duration-150",
+        "relative group flex flex-col items-center gap-3 border rounded-2xl p-3 cursor-grab active:cursor-grabbing select-none transition-all duration-150",
         over
           ? "border-white/40 bg-white/[0.06] scale-[1.02]"
-          : "bg-zinc-900/60 border-white/[0.06] hover:border-white/20",
+          : "bg-zinc-900/60 border-white/[0.06] hover:border-white/30 hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] hover:scale-[1.02]",
       ].join(" ")}
     >
       {/* Order badge */}
@@ -73,7 +73,7 @@ function PdfCard({ item, onRemove, onPreview, onDragStart, onDragEnter, onDragEn
 
       {/* Thumbnail area */}
       <div
-        className="w-full overflow-hidden rounded-xl bg-zinc-800 flex items-center justify-center relative"
+        className="w-full overflow-hidden rounded-xl bg-zinc-800/80 border border-white/[0.05] flex items-center justify-center relative"
         style={{ minHeight: 120 }}
       >
         {item.thumb ? (
@@ -111,10 +111,20 @@ function PdfCard({ item, onRemove, onPreview, onDragStart, onDragEnter, onDragEn
         </button>
       </div>
 
-      {/* Name + size */}
-      <div className="w-full px-1"> 
-        <p className="text-[11px] text-zinc-300 font-medium truncate">{item.name}</p>
-        <p className="text-[10px] text-zinc-500">{formatFileSize(item.size)}{item.numPages != null && ` · ${item.numPages} pages`}</p>
+     {/* File Info */}
+      <div className="w-full px-2 mt-1 flex flex-col gap-1">
+  
+        {/* File name */}
+        <p className="text-xs font-semibold text-white truncate leading-tight">
+          {item.name}
+        </p>
+
+        {/* Metadata */}
+        <p className="text-[11px] text-zinc-400 leading-tight">
+        {formatFileSize(item.size)}
+        {item.numPages != null && ` • ${item.numPages} pages`}
+        </p>
+
       </div>
 
       {/* Remove */}
diff --git a/src/pages/Watermark/Watermark.jsx b/src/pages/Watermark/Watermark.jsx
index 7f82491..edc2a85 100644
--- a/src/pages/Watermark/Watermark.jsx
+++ b/src/pages/Watermark/Watermark.jsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import { useFileStore } from "../../hooks/useFileStore";
-import { Stamp, X, Download, Loader2, Settings2 } from "lucide-react";
+import { Stamp, X, Download, Loader2 } from "lucide-react";
 import { Button } from "../../components/ui/Button";
 import { UpgradeButton } from "../../components/ui/UpgradeButton";
 import { addWatermark, getPdfPageCount } from "../../services/pdf.service";
@@ -9,23 +9,16 @@ import { formatFileSize } from "../../utils/formatters";
 import { useSubscription } from "../../hooks/useSubscription";
 import { FREE_LIMITS, mbToBytes } from "../../config/limits";
 
+
+
 export function Watermark() {
   const [file, setFile] = useFileStore("Watermark_file", null);
   const [watermarkText, setWatermarkText] = useState("CONFIDENTIAL");
   const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState(null);
   const [originalPreviewUrl, setOriginalPreviewUrl] = useState(null);
   const [previewUrl, setPreviewUrl] = useState(null);
   const [pageCount, setPageCount] = useState(0);
-  const lastUrlRef = useRef(null);
-
-  const [options, setOptions] = useState({
-    position: "center",
-    opacity: 0.3,
-    fontSize: 60,
-    rotation: 45,
-    offsetX: 0,
-    offsetY: 0
-  });
 
   const {
     isPremium,
@@ -34,240 +27,244 @@ export function Watermark() {
     isWalletConnected,
   } = useSubscription();
 
-  // 1. Fetch Page Count ONLY when a file exists
   useEffect(() => {
-    if (!file) return; // Just exit, don't set state here
-
-    const fetchPageCount = async () => {
-      try {
-        const count = await getPdfPageCount(file);
-        setPageCount(count);
-      } catch (err) {
-        console.error("Failed to get page count:", err);
+    return () => {
+      if (originalPreviewUrl) {
+        URL.revokeObjectURL(originalPreviewUrl);
+      }
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
       }
     };
+  }, [originalPreviewUrl, previewUrl]);
 
-    fetchPageCount();
-  }, [file]);
-
+  // Recreate original preview URL when file is loaded from storage but preview is missing
   useEffect(() => {
-    if (!file || !watermarkText.trim()) {
-      const t = setTimeout(() => setPreviewUrl(null), 0);
-      return () => clearTimeout(t);
-    }
-
-    const timer = setTimeout(async () => {
-      try {
-        setIsProcessing(true);
-        const blob = await addWatermark(file, watermarkText, options);
-        const url = URL.createObjectURL(blob);
-
-        if (lastUrlRef.current) URL.revokeObjectURL(lastUrlRef.current);
-        lastUrlRef.current = url;
-        setPreviewUrl(url);
-      } catch (err) {
-        console.error("Preview failed", err);
-      } finally {
-        setIsProcessing(false);
-      }
-    }, 500);
+    if (!file || previewUrl || originalPreviewUrl) return;
 
-    return () => clearTimeout(timer);
-  }, [file, watermarkText, options]);
+    const originalUrl = file.url || URL.createObjectURL(file);
+    queueMicrotask(() => setOriginalPreviewUrl(originalUrl));
 
-  // 3. Handle cleanup on unmount
-  useEffect(() => {
     return () => {
-      if (originalPreviewUrl) URL.revokeObjectURL(originalPreviewUrl);
-      if (lastUrlRef.current) URL.revokeObjectURL(lastUrlRef.current);
+      if (!file.url) {
+        URL.revokeObjectURL(originalUrl);
+      }
     };
-  }, [originalPreviewUrl]);
+  }, [file, previewUrl, originalPreviewUrl]);
+
+  const fileTooLarge =
+    !isPremium &&
+    file &&
+    file.size > mbToBytes(FREE_LIMITS.watermark.maxFileSizeMb);
 
-  // 4. Initialize original preview
-  useEffect(() => {
-    if (!file || originalPreviewUrl) return;
-    const url = file.url || URL.createObjectURL(file);
-    const t = setTimeout(() => setOriginalPreviewUrl(url), 0);
-    return () => clearTimeout(t);
-  }, [file, originalPreviewUrl]);
-
-  // Subscription & Lock Logic
-  const fileTooLarge = !isPremium && file && file.size > mbToBytes(FREE_LIMITS.watermark.maxFileSizeMb);
   const isLocked = hasReachedGlobalLimit || fileTooLarge;
   const lockReason = hasReachedGlobalLimit ? "global" : "size";
-  const lockLabel = fileTooLarge ? `${FREE_LIMITS.watermark.maxFileSizeMb} MB` : undefined;
-
-  const handleFileSelected = (selectedFiles) => {
-    const selectedFile = selectedFiles[0];
-    if (!selectedFile || selectedFile.type !== "application/pdf") return;
-    setFile(selectedFile);
-    setPreviewUrl(null);
-    if (originalPreviewUrl) URL.revokeObjectURL(originalPreviewUrl);
-    setOriginalPreviewUrl(URL.createObjectURL(selectedFile));
-  };
+  const lockLabel = fileTooLarge
+    ? `${FREE_LIMITS.watermark.maxFileSizeMb} MB`
+    : undefined;
 
-  const clearFile = () => {
-    setFile(null);
-    setPreviewUrl(null);
-    setOriginalPreviewUrl(null);
-    setPageCount(0);
-  };
+  const handleFileSelected = async (selectedFiles) => {
+  const selectedFile = selectedFiles[0];
+  if (!selectedFile) return;
 
-  const updateOption = (key, value) => {
-    setOptions(prev => ({ ...prev, [key]: value }));
-  };
+  if (selectedFile.type !== "application/pdf") {
+    setError("Please upload a valid PDF file.");
+    return;
+  }
 
-  const handleDownload = async () => {
-    if (!previewUrl) return;
-    await incrementUsage();
-    const link = document.createElement("a");
-    link.href = previewUrl;
-    link.download = `QuickPDF_Watermarked_${Date.now()}.pdf`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+  setError(null);
+  setFile(selectedFile);
+
+  const count = await getPdfPageCount(selectedFile);
+  
+  setPageCount(count);
+  setPreviewUrl(null);
+};
+
+  const handleProcess = async () => {
+    if (!file || !watermarkText.trim()) return;
+
+    try {
+      setIsProcessing(true);
+      setError(null);
+
+      const watermarkedBlob = await addWatermark(file, watermarkText);
+      const url = URL.createObjectURL(watermarkedBlob);
+
+      setPreviewUrl(url);
+      await incrementUsage();
+    } catch {
+      setError("Could not read the PDF file. It might be corrupted or encrypted.");
+      setFile(null);
+    } finally {
+      setIsProcessing(false);
+    }
   };
+  function clearFile() {
+  setFile(null);
+  setError(null);
+  setPreviewUrl(null);
+  setPageCount(0);
+}
 
   return (
-    <div className={`mx-auto py-8 sm:py-12 px-4 sm:px-6 transition-all duration-500 ease-in-out ${file ? 'w-full max-w-[1600px]' : 'max-w-3xl'}`}>
+    <div className={`mx-auto py-8 sm:py-12 px-4 sm:px-6 transition-all duration-500 ease-in-out ${previewUrl || (file && originalPreviewUrl) ? 'w-full max-w-[1600px]' : 'max-w-3xl'}`}>
       <div className="text-center mb-10">
         <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-zinc-900 border border-white/10 text-white mb-4">
           <Stamp className="w-8 h-8" />
         </div>
-        <h1 className="text-4xl font-extrabold text-white mb-4">Add Watermark</h1>
-        <p className="text-lg text-zinc-400">Secure browser-based watermarking.</p>
+
+        <h1 className="text-4xl font-extrabold text-white mb-4">
+          Add Watermark
+        </h1>
+
+        <p className="text-lg text-zinc-400">
+          Stamp text across your document securely in your browser.
+          {!isPremium && (
+            <span className="block text-sm text-zinc-600 mt-1">
+              Free tier: files up to{" "}
+              {FREE_LIMITS.watermark.maxFileSizeMb} MB
+            </span>
+          )}
+        </p>
       </div>
 
-      <div className={file ? "grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-6 lg:gap-8 items-start" : ""}>
+      <div className={previewUrl || (file && originalPreviewUrl) ? "grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-6 lg:gap-8 items-start" : ""}>
         <div className="bg-[#0a0a0a] rounded-2xl border border-white/10 p-6 md:p-8 shadow-2xl">
-          {!file ? (
-            <Dropzone onFilesSelected={handleFileSelected} multiple={false} text="Click to upload a PDF" />
-          ) : (
-            <div className="space-y-8">
-              <div className="flex items-center justify-between p-4 bg-zinc-900/50 border border-white/10 rounded-xl">
-                <div className="flex flex-col overflow-hidden mr-4">
-                  <span className="font-medium text-zinc-200 truncate">{file.name}</span>
-                  <div className="flex items-center gap-2 text-sm text-zinc-500">
-                    <span>{formatFileSize(file.size)}</span>
-                    <span>•</span>
-                    <span>{pageCount} {pageCount === 1 ? 'page' : 'pages'}</span>
-                  </div>
-                </div>
-                <button onClick={clearFile} className="p-2 text-zinc-500 hover:text-red-400 transition-colors">
-                  <X className="w-5 h-5" />
-                </button>
-              </div>
+          {error && (
+          <div className="mb-6 p-4 bg-red-500/10 text-red-400 rounded-lg text-sm border border-red-500/20">
+            {error}
+          </div>
+        )}
 
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-zinc-400">Watermark Text</label>
-                <input
-                  type="text"
-                  value={watermarkText}
-                  onChange={(e) => setWatermarkText(e.target.value)}
-                  className="w-full h-11 px-4 bg-black border border-white/10 text-white rounded-lg uppercase outline-none focus:ring-1 focus:ring-white/20"
-                />
-              </div>
+        {!file ? (
+          <Dropzone
+            onFilesSelected={handleFileSelected}
+            multiple={false}
+            disabled={isProcessing}
+            text="Click to upload a PDF"
+          />
+        ) : (
+          <div className="space-y-8">
+            <div className="flex items-center justify-between p-4 bg-zinc-900/50 border border-white/10 rounded-xl">
+              <div className="flex flex-col overflow-hidden mr-4">
+                <span className="font-medium text-zinc-200 truncate">
+                  {file.name}
+                </span>
 
-              <div className="space-y-6 pt-6 border-t border-white/10">
-                <div className="flex items-center gap-2 text-zinc-300 font-medium">
-                  <Settings2 className="w-4 h-4" />
-                  <h3>Style & Position</h3>
-                </div>
-
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase tracking-wider">Position</label>
-                  <select
-                    value={options.position}
-                    onChange={(e) => updateOption("position", e.target.value)}
-                    className="w-full h-10 px-3 bg-black border border-white/10 text-white rounded-lg outline-none"
-                  >
-                    <option value="center">Center</option>
-                    <option value="top-left">Top Left</option>
-                    <option value="top-right">Top Right</option>
-                    <option value="bottom-left">Bottom Left</option>
-                    <option value="bottom-right">Bottom Right</option>
-                  </select>
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <label className="text-xs text-zinc-500 uppercase">Size: {options.fontSize}px</label>
-                    <input type="range" min="10" max="200" value={options.fontSize} onChange={(e) => updateOption("fontSize", parseInt(e.target.value))} className="w-full h-1.5 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-white" />
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-xs text-zinc-500 uppercase">Opacity: {Math.round(options.opacity * 100)}%</label>
-                    <input type="range" min="0.05" max="1" step="0.05" value={options.opacity} onChange={(e) => updateOption("opacity", parseFloat(e.target.value))} className="w-full h-1.5 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-white" />
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Rotation: {options.rotation}°</label>
-                  <input type="range" min="-90" max="90" value={options.rotation} onChange={(e) => updateOption("rotation", parseInt(e.target.value))} className="w-full h-1.5 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-white" />
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <label className="text-xs text-zinc-500 uppercase tracking-wider">Offset X</label>
-                    <input
-                      type="number"
-                      value={options.offsetX}
-                      onChange={(e) => updateOption("offsetX", parseInt(e.target.value) || 0)}
-                      className="w-full h-10 px-3 bg-black border border-white/10 text-white rounded-lg outline-none focus:ring-1 focus:ring-white/20"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-xs text-zinc-500 uppercase tracking-wider">Offset Y</label>
-                    <input
-                      type="number"
-                      value={options.offsetY}
-                      onChange={(e) => updateOption("offsetY", parseInt(e.target.value) || 0)}
-                      className="w-full h-10 px-3 bg-black border border-white/10 text-white rounded-lg outline-none focus:ring-1 focus:ring-white/20"
-                    />
-                  </div>
-                </div>
+                <span className="text-sm text-zinc-500 mt-0.5">
+                  {formatFileSize(file.size)} • {pageCount} pages
+                  {fileTooLarge && (
+                    <span className="text-amber-400 ml-2">
+                      (exceeds free limit)
+                    </span>
+                  )}
+                </span>
               </div>
+
+              <button
+                onClick={clearFile}
+                className="p-2 text-zinc-500 hover:text-red-400 hover:bg-white/5 rounded-lg transition-colors"
+              >
+                <X className="w-5 h-5" />
+              </button>
             </div>
-          )}
-        </div>
 
-        {file && (
-          <div className="bg-[#0a0a0a] rounded-2xl border border-white/10 p-6 md:p-8 shadow-2xl flex flex-col h-full min-h-[60vh] relative">
-            <h2 className="text-lg font-semibold text-white mb-6">
-              {isProcessing ? "Updating Preview..." : previewUrl ? "Preview with Watermark" : "Original PDF"}
-            </h2>
-            <iframe
-              src={previewUrl || originalPreviewUrl}
-              title="PDF Preview"
-              className={`w-full flex-grow rounded-xl border border-white/10 bg-white transition-opacity duration-300 ${isProcessing ? 'opacity-50' : 'opacity-100'}`}
-              style={{ height: "clamp(400px, 65vh, 800px)" }}
-            />
-          </div>
-        )}
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-zinc-400">
+                Watermark Text
+              </label>
 
-        {previewUrl && (
-          <div className="lg:col-span-2 flex justify-center py-4">
-            <div className="w-full max-w-xl">
+              <input
+                type="text"
+                value={watermarkText}
+                onChange={(e) => setWatermarkText(e.target.value)}
+                placeholder="e.g., CONFIDENTIAL"
+                className="w-full h-11 px-4 bg-black border border-white/10 text-white rounded-lg focus:ring-2 focus:ring-white/20 outline-none transition-all placeholder:text-zinc-600 uppercase"
+              />
+            </div>
+
+            <div className="flex justify-end border-t border-white/10 pt-6">
               {isLocked ? (
                 <UpgradeButton
                   reason={lockReason}
                   limitLabel={lockLabel}
                   isWalletConnected={isWalletConnected}
                   isPremium={isPremium}
-                  className="w-full h-14 text-lg"
+                  className="w-full sm:w-auto"
                 />
               ) : (
-                <Button onClick={handleDownload} disabled={isProcessing} className="w-full h-14 text-lg shadow-xl shadow-white/5">
+                <Button
+                  onClick={handleProcess}
+                  disabled={isProcessing || !watermarkText.trim()}
+                  className="w-full sm:w-auto"
+                >
                   {isProcessing ? (
-                    <><Loader2 className="w-6 h-6 mr-3 animate-spin" />Processing...</>
+                    <>
+                      <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+                      Processing...
+                    </>
                   ) : (
-                    <><Download className="w-6 h-6 mr-3" />Download Watermarked PDF</>
+                    <>
+                      <Download className="w-5 h-5 mr-2" />
+                      Apply Watermark
+                    </>
                   )}
                 </Button>
               )}
             </div>
+
+          </div>
+        )}
+        </div>
+
+        {originalPreviewUrl && !previewUrl && (
+          <div className="bg-[#0a0a0a] rounded-2xl border border-white/10 p-6 md:p-8 shadow-2xl flex flex-col h-full min-h-[60vh]">
+            <h2 className="text-lg font-semibold text-white mb-6">
+              Original PDF
+            </h2>
+
+            <iframe
+              src={originalPreviewUrl}
+              title="Original PDF Preview"
+              className="w-full flex-grow rounded-xl border border-white/10 bg-white"
+              style={{ height: "clamp(320px, 60vh, 600px)" }}
+            />
+          </div>
+        )}
+
+        {previewUrl && (
+          <div className="bg-[#0a0a0a] rounded-2xl border border-white/10 p-6 md:p-8 shadow-2xl flex flex-col h-full min-h-[60vh]">
+            <h2 className="text-lg font-semibold text-white mb-6">
+              Preview with Watermark
+            </h2>
+
+            <iframe
+              src={previewUrl}
+              title="Watermarked PDF Preview"
+              className="w-full flex-grow rounded-xl border border-white/10 bg-white mb-6"
+              style={{ height: "clamp(320px, 60vh, 600px)" }}
+            />
+
+            <div className="mt-auto pt-4 border-t border-white/10">
+              <Button
+                className="w-full"
+                onClick={() => {
+                  const link = document.createElement("a");
+                  link.href = previewUrl;
+                  link.download = `QuickPDF_Watermarked_${Date.now()}.pdf`;
+                  document.body.appendChild(link);
+                  link.click();
+                  document.body.removeChild(link);
+                }}
+              >
+                <Download className="w-5 h-5 mr-2" />
+                Download PDF
+              </Button>
+            </div>
           </div>
         )}
       </div>
     </div>
   );
-}
\ No newline at end of file
+}