diff --git a/src/api/common.ts b/src/api/common.ts
index 6f6daef8b..b21224533 100644
--- a/src/api/common.ts
+++ b/src/api/common.ts
@@ -454,3 +454,7 @@ export function needsQuoting(value: string) {
   const quotedValue = quote(value);
   return quotedValue !== value;
 }
+
+export const getFileName = (name: string) => {
+  return name.split("/").slice(-1).join("");
+};
diff --git a/src/api/model.ts b/src/api/model.ts
index 1f9ece447..7ccb51dcf 100644
--- a/src/api/model.ts
+++ b/src/api/model.ts
@@ -1,5 +1,9 @@
 import _ from "lodash";
-import type { FeedFile, PluginInstance } from "@fnndsc/chrisapi";
+import type {
+  FileBrowserFolderFile,
+  PACSFile,
+  PluginInstance,
+} from "@fnndsc/chrisapi";
 
 export interface IActionTypeParam {
   type: string;
@@ -162,7 +166,7 @@ export class TreeModel {
 
 export interface IFileBlob {
   blob?: Blob;
-  file?: FeedFile;
+  file?: FileBrowserFolderFile | PACSFile;
   url?: string;
   fileType: string;
 }
@@ -175,6 +179,7 @@ export const fileViewerMap: any = {
   html: "IframeDisplay",
   pdf: "PdfDisplay",
   csv: "TextDisplay",
+  md: "TextDisplay",
   ctab: "TextDisplay",
   json: "JsonDisplay",
   png: "ImageDisplay",
@@ -209,7 +214,7 @@ export function getFileExtension(filename: string) {
 }
 
 export class FileViewerModel {
-  public getFileName(item: FeedFile) {
+  public getFileName(item: FileBrowserFolderFile) {
     const splitString = item.data.fname.split("/");
     const filename = splitString[splitString.length - 1];
     return filename;
diff --git a/src/components/Common/index.tsx b/src/components/Common/index.tsx
index 99d79496c..acef8957d 100644
--- a/src/components/Common/index.tsx
+++ b/src/components/Common/index.tsx
@@ -1,5 +1,5 @@
-import { InfoIcon as InfoIconComponent } from "../Icons";
 import {
+  ClipboardCopy,
   ClipboardCopyButton,
   Dropdown,
   DropdownItem,
@@ -14,12 +14,22 @@ import {
   Hint,
   MenuToggle,
   TextInput,
-  ClipboardCopy,
 } from "@patternfly/react-core";
-import { CubesIcon, SearchIcon } from "../Icons";
 import { Alert, Popover, Spin, Typography } from "antd";
-import React, { ReactNode, useState } from "react";
+import React, { type ReactNode, useState } from "react";
 import Dots from "react-activity/dist/Dots";
+import {
+  ArchiveIcon,
+  CubesIcon,
+  ExternalLinkSquareAltIcon,
+  FileIcon,
+  FileImageIcon,
+  FilePdfIcon,
+  FileTxtIcon,
+  FolderIcon,
+  InfoIcon as InfoIconComponent,
+  SearchIcon,
+} from "../Icons";
 import "react-activity/dist/library.css";
 import { Cookies } from "react-cookie";
 import ReactJson from "react-json-view";
@@ -350,3 +360,26 @@ export const ClipboardCopyFixed = ({
     </ClipboardCopy>
   );
 };
+
+export const getIcon = (type: string) => {
+  switch (type.toLowerCase()) {
+    case "dir":
+      return <FolderIcon />;
+    case "dcm":
+    case "jpg":
+    case "png":
+      return <FileImageIcon />;
+    case "txt":
+      return <FileTxtIcon />;
+    case "pdf":
+      return <FilePdfIcon />;
+    case "zip":
+      return <ArchiveIcon />;
+    case "link":
+      return <ExternalLinkSquareAltIcon />;
+    case "folder":
+      return <FolderIcon />;
+    default:
+      return <FileIcon />;
+  }
+};
diff --git a/src/components/FeedOutputBrowser/FileBrowser.tsx b/src/components/FeedOutputBrowser/FileBrowser.tsx
index a151d730a..a818a6ba6 100644
--- a/src/components/FeedOutputBrowser/FileBrowser.tsx
+++ b/src/components/FeedOutputBrowser/FileBrowser.tsx
@@ -20,28 +20,16 @@ import {
   setSelectedFile,
 } from "../../store/explorer/actions";
 import useDownload, { useTypedSelector } from "../../store/hooks";
-import { ClipboardCopyContainer, SpinContainer } from "../Common";
+import { ClipboardCopyContainer, SpinContainer, getIcon } from "../Common";
 import { ThemeContext } from "../DarkTheme/useTheme";
 import { DrawerActionButton } from "../Feeds/DrawerUtils";
 import { handleMaximize, handleMinimize } from "../Feeds/utilties";
-import {
-  DownloadIcon,
-  ExternalLinkSquareAltIcon,
-  FileIcon,
-  FileImageIcon,
-  FilePdfIcon,
-  FileTxtIcon,
-  FolderIcon,
-  HomeIcon,
-} from "../Icons";
+import { DownloadIcon, HomeIcon } from "../Icons";
 import FileDetailView from "../Preview/FileDetailView";
 import XtkViewer from "../XtkViewer/XtkViewer";
 import type { FileBrowserProps } from "./types";
 import { bytesToSize } from "./utilities";
-
-export const getFileName = (name: string) => {
-  return name.split("/").slice(-1).join("");
-};
+import { getFileExtension } from "../../api/model";
 
 const previewAnimation = [{ opacity: "0.0" }, { opacity: "1.0" }];
 
@@ -193,7 +181,7 @@ const FileBrowser = (props: FileBrowserProps) => {
 
     fileName = pathList[pathList.length - 1];
     if (type === "file" && fileName.indexOf(".") > -1) {
-      iconType = getFileName(fileName)[0].toUpperCase();
+      iconType = getFileExtension(fileName);
       fsize = bytesToSize(item.data.fsize);
     } else {
       iconType = type;
@@ -316,29 +304,3 @@ const FileBrowser = (props: FileBrowserProps) => {
 };
 
 export default FileBrowser;
-
-const getIcon = (type: string) => {
-  switch (type.toLowerCase()) {
-    case "dir":
-      return <FolderIcon />;
-    case "dcm":
-    case "jpg":
-    case "png":
-      return <FileImageIcon />;
-    case "html":
-    case "json":
-      return <FileIcon />;
-    case "txt":
-      return <FileTxtIcon />;
-    case "pdf":
-      return <FilePdfIcon />;
-
-    case "link":
-      return <ExternalLinkSquareAltIcon />;
-    case "folder":
-      return <FolderIcon />;
-
-    default:
-      return <FileIcon />;
-  }
-};
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index 98f59710d..3dc920fa1 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -40,7 +40,6 @@ const CartIcon = ({
   return (
     <svg
       fill="currentColor"
-      className="pf-v5-svg"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 576 512"
       style={style}
diff --git a/src/components/LibraryCopy/FileCard.tsx b/src/components/LibraryCopy/FileCard.tsx
index b755c4cb9..e00a4eda6 100644
--- a/src/components/LibraryCopy/FileCard.tsx
+++ b/src/components/LibraryCopy/FileCard.tsx
@@ -11,7 +11,7 @@ import {
 } from "@patternfly/react-core";
 import { useMutation } from "@tanstack/react-query";
 import { notification } from "antd";
-import axios, { AxiosProgressEvent } from "axios";
+import axios, { type AxiosProgressEvent } from "axios";
 import { useContext, useEffect, useState } from "react";
 import ChrisAPIClient from "../../api/chrisapiclient";
 import { FileViewerModel } from "../../api/model";
diff --git a/src/components/NewLibrary/components/Cart.tsx b/src/components/NewLibrary/components/Cart.tsx
index 899b730bb..8a1dcf436 100644
--- a/src/components/NewLibrary/components/Cart.tsx
+++ b/src/components/NewLibrary/components/Cart.tsx
@@ -46,9 +46,7 @@ const Cart = () => {
           <Button
             style={{ color: "inherit" }}
             variant="danger"
-            onClick={() => {
-              console.log("Clicked");
-            }}
+            onClick={() => {}}
           >
             Clear Cart
           </Button>
diff --git a/src/components/NewLibrary/components/FileCard.tsx b/src/components/NewLibrary/components/FileCard.tsx
index 313e63b7f..9f8144112 100644
--- a/src/components/NewLibrary/components/FileCard.tsx
+++ b/src/components/NewLibrary/components/FileCard.tsx
@@ -24,6 +24,8 @@ import useLongPress, {
   elipses,
   getBackgroundRowColor,
 } from "../utils/longpress";
+import { getFileExtension } from "../../../api/model";
+import { getIcon } from "../../Common";
 
 type Pagination = {
   totalCount: number;
@@ -43,7 +45,7 @@ export const LinkCard = ({
         const linkName = pathList[pathList.length - 1];
         const creation_date = val.data.creation_date;
         return (
-          <GridItem xl={5} lg={4} xl2={5} md={3} sm={1} key={val.data.fname}>
+          <GridItem xl={4} lg={5} xl2={3} md={6} sm={12} key={val.data.fname}>
             <Card
               isCompact
               isSelectable
@@ -105,9 +107,12 @@ export const SubFileCard = ({ file }: { file: FileBrowserFolderFile }) => {
   const { isSuccess, isError, error: downloadError } = handleDownloadMutation;
 
   const isSelected = selectedPaths.some((payload) => {
-    payload.path === file.data.fname;
+    return payload.path === file.data.fname;
   });
+
   const selectedBgRow = getBackgroundRowColor(isSelected, isDarkTheme);
+  const ext = getFileExtension(file.data.fname);
+  const icon = getIcon(ext);
 
   useEffect(() => {
     if (isSuccess) {
@@ -164,9 +169,7 @@ export const SubFileCard = ({ file }: { file: FileBrowserFolderFile }) => {
         {contextHolder}
         <CardHeader>
           <Split>
-            <SplitItem style={{ marginRight: "1em" }}>
-              <FileIcon />
-            </SplitItem>
+            <SplitItem style={{ marginRight: "1em" }}>{icon}</SplitItem>
 
             <SplitItem>
               <Button
diff --git a/src/components/Preview/FileDetailView.tsx b/src/components/Preview/FileDetailView.tsx
index 695213de6..b1470c859 100644
--- a/src/components/Preview/FileDetailView.tsx
+++ b/src/components/Preview/FileDetailView.tsx
@@ -1,4 +1,4 @@
-import type { FeedFile, PACSFile } from "@fnndsc/chrisapi";
+import type { FileBrowserFolderFile, PACSFile } from "@fnndsc/chrisapi";
 import {
   Button,
   Label,
@@ -8,12 +8,12 @@ import {
   Tooltip,
 } from "@patternfly/react-core";
 import ResetIcon from "@patternfly/react-icons/dist/esm/icons/history-icon";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { Alert } from "antd";
 import * as dicomParser from "dicom-parser";
-import React, { Fragment, ReactElement, useCallback } from "react";
+import React, { Fragment, type ReactElement } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { IFileBlob, fileViewerMap, getFileExtension } from "../../api/model";
+import { fileViewerMap, getFileExtension } from "../../api/model";
 import { useTypedSelector } from "../../store/hooks";
 import { SpinContainer } from "../Common";
 import {
@@ -31,7 +31,7 @@ import { dumpDataSet } from "./displays/dicomUtils/dicomDict";
 const ViewerDisplay = React.lazy(() => import("./displays/ViewerDisplay"));
 
 interface AllProps {
-  selectedFile?: FeedFile | PACSFile;
+  selectedFile?: FileBrowserFolderFile | PACSFile;
   isDicom?: boolean;
   preview: "large" | "small";
   handleNext?: () => void;
@@ -52,7 +52,7 @@ const FileDetailView = (props: AllProps) => {
     Zoom: false,
     previouslyActive: "",
   });
-  const [error, setError] = React.useState("");
+  const [parsingError, setParsingError] = React.useState<string>("");
   const drawerState = useTypedSelector((state) => state.drawers);
 
   const handleKeyboardEvents = (event: any) => {
@@ -82,7 +82,7 @@ const FileDetailView = (props: AllProps) => {
     };
   });
 
-  const displayTagInfo = useCallback((result: any) => {
+  const displayTagInfo = async (result: any) => {
     const reader = new FileReader();
 
     reader.onloadend = async () => {
@@ -99,7 +99,7 @@ const FileDetailView = (props: AllProps) => {
           setTagInfo(merged);
         }
       } catch (error) {
-        setError("Failed to parse the file for dicom tags");
+        setParsingError("Failed to parse the file for dicom tags");
         return {
           blob: undefined,
           file: undefined,
@@ -111,12 +111,21 @@ const FileDetailView = (props: AllProps) => {
     if (result) {
       reader.readAsArrayBuffer(result);
     }
-  }, []);
+  };
+
+  const mutation = useMutation({
+    mutationFn: displayTagInfo,
+    onError: (error: any) => {
+      setParsingError(error.message);
+    },
+  });
 
   const { selectedFile, preview } = props;
 
-  const fetchData = async (selectedFile: FeedFile | PACSFile) => {
-    setError("");
+  const fetchData = async (selectedFile?: FileBrowserFolderFile | PACSFile) => {
+    if (!selectedFile) {
+      throw new Error("Please select a file to preview");
+    }
     const fileName = selectedFile.data.fname;
     const fileType = getFileExtension(fileName);
 
@@ -125,13 +134,18 @@ const FileDetailView = (props: AllProps) => {
         blob: undefined,
         file: selectedFile,
         fileType,
-        url: selectedFile?.collection.items[0].links[0].href, // Corrected semicolon to comma
+        url: selectedFile?.collection.items[0].links[0].href,
       };
     }
 
     try {
       const blob = await selectedFile.getFileBlob();
 
+      if (blob.size > 500 * 1024 * 1024 && !fileTypes.includes(fileType)) {
+        throw new Error(
+          "Unsupported file format. File size exceeds 500mb and can lead to a browser crash if displayed as Text",
+        );
+      }
       return {
         blob,
         file: selectedFile,
@@ -139,24 +153,23 @@ const FileDetailView = (props: AllProps) => {
         url: "",
       };
     } catch (error: any) {
-      setError("Failed to fetch the data for preview");
-      throw error;
+      throw error?.message ? error.message : "Failed to fetch this file format";
     }
   };
 
-  const { data, isLoading }: { data?: IFileBlob; isLoading: boolean } =
-    useQuery({
-      queryKey: ["preview", selectedFile],
-      queryFn: () => selectedFile && fetchData(selectedFile),
-      enabled: !!selectedFile,
-    });
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ["preview", selectedFile],
+    queryFn: () => fetchData(selectedFile),
+    enabled: !!selectedFile,
+  });
 
   let viewerName = "";
 
   if (data?.fileType) {
     const { fileType } = data;
+
     if (!fileViewerMap[fileType]) {
-      viewerName = "TextDisplay";
+      viewerName = "CatchallDisplay";
     } else {
       viewerName = fileViewerMap[fileType];
     }
@@ -164,7 +177,7 @@ const FileDetailView = (props: AllProps) => {
 
   const handleEvents = (action: string, previouslyActive: string) => {
     if (action === "TagInfo" && data) {
-      displayTagInfo(data.blob);
+      mutation.mutate(data.blob);
     }
     const currentAction = actionState[action];
     setActionState({
@@ -196,7 +209,7 @@ const FileDetailView = (props: AllProps) => {
         <Text component="p">
           {error
             ? error
-            : "Oh snap ! Looks like there was an error. Please refresh the browser or try again."}
+            : "Oh snap! Looks like there was an error. Please refresh the browser or try again."}
         </Text>
       </Label>
     </span>
@@ -222,7 +235,9 @@ const FileDetailView = (props: AllProps) => {
               <SpinContainer title="Please wait as the file is being fetched..." />
             )}
 
-            {error && <Alert closable type="error" description={error} />}
+            {isError && (
+              <Alert closable type="error" description={error.message} />
+            )}
 
             {data && (
               <ViewerDisplay
@@ -241,7 +256,7 @@ const FileDetailView = (props: AllProps) => {
             }}
             isModalOpen={actionState.TagInfo as boolean}
             output={tagInfo}
-            parsingError={error}
+            parsingError={parsingError}
           />
         </ErrorBoundary>
       </React.Suspense>
@@ -283,7 +298,6 @@ const actions = [
     name: "Length",
     icon: <RulerIcon />,
   },
-
   {
     name: "TagInfo",
     icon: <InfoIcon />,
diff --git a/src/components/Preview/displays/CatchallDisplay.tsx b/src/components/Preview/displays/CatchallDisplay.tsx
index fbe73e31c..46690b436 100644
--- a/src/components/Preview/displays/CatchallDisplay.tsx
+++ b/src/components/Preview/displays/CatchallDisplay.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
-import { Alert } from "@patternfly/react-core";
-import { IFileBlob } from "../../../api/model";
+import { memo } from "react";
+import { Alert } from "antd";
+import type { IFileBlob } from "../../../api/model";
 
 type AllProps = {
   fileItem: IFileBlob;
@@ -12,25 +12,17 @@ const CatchallDisplay: React.FunctionComponent<AllProps> = (
   const noPreviewMessage = () => {
     const { fileItem } = props;
     const ext = fileItem.fileType ? fileItem.fileType : "";
-    const alertText = (
-      <React.Fragment>
-        <label>
-          <b>File Type:</b> {ext}
-        </label>
-      </React.Fragment>
-    );
+
     return (
       <Alert
-        variant="info"
-        title={`No preview available for the filetype ${ext}`}
-      >
-        {alertText}
-      </Alert>
+        type="info"
+        description={`No preview available for the filetype ${ext}`}
+      />
     );
   };
   return noPreviewMessage();
 };
 
-const MemoedCatchAllDisplay = React.memo(CatchallDisplay);
+const MemoedCatchAllDisplay = memo(CatchallDisplay);
 
 export default MemoedCatchAllDisplay;
diff --git a/src/components/Preview/displays/ViewerDisplay.tsx b/src/components/Preview/displays/ViewerDisplay.tsx
index ea1f7ff14..c169584e8 100644
--- a/src/components/Preview/displays/ViewerDisplay.tsx
+++ b/src/components/Preview/displays/ViewerDisplay.tsx
@@ -1,18 +1,18 @@
-import * as React from "react";
-import { IFileBlob } from "../../../api/model";
+import type * as React from "react";
+import type { IFileBlob } from "../../../api/model";
+import type { ActionState } from "../FileDetailView";
 import {
   CatchallDisplay,
-  JsonDisplay,
+  DcmDisplay,
   IframeDisplay,
   ImageDisplay,
-  DcmDisplay,
+  JsonDisplay,
+  NiiVueDisplay,
   PdfDisplay,
-  XtkDisplay,
   TextDisplay,
-  NiiVueDisplay,
   VideoDisplay,
+  XtkDisplay,
 } from "./index";
-import { ActionState } from "../FileDetailView";
 
 const components = {
   JsonDisplay,
diff --git a/src/store/cart/saga.ts b/src/store/cart/saga.ts
index b494e7184..941d0e33e 100644
--- a/src/store/cart/saga.ts
+++ b/src/store/cart/saga.ts
@@ -178,7 +178,6 @@ function* handleIndividualDownload(
     }
     yield setStatus(type, id, "finished");
   } catch (e) {
-    console.error(e);
     yield setStatus(type, id, "cancelled");
   }
 }
diff --git a/src/store/hooks.ts b/src/store/hooks.ts
index 467dfacec..bf8419f81 100644
--- a/src/store/hooks.ts
+++ b/src/store/hooks.ts
@@ -4,12 +4,12 @@ export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
 import type { Feed, FileBrowserFolderFile } from "@fnndsc/chrisapi";
 import { useMutation } from "@tanstack/react-query";
 import ChrisAPIClient from "../api/chrisapiclient";
-import { getFileName } from "../components/FeedOutputBrowser/FileBrowser";
+import { getFileName } from "../api/common";
 
 export const createLinkAndDownload = (url: string, fileName: string) => {
   const link = document.createElement("a");
   link.href = url;
-  //link.target = 'blank';
+  link.target = "blank";
   link.download = fileName;
   document.body.appendChild(link);
   link.click();
@@ -27,7 +27,6 @@ export const downloadPublicFile = async (file: FileBrowserFolderFile) => {
 };
 
 export const downloadFile = async (file: FileBrowserFolderFile) => {
-  console.log("File", file);
   const fileName = getFileName(file.data.fname);
   const client = ChrisAPIClient.getClient();
   const response = await client.createDownloadToken();