diff --git a/frontend/src/components/DataTable.tsx b/frontend/src/components/DataTable.tsx
index 48d4d7a..15e21a7 100644
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -4,6 +4,9 @@ import TextEditor from "@/components/editor/TextEditor";
 import "react-data-grid/lib/styles.css";
 import { FaInfoCircle } from "react-icons/fa";
 import ExtractReferenceDrawer from "./ExtractReferenceDrawer";
+import { GetProcessStepReferences } from "@/services/processSteps";
+import { Source } from "@/interfaces/processSteps";
+import toast from "react-hot-toast";
 
 function calculateColumnWidth(
   title: string,
@@ -50,6 +53,28 @@ const DataTable: React.FC<DataTableProps> = ({ data }) => {
     useState<SelectRowColumnType | null>(null);
   const [displayDrawer, setDisplayDrawer] = useState<boolean>(false);
   const [hoveredCell, setHoveredCell] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handleRefClick = async (props: SelectRowColumnType) => {
+    setIsLoading(true);
+    try {
+      const data = await GetProcessStepReferences(props.id);
+      const filtered_output = data?.output_reference?.[props.index].filter(
+        (item: Source) => item.name == props.key && item.page_numbers
+      );
+      //  Verify valid reference exists
+      if (filtered_output.length == 0) {
+        toast.error("Couldn't find the reference for this");
+      } else {
+        setSelectRowColumn(props);
+        setDisplayDrawer(true);
+      }
+    } catch (error) {
+      toast.error("Failed to fetch references");
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const gridRef = useRef<HTMLDivElement>(null);
 
@@ -84,14 +109,14 @@ const DataTable: React.FC<DataTableProps> = ({ data }) => {
                 size={14}
                 onClick={(e) => {
                   e.stopPropagation();
-                  setSelectRowColumn({
+                  handleRefClick({
                     id: props.row.___process_step_id,
                     index: props.row.___extraction_index,
                     filename: props.row.Filename,
                     key: props.column.key,
                   });
-                  setDisplayDrawer(true);
                 }}
+                style={{ cursor: isLoading ? "not-allowed" : "pointer" }}
               />
             </div>
           )}
diff --git a/frontend/src/components/ExtractReferenceDrawer.tsx b/frontend/src/components/ExtractReferenceDrawer.tsx
index 63b64c8..cadec47 100644
--- a/frontend/src/components/ExtractReferenceDrawer.tsx
+++ b/frontend/src/components/ExtractReferenceDrawer.tsx
@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import HighlightPdfViewer from "../ee/components/HighlightPdfViewer";
 import { FlattenedSource, Source } from "@/interfaces/processSteps";
 import { BASE_STORAGE_URL } from "@/constants";
+import { useProcessStepReferences } from "@/hooks/useProcessStepReferences";
 
 interface IProps {
   process_step_id: string;
@@ -24,17 +25,20 @@ const ExtractReferenceDrawer = ({
   index,
   onCancel,
 }: IProps) => {
-  const { data, error, isLoading } = useQuery({
-    queryKey: ["processStepReferences", process_step_id],
-    queryFn: async () => {
-      return await GetProcessStepReferences(process_step_id);
-    },
-  });
+  const { data, error, isLoading } = useProcessStepReferences(process_step_id);
 
-  const output = data?.output_reference?.[index]?.[column_name] ?? null;
+  if (error) {
+    return (
+      <Drawer isOpen={isOpen} onClose={onCancel} title={column_name}>
+        <div className="text-black">
+          Failed to load references. Please try again.
+        </div>
+      </Drawer>
+    );
+  }
 
   const filtered_output = data?.output_reference?.[index].filter(
-    (item: Source) => item.name == column_name
+    (item: Source) => item.name == column_name && item.page_numbers
   );
 
   const filteredSourceDetails: FlattenedSource[] = [];
diff --git a/frontend/src/hooks/useProcessStepReferences.tsx b/frontend/src/hooks/useProcessStepReferences.tsx
new file mode 100644
index 0000000..31151c0
--- /dev/null
+++ b/frontend/src/hooks/useProcessStepReferences.tsx
@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { GetProcessStepReferences } from "@/services/processSteps";
+
+export const useProcessStepReferences = (process_step_id: string) => {
+  return useQuery({
+    queryKey: ["processStepReferences", process_step_id],
+    queryFn: async () => {
+      return await GetProcessStepReferences(process_step_id);
+    },
+  });
+};