diff --git a/components/log-viewer-webui/client/settings.json b/components/log-viewer-webui/client/settings.json
index cc1fe697c7..5bbc0333c3 100644
--- a/components/log-viewer-webui/client/settings.json
+++ b/components/log-viewer-webui/client/settings.json
@@ -1,3 +1,4 @@
 {
-    "MongoDbSearchResultsMetadataCollectionName": "results-metadata"
+    "MongoDbSearchResultsMetadataCollectionName": "results-metadata",
+    "ClpStorageEngine": "clp"
 }
diff --git a/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsx b/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsx
index 765bab8129..474fe4158b 100644
--- a/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsx
+++ b/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/LogViewerLink.tsx
@@ -1,21 +1,19 @@
+import {Link} from "react-router";
+
 import {LinkOutlined} from "@ant-design/icons";
 import {
     Tooltip,
     Typography,
 } from "antd";
 
+import {STREAM_TYPE} from "../utils";
 import styles from "./index.module.css";
 
 
-const {Link} = Typography;
-
-// eslint-disable-next-line no-warning-comments
-// TODO: Fix link to connect to package log viewer when log viewer setup finished. Also pass
-// proper args to package log viewer.
-const LOG_VIEWER_URL = "https://y-scope.github.io/yscope-log-viewer/";
-
 interface LogViewerLinkProps {
     filePath: string;
+    logEventIdx: number;
+    streamId: string;
 }
 
 /**
@@ -23,18 +21,32 @@ interface LogViewerLinkProps {
  *
  * @param props
  * @param props.filePath
+ * @param props.logEventIdx
+ * @param props.streamId
  * @return
  */
-const LogViewerLink = ({filePath}: LogViewerLinkProps) => (
+const LogViewerLink = ({
+    filePath,
+    logEventIdx,
+    streamId,
+}: LogViewerLinkProps) => (
     <Tooltip title={"Open file"}>
-        <Link
-            href={LOG_VIEWER_URL}
-            target={"_blank"}
-            type={"secondary"}
-        >
-            <LinkOutlined className={styles["linkIcon"] || ""}/>
-            {filePath}
-        </Link>
+        <Typography.Link>
+            <Link
+                className={styles["linkIcon"] || ""}
+                target={"_blank"}
+                to={{
+                    pathname: "/streamFile",
+                    search:
+                        `?type=${encodeURIComponent(STREAM_TYPE)}` +
+                        `&streamId=${encodeURIComponent(streamId)}` +
+                        `&logEventIdx=${encodeURIComponent(logEventIdx)}`,
+                }}
+            >
+                <LinkOutlined/>
+                {filePath}
+            </Link>
+        </Typography.Link>
     </Tooltip>
 );
 
diff --git a/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/index.tsx b/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/index.tsx
index 83b1d660e7..d289c60629 100644
--- a/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/index.tsx
+++ b/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/Message/index.tsx
@@ -11,19 +11,28 @@ import "highlight.js/styles/intellij-light.css";
 const {Text} = Typography;
 
 interface MessageProps {
-    message: string;
     filePath: string;
+    message: string;
+    logEventIdx: number;
+    streamId: string;
 }
 
 /**
  * Renders a message with syntax highlighting and a file path link.
  *
  * @param props
- * @param props.message
  * @param props.filePath
+ * @param props.logEventIdx
+ * @param props.message
+ * @param props.streamId
  * @return
  */
-const Message = ({message, filePath}: MessageProps) => {
+const Message = ({
+    message,
+    filePath,
+    streamId,
+    logEventIdx,
+}: MessageProps) => {
     return (
         <>
             {/* Parent `Text` component allows syntax highlighter to inherit AntD fonts. */}
@@ -37,7 +46,10 @@ const Message = ({message, filePath}: MessageProps) => {
                     {message}
                 </SyntaxHighlighter>
             </Text>
-            <LogViewerLink filePath={filePath}/>
+            <LogViewerLink
+                filePath={filePath}
+                logEventIdx={logEventIdx}
+                streamId={streamId}/>
         </>
     );
 };
diff --git a/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/typings.tsx b/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/typings.tsx
index 73759560c6..b9038b33c8 100644
--- a/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/typings.tsx
+++ b/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/typings.tsx
@@ -3,6 +3,7 @@ import dayjs from "dayjs";
 
 import {DATETIME_FORMAT_TEMPLATE} from "../../../../typings/datetime";
 import Message from "./Message";
+import {getStreamId} from "./utils";
 
 
 /**
@@ -10,12 +11,13 @@ import Message from "./Message";
  */
 interface SearchResult {
     _id: string;
-    timestamp: number;
-    message: string;
+    archive_id: string;
     filePath: string;
-    orig_file_path: string;
-    orig_file_id: string;
     log_event_ix: number;
+    message: string;
+    orig_file_id: string;
+    orig_file_path: string;
+    timestamp: number;
 }
 
 /**
@@ -36,7 +38,9 @@ const searchResultsTableColumns: NonNullable<TableProps<SearchResult>["columns"]
         render: (_, record) => (
             <Message
                 filePath={record.orig_file_path}
-                message={record.message}/>
+                logEventIdx={record.log_event_ix}
+                message={record.message}
+                streamId={getStreamId(record)}/>
         ),
         title: "Message",
         width: 85,
diff --git a/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/utils.ts b/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/utils.ts
new file mode 100644
index 0000000000..5cc73495b2
--- /dev/null
+++ b/components/log-viewer-webui/client/src/pages/SearchPage/SearchResults/SearchResultsTable/utils.ts
@@ -0,0 +1,30 @@
+import settings from "../../../../../settings.json";
+import type {SearchResult} from "./typings";
+
+
+const SETTINGS_STORAGE_ENGINE = settings.ClpStorageEngine;
+
+/**
+ * Stream type based on the storage engine (i.e. clp vs. clp-s).
+ */
+const STREAM_TYPE = "clp" === SETTINGS_STORAGE_ENGINE ?
+    "ir" :
+    "json";
+
+/**
+ * Returns the stream id based on the storage engine.
+ *
+ * @param result The search result object.
+ * @return The stream id string, either from orig_file_id or archive_id.
+ */
+const getStreamId = (result: SearchResult): string => {
+    return "clp" === SETTINGS_STORAGE_ENGINE ?
+        result.orig_file_id :
+        result.archive_id;
+};
+
+
+export {
+    getStreamId,
+    STREAM_TYPE,
+};
diff --git a/components/log-viewer-webui/client/src/router.tsx b/components/log-viewer-webui/client/src/router.tsx
index 3243f1a110..977a026db9 100644
--- a/components/log-viewer-webui/client/src/router.tsx
+++ b/components/log-viewer-webui/client/src/router.tsx
@@ -6,6 +6,7 @@ import {
 import MainLayout from "./components/Layout/MainLayout";
 import IngestPage from "./pages/IngestPage";
 import SearchPage from "./pages/SearchPage";
+import QueryStatus from "./ui/QueryStatus";
 
 
 const router = createBrowserRouter([
@@ -23,6 +24,10 @@ const router = createBrowserRouter([
             {path: "search", Component: SearchPage},
         ],
     },
+    {
+        path: "/streamFile",
+        Component: QueryStatus,
+    },
 ]);
 
 
diff --git a/components/log-viewer-webui/server/src/routes/static.ts b/components/log-viewer-webui/server/src/routes/static.ts
index f63d3700b4..2c7ed4b6f8 100644
--- a/components/log-viewer-webui/server/src/routes/static.ts
+++ b/components/log-viewer-webui/server/src/routes/static.ts
@@ -49,6 +49,11 @@ const routes: FastifyPluginAsync = async (fastify) => {
             prefix: "/",
             root: clientDir,
             decorateReply: false,
+            wildcard: false,
+        });
+
+        fastify.get("/streamFile", (_, reply) => {
+            reply.sendFile("index.html", clientDir);
         });
     }
 };