diff --git a/app/api/api/settings.py b/app/api/api/settings.py
index b49debb0..b6b375bb 100644
--- a/app/api/api/settings.py
+++ b/app/api/api/settings.py
@@ -56,6 +56,7 @@
     "model_control",
     "vector_db_control",
     "corsheaders",
+    "logs_control",
 ]
 
 MIDDLEWARE = [
diff --git a/app/api/api/urls.py b/app/api/api/urls.py
index 28e6d331..28ee8856 100644
--- a/app/api/api/urls.py
+++ b/app/api/api/urls.py
@@ -30,4 +30,5 @@
     path("models/", include("model_control.urls")),
     path('reset_board/', include('docker_control.urls')),
     path("collections/", include("vector_db_control.urls")),
+    path("logs/", include("logs_control.urls")),
 ]
diff --git a/app/api/logs_control/__init__.py b/app/api/logs_control/__init__.py
new file mode 100644
index 00000000..deca65cf
--- /dev/null
+++ b/app/api/logs_control/__init__.py
@@ -0,0 +1,3 @@
+# SPDX-License-Identifier: Apache-2.0
+#
+# SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
\ No newline at end of file
diff --git a/app/api/logs_control/urls.py b/app/api/logs_control/urls.py
new file mode 100644
index 00000000..47f333ff
--- /dev/null
+++ b/app/api/logs_control/urls.py
@@ -0,0 +1,10 @@
+# SPDX-License-Identifier: Apache-2.0
+# SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+
+from django.urls import path
+from .views import ListLogsView, GetLogView
+
+urlpatterns = [
+    path('', ListLogsView.as_view(), name='list_logs'),
+    path('<path:filename>/', GetLogView.as_view(), name='get_log'),  # Use <path:filename> for multi-directory paths
+]
\ No newline at end of file
diff --git a/app/api/logs_control/views.py b/app/api/logs_control/views.py
new file mode 100644
index 00000000..428a5a2b
--- /dev/null
+++ b/app/api/logs_control/views.py
@@ -0,0 +1,81 @@
+# SPDX-License-Identifier: Apache-2.0
+# SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+
+import os
+from urllib.parse import unquote
+from django.http import JsonResponse, HttpResponse, Http404
+from rest_framework.views import APIView
+from shared_config.logger_config import get_logger
+
+# Setting up logger
+logger = get_logger(__name__)
+
+# Use environment variable for the base storage volume
+LOGS_ROOT = os.getenv("INTERNAL_PERSISTENT_STORAGE_VOLUME", "/path/to/fallback")
+
+class ListLogsView(APIView):
+    """
+    Lists all available directories and log files within the base logs directory
+    """
+    def get(self, request, *args, **kwargs):
+        logger.info("ListLogsView endpoint hit")
+        try:
+            logs_tree = self.build_logs_tree(LOGS_ROOT)
+            logger.info(f"Log tree built: {logs_tree}")
+            return JsonResponse({'logs': logs_tree}, status=200)
+        except Exception as e:
+            logger.error(f"Error listing logs: {e}")
+            return JsonResponse({'error': str(e)}, status=500)
+
+    def build_logs_tree(self, directory):
+        """
+        Recursively build a tree of directories and files.
+        """
+        tree = []
+        for entry in os.listdir(directory):
+            path = os.path.join(directory, entry)
+            if os.path.isdir(path):
+                tree.append({
+                    "name": entry,
+                    "type": "directory",
+                    "children": self.build_logs_tree(path)
+                })
+            elif entry.endswith(".log"):
+                tree.append({
+                    "name": entry,
+                    "type": "file"
+                })
+        return tree
+
+
+class GetLogView(APIView):
+    """
+    Retrieves the content of a specific log file from the logs directory.
+    """
+    def get(self, request, filename, *args, **kwargs):
+    
+        decoded_filename = unquote(filename)
+        
+        file_path = os.path.normpath(os.path.join(LOGS_ROOT, decoded_filename))
+        
+        # Security check: Ensure the resolved path is within LOGS_ROOT
+        if not file_path.startswith(os.path.abspath(LOGS_ROOT)):
+            logger.error(f"Invalid log file path: {file_path}")
+            raise Http404("Invalid file path.")
+        
+        logger.info(f"Looking for log file at: {file_path}")
+        
+     
+        if os.path.exists(file_path) and os.path.isfile(file_path):
+            try:
+                with open(file_path, 'r') as file:
+                    content = file.read()
+                logger.info(f"Successfully retrieved content for log: {decoded_filename}")
+                return HttpResponse(content, content_type='text/plain')
+            except Exception as e:
+                logger.error(f"Error reading log file {decoded_filename}: {e}")
+                return JsonResponse({'error': str(e)}, status=500)
+        else:
+            logger.error(f"Log file {decoded_filename} not found at {file_path}")
+            raise Http404(f"Log file {decoded_filename} not found.")
+
diff --git a/app/api/model_control/model_utils.py b/app/api/model_control/model_utils.py
index dfc846ed..3c7669fe 100644
--- a/app/api/model_control/model_utils.py
+++ b/app/api/model_control/model_utils.py
@@ -34,21 +34,34 @@ def get_all_records():
     data = get_all_records()
     return data
 
-
 def stream_response_from_external_api(url, json_data):
     logger.info(f"stream_response_from_external_api to: url={url}")
     try:
         headers = {"Authorization": f"Bearer {encoded_jwt}"}
+        logger.info(f"stream_response_from_external_api headers:={headers}")
+        logger.info(f"stream_response_from_external_api json_data:={json_data}")
+        json_data["temperature"] = 1
+        json_data["max_tokens"] = 128
+        logger.info(f"added extra token and temp!:={json_data}")
+        
         with requests.post(
             url, json=json_data, headers=headers, stream=True, timeout=None
         ) as response:
+            logger.info(f"stream_response_from_external_api response:={response}")
             response.raise_for_status()
             logger.info(f"response.headers:={response.headers}")
             logger.info(f"response.encoding:={response.encoding}")
             # only allow HTTP 1.1 chunked encoding
             assert response.headers.get("transfer-encoding") == "chunked"
-            # Note: chunk_size=None must be passed or it will chunk single chars
+
+            # Stream chunks
             for chunk in response.iter_content(chunk_size=None, decode_unicode=True):
+                logger.info(f"stream_response_from_external_api chunk:={chunk}")
                 yield chunk
+            
+            # Append the custom end marker after the last chunk
+            yield "<<END_OF_STREAM>>"  # Custom marker to signal end of stream
+
+            logger.info("stream_response_from_external done")
     except requests.RequestException as e:
         yield str(e)
diff --git a/app/api/shared_config/model_config.py b/app/api/shared_config/model_config.py
index 526712ac..c62856ed 100644
--- a/app/api/shared_config/model_config.py
+++ b/app/api/shared_config/model_config.py
@@ -25,9 +25,7 @@ class ModelImpl:
     model_id: str
     image_name: str
     image_tag: str
-    device_configurations: Set[
-        "DeviceConfigurations"
-    ]  # Assuming DeviceConfigurations is an enum or similar
+    device_configurations: Set["DeviceConfigurations"]
     docker_config: Dict[str, Any]
     user_uid: int  # user inside docker container uid (for file permissions)
     user_gid: int  # user inside docker container gid (for file permissions)
@@ -41,6 +39,10 @@ def __post_init__(self):
         self.docker_config["environment"]["HF_HOME"] = Path(
             backend_config.model_container_cache_root
         ).joinpath("huggingface")
+        
+        # Set environment variable if N150 or N300x4 is in the device configurations
+        if DeviceConfigurations.N150 in self.device_configurations or DeviceConfigurations.N300x4 in self.device_configurations:
+            self.docker_config["environment"]["WH_ARCH_YAML"] = "wormhole_b0_80_arch_eth_dispatch.yaml"
 
     @property
     def image_version(self) -> str:
@@ -150,9 +152,34 @@ def base_docker_config():
         service_port=7000,
         service_route="/inference/falcon7b",
     ),
+        ModelImpl(
+        model_name="Llama3.1-70bv0.0.1-instruct",
+        model_id="id_tt-metal-llama-3.1-70b-instructv0.0.1",
+        image_name="ghcr.io/tenstorrent/tt-inference-server/tt-metal-llama3-70b-src-base-inference",
+        image_tag="v0.0.1-tt-metal-v0.52.0-rc31-9d3be887987b",
+        device_configurations={DeviceConfigurations.N300x4},
+        docker_config=base_docker_config(),
+        user_uid=1000,
+        user_gid=1000,
+        shm_size="32G",
+        service_port=7000,
+        service_route="/inference/llama3-70b",
+    ),
+    ModelImpl(
+        model_name="Mistral7B-instruct-v0.2",
+        model_id="id_tt-metal-mistral-7bv0.0.2",
+        image_name="ghcr.io/tenstorrent/tt-inference-server/tt-metal-mistral-7b-src-base",
+        image_tag="v0.0.3-tt-metal-v0.52.0-rc33",
+        device_configurations={DeviceConfigurations.N300x4},
+        docker_config=base_docker_config(),
+        user_uid=1000,
+        user_gid=1000,
+        shm_size="32G",
+        service_port=7000,
+        service_route="/inference/mistral7b",
+    )
 ]
 
-
 def validate_model_implemenation_config(impl):
     # no / in model_id strings, model_id will be used in path names
     assert not "/" in impl.model_id
diff --git a/app/frontend/index.html b/app/frontend/index.html
index 383f2f4e..d2de22e2 100644
--- a/app/frontend/index.html
+++ b/app/frontend/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="./src/assets/tt_logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>llm studio v0.0</title>
+    <title>llm studio v1.0</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
index 72ad382c..4fb719a1 100644
--- a/app/frontend/package-lock.json
+++ b/app/frontend/package-lock.json
@@ -26,7 +26,7 @@
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.0.7",
-        "@tanstack/react-query": "^5.35.1",
+        "@tanstack/react-query": "^5.56.2",
         "axios": "^1.6.8",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -2234,9 +2234,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.0.tgz",
-      "integrity": "sha512-JlPfZ/C7yn5S5p0yKk7uhHTTnFlvTgLetl2VxqE518QgyM7C9bSfFTYvB/Q/ftkq0RIPY4ySxTz+/wKJ/dXC0w==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.3.tgz",
+      "integrity": "sha512-MmKSfaB9GX+zXl6E8z4koOr/xU63AMVleLEa64v7R0QF/ZloMs5vcD1sHgM64GXXS1csaJutG+ddtzcueI/BLg==",
       "cpu": [
         "arm"
       ],
@@ -2247,9 +2247,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.19.0.tgz",
-      "integrity": "sha512-RDxUSY8D1tWYfn00DDi5myxKgOk6RvWPxhmWexcICt/MEC6yEMr4HNCu1sXXYLw8iAsg0D44NuU+qNq7zVWCrw==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.3.tgz",
+      "integrity": "sha512-zrt8ecH07PE3sB4jPOggweBjJMzI1JG5xI2DIsUbkA+7K+Gkjys6eV7i9pOenNSDJH3eOr/jLb/PzqtmdwDq5g==",
       "cpu": [
         "arm64"
       ],
@@ -2260,9 +2260,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.19.0.tgz",
-      "integrity": "sha512-emvKHL4B15x6nlNTBMtIaC9tLPRpeA5jMvRLXVbl/W9Ie7HhkrE7KQjvgS9uxgatL1HmHWDXk5TTS4IaNJxbAA==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.3.tgz",
+      "integrity": "sha512-P0UxIOrKNBFTQaXTxOH4RxuEBVCgEA5UTNV6Yz7z9QHnUJ7eLX9reOd/NYMO3+XZO2cco19mXTxDMXxit4R/eQ==",
       "cpu": [
         "arm64"
       ],
@@ -2273,9 +2273,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.19.0.tgz",
-      "integrity": "sha512-fO28cWA1dC57qCd+D0rfLC4VPbh6EOJXrreBmFLWPGI9dpMlER2YwSPZzSGfq11XgcEpPukPTfEVFtw2q2nYJg==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.3.tgz",
+      "integrity": "sha512-L1M0vKGO5ASKntqtsFEjTq/fD91vAqnzeaF6sfNAy55aD+Hi2pBI5DKwCO+UNDQHWsDViJLqshxOahXyLSh3EA==",
       "cpu": [
         "x64"
       ],
@@ -2286,9 +2286,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.19.0.tgz",
-      "integrity": "sha512-2Rn36Ubxdv32NUcfm0wB1tgKqkQuft00PtM23VqLuCUR4N5jcNWDoV5iBC9jeGdgS38WK66ElncprqgMUOyomw==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.3.tgz",
+      "integrity": "sha512-btVgIsCjuYFKUjopPoWiDqmoUXQDiW2A4C3Mtmp5vACm7/GnyuprqIDPNczeyR5W8rTXEbkmrJux7cJmD99D2g==",
       "cpu": [
         "arm"
       ],
@@ -2299,9 +2299,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.19.0.tgz",
-      "integrity": "sha512-gJuzIVdq/X1ZA2bHeCGCISe0VWqCoNT8BvkQ+BfsixXwTOndhtLUpOg0A1Fcx/+eA6ei6rMBzlOz4JzmiDw7JQ==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.3.tgz",
+      "integrity": "sha512-zmjbSphplZlau6ZTkxd3+NMtE4UKVy7U4aVFMmHcgO5CUbw17ZP6QCgyxhzGaU/wFFdTfiojjbLG3/0p9HhAqA==",
       "cpu": [
         "arm"
       ],
@@ -2312,9 +2312,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.19.0.tgz",
-      "integrity": "sha512-0EkX2HYPkSADo9cfeGFoQ7R0/wTKb7q6DdwI4Yn/ULFE1wuRRCHybxpl2goQrx4c/yzK3I8OlgtBu4xvted0ug==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.3.tgz",
+      "integrity": "sha512-nSZfcZtAnQPRZmUkUQwZq2OjQciR6tEoJaZVFvLHsj0MF6QhNMg0fQ6mUOsiCUpTqxTx0/O6gX0V/nYc7LrgPw==",
       "cpu": [
         "arm64"
       ],
@@ -2325,9 +2325,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.19.0.tgz",
-      "integrity": "sha512-GlIQRj9px52ISomIOEUq/IojLZqzkvRpdP3cLgIE1wUWaiU5Takwlzpz002q0Nxxr1y2ZgxC2obWxjr13lvxNQ==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.3.tgz",
+      "integrity": "sha512-MnvSPGO8KJXIMGlQDYfvYS3IosFN2rKsvxRpPO2l2cum+Z3exiExLwVU+GExL96pn8IP+GdH8Tz70EpBhO0sIQ==",
       "cpu": [
         "arm64"
       ],
@@ -2338,9 +2338,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.19.0.tgz",
-      "integrity": "sha512-N6cFJzssruDLUOKfEKeovCKiHcdwVYOT1Hs6dovDQ61+Y9n3Ek4zXvtghPPelt6U0AH4aDGnDLb83uiJMkWYzQ==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.3.tgz",
+      "integrity": "sha512-+W+p/9QNDr2vE2AXU0qIy0qQE75E8RTwTwgqS2G5CRQ11vzq0tbnfBd6brWhS9bCRjAjepJe2fvvkvS3dno+iw==",
       "cpu": [
         "ppc64"
       ],
@@ -2351,9 +2351,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.19.0.tgz",
-      "integrity": "sha512-2DnD3mkS2uuam/alF+I7M84koGwvn3ZVD7uG+LEWpyzo/bq8+kKnus2EVCkcvh6PlNB8QPNFOz6fWd5N8o1CYg==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.3.tgz",
+      "integrity": "sha512-yXH6K6KfqGXaxHrtr+Uoy+JpNlUlI46BKVyonGiaD74ravdnF9BUNC+vV+SIuB96hUMGShhKV693rF9QDfO6nQ==",
       "cpu": [
         "riscv64"
       ],
@@ -2364,9 +2364,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.19.0.tgz",
-      "integrity": "sha512-D6pkaF7OpE7lzlTOFCB2m3Ngzu2ykw40Nka9WmKGUOTS3xcIieHe82slQlNq69sVB04ch73thKYIWz/Ian8DUA==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.3.tgz",
+      "integrity": "sha512-R8cwY9wcnApN/KDYWTH4gV/ypvy9yZUHlbJvfaiXSB48JO3KpwSpjOGqO4jnGkLDSk1hgjYkTbTt6Q7uvPf8eg==",
       "cpu": [
         "s390x"
       ],
@@ -2377,9 +2377,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.19.0.tgz",
-      "integrity": "sha512-HBndjQLP8OsdJNSxpNIN0einbDmRFg9+UQeZV1eiYupIRuZsDEoeGU43NQsS34Pp166DtwQOnpcbV/zQxM+rWA==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.3.tgz",
+      "integrity": "sha512-kZPbX/NOPh0vhS5sI+dR8L1bU2cSO9FgxwM8r7wHzGydzfSjLRCFAT87GR5U9scj2rhzN3JPYVC7NoBbl4FZ0g==",
       "cpu": [
         "x64"
       ],
@@ -2390,9 +2390,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.19.0.tgz",
-      "integrity": "sha512-HxfbvfCKJe/RMYJJn0a12eiOI9OOtAUF4G6ozrFUK95BNyoJaSiBjIOHjZskTUffUrB84IPKkFG9H9nEvJGW6A==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.3.tgz",
+      "integrity": "sha512-S0Yq+xA1VEH66uiMNhijsWAafffydd2X5b77eLHfRmfLsRSpbiAWiRHV6DEpz6aOToPsgid7TI9rGd6zB1rhbg==",
       "cpu": [
         "x64"
       ],
@@ -2403,9 +2403,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.19.0.tgz",
-      "integrity": "sha512-HxDMKIhmcguGTiP5TsLNolwBUK3nGGUEoV/BO9ldUBoMLBssvh4J0X8pf11i1fTV7WShWItB1bKAKjX4RQeYmg==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.3.tgz",
+      "integrity": "sha512-9isNzeL34yquCPyerog+IMCNxKR8XYmGd0tHSV+OVx0TmE0aJOo9uw4fZfUuk2qxobP5sug6vNdZR6u7Mw7Q+Q==",
       "cpu": [
         "arm64"
       ],
@@ -2416,9 +2416,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.19.0.tgz",
-      "integrity": "sha512-xItlIAZZaiG/u0wooGzRsx11rokP4qyc/79LkAOdznGRAbOFc+SfEdfUOszG1odsHNgwippUJavag/+W/Etc6Q==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.3.tgz",
+      "integrity": "sha512-nMIdKnfZfzn1Vsk+RuOvl43ONTZXoAPUUxgcU0tXooqg4YrAqzfKzVenqqk2g5efWh46/D28cKFrOzDSW28gTA==",
       "cpu": [
         "ia32"
       ],
@@ -2429,9 +2429,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.19.0.tgz",
-      "integrity": "sha512-xNo5fV5ycvCCKqiZcpB65VMR11NJB+StnxHz20jdqRAktfdfzhgjTiJ2doTDQE/7dqGaV5I7ZGqKpgph6lCIag==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.3.tgz",
+      "integrity": "sha512-fOvu7PCQjAj4eWDEuD8Xz5gpzFqXzGlxHZozHP4b9Jxv9APtdxL6STqztDzMLuRXEc4UpXGGhx029Xgm91QBeA==",
       "cpu": [
         "x64"
       ],
@@ -2719,27 +2719,27 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.51.9",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.9.tgz",
-      "integrity": "sha512-HsAwaY5J19MD18ykZDS3aVVh+bAt0i7m6uQlFC2b77DLV9djo+xEN7MWQAQQTR8IM+7r/zbozTQ7P0xr0bHuew==",
+      "version": "5.56.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.56.2.tgz",
+      "integrity": "sha512-gor0RI3/R5rVV3gXfddh1MM+hgl0Z4G7tj6Xxpq6p2I03NGPaJ8dITY9Gz05zYYb/EJq9vPas/T4wn9EaDPd4Q==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.51.11",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.11.tgz",
-      "integrity": "sha512-4Kq2x0XpDlpvSnaLG+8pHNH60zEc3mBvb3B2tOMDjcPCi/o+Du3p/9qpPLwJOTliVxxPJAP27fuIhLrsRdCr7A==",
+      "version": "5.56.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.56.2.tgz",
+      "integrity": "sha512-SR0GzHVo6yzhN72pnRhkEFRAHMsUo5ZPzAxfTMvUxFIDVS6W9LYUp6nXW3fcHVdg0ZJl8opSH85jqahvm6DSVg==",
       "dependencies": {
-        "@tanstack/query-core": "5.51.9"
+        "@tanstack/query-core": "5.56.2"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "react": "^18.0.0"
+        "react": "^18 || ^19"
       }
     },
     "node_modules/@tsconfig/node10": {
@@ -6535,9 +6535,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -6567,9 +6567,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.41",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
-      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -6586,8 +6586,8 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -7230,9 +7230,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.19.0.tgz",
-      "integrity": "sha512-5r7EYSQIowHsK4eTZ0Y81qpZuJz+MUuYeqmmYmRMl1nwhdmbiYqt5jwzf6u7wyOzJgYqtCRMtVRKOtHANBz7rA==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.3.tgz",
+      "integrity": "sha512-7sqRtBNnEbcBtMeRVc6VRsJMmpI+JU1z9VTvW8D4gXIYQFz0aLcsE6rRkyghZkLfEgUZgVvOG7A5CVz/VW5GIA==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -7245,22 +7245,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.19.0",
-        "@rollup/rollup-android-arm64": "4.19.0",
-        "@rollup/rollup-darwin-arm64": "4.19.0",
-        "@rollup/rollup-darwin-x64": "4.19.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.19.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.19.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.19.0",
-        "@rollup/rollup-linux-arm64-musl": "4.19.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.19.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.19.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.19.0",
-        "@rollup/rollup-linux-x64-gnu": "4.19.0",
-        "@rollup/rollup-linux-x64-musl": "4.19.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.19.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.19.0",
-        "@rollup/rollup-win32-x64-msvc": "4.19.0",
+        "@rollup/rollup-android-arm-eabi": "4.21.3",
+        "@rollup/rollup-android-arm64": "4.21.3",
+        "@rollup/rollup-darwin-arm64": "4.21.3",
+        "@rollup/rollup-darwin-x64": "4.21.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.21.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.21.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.21.3",
+        "@rollup/rollup-linux-arm64-musl": "4.21.3",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.21.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.21.3",
+        "@rollup/rollup-linux-x64-gnu": "4.21.3",
+        "@rollup/rollup-linux-x64-musl": "4.21.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.21.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.21.3",
+        "@rollup/rollup-win32-x64-msvc": "4.21.3",
         "fsevents": "~2.3.2"
       }
     },
@@ -7433,9 +7433,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8181,14 +8181,14 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.4.tgz",
-      "integrity": "sha512-Cw+7zL3ZG9/NZBB8C+8QbQZmR54GwqIz+WMI4b3JgdYJvX+ny9AjJXqkGQlDXSXRP9rP0B4tbciRMOVEKulVOA==",
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
+      "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.39",
-        "rollup": "^4.13.0"
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -8207,6 +8207,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -8224,6 +8225,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
diff --git a/app/frontend/package.json b/app/frontend/package.json
index cd62af72..aad719ee 100644
--- a/app/frontend/package.json
+++ b/app/frontend/package.json
@@ -29,7 +29,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tanstack/react-query": "^5.35.1",
+    "@tanstack/react-query": "^5.56.2",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
diff --git a/app/frontend/src/api/modelsDeployedApis.ts b/app/frontend/src/api/modelsDeployedApis.ts
index f37e436c..9bfaf4dc 100644
--- a/app/frontend/src/api/modelsDeployedApis.ts
+++ b/app/frontend/src/api/modelsDeployedApis.ts
@@ -117,7 +117,7 @@ export const deleteModel = async (modelId: string): Promise<StopResponse> => {
           `Model ID: ${truncatedModelId} has been reset successfully.`,
         );
       } else {
-        customToast.error(`Model ID: ${truncatedModelId} reset failed.`);
+        customToast.error(`Board Reset failed.`);
       }
 
       console.log(
diff --git a/app/frontend/src/components/ChatComponent.tsx b/app/frontend/src/components/ChatComponent.tsx
deleted file mode 100644
index f50bef4d..00000000
--- a/app/frontend/src/components/ChatComponent.tsx
+++ /dev/null
@@ -1,422 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import React, { useEffect, useState, useRef } from "react";
-import { Card } from "./ui/card";
-import { Button } from "./ui/button";
-import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { useLocation } from "react-router-dom";
-import { Spinner } from "./ui/spinner";
-import { User, ChevronDown } from "lucide-react";
-import { Textarea } from "./ui/textarea";
-import logo from "../assets/tt_logo.svg";
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "./ui/breadcrumb";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
-import { fetchModels } from "../api/modelsDeployedApis";
-import ChatExamples from "./ChatExamples";
-import axios from "axios";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/select";
-import { useQuery } from "react-query";
-import { fetchCollections } from "@/src/pages/rag/";
-
-interface InferenceRequest {
-  deploy_id: string;
-  text: string;
-  rag_context?: { documents: string[] };
-}
-
-interface RagDataSource {
-  id: string;
-  name: string;
-  metadata: Record<string, string>;
-}
-
-interface ChatMessage {
-  sender: "user" | "assistant";
-  text: string;
-}
-
-interface Model {
-  id: string;
-  name: string;
-}
-
-const ChatComponent: React.FC = () => {
-  const location = useLocation();
-  const [textInput, setTextInput] = useState<string>("");
-
-  const [ragDatasource, setRagDatasource] = useState<
-    RagDataSource | undefined
-  >();
-
-  // Fetch collections
-  const { data: ragDataSources } = useQuery("collectionsList", {
-    queryFn: fetchCollections,
-    initialData: [],
-  });
-
-  const [chatHistory, setChatHistory] = useState<ChatMessage[]>([]);
-  const [modelID, setModelID] = useState<string | null>(null);
-  const [modelName, setModelName] = useState<string | null>(null);
-  const [isStreaming, setIsStreaming] = useState(false);
-  const viewportRef = useRef<HTMLDivElement>(null);
-  const bottomRef = useRef<HTMLDivElement>(null);
-  const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);
-  const [modelsDeployed, setModelsDeployed] = useState<Model[]>([]);
-
-  useEffect(() => {
-    if (location.state) {
-      setModelID(location.state.containerID);
-      setModelName(location.state.modelName);
-    }
-
-    const loadModels = async () => {
-      try {
-        const models = await fetchModels();
-        setModelsDeployed(models);
-      } catch (error) {
-        console.error("Error fetching models:", error);
-      }
-    };
-
-    loadModels();
-  }, [location.state]);
-
-  const scrollToBottom = () => {
-    if (viewportRef.current) {
-      viewportRef.current.scrollTo({
-        top: viewportRef.current.scrollHeight,
-        behavior: "smooth",
-      });
-    }
-  };
-
-  const handleScroll = () => {
-    if (viewportRef.current) {
-      const isAtBottom =
-        viewportRef.current.scrollHeight - viewportRef.current.scrollTop <=
-        viewportRef.current.clientHeight + 1;
-      setIsScrollButtonVisible(!isAtBottom);
-    }
-  };
-
-  const getRagContext = async (request: InferenceRequest) => {
-    const ragContext: { documents: string[] } = {
-      documents: [],
-    };
-
-    const response = await axios
-      .get(`/collections-api/${ragDatasource?.name}/query`, {
-        params: { query: request.text },
-      })
-      .catch((e) => {
-        console.error(`Error fetching RAG context ${e}`);
-      });
-
-    if (!response?.data) {
-      return ragContext;
-    }
-
-    ragContext.documents = response.data.documents;
-    return ragContext;
-  };
-
-  const runInference = async (request: InferenceRequest) => {
-    try {
-      if (ragDatasource) {
-        request.rag_context = await getRagContext(request);
-      }
-
-      setIsStreaming(true);
-      const response = await fetch(`/models-api/inference/`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(request),
-      });
-
-      const reader = response.body?.getReader();
-
-      setChatHistory((prevHistory) => [
-        ...prevHistory,
-        { sender: "user", text: textInput },
-      ]);
-      setTextInput("");
-
-      let result = "";
-      if (reader) {
-        let done = false;
-        while (!done) {
-          const { done: streamDone, value } = await reader.read();
-          done = streamDone;
-
-          if (value) {
-            const decoder = new TextDecoder();
-            const chunk = decoder.decode(value);
-            result += chunk;
-            const cleanedResult = result.replace(/<\|endoftext\|>/g, "");
-            setChatHistory((prevHistory) => {
-              const lastMessage = prevHistory[prevHistory.length - 1];
-              if (lastMessage && lastMessage.sender === "assistant") {
-                const updatedHistory = [...prevHistory];
-                updatedHistory[updatedHistory.length - 1] = {
-                  ...lastMessage,
-                  text: cleanedResult,
-                };
-                return updatedHistory;
-              } else {
-                return [
-                  ...prevHistory,
-                  { sender: "assistant", text: cleanedResult },
-                ];
-              }
-            });
-          }
-        }
-      }
-
-      setIsStreaming(false);
-    } catch (error) {
-      console.error("Error running inference:", error);
-      setIsStreaming(false);
-    }
-  };
-
-  const handleInference = () => {
-    if (textInput.trim() === "") return;
-
-    const inferenceRequest: InferenceRequest = {
-      deploy_id: modelID!,
-      text: textInput,
-    };
-
-    if (textInput === "Tell me a fun fact.") {
-      setChatHistory((prevHistory) => [
-        ...prevHistory,
-        { sender: "user", text: textInput },
-        { sender: "assistant", text: "Did you know? Honey never spoils." },
-      ]);
-      setTextInput("");
-      scrollToBottom();
-      return;
-    }
-
-    runInference(inferenceRequest);
-  };
-
-  const RagContextSelector = ({
-    collections,
-    onChange,
-    activeCollection,
-  }: {
-    collections: RagDataSource[];
-    activeCollection?: RagDataSource;
-    onChange: (v: string) => void;
-  }) => (
-    <div className="flex justify-start items-center my-2 align-center text-center">
-      <div className="text-sm align-center mr-4"> Select RAG Datasource </div>
-
-      <Select onValueChange={onChange}>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue
-            placeholder={activeCollection?.name ?? "Select Rag Datasource"}
-          />
-        </SelectTrigger>
-        <SelectContent>
-          {collections.map((c) => {
-            return (
-              <SelectItem key={c.id} value={c.name}>
-                {c.name}
-              </SelectItem>
-            );
-          })}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleInference();
-    }
-  };
-
-  return (
-    <div className="flex flex-col overflow-auto w-10/12 mx-auto">
-      <Card className="flex flex-col w-full h-full">
-        <div className="bg-gray-200 dark:bg-gray-800 rounded-lg p-6 shadow-lg dark:shadow-2xl">
-          <Breadcrumb className="flex items-center">
-            <BreadcrumbList className="flex gap-4 text-lg">
-              <BreadcrumbItem>
-                <BreadcrumbLink
-                  href="/models-deployed"
-                  className="text-gray-600 dark:text-gray-200 hover:text-gray-800 dark:hover:text-white transition-colors duration-300"
-                >
-                  Models Deployed
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator className="mx-4 text-gray-400">
-                /
-              </BreadcrumbSeparator>
-              <BreadcrumbItem>
-                <DropdownMenu>
-                  <DropdownMenuTrigger className="flex items-center gap-1 focus:outline-none">
-                    <BreadcrumbEllipsis className="h-5 w-5 text-gray-600 dark:text-blue-400" />
-                    <span className="sr-only">Toggle menu</span>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start">
-                    {modelsDeployed.map((model) => (
-                      <DropdownMenuItem
-                        key={model.id}
-                        onClick={() => {
-                          setModelID(model.id);
-                          setModelName(model.name);
-                        }}
-                      >
-                        {model.name}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator className="mx-4 text-gray-400">
-                /
-              </BreadcrumbSeparator>
-              <BreadcrumbItem>
-                <BreadcrumbPage className="text-gray-800 dark:text-blue-400 font-bold hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
-                  {modelName}
-                </BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-        <div className="flex flex-col w-full h-full p-8 font-rmMono">
-          <RagContextSelector
-            collections={ragDataSources}
-            onChange={(v: string) => {
-              const dataSource = ragDataSources.find((rds: RagDataSource) => {
-                return rds.name == v;
-              });
-              if (dataSource) {
-                setRagDatasource(dataSource);
-              }
-            }}
-            activeCollection={ragDatasource}
-          />
-          {chatHistory.length === 0 && (
-            <ChatExamples logo={logo} setTextInput={setTextInput} />
-          )}
-          {chatHistory.length > 0 && (
-            <div className="relative flex flex-col h-full">
-              <ScrollArea.Root>
-                <ScrollArea.Viewport
-                  ref={viewportRef}
-                  onScroll={handleScroll}
-                  className="h-[calc(100vh-20rem)] overflow-auto p-4 border rounded-lg"
-                >
-                  {chatHistory.map((message, index) => (
-                    <div
-                      key={index}
-                      className={`chat ${
-                        message.sender === "user" ? "chat-end" : "chat-start"
-                      }`}
-                    >
-                      <div className="chat-image avatar text-left">
-                        <div className="w-10 rounded-full">
-                          {message.sender === "user" ? (
-                            <User className="h-6 w-6 mr-2 text-left" />
-                          ) : (
-                            <img
-                              src={logo}
-                              alt="Tenstorrent Logo"
-                              className="w-8 h-8 rounded-full mr-2"
-                            />
-                          )}
-                        </div>
-                      </div>
-                      <div
-                        className={`chat-bubble ${
-                          message.sender === "user"
-                            ? "bg-TT-green-accent text-white text-left"
-                            : "bg-TT-slate text-white text-left"
-                        }`}
-                      >
-                        {message.text}
-                      </div>
-                    </div>
-                  ))}
-                  <div ref={bottomRef} />
-                </ScrollArea.Viewport>
-                <ScrollArea.Scrollbar orientation="vertical">
-                  <ScrollArea.Thumb />
-                </ScrollArea.Scrollbar>
-              </ScrollArea.Root>
-              {isScrollButtonVisible && (
-                <Button
-                  className="fixed bottom-32 left-1/2 transform -translate-x-1/2 p-2 rounded-full bg-gray-700 text-white z-50"
-                  style={{ zIndex: 50 }}
-                  onClick={scrollToBottom}
-                >
-                  <ChevronDown className="h-6 w-6" />
-                </Button>
-              )}
-            </div>
-          )}
-          <div className="flex items-center pt-4 relative">
-            <Textarea
-              value={textInput}
-              onChange={(e) => setTextInput(e.target.value)}
-              onKeyDown={handleKeyPress}
-              placeholder="Enter text for inference"
-              className="px-4 py-2 border rounded-lg shadow-md w-full pr-24 box-border font-rmMono"
-              disabled={isStreaming}
-              rows={4}
-            />
-            <div
-              className="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer"
-              onClick={handleInference}
-            >
-              <kbd
-                className="kbd kbd-lg bg-gray-800 dark:bg-gray-700 text-white dark:text-gray-300 border border-gray-600 rounded-lg flex items-center justify-center"
-                style={{ padding: "0.5rem 0.75rem", minWidth: "4rem" }}
-              >
-                <div className="flex items-center justify-center space-x-2">
-                  {isStreaming ? (
-                    <Spinner />
-                  ) : (
-                    <div className="flex items-center space-x-1">
-                      <ChevronDown className="h-5 w-5 text-gray-300" />
-                      <span className="text-sm">Enter</span>
-                    </div>
-                  )}
-                </div>
-              </kbd>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-};
-
-export default ChatComponent;
diff --git a/app/frontend/src/components/ChatExamples.tsx b/app/frontend/src/components/ChatExamples.tsx
deleted file mode 100644
index 7c3a05a9..00000000
--- a/app/frontend/src/components/ChatExamples.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import React from "react";
-import { Card } from "./ui/card";
-import { MessageCircle, Smile, CloudSun, Lightbulb } from "lucide-react";
-
-interface ChatExamplesProps {
-  logo: string;
-  setTextInput: React.Dispatch<React.SetStateAction<string>>;
-}
-
-const ChatExamples: React.FC<ChatExamplesProps> = ({ logo, setTextInput }) => {
-  return (
-    <div className="flex flex-col items-center justify-center h-96">
-      <img
-        src={logo}
-        alt="Tenstorrent Logo"
-        className="w-10 h-10 sm:w-14 sm:h-14 transform transition duration-300 hover:scale-110"
-      />
-      <p className="text-gray-500 pt-9 font-rmMono">
-        Start a conversation with LLM Studio Chat...
-      </p>
-      <div className="mt-4">
-        <div className="flex space-x-4 mt-2">
-          <Card
-            className="border border-gray-300 p-4 flex flex-col items-center cursor-pointer rounded-lg hover:bg-zinc-200 dark:hover:bg-zinc-800 transition duration-300"
-            onClick={() => setTextInput("Hello, how are you today?")}
-          >
-            <MessageCircle className="h-6 w-6 mb-2" color="#3b82f6" />
-            <span className="dark:text-gray-300">
-              Hello, how are you today?
-            </span>
-          </Card>
-          <Card
-            className="border border-gray-300 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800 transition duration-300"
-            onClick={() => setTextInput("Can you tell me a joke?")}
-          >
-            <Smile className="h-6 w-6 mb-2" color="#be123c" />
-            <span className="dark:text-gray-300">Can you tell me a joke?</span>
-          </Card>
-          <Card
-            className="border border-gray-300 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800 transition duration-300"
-            onClick={() => setTextInput("What's the weather like?")}
-          >
-            <CloudSun className="h-6 w-6 mb-2" color="#eab308" />
-            <span className="dark:text-gray-300">What's the weather like?</span>
-          </Card>
-          <Card
-            className="border border-gray-300 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800 transition duration-500"
-            onClick={() => setTextInput("Tell me a fun fact.")}
-          >
-            <Lightbulb className="h-6 w-6 mb-2" color="#22c55e" />
-            <span className="dark:text-gray-300">Tell me a fun fact.</span>
-          </Card>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ChatExamples;
diff --git a/app/frontend/src/components/CustomToaster.tsx b/app/frontend/src/components/CustomToaster.tsx
index 7d38efe7..df8db61f 100644
--- a/app/frontend/src/components/CustomToaster.tsx
+++ b/app/frontend/src/components/CustomToaster.tsx
@@ -20,6 +20,15 @@ export const customToast = {
         color: "#fff",
       },
     }),
+  info: (message: string) =>
+    toast(message, {
+      icon: "🔔",
+      style: {
+        borderRadius: "10px",
+        background: "#333",
+        color: "#fff",
+      },
+    }),
   promise: (
     promise: Promise<unknown>,
     messages: { loading: string; success: string; error: string },
diff --git a/app/frontend/src/components/DarkModeToggle.tsx b/app/frontend/src/components/DarkModeToggle.tsx
index 079ebdcc..2088b014 100644
--- a/app/frontend/src/components/DarkModeToggle.tsx
+++ b/app/frontend/src/components/DarkModeToggle.tsx
@@ -14,7 +14,7 @@ const ModeToggle = () => {
   return (
     <Button
       onClick={toggleTheme}
-      variant="outline"
+      variant="navbar"
       size="icon"
       className={`relative inline-flex items-center justify-center p-2 rounded-full transition-all duration-300 ease-in-out group ${
         theme === "dark" ? "hover:bg-zinc-700" : "hover:bg-gray-300"
diff --git a/app/frontend/src/components/DeployModelStep.tsx b/app/frontend/src/components/DeployModelStep.tsx
index 90cd816a..396d4ce9 100644
--- a/app/frontend/src/components/DeployModelStep.tsx
+++ b/app/frontend/src/components/DeployModelStep.tsx
@@ -1,13 +1,22 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 "use client";
+
+import { useCallback, useMemo, useEffect, useState } from "react";
 import { AnimatedDeployButton } from "./magicui/AnimatedDeployButton";
 import { useStepper } from "./ui/stepper";
 import { Weight } from "./SelectionSteps";
 import { StepperFormActions } from "./StepperFormActions";
+import { useModels } from "../providers/ModelsContext";
+import { useRefresh } from "../providers/RefreshContext";
+import { Cpu, Sliders } from "lucide-react";
+import axios from "axios";
 
 export function DeployModelStep({
   handleDeploy,
+  selectedModel,
+  selectedWeight,
+  customWeight,
 }: {
   selectedModel: string | null;
   selectedWeight: string | null;
@@ -15,24 +24,96 @@ export function DeployModelStep({
   handleDeploy: () => Promise<boolean>;
 }) {
   const { nextStep } = useStepper();
+  const { refreshModels } = useModels();
+  const { triggerRefresh } = useRefresh();
+  const [modelName, setModelName] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchModelName = async () => {
+      if (selectedModel) {
+        try {
+          const response = await axios.get(`/docker-api/get_containers/`);
+          const models = response.data;
+          const model = models.find(
+            (m: { id: string; name: string }) => m.id === selectedModel,
+          );
+          if (model) {
+            setModelName(model.name);
+          }
+        } catch (error) {
+          console.error("Error fetching model name:", error);
+        }
+      }
+    };
+
+    fetchModelName();
+  }, [selectedModel]);
+
+  const deployButtonText = useMemo(() => {
+    if (!selectedModel) return "Select a Model";
+    if (!selectedWeight && !customWeight) return "Select a Weight";
+    return "Deploy Model";
+  }, [selectedModel, selectedWeight, customWeight]);
+
+  const isDeployDisabled = !selectedModel || (!selectedWeight && !customWeight);
+
+  const onDeploy = useCallback(async () => {
+    if (isDeployDisabled) return false;
 
-  const onDeploy = async () => {
     const deploySuccess = await handleDeploy();
     if (deploySuccess) {
-      setTimeout(() => {
-        nextStep();
-      }, 1200); // Timing matches the animation for a smooth transition
+      // Refresh the models context
+      await refreshModels();
+
+      // Trigger a global refresh
+      triggerRefresh();
     }
-  };
+    return deploySuccess;
+  }, [handleDeploy, refreshModels, triggerRefresh, isDeployDisabled]);
+
+  const onDeploymentComplete = useCallback(() => {
+    setTimeout(() => {
+      nextStep();
+    }, 650); // Short delay before moving to the next step
+  }, [nextStep]);
 
   return (
     <>
-      <div className="flex flex-col items-center justify-center p-10">
+      <div
+        className="flex flex-col items-center justify-center p-10 overflow-hidden"
+        style={{ minHeight: "300px" }}
+      >
         <AnimatedDeployButton
-          initialText={<span>Deploy Model</span>}
-          changeText={<span>Model Deployed!</span>}
+          initialText={<span>{deployButtonText}</span>}
+          changeText={<span>Deploying Model...</span>}
           onDeploy={onDeploy}
+          disabled={isDeployDisabled}
+          onDeploymentComplete={onDeploymentComplete}
         />
+        <div className="mt-6 flex flex-col items-start justify-center space-y-4">
+          {modelName && (
+            <div className="flex items-center space-x-2">
+              <Cpu className="text-blue-400" />
+              <span className="text-sm text-gray-800 dark:text-gray-400">
+                Model:
+              </span>
+              <span className="text-sm font-medium text-gray-900 dark:text-gray-200">
+                {modelName}
+              </span>
+            </div>
+          )}
+          {(selectedWeight || customWeight) && (
+            <div className="flex items-center space-x-2">
+              <Sliders className="text-blue-400" />
+              <span className="text-sm text-gray-800 dark:text-gray-400">
+                Weight:
+              </span>
+              <span className="text-sm font-medium text-gray-900 dark:text-gray-200">
+                {selectedWeight || (customWeight && customWeight.name)}
+              </span>
+            </div>
+          )}
+        </div>
       </div>
       <StepperFormActions form={null} removeDynamicSteps={() => {}} />
     </>
diff --git a/app/frontend/src/components/HelpIcon.tsx b/app/frontend/src/components/HelpIcon.tsx
index d1822ca5..59c6a4f4 100644
--- a/app/frontend/src/components/HelpIcon.tsx
+++ b/app/frontend/src/components/HelpIcon.tsx
@@ -25,7 +25,7 @@ const HelpIcon: React.FC<HelpIconProps> = ({ toggleSidebar }) => {
 
   return (
     <Button
-      variant="outline"
+      variant="navbar"
       size="icon"
       onClick={handleHelpClick}
       className={`transition duration-300 ${buttonBackgroundColor} ${hoverButtonBackgroundColor}`}
diff --git a/app/frontend/src/components/ModelsDeployedTable.tsx b/app/frontend/src/components/ModelsDeployedTable.tsx
index 8c9d9a00..6f27f579 100644
--- a/app/frontend/src/components/ModelsDeployedTable.tsx
+++ b/app/frontend/src/components/ModelsDeployedTable.tsx
@@ -1,6 +1,9 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import { useState, useEffect } from "react";
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
 import { Card } from "./ui/card";
 import {
   Table,
@@ -15,7 +18,6 @@ import { Button } from "./ui/button";
 import { useTheme } from "../providers/ThemeProvider";
 import CustomToaster, { customToast } from "./CustomToaster";
 import { Spinner } from "./ui/spinner";
-import { useNavigate } from "react-router-dom";
 import CopyableText from "./CopyableText";
 import StatusBadge from "./StatusBadge";
 import HealthBadge from "./HealthBadge";
@@ -29,69 +31,73 @@ import { ScrollArea, ScrollBar } from "./ui/scroll-area";
 import { NoModelsDialog } from "./NoModelsDeployed";
 import { ModelsDeployedSkeleton } from "./ModelsDeployedSkeleton";
 import { useRefresh } from "../providers/RefreshContext";
+import { useModels } from "../providers/ModelsContext";
+import {
+  Box,
+  Image,
+  Activity,
+  Heart,
+  Network,
+  Tag,
+  Settings,
+  Trash2,
+  MessageSquare,
+} from "lucide-react";
 
-interface Model {
-  id: string;
-  image: string;
-  status: string;
-  health: string;
-  ports: string;
-  name: string;
-}
-
-const initialModelsDeployed: Model[] = [];
-
-export function ModelsDeployedTable() {
+export default function ModelsDeployedTable() {
   const navigate = useNavigate();
-  const { refreshTrigger } = useRefresh(); // Access the refreshTrigger state
-  const [modelsDeployed, setModelsDeployed] = useState<Model[]>(
-    initialModelsDeployed,
-  );
+  const { refreshTrigger, triggerRefresh } = useRefresh();
+  const { models, setModels } = useModels();
   const [fadingModels, setFadingModels] = useState<string[]>([]);
+  const [pulsatingModels, setPulsatingModels] = useState<string[]>([]);
   const [loadingModels, setLoadingModels] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const { theme } = useTheme();
 
-  const loadModels = async () => {
+  const loadModels = useCallback(async () => {
     try {
-      const models = await fetchModels();
-      setModelsDeployed(models);
+      const fetchedModels = await fetchModels();
+      setModels(fetchedModels);
+      if (fetchedModels.length === 0) {
+        triggerRefresh();
+      }
     } catch (error) {
       console.error("Error fetching models:", error);
       customToast.error("Failed to fetch models.");
     } finally {
       setLoading(false);
     }
-  };
+  }, [setModels, triggerRefresh]);
 
   useEffect(() => {
     loadModels();
-
-    // Reload models whenever refreshTrigger changes
-    if (refreshTrigger > 0) {
-      loadModels();
-    }
-  }, [refreshTrigger]);
+  }, [loadModels, refreshTrigger]);
 
   const handleDelete = async (modelId: string) => {
     console.log(`Delete button clicked for model ID: ${modelId}`);
     const truncatedModelId = modelId.substring(0, 4);
 
+    setPulsatingModels((prev) => [...prev, modelId]);
+
     const deleteModelAsync = async () => {
       setLoadingModels((prev) => [...prev, modelId]);
       try {
         const response = await deleteModel(modelId);
-
-        // Accessing the reset_response output correctly
         const resetOutput =
           response.reset_response?.output || "No reset output available";
         console.log(`Reset Output in tsx: ${resetOutput}`);
 
         setFadingModels((prev) => [...prev, modelId]);
+
+        const remainingModels = models.filter((model) => model.id !== modelId);
+        if (remainingModels.length === 0) {
+          triggerRefresh();
+        }
       } catch (error) {
         console.error("Error stopping the container:", error);
       } finally {
         setLoadingModels((prev) => prev.filter((id) => id !== modelId));
+        setPulsatingModels((prev) => prev.filter((id) => id !== modelId));
       }
     };
 
@@ -104,18 +110,19 @@ export function ModelsDeployedTable() {
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setModelsDeployed((prevModels) =>
+      setModels((prevModels) =>
         prevModels.filter((model) => !fadingModels.includes(model.id)),
       );
+      setFadingModels([]);
     }, 3000);
     return () => clearTimeout(timer);
-  }, [fadingModels]);
+  }, [fadingModels, setModels]);
 
   if (loading) {
     return <ModelsDeployedSkeleton />;
   }
 
-  if (modelsDeployed.length === 0) {
+  if (models.length === 0) {
     return <NoModelsDialog messageKey="reset" />;
   }
 
@@ -135,53 +142,74 @@ export function ModelsDeployedTable() {
                   : "bg-zinc-200 rounded-lg"
               }`}
             >
-              <TableHead className="text-left">Container ID</TableHead>
-              <TableHead className="text-left">Image</TableHead>
-              <TableHead className="text-left">Status</TableHead>
-              <TableHead className="text-left">Health</TableHead>
-              <TableHead className="text-left">Ports</TableHead>
-              <TableHead className="text-left">Names</TableHead>
-              <TableHead className="text-left">Manage</TableHead>
+              <TableHead className="text-left">
+                <Box className="inline-block mr-2" size={16} /> Container ID
+              </TableHead>
+              <TableHead className="text-left">
+                <Image className="inline-block mr-2" size={16} /> Image
+              </TableHead>
+              <TableHead className="text-left">
+                <Activity className="inline-block mr-2" size={16} /> Status
+              </TableHead>
+              <TableHead className="text-left">
+                <Heart className="inline-block mr-2" size={16} /> Health
+              </TableHead>
+              <TableHead className="text-left">
+                <Network className="inline-block mr-2" size={16} /> Ports
+              </TableHead>
+              <TableHead className="text-left">
+                <Tag className="inline-block mr-2" size={16} /> Names
+              </TableHead>
+              <TableHead className="text-left">
+                <Settings className="inline-block mr-2" size={16} /> Manage
+              </TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
-            {modelsDeployed.map((model) => (
+            {models.map((model) => (
               <TableRow
                 key={model.id}
-                className={`transition-colors duration-1000 ${
+                className={`transition-all duration-1000 ${
                   fadingModels.includes(model.id)
                     ? theme === "dark"
                       ? "bg-zinc-700 opacity-50"
                       : "bg-zinc-200 opacity-50"
                     : ""
+                } ${
+                  pulsatingModels.includes(model.id) ? "animate-pulse" : ""
                 } rounded-lg`}
               >
                 <TableCell className="text-left">
                   <CopyableText text={model.id} />
                 </TableCell>
-                <TableCell className="text-left">{model.image}</TableCell>
                 <TableCell className="text-left">
-                  <StatusBadge status={model.status} />
+                  {model.image || "N/A"}
+                </TableCell>
+                <TableCell className="text-left">
+                  {model.status ? <StatusBadge status={model.status} /> : "N/A"}
                 </TableCell>
                 <TableCell className="text-left">
-                  <HealthBadge health={model.health} />
+                  {model.health ? <HealthBadge health={model.health} /> : "N/A"}
                 </TableCell>
                 <TableCell className="text-left">
-                  <CopyableText text={model.ports} />
+                  {model.ports ? <CopyableText text={model.ports} /> : "N/A"}
                 </TableCell>
                 <TableCell className="text-left">
-                  <CopyableText text={model.name} />
+                  {model.name ? <CopyableText text={model.name} /> : "N/A"}
                 </TableCell>
                 <TableCell className="text-left">
                   <div className="flex gap-2">
                     {fadingModels.includes(model.id) ? (
                       <Button
-                        onClick={() => handleRedeploy(model.image)}
+                        onClick={() =>
+                          model.image && handleRedeploy(model.image)
+                        }
                         className={`${
                           theme === "light"
                             ? "bg-zinc-700 hover:bg-zinc-600 text-white"
                             : "bg-gray-300 hover:bg-gray-400 text-black"
                         } rounded-lg`}
+                        disabled={!model.image}
                       >
                         Redeploy
                       </Button>
@@ -203,15 +231,19 @@ export function ModelsDeployedTable() {
                             onClick={() => handleDelete(model.id)}
                             className="bg-red-700 dark:bg-red-600 hover:bg-red-500 dark:hover:bg-red-500 text-white rounded-lg"
                           >
+                            <Trash2 className="w-4 h-4 mr-2" />
                             Delete
                           </Button>
                         )}
                         <Button
                           onClick={() =>
+                            model.name &&
                             handleChatUI(model.id, model.name, navigate)
                           }
                           className="bg-blue-500 dark:bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600 text-white rounded-lg"
+                          disabled={!model.name}
                         >
+                          <MessageSquare className="w-4 h-4 mr-2" />
                           ChatUI
                         </Button>
                       </>
@@ -223,7 +255,7 @@ export function ModelsDeployedTable() {
           </TableBody>
         </Table>
         <ScrollBar
-          className="scrollbar-thumb-rounded "
+          className="scrollbar-thumb-rounded"
           orientation="horizontal"
         />
       </ScrollArea>
diff --git a/app/frontend/src/components/NavBar.tsx b/app/frontend/src/components/NavBar.tsx
index dd2e88fe..2df0cbfa 100644
--- a/app/frontend/src/components/NavBar.tsx
+++ b/app/frontend/src/components/NavBar.tsx
@@ -1,14 +1,22 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import { useMemo, useRef } from "react";
-import { NavLink, useLocation } from "react-router-dom";
+"use client";
+
+import { useMemo, useRef, useEffect } from "react";
+import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import logo from "../assets/tt_logo.svg";
 import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuList,
 } from "./ui/navigation-menu";
-import { Home, BrainCog, BotMessageSquare, Notebook } from "lucide-react";
+import {
+  Home,
+  Boxes,
+  BotMessageSquare,
+  Notebook,
+  FileText,
+} from "lucide-react";
 import ModeToggle from "./DarkModeToggle";
 import HelpIcon from "./HelpIcon";
 import { Separator } from "./ui/separator";
@@ -23,11 +31,15 @@ import {
   TooltipTrigger,
 } from "./ui/tooltip";
 import { useRefresh } from "../providers/RefreshContext";
+import { useModels } from "../providers/ModelsContext";
+import { handleChatUI } from "../api/modelsDeployedApis";
 
 export default function NavBar() {
   const location = useLocation();
+  const navigate = useNavigate();
   const { theme } = useTheme();
-  const { triggerRefresh } = useRefresh();
+  const { triggerRefresh, refreshTrigger } = useRefresh();
+  const { models, refreshModels } = useModels();
   const sidebarRef = useRef<{ toggleSidebar: () => void }>(null);
 
   const iconColor = theme === "dark" ? "text-zinc-200" : "text-black";
@@ -60,6 +72,23 @@ export default function NavBar() {
     triggerRefresh();
   };
 
+  const handleChatUIClick = () => {
+    if (models.length > 0) {
+      const firstModel = models[0];
+      if (firstModel.id && firstModel.name) {
+        handleChatUI(firstModel.id, firstModel.name, navigate);
+      } else {
+        console.error("Model ID or name is undefined");
+      }
+    } else {
+      navigate("/models-deployed");
+    }
+  };
+
+  useEffect(() => {
+    refreshModels();
+  }, [refreshModels, refreshTrigger]);
+
   const isChatUI = location.pathname === "/chat-ui";
 
   return (
@@ -67,8 +96,8 @@ export default function NavBar() {
       <div
         className={`${
           isChatUI
-            ? "fixed top-0 left-0 h-full w-20 flex flex-col items-center dark:border-b-4 dark:border-TT-dark"
-            : "relative w-full dark:border-b-4 dark:border-TT-dark"
+            ? "fixed top-0 left-0 h-full w-20 flex flex-col items-center dark:border-b-4 dark:border-TT-dark rounded-r-3xl"
+            : "relative w-full dark:border-b-4 dark:border-TT-dark rounded-b-3xl"
         } border-b-4 border-secondary dark:bg-TT-black bg-secondary shadow-xl z-50`}
       >
         <CustomToaster />
@@ -166,7 +195,6 @@ export default function NavBar() {
                   )}
                 </NavLink>
               </NavigationMenuItem>
-
               {!isChatUI && (
                 <Separator
                   className="h-6 w-px bg-zinc-400"
@@ -183,7 +211,7 @@ export default function NavBar() {
                   {isChatUI ? (
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <BrainCog
+                        <Boxes
                           className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
                         />
                       </TooltipTrigger>
@@ -193,7 +221,7 @@ export default function NavBar() {
                     </Tooltip>
                   ) : (
                     <>
-                      <BrainCog
+                      <Boxes
                         className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
                       />
                       <span>Models Deployed</span>
@@ -201,27 +229,70 @@ export default function NavBar() {
                   )}
                 </NavLink>
               </NavigationMenuItem>
-              {isChatUI && (
-                <NavigationMenuItem
-                  className={`${isChatUI ? "w-full flex justify-center" : ""}`}
+              {!isChatUI && (
+                <Separator
+                  className="h-6 w-px bg-zinc-400"
+                  orientation="vertical"
+                />
+              )}
+              <NavigationMenuItem
+                className={`${isChatUI ? "w-full flex justify-center" : ""}`}
+              >
+                <NavLink
+                  to="/logs"
+                  className={({ isActive }) => getNavLinkClass(isActive)}
                 >
-                  <NavLink
-                    to="/chat-ui"
-                    className={({ isActive }) => getNavLinkClass(isActive)}
-                  >
+                  {isChatUI ? (
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <BotMessageSquare
+                        <FileText
                           className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
                         />
                       </TooltipTrigger>
                       <TooltipContent>
-                        <p>Chat UI</p>
+                        <p>Logs</p>
                       </TooltipContent>
                     </Tooltip>
-                  </NavLink>
-                </NavigationMenuItem>
+                  ) : (
+                    <>
+                      <FileText
+                        className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
+                      />
+                      <span>Logs</span>
+                    </>
+                  )}
+                </NavLink>
+              </NavigationMenuItem>
+              {!isChatUI && (
+                <Separator
+                  className="h-6 w-px bg-zinc-400"
+                  orientation="vertical"
+                />
               )}
+              <NavigationMenuItem
+                className={`${isChatUI ? "w-full flex justify-center" : ""}`}
+              >
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      onClick={handleChatUIClick}
+                      className={`${getNavLinkClass(false)} ${
+                        models.length > 0 ? "" : "opacity-50 cursor-not-allowed"
+                      }`}
+                    >
+                      <BotMessageSquare
+                        className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
+                      />
+                      {!isChatUI && <span>Chat UI</span>}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {models.length > 0
+                      ? "Open Chat UI"
+                      : "Deploy a model to use Chat UI"}
+                  </TooltipContent>
+                </Tooltip>
+              </NavigationMenuItem>
             </NavigationMenuList>
           </NavigationMenu>
           {!isChatUI && (
@@ -269,38 +340,36 @@ export default function NavBar() {
         </div>
         {isChatUI && (
           <div className="mt-auto flex flex-col items-center mb-4 space-y-4">
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div>
-                    <ModeToggle />
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Toggle Dark/Light Mode</p>
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div>
-                    <ResetIcon onReset={handleReset} />
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Reset Board</p>
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div>
-                    <HelpIcon toggleSidebar={handleToggleSidebar} />
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Get Help</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div>
+                  <ModeToggle />
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Toggle Dark/Light Mode</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div>
+                  <ResetIcon onReset={handleReset} />
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Reset Board</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div>
+                  <HelpIcon toggleSidebar={handleToggleSidebar} />
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Get Help</p>
+              </TooltipContent>
+            </Tooltip>
           </div>
         )}
         <Sidebar ref={sidebarRef} />
diff --git a/app/frontend/src/components/ResetIcon.tsx b/app/frontend/src/components/ResetIcon.tsx
index 0f2eaf97..534d4d48 100644
--- a/app/frontend/src/components/ResetIcon.tsx
+++ b/app/frontend/src/components/ResetIcon.tsx
@@ -190,7 +190,7 @@ const ResetIcon: React.FC<ResetIconProps> = ({ onReset }) => {
     <Dialog open={isDialogOpen} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>
         <Button
-          variant="outline"
+          variant="navbar"
           size="icon"
           className={`relative inline-flex items-center justify-center p-2 rounded-full transition-all duration-300 ease-in-out ${buttonBackgroundColor} ${hoverButtonBackgroundColor}`}
           onClick={() => setIsDialogOpen(true)}
diff --git a/app/frontend/src/components/SecondStepForm.tsx b/app/frontend/src/components/SecondStepForm.tsx
index 241c9745..c631fbfb 100644
--- a/app/frontend/src/components/SecondStepForm.tsx
+++ b/app/frontend/src/components/SecondStepForm.tsx
@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 "use client";
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
@@ -20,14 +21,17 @@ import {
   FormLabel,
   FormMessage,
 } from "./ui/form";
+
 import { useStepper } from "./ui/stepper";
 import { customToast } from "./CustomToaster";
 import { StepperFormActions } from "./StepperFormActions";
 import { SecondStepFormProps } from "./SelectionSteps";
+import { motion, AnimatePresence } from "framer-motion";
 
 const SecondFormSchema = z.object({
   weight: z.string().nonempty("Please select a weight."),
 });
+
 export function SecondStepForm({
   setSelectedWeight,
   addCustomStep,
@@ -41,17 +45,27 @@ export function SecondStepForm({
 }) {
   const { nextStep } = useStepper();
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showHighlight, setShowHighlight] = useState(true);
 
   const form = useForm<z.infer<typeof SecondFormSchema>>({
     resolver: zodResolver(SecondFormSchema),
     defaultValues: {
-      weight: "",
+      weight: "Default Weights",
     },
   });
 
   useEffect(() => {
     setFormError(!!form.formState.errors.weight);
-  }, [form.formState.errors]);
+  }, [form.formState.errors, setFormError]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowHighlight(false);
+      customToast.info("Default Weights Pre-Selected!");
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
 
   const onSubmit = async (data: z.infer<typeof SecondFormSchema>) => {
     setIsSubmitting(true);
@@ -88,34 +102,65 @@ export function SecondStepForm({
               <FormLabel className="text-lg font-semibold text-gray-800 dark:text-white">
                 Weight
               </FormLabel>
-              <Select
-                onValueChange={(value) => {
-                  field.onChange(value);
-                  setFormError(false);
-                  removeDynamicSteps();
-                  if (value === "Custom Weight") {
-                    addCustomStep();
-                  } else if (value === "Fine-Tune Weights") {
-                    addFineTuneStep();
-                  }
-                }}
-                defaultValue={field.value}
+              <motion.div
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, ease: "easeOut" }}
+                className="relative"
               >
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a weight" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectItem value="Default Weights">
-                    Default Weights
-                  </SelectItem>
-                  <SelectItem value="Custom Weight">Custom Weight</SelectItem>
-                  <SelectItem value="Fine-Tune Weights">
-                    Fine-Tune Weights
-                  </SelectItem>
-                </SelectContent>
-              </Select>
+                <Select
+                  onValueChange={(value) => {
+                    field.onChange(value);
+                    setFormError(false);
+                    removeDynamicSteps();
+                    if (value === "Custom Weight") {
+                      addCustomStep();
+                    } else if (value === "Fine-Tune Weights") {
+                      addFineTuneStep();
+                    }
+                  }}
+                  defaultValue={field.value}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a weight" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="Default Weights" className="relative">
+                      Default Weights
+                      <AnimatePresence>
+                        {showHighlight && (
+                          <motion.div
+                            initial={{ opacity: 0, scale: 0.95 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            exit={{ opacity: 0, scale: 0.95 }}
+                            transition={{ duration: 0.3, ease: "easeInOut" }}
+                            className="absolute inset-0 bg-red-100 dark:bg-red-900/30 rounded-sm pointer-events-none"
+                            style={{ zIndex: -1 }}
+                          />
+                        )}
+                      </AnimatePresence>
+                    </SelectItem>
+                    <SelectItem value="Custom Weight">Custom Weight</SelectItem>
+                    {/* <SelectItem value="Fine-Tune Weights">
+                      Fine-Tune Weights
+                    </SelectItem> */}
+                  </SelectContent>
+                </Select>
+                <AnimatePresence>
+                  {showHighlight && (
+                    <motion.div
+                      initial={{ opacity: 0, scale: 0.95 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.95 }}
+                      transition={{ duration: 0.3, ease: "easeInOut" }}
+                      className="absolute inset-0 bg-red-100 dark:bg-red-900/30 rounded-md pointer-events-none"
+                      style={{ zIndex: -1 }}
+                    />
+                  )}
+                </AnimatePresence>
+              </motion.div>
               <FormMessage className="text-red-500 dark:text-red-300">
                 {form.formState.errors.weight?.message}
               </FormMessage>
diff --git a/app/frontend/src/components/SelectionSteps.tsx b/app/frontend/src/components/SelectionSteps.tsx
index d5a02cab..364bb9e4 100644
--- a/app/frontend/src/components/SelectionSteps.tsx
+++ b/app/frontend/src/components/SelectionSteps.tsx
@@ -14,6 +14,7 @@ import { StepperFormActions } from "./StepperFormActions";
 import { WeightForm } from "./WeightForm";
 import { SecondStepForm } from "./SecondStepForm";
 import { FirstStepForm } from "./FirstStepForm";
+import { UseFormReturn } from "react-hook-form";
 
 const dockerAPIURL = "/docker-api/";
 const modelAPIURL = "/models-api/";
@@ -191,7 +192,7 @@ export default function StepperDemo() {
                       </Button>
                     </div>
                     <StepperFormActions
-                      form={null}
+                      form={{} as UseFormReturn<FormData, unknown>}
                       removeDynamicSteps={removeDynamicSteps}
                     />
                   </Step>
diff --git a/app/frontend/src/components/StepperFormActions.tsx b/app/frontend/src/components/StepperFormActions.tsx
index 62a51fca..1842396d 100644
--- a/app/frontend/src/components/StepperFormActions.tsx
+++ b/app/frontend/src/components/StepperFormActions.tsx
@@ -1,15 +1,24 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 "use client";
+
 import { Button } from "./ui/button";
 import { useStepper } from "./ui/stepper";
+import { UseFormReturn, FieldValues } from "react-hook-form";
+
+type FormData = {
+  weight: string;
+};
 
-export function StepperFormActions({
+export function StepperFormActions<
+  TFieldValues extends FieldValues = FormData,
+  TContext = unknown,
+>({
   form,
   removeDynamicSteps,
   isSubmitting,
 }: {
-  form: HTMLFormElement;
+  form: UseFormReturn<TFieldValues, TContext>;
   removeDynamicSteps: () => void;
   isSubmitting?: boolean;
 }) {
diff --git a/app/frontend/src/components/chatui/ChatComponent.tsx b/app/frontend/src/components/chatui/ChatComponent.tsx
new file mode 100644
index 00000000..a4e0b0de
--- /dev/null
+++ b/app/frontend/src/components/chatui/ChatComponent.tsx
@@ -0,0 +1,94 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+import { useState, useEffect } from "react";
+import { Card } from "../ui/card";
+import { useLocation } from "react-router-dom";
+import logo from "../../assets/tt_logo.svg";
+import { fetchModels } from "../../api/modelsDeployedApis";
+import { useQuery } from "react-query";
+import { fetchCollections } from "@/src/components/rag";
+import Header from "./Header";
+import ChatHistory from "./ChatHistory";
+import InputArea from "./InputArea";
+import { InferenceRequest, RagDataSource, ChatMessage, Model } from "./types";
+import { runInference } from "./runInference";
+
+export default function ChatComponent() {
+  const location = useLocation();
+  const [textInput, setTextInput] = useState<string>("");
+  const [ragDatasource, setRagDatasource] = useState<
+    RagDataSource | undefined
+  >();
+  const { data: ragDataSources } = useQuery("collectionsList", {
+    queryFn: fetchCollections,
+    initialData: [],
+  });
+  const [chatHistory, setChatHistory] = useState<ChatMessage[]>([]);
+  const [modelID, setModelID] = useState<string | null>(null);
+  const [modelName, setModelName] = useState<string | null>(null);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [modelsDeployed, setModelsDeployed] = useState<Model[]>([]);
+
+  useEffect(() => {
+    if (location.state) {
+      setModelID(location.state.containerID);
+      setModelName(location.state.modelName);
+    }
+
+    const loadModels = async () => {
+      try {
+        const models = await fetchModels();
+        setModelsDeployed(models);
+      } catch (error) {
+        console.error("Error fetching models:", error);
+      }
+    };
+
+    loadModels();
+  }, [location.state]);
+
+  const handleInference = () => {
+    if (textInput.trim() === "" || !modelID) return;
+
+    const inferenceRequest: InferenceRequest = {
+      deploy_id: modelID,
+      text: textInput,
+    };
+
+    runInference(
+      inferenceRequest,
+      ragDatasource,
+      textInput,
+      setChatHistory,
+      setIsStreaming,
+    );
+    setTextInput("");
+  };
+
+  return (
+    <div className="flex flex-col w-10/12 mx-auto h-screen overflow-hidden">
+      <Card className="flex flex-col w-full h-full">
+        <Header
+          modelName={modelName}
+          modelsDeployed={modelsDeployed}
+          setModelID={setModelID}
+          setModelName={setModelName}
+          ragDataSources={ragDataSources}
+          ragDatasource={ragDatasource}
+          setRagDatasource={setRagDatasource}
+        />
+        <ChatHistory
+          chatHistory={chatHistory}
+          logo={logo}
+          setTextInput={setTextInput}
+        />
+        <InputArea
+          textInput={textInput}
+          setTextInput={setTextInput}
+          handleInference={handleInference}
+          isStreaming={isStreaming}
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/app/frontend/src/components/chatui/ChatExamples.tsx b/app/frontend/src/components/chatui/ChatExamples.tsx
new file mode 100644
index 00000000..c415e211
--- /dev/null
+++ b/app/frontend/src/components/chatui/ChatExamples.tsx
@@ -0,0 +1,120 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+
+import React, { useState, useEffect } from "react";
+import { Button } from "../ui/button";
+import {
+  MessageCircle,
+  Smile,
+  CloudSun,
+  Lightbulb,
+  Code,
+  Book,
+  Globe,
+  Rocket,
+} from "lucide-react";
+
+interface ChatExamplesProps {
+  logo: string;
+  setTextInput: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const allExamples = [
+  {
+    icon: <MessageCircle className="h-6 w-6" />,
+    text: "Hello, how are you today?",
+    color: "text-blue-500 dark:text-blue-400",
+  },
+  {
+    icon: <Smile className="h-6 w-6" />,
+    text: "Can you tell me a joke?",
+    color: "text-red-500 dark:text-red-400",
+  },
+  {
+    icon: <CloudSun className="h-6 w-6" />,
+    text: "What's the weather like?",
+    color: "text-yellow-500 dark:text-yellow-400",
+  },
+  {
+    icon: <Lightbulb className="h-6 w-6" />,
+    text: "Tell me a fun fact.",
+    color: "text-green-500 dark:text-green-400",
+  },
+  {
+    icon: <Code className="h-6 w-6" />,
+    text: "Explain a coding concept.",
+    color: "text-purple-500 dark:text-purple-400",
+  },
+  {
+    icon: <Book className="h-6 w-6" />,
+    text: "Recommend a book to read.",
+    color: "text-pink-500 dark:text-pink-400",
+  },
+  {
+    icon: <Globe className="h-6 w-6" />,
+    text: "Describe a random country.",
+    color: "text-teal-500 dark:text-teal-400",
+  },
+  {
+    icon: <Rocket className="h-6 w-6" />,
+    text: "Share a space exploration fact.",
+    color: "text-orange-500 dark:text-orange-400",
+  },
+];
+
+const ChatExamples: React.FC<ChatExamplesProps> = ({ logo, setTextInput }) => {
+  const [displayedExamples, setDisplayedExamples] = useState(
+    allExamples.slice(0, 4),
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDisplayedExamples((prevExamples) => {
+        const nextIndex =
+          (allExamples.indexOf(prevExamples[3]) + 1) % allExamples.length;
+        return [
+          ...allExamples.slice(nextIndex, nextIndex + 4),
+          ...allExamples.slice(
+            0,
+            Math.max(0, 4 - (allExamples.length - nextIndex)),
+          ),
+        ];
+      });
+    }, 15000); // Cycle time in milliseconds
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[28rem] p-4 transition-colors duration-200">
+      <img
+        src={logo}
+        alt="Tenstorrent Logo"
+        className="w-16 h-16 mb-6 transform transition duration-300 hover:scale-110"
+      />
+      <h2 className="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 transition-colors duration-200">
+        Start a conversation with LLM Studio Chat...
+      </h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full max-w-4xl">
+        {displayedExamples.map((example, index) => (
+          <Button
+            key={index}
+            variant="outline"
+            className={`h-auto py-4 px-6 flex flex-col items-center justify-center text-center space-y-2 transition-all duration-300 
+                        bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 
+                        border border-gray-200 dark:border-gray-600
+                        text-gray-800 dark:text-gray-200`}
+            onClick={() => setTextInput(example.text)}
+          >
+            <span className={`${example.color} transition-colors duration-200`}>
+              {example.icon}
+            </span>
+            <span className="text-sm font-medium">{example.text}</span>
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ChatExamples;
diff --git a/app/frontend/src/components/chatui/ChatHistory.tsx b/app/frontend/src/components/chatui/ChatHistory.tsx
new file mode 100644
index 00000000..0bd607d4
--- /dev/null
+++ b/app/frontend/src/components/chatui/ChatHistory.tsx
@@ -0,0 +1,133 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+import React, { useRef, useEffect, useState } from "react";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { User, ChevronDown } from "lucide-react";
+import { Button } from "../ui/button";
+import InferenceStats from "./InferenceStats";
+import ChatExamples from "./ChatExamples";
+
+interface ChatMessage {
+  sender: "user" | "assistant";
+  text: string;
+  inferenceStats?: InferenceStats;
+}
+
+interface InferenceStats {
+  user_ttft_ms: number;
+  user_tps: number;
+  user_ttft_e2e_ms: number;
+  prefill: {
+    tokens_prefilled: number;
+    tps: number;
+  };
+  decode: {
+    tokens_decoded: number;
+    tps: number;
+  };
+  batch_size: number;
+  context_length: number;
+}
+
+interface ChatHistoryProps {
+  chatHistory: ChatMessage[];
+  logo: string;
+  setTextInput: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export default function ChatHistory({
+  chatHistory,
+  logo,
+  setTextInput,
+}: ChatHistoryProps) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);
+
+  const scrollToBottom = () => {
+    if (viewportRef.current) {
+      viewportRef.current.scrollTo({
+        top: viewportRef.current.scrollHeight,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  const handleScroll = () => {
+    if (viewportRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = viewportRef.current;
+      const isAtBottom = scrollHeight - scrollTop <= clientHeight + 100; // Increased threshold
+      setIsScrollButtonVisible(!isAtBottom);
+    }
+  };
+
+  useEffect(() => {
+    handleScroll();
+  }, [chatHistory]);
+
+  return (
+    <div className="flex flex-col w-full flex-grow p-8 font-rmMono relative overflow-hidden">
+      {chatHistory.length === 0 && (
+        <ChatExamples logo={logo} setTextInput={setTextInput} />
+      )}
+      {chatHistory.length > 0 && (
+        <ScrollArea.Root className="flex-grow h-full overflow-hidden">
+          <ScrollArea.Viewport
+            ref={viewportRef}
+            onScroll={handleScroll}
+            className="w-full h-full pr-4 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-transparent hover:scrollbar-thumb-gray-500"
+          >
+            <div className="p-4 border rounded-lg">
+              {chatHistory.map((message, index) => (
+                <div
+                  key={index}
+                  className={`chat ${message.sender === "user" ? "chat-end" : "chat-start"}`}
+                >
+                  <div className="chat-image avatar text-left">
+                    <div className="w-10 rounded-full">
+                      {message.sender === "user" ? (
+                        <User className="h-6 w-6 mr-2 text-left" />
+                      ) : (
+                        <img
+                          src={logo}
+                          alt="Tenstorrent Logo"
+                          className="w-8 h-8 rounded-full mr-2"
+                        />
+                      )}
+                    </div>
+                  </div>
+                  <div
+                    className={`chat-bubble ${
+                      message.sender === "user"
+                        ? "bg-TT-green-accent text-white text-left"
+                        : "bg-TT-slate text-white text-left"
+                    } p-3 rounded-lg mb-1`}
+                    style={{ wordBreak: "break-word" }}
+                  >
+                    {message.text}
+                  </div>
+                  {message.sender === "assistant" && message.inferenceStats && (
+                    <InferenceStats stats={message.inferenceStats} />
+                  )}
+                </div>
+              ))}
+            </div>
+          </ScrollArea.Viewport>
+          <ScrollArea.Scrollbar
+            orientation="vertical"
+            className="w-2 bg-transparent transition-colors duration-150 ease-out hover:bg-gray-100 dark:hover:bg-gray-800"
+          >
+            <ScrollArea.Thumb className="bg-gray-300 rounded-full w-full transition-colors duration-150 ease-out hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500" />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Root>
+      )}
+      {isScrollButtonVisible && (
+        <Button
+          className="absolute bottom-4 right-4 rounded-full shadow-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-300"
+          onClick={scrollToBottom}
+        >
+          <ChevronDown className="h-6 w-6 animate-bounce" />
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/app/frontend/src/components/chatui/Header.tsx b/app/frontend/src/components/chatui/Header.tsx
new file mode 100644
index 00000000..490b2606
--- /dev/null
+++ b/app/frontend/src/components/chatui/Header.tsx
@@ -0,0 +1,176 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+import React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../ui/breadcrumb";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+
+interface HeaderProps {
+  modelName: string | null;
+  modelsDeployed: { id: string; name: string }[];
+  setModelID: (id: string) => void;
+  setModelName: (name: string) => void;
+  ragDataSources: RagDataSource[];
+  ragDatasource: RagDataSource | undefined;
+  setRagDatasource: (datasource: RagDataSource) => void;
+}
+
+interface RagDataSource {
+  id: string;
+  name: string;
+  metadata: Record<string, string>;
+}
+
+const ModelSelector = React.forwardRef<
+  HTMLButtonElement,
+  {
+    modelsDeployed: HeaderProps["modelsDeployed"];
+    setModelID: HeaderProps["setModelID"];
+    setModelName: HeaderProps["setModelName"];
+  }
+>(({ modelsDeployed, setModelID, setModelName }, ref) => (
+  <DropdownMenu>
+    <DropdownMenuTrigger
+      ref={ref}
+      className="flex items-center gap-1 focus:outline-none"
+    >
+      <BreadcrumbEllipsis className="h-4 w-4 text-gray-600" />
+      <span className="sr-only">Toggle menu</span>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start">
+      {modelsDeployed.map((model) => (
+        <DropdownMenuItem
+          key={model.id}
+          onClick={() => {
+            setModelID(model.id);
+            setModelName(model.name);
+          }}
+        >
+          {model.name}
+        </DropdownMenuItem>
+      ))}
+    </DropdownMenuContent>
+  </DropdownMenu>
+));
+
+ModelSelector.displayName = "ModelSelector";
+
+export default function Header({
+  modelName,
+  modelsDeployed,
+  setModelID,
+  setModelName,
+  ragDataSources,
+  ragDatasource,
+  setRagDatasource,
+}: HeaderProps) {
+  return (
+    <div className="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-lg dark:shadow-2xl sticky top-2 z-10 flex justify-between items-center">
+      <Breadcrumb className="flex items-center">
+        <BreadcrumbList className="flex gap-2 text-sm">
+          <BreadcrumbItem>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <BreadcrumbLink
+                    href="/models-deployed"
+                    className="text-gray-600 dark:text-gray-200 hover:text-gray-800 dark:hover:text-white transition-colors duration-300 flex items-center"
+                  >
+                    Models Deployed
+                  </BreadcrumbLink>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>View all deployed models</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator className="mx-2 text-gray-400">
+            /
+          </BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <ModelSelector
+                    modelsDeployed={modelsDeployed}
+                    setModelID={setModelID}
+                    setModelName={setModelName}
+                  />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Select a different model</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator className="mx-2 text-gray-400">
+            /
+          </BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <BreadcrumbPage className="text-gray-800 dark:text-blue-400 font-bold hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
+                    {modelName}
+                  </BreadcrumbPage>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Current selected model</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+      <div className="flex items-center">
+        <Select
+          onValueChange={(v) => {
+            const dataSource = ragDataSources.find((rds) => rds.name === v);
+            if (dataSource) {
+              setRagDatasource(dataSource);
+            }
+          }}
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue
+              placeholder={ragDatasource?.name ?? "Select RAG Datasource"}
+            />
+          </SelectTrigger>
+          <SelectContent>
+            {ragDataSources.map((c) => (
+              <SelectItem key={c.id} value={c.name}>
+                {c.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}
diff --git a/app/frontend/src/components/chatui/InferenceStats.tsx b/app/frontend/src/components/chatui/InferenceStats.tsx
new file mode 100644
index 00000000..6aa8cdd1
--- /dev/null
+++ b/app/frontend/src/components/chatui/InferenceStats.tsx
@@ -0,0 +1,102 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+
+import {
+  BarChart2,
+  Clock,
+  Zap,
+  Hash,
+  Layers,
+  AlignJustify,
+} from "lucide-react";
+import { Button } from "../ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+
+interface InferenceStats {
+  user_ttft_ms: number;
+  user_tps: number;
+  user_ttft_e2e_ms: number;
+  prefill: {
+    tokens_prefilled: number;
+    tps: number;
+  };
+  decode: {
+    tokens_decoded: number;
+    tps: number;
+  };
+  batch_size: number;
+  context_length: number;
+}
+
+interface InferenceStatsProps {
+  stats: InferenceStats;
+}
+
+export default function Component({ stats }: InferenceStatsProps) {
+  return (
+    <div className="text-xs text-gray-500 mt-1 self-end">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-gray-500 p-1 h-auto"
+            >
+              <BarChart2 className="h-4 w-4" />
+              <span className="sr-only">Show Inference Stats</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <div className="text-xs space-y-1">
+              <div className="font-semibold mb-2">Inference Statistics</div>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1">
+                <div className="flex items-center">
+                  <Clock className="h-3 w-3 mr-1" /> TTFT (User):
+                </div>
+                <div>{stats.user_ttft_ms} ms</div>
+                <div className="flex items-center">
+                  <Zap className="h-3 w-3 mr-1" /> TPS (User):
+                </div>
+                <div>{stats.user_tps}</div>
+                <div className="flex items-center">
+                  <Clock className="h-3 w-3 mr-1" /> TTFT E2E:
+                </div>
+                <div>{stats.user_ttft_e2e_ms} ms</div>
+                <div className="flex items-center">
+                  <Hash className="h-3 w-3 mr-1" /> Tokens Prefilled:
+                </div>
+                <div>{stats.prefill.tokens_prefilled}</div>
+                <div className="flex items-center">
+                  <Zap className="h-3 w-3 mr-1" /> Prefill TPS:
+                </div>
+                <div>{stats.prefill.tps}</div>
+                <div className="flex items-center">
+                  <Hash className="h-3 w-3 mr-1" /> Tokens Decoded:
+                </div>
+                <div>{stats.decode.tokens_decoded}</div>
+                <div className="flex items-center">
+                  <Zap className="h-3 w-3 mr-1" /> Decode TPS:
+                </div>
+                <div>{stats.decode.tps}</div>
+                <div className="flex items-center">
+                  <Layers className="h-3 w-3 mr-1" /> Batch Size:
+                </div>
+                <div>{stats.batch_size}</div>
+                <div className="flex items-center">
+                  <AlignJustify className="h-3 w-3 mr-1" /> Context Length:
+                </div>
+                <div>{stats.context_length}</div>
+              </div>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+}
diff --git a/app/frontend/src/components/chatui/InputArea.tsx b/app/frontend/src/components/chatui/InputArea.tsx
new file mode 100644
index 00000000..dda49fa4
--- /dev/null
+++ b/app/frontend/src/components/chatui/InputArea.tsx
@@ -0,0 +1,72 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+import React, { useEffect, useRef } from "react";
+import { Textarea } from "../ui/textarea";
+import { Button } from "../ui/button";
+import { Send } from "lucide-react";
+import { Spinner } from "../ui/spinner";
+
+interface InputAreaProps {
+  textInput: string;
+  setTextInput: (text: string) => void;
+  handleInference: () => void;
+  isStreaming: boolean;
+}
+
+export default function InputArea({
+  textInput,
+  setTextInput,
+  handleInference,
+  isStreaming,
+}: InputAreaProps) {
+  const handleTextAreaInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    e.target.style.height = "auto";
+    e.target.style.height = `${e.target.scrollHeight}px`;
+    setTextInput(e.target.value);
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleInference();
+    }
+  };
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [isStreaming]);
+
+  return (
+    <div className="flex-shrink-0 p-4">
+      <div className="relative w-full">
+        <Textarea
+          ref={textareaRef}
+          autoFocus
+          value={textInput}
+          onInput={handleTextAreaInput}
+          onKeyDown={handleKeyPress}
+          placeholder="Enter text for inference"
+          className="px-4 py-2 pr-16 border rounded-lg shadow-md w-full box-border font-rmMono"
+          disabled={isStreaming}
+          rows={1}
+          style={{
+            resize: "none",
+            maxHeight: "150px",
+            overflowY: "auto",
+          }}
+        />
+        <Button
+          className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-300"
+          onClick={handleInference}
+          disabled={isStreaming || !textInput.trim()}
+        >
+          {isStreaming ? <Spinner /> : <Send className="h-5 w-5" />}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/frontend/src/components/chatui/getRagContext.ts b/app/frontend/src/components/chatui/getRagContext.ts
new file mode 100644
index 00000000..046e211a
--- /dev/null
+++ b/app/frontend/src/components/chatui/getRagContext.ts
@@ -0,0 +1,29 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+import axios from "axios";
+import { InferenceRequest, RagDataSource } from "./types.ts";
+
+export const getRagContext = async (
+  request: InferenceRequest,
+  ragDatasource: RagDataSource | undefined,
+) => {
+  const ragContext: { documents: string[] } = { documents: [] };
+
+  if (!ragDatasource) return ragContext;
+
+  try {
+    const response = await axios.get(
+      `/collections-api/${ragDatasource.name}/query`,
+      {
+        params: { query: request.text },
+      },
+    );
+    if (response?.data) {
+      ragContext.documents = response.data.documents;
+    }
+  } catch (e) {
+    console.error(`Error fetching RAG context: ${e}`);
+  }
+
+  return ragContext;
+};
diff --git a/app/frontend/src/components/chatui/runInference.ts b/app/frontend/src/components/chatui/runInference.ts
new file mode 100644
index 00000000..3b361446
--- /dev/null
+++ b/app/frontend/src/components/chatui/runInference.ts
@@ -0,0 +1,101 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+import { InferenceRequest, RagDataSource, ChatMessage } from "./types.ts";
+import { getRagContext } from "./getRagContext";
+
+export const runInference = async (
+  request: InferenceRequest,
+  ragDatasource: RagDataSource | undefined,
+  textInput: string,
+  setChatHistory: React.Dispatch<React.SetStateAction<ChatMessage[]>>,
+  setIsStreaming: React.Dispatch<React.SetStateAction<boolean>>,
+) => {
+  try {
+    if (ragDatasource) {
+      request.rag_context = await getRagContext(request, ragDatasource);
+    }
+
+    setIsStreaming(true);
+    const response = await fetch(`/models-api/inference/`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(request),
+    });
+    const reader = response.body?.getReader();
+    setChatHistory((prevHistory) => [
+      ...prevHistory,
+      { sender: "user", text: textInput },
+      { sender: "assistant", text: "" },
+    ]);
+
+    let result = "";
+    if (reader) {
+      let done = false;
+      while (!done) {
+        const { done: streamDone, value } = await reader.read();
+        done = streamDone;
+
+        if (value) {
+          const decoder = new TextDecoder();
+          const chunk = decoder.decode(value);
+          console.log("Chunk:", chunk);
+          result += chunk;
+          const endOfStreamIndex = result.indexOf("<<END_OF_STREAM>>");
+          if (endOfStreamIndex !== -1) {
+            result = result.substring(0, endOfStreamIndex);
+            done = true;
+          }
+          const cleanedResult = result
+            .replace(/<\|eot_id\|>/g, "")
+            .replace(/<\|endoftext\|>/g, "")
+            .trim();
+          const statsStartIndex = cleanedResult.indexOf("{");
+          const statsEndIndex = cleanedResult.lastIndexOf("}");
+
+          let chatContent = cleanedResult;
+
+          if (statsStartIndex !== -1 && statsEndIndex !== -1) {
+            chatContent = cleanedResult.substring(0, statsStartIndex).trim();
+
+            const statsJson = cleanedResult.substring(
+              statsStartIndex,
+              statsEndIndex + 1,
+            );
+            try {
+              const parsedStats = JSON.parse(statsJson);
+              setChatHistory((prevHistory) => {
+                const updatedHistory = [...prevHistory];
+                const lastAssistantMessage = updatedHistory.findLastIndex(
+                  (message) => message.sender === "assistant",
+                );
+                if (lastAssistantMessage !== -1) {
+                  updatedHistory[lastAssistantMessage] = {
+                    ...updatedHistory[lastAssistantMessage],
+                    inferenceStats: parsedStats,
+                  };
+                }
+                return updatedHistory;
+              });
+            } catch (e) {
+              console.error("Error parsing inference stats:", e);
+            }
+          }
+
+          setChatHistory((prevHistory) => {
+            const updatedHistory = [...prevHistory];
+            updatedHistory[updatedHistory.length - 1] = {
+              ...updatedHistory[updatedHistory.length - 1],
+              text: chatContent,
+            };
+            return updatedHistory;
+          });
+        }
+      }
+    }
+
+    setIsStreaming(false);
+  } catch (error) {
+    console.error("Error running inference:", error);
+    setIsStreaming(false);
+  }
+};
diff --git a/app/frontend/src/components/chatui/types.ts b/app/frontend/src/components/chatui/types.ts
new file mode 100644
index 00000000..5fcee102
--- /dev/null
+++ b/app/frontend/src/components/chatui/types.ts
@@ -0,0 +1,40 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+export interface InferenceRequest {
+  deploy_id: string;
+  text: string;
+  rag_context?: { documents: string[] };
+}
+
+export interface RagDataSource {
+  id: string;
+  name: string;
+  metadata: Record<string, string>;
+}
+
+export interface ChatMessage {
+  sender: "user" | "assistant";
+  text: string;
+  inferenceStats?: InferenceStats;
+}
+
+export interface Model {
+  id: string;
+  name: string;
+}
+
+export interface InferenceStats {
+  user_ttft_ms: number;
+  user_tps: number;
+  user_ttft_e2e_ms: number;
+  prefill: {
+    tokens_prefilled: number;
+    tps: number;
+  };
+  decode: {
+    tokens_decoded: number;
+    tps: number;
+  };
+  batch_size: number;
+  context_length: number;
+}
diff --git a/app/frontend/src/components/log_viewer/LogViewer.tsx b/app/frontend/src/components/log_viewer/LogViewer.tsx
new file mode 100644
index 00000000..4274299e
--- /dev/null
+++ b/app/frontend/src/components/log_viewer/LogViewer.tsx
@@ -0,0 +1,205 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+import { Card, CardContent } from "../ui/card";
+import {
+  ChevronRight,
+  File,
+  Folder,
+  ExternalLink,
+  ArrowUp,
+  ArrowDown,
+} from "lucide-react";
+import { openEncodedLogInNewTab } from "./openEncodedLogInNewTab";
+import { parseLogFileName } from "./parseLogFileName";
+
+export const logsAPIURL = "/logs-api/";
+
+interface LogFile {
+  name: string;
+  type: "file" | "directory";
+  children?: LogFile[];
+}
+
+export default function LogsViewer() {
+  const [logs, setLogs] = useState<LogFile[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set());
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+
+  const filterLogsAndEmptyDirs = useCallback((nodes: LogFile[]): LogFile[] => {
+    return nodes.filter((node) => {
+      if (node.type === "directory") {
+        node.children = filterLogsAndEmptyDirs(node.children || []);
+        return node.children.length > 0;
+      }
+      return node.name.toLowerCase().includes("log");
+    });
+  }, []);
+
+  const extractDateFromFileName = (fileName: string) => {
+    // Adjusted regex to match 'YYYY-MM-DD-HH_MM_SS' format in log files
+    const match = fileName.match(
+      /(\d{4})-(\d{2})-(\d{2})-(\d{2})_(\d{2})_(\d{2})/,
+    );
+    if (match) {
+      const [year, month, day, hour, minute, second] = match
+        .slice(1)
+        .map(Number);
+      return new Date(year, month - 1, day, hour, minute, second); // Create a valid Date object
+    }
+    return null;
+  };
+
+  const sortLogs = useCallback(
+    (nodes: LogFile[]) => {
+      return [...nodes].sort((a, b) => {
+        const dateA = extractDateFromFileName(a.name);
+        const dateB = extractDateFromFileName(b.name);
+
+        if (!dateA || !dateB) {
+          return sortOrder === "asc"
+            ? a.name.localeCompare(b.name)
+            : b.name.localeCompare(a.name);
+        }
+
+        return sortOrder === "asc"
+          ? dateA.getTime() - dateB.getTime()
+          : dateB.getTime() - dateA.getTime();
+      });
+    },
+    [sortOrder],
+  );
+
+  useEffect(() => {
+    const fetchLogs = async () => {
+      try {
+        const response = await fetch(logsAPIURL);
+        const data = await response.json();
+        let filteredLogs = filterLogsAndEmptyDirs(data.logs);
+        filteredLogs = sortLogs(filteredLogs);
+        setLogs(filteredLogs);
+      } catch (error) {
+        console.error("Error fetching logs:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchLogs();
+  }, [filterLogsAndEmptyDirs, sortLogs]);
+
+  const toggleDir = (path: string) => {
+    setExpandedDirs((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+
+  const openLogInNewTab = openEncodedLogInNewTab();
+
+  const formatFileName = parseLogFileName();
+
+  const renderTree = (nodes: LogFile[], path: string = "") => {
+    return nodes.map((node) => {
+      const currentPath = `${path}/${node.name}`;
+      const isExpanded = expandedDirs.has(currentPath);
+
+      if (node.type === "directory") {
+        return (
+          <div key={currentPath} className="mb-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full justify-start px-2 py-1.5 h-auto hover:bg-accent hover:text-accent-foreground rounded-md transition-colors duration-200"
+              onClick={() => toggleDir(currentPath)}
+            >
+              <ChevronRight
+                className={`h-4 w-4 mr-2 transition-transform duration-200 flex-shrink-0 ${
+                  isExpanded ? "rotate-90" : ""
+                }`}
+              />
+              <Folder className="h-4 w-4 mr-2 flex-shrink-0 text-yellow-500" />
+              <span className="text-sm font-medium truncate">{node.name}</span>
+            </Button>
+            {isExpanded && node.children && (
+              <div className="ml-4 mt-1 border-l border-border pl-2">
+                {renderTree(node.children, currentPath)}
+              </div>
+            )}
+          </div>
+        );
+      } else {
+        return (
+          <Button
+            key={currentPath}
+            variant="ghost"
+            size="sm"
+            className="w-full justify-start px-2 py-1.5 h-auto mb-1 hover:bg-accent hover:text-accent-foreground group rounded-md transition-colors duration-200"
+            onClick={() => openLogInNewTab(currentPath.slice(1))}
+          >
+            <File className="h-4 w-4 mr-2 flex-shrink-0 text-blue-500" />
+            <div className="text-sm truncate text-left flex-grow">
+              {formatFileName(node.name)}
+            </div>
+            <ExternalLink className="h-4 w-4 ml-2 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
+          </Button>
+        );
+      }
+    });
+  };
+
+  const toggleSortOrder = () => {
+    setSortOrder((prevOrder) => (prevOrder === "asc" ? "desc" : "asc"));
+  };
+
+  return (
+    <div className="flex flex-col overflow-auto w-10/12 mx-auto">
+      <Card className="flex flex-col w-full h-full shadow-lg">
+        <div className="bg-gray-200 dark:bg-gray-800 rounded-t-lg p-4 shadow-md dark:shadow-2xl sticky top-0 z-10 flex justify-between items-center">
+          <h2 className="text-xl font-semibold">Log Files</h2>
+          <div className="flex items-center space-x-2">
+            <p className="text-sm text-muted-foreground">Sort by date</p>
+            <Button variant="ghost" size="sm" onClick={toggleSortOrder}>
+              {sortOrder === "asc" ? (
+                <ArrowUp className="h-4 w-4" />
+              ) : (
+                <ArrowDown className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+        </div>
+        <CardContent className="flex-grow overflow-hidden">
+          <ScrollArea className="h-[calc(100vh-150px)] w-full">
+            <div className="p-4">
+              {loading ? (
+                <div className="flex items-center justify-center h-full">
+                  <p className="text-lg text-muted-foreground">
+                    Loading logs...
+                  </p>
+                </div>
+              ) : logs.length > 0 ? (
+                renderTree(logs)
+              ) : (
+                <div className="flex items-center justify-center h-full">
+                  <p className="text-lg text-muted-foreground">
+                    No log files found.
+                  </p>
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/frontend/src/components/log_viewer/openEncodedLogInNewTab.tsx b/app/frontend/src/components/log_viewer/openEncodedLogInNewTab.tsx
new file mode 100644
index 00000000..a00c28d0
--- /dev/null
+++ b/app/frontend/src/components/log_viewer/openEncodedLogInNewTab.tsx
@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+"use client";
+import { logsAPIURL } from "./LogViewer";
+
+export function openEncodedLogInNewTab() {
+  return (logName: string) => {
+    const encodedLogName = encodeURIComponent(logName);
+    const logUrl = `${logsAPIURL}${encodedLogName}/`;
+    window.open(logUrl, "_blank", "noopener,noreferrer");
+  };
+}
diff --git a/app/frontend/src/components/log_viewer/parseLogFileName.tsx b/app/frontend/src/components/log_viewer/parseLogFileName.tsx
new file mode 100644
index 00000000..dd6e8b13
--- /dev/null
+++ b/app/frontend/src/components/log_viewer/parseLogFileName.tsx
@@ -0,0 +1,20 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+"use client";
+export function parseLogFileName() {
+  return (name: string) => {
+    const parts = name.split("_");
+    if (parts.length > 2) {
+      const date = parts[0];
+      const time = parts[1].replace(/-/g, ":");
+      const rest = parts.slice(2).join("_");
+      return (
+        <div className="flex flex-col">
+          <span className="font-medium">{rest}</span>
+          <span className="text-xs text-muted-foreground">{`${date} ${time}`}</span>
+        </div>
+      );
+    }
+    return name;
+  };
+}
diff --git a/app/frontend/src/components/magicui/AnimatedDeployButton.tsx b/app/frontend/src/components/magicui/AnimatedDeployButton.tsx
index 6634a106..072b9983 100644
--- a/app/frontend/src/components/magicui/AnimatedDeployButton.tsx
+++ b/app/frontend/src/components/magicui/AnimatedDeployButton.tsx
@@ -2,70 +2,159 @@
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { Rocket } from "lucide-react";
+import { Rocket, CheckCircle, XCircle } from "lucide-react";
 
 interface AnimatedDeployButtonProps {
   initialText: React.ReactElement | string;
   changeText: React.ReactElement | string;
-  onDeploy: () => void;
+  onDeploy: () => Promise<boolean>;
+  disabled?: boolean;
+  onDeploymentComplete: () => void;
 }
 
 export const AnimatedDeployButton: React.FC<AnimatedDeployButtonProps> = ({
   initialText,
   changeText,
   onDeploy,
+  disabled = false,
+  onDeploymentComplete,
 }) => {
   const [isDeployed, setIsDeployed] = useState<boolean>(false);
+  const [isDeploying, setIsDeploying] = useState<boolean>(false);
+  const [isRocketFlying, setIsRocketFlying] = useState<boolean>(false);
+  const [deploymentFailed, setDeploymentFailed] = useState<boolean>(false);
   const [displayText, setDisplayText] = useState<React.ReactElement | string>(
     initialText,
   );
 
+  useEffect(() => {
+    if (isDeployed) {
+      const timer = setTimeout(() => {
+        onDeploymentComplete();
+      }, 550);
+      return () => clearTimeout(timer);
+    }
+  }, [isDeployed, onDeploymentComplete]);
+
   const handleDeploy = async () => {
-    setIsDeployed(true);
-    setDisplayText(changeText); // Change the text after clicking deploy
-    await onDeploy();
+    if (disabled || isDeploying || isDeployed) return;
+
+    setIsDeploying(true);
+    setDisplayText(changeText);
+    setIsRocketFlying(true);
+    setDeploymentFailed(false);
+
+    try {
+      const deploySuccess = await onDeploy();
+
+      // Wait for the rocket animation to complete
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      if (deploySuccess) {
+        setIsDeployed(true);
+        setDisplayText(<span>Model Deployed!</span>);
+      } else {
+        setDeploymentFailed(true);
+        setDisplayText(<span>Deployment Failed</span>);
+      }
+    } catch (error) {
+      console.error("Deployment failed:", error);
+      setDeploymentFailed(true);
+      setDisplayText(<span>Deployment Failed</span>);
+    } finally {
+      setIsDeploying(false);
+      setIsRocketFlying(false);
+    }
   };
 
+  const buttonClass = `relative flex w-[200px] items-center justify-center overflow-hidden rounded-md p-[10px] outline outline-1 ${
+    disabled
+      ? "bg-gray-400 cursor-not-allowed"
+      : isDeployed
+        ? "bg-green-600 hover:bg-green-700"
+        : deploymentFailed
+          ? "bg-red-600 hover:bg-red-700"
+          : "bg-gray-600 hover:bg-gray-700"
+  } text-white dark:text-gray-200`;
+
+  const particles = Array.from({ length: 5 }, (_, i) => (
+    <motion.div
+      key={`particle-${i}`}
+      className="absolute w-1 h-1 bg-yellow-400 rounded-full"
+      initial={{ opacity: 0, y: 0, x: 0 }}
+      animate={
+        isRocketFlying
+          ? {
+              opacity: [0, 1, 0],
+              y: [0, -20 - Math.random() * 30],
+              x: [-5 + Math.random() * 10, -10 + Math.random() * 20],
+            }
+          : {}
+      }
+      transition={{ duration: 1, ease: "easeOut", delay: Math.random() * 0.2 }}
+    />
+  ));
+
   return (
     <AnimatePresence mode="wait">
-      {isDeployed ? (
-        <motion.button
-          className="relative flex w-[200px] items-center justify-center overflow-hidden rounded-md p-[10px] outline outline-1 bg-gray-600 text-white dark:bg-gray-700 dark:text-gray-200"
-          onClick={() => setIsDeployed(false)}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-        >
-          <motion.span
-            key="action"
-            className="relative block h-full w-full font-semibold"
-            initial={{ y: -50 }}
-            animate={{ y: 0, transition: { duration: 0.8, ease: "easeOut" } }}
-          >
-            Model Deployed!
-          </motion.span>
-        </motion.button>
-      ) : (
-        <motion.button
-          className="relative flex w-[200px] cursor-pointer items-center justify-center rounded-md border-none p-[10px] transition-transform duration-700 ease-in-out transform hover:scale-105 bg-gray-600 text-white dark:bg-gray-700 dark:text-gray-200"
-          onClick={handleDeploy}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
+      <motion.button
+        className={`${buttonClass} ${
+          !disabled &&
+          "cursor-pointer transition-transform duration-700 ease-in-out hover:scale-105"
+        }`}
+        onClick={handleDeploy}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        disabled={disabled || isDeploying}
+      >
+        <motion.span
+          key="reaction"
+          className="relative flex items-center font-semibold"
+          initial={{ x: 0 }}
+          exit={{ x: 50, transition: { duration: 0.6, ease: "easeIn" } }}
         >
-          <motion.span
-            key="reaction"
-            className="relative flex items-center font-semibold"
-            initial={{ x: 0 }}
-            exit={{ x: 50, transition: { duration: 0.6, ease: "easeIn" } }}
-          >
-            {displayText}
-            <Rocket className="ml-2 h-5 w-5 transition-transform duration-700 ease-in-out group-hover:-translate-y-3" />
-          </motion.span>
-        </motion.button>
-      )}
+          {isDeploying ? "Deploying..." : displayText}
+          <AnimatePresence mode="wait">
+            {!isDeploying && !isDeployed && !deploymentFailed && (
+              <motion.div
+                key="rocket"
+                className="ml-2 relative"
+                initial={{ y: 0, opacity: 1 }}
+                exit={{ y: -100, opacity: 0 }}
+                transition={{ duration: 1, ease: "easeOut" }}
+              >
+                <Rocket className="h-5 w-5" />
+                {particles}
+              </motion.div>
+            )}
+            {isDeployed && (
+              <motion.div
+                key="success"
+                className="ml-2"
+                initial={{ scale: 0, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ duration: 0.5, ease: "easeOut" }}
+              >
+                <CheckCircle className="h-5 w-5 text-white" />
+              </motion.div>
+            )}
+            {deploymentFailed && (
+              <motion.div
+                key="failure"
+                className="ml-2"
+                initial={{ scale: 0, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ duration: 0.5, ease: "easeOut" }}
+              >
+                <XCircle className="h-5 w-5 text-white" />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </motion.span>
+      </motion.button>
     </AnimatePresence>
   );
 };
diff --git a/app/frontend/src/pages/rag/RagDataSourceForm.tsx b/app/frontend/src/components/rag/RagDataSourceForm.tsx
similarity index 73%
rename from app/frontend/src/pages/rag/RagDataSourceForm.tsx
rename to app/frontend/src/components/rag/RagDataSourceForm.tsx
index 3865b7ba..e405f1dc 100644
--- a/app/frontend/src/pages/rag/RagDataSourceForm.tsx
+++ b/app/frontend/src/components/rag/RagDataSourceForm.tsx
@@ -26,6 +26,7 @@ const RagDataSourceForm = ({
     register,
     handleSubmit,
     formState: { errors },
+    reset,
   } = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: { name: "" },
@@ -35,12 +36,21 @@ const RagDataSourceForm = ({
     <div className="flex flex-col items-center my-4">
       <form
         className="flex  space-x-4 items-center"
-        onSubmit={handleSubmit((d) => onSubmit({ collectionName: d.name }))}
+        onSubmit={handleSubmit((d) => {
+          onSubmit({ collectionName: d.name });
+          reset();
+        })}
       >
-        <Input type="text" {...register("name")} />
+        <Input type="text" autoComplete="off" {...register("name")} />
         <Button type="submit"> Create New RAG Datasource</Button>
       </form>
-      <div>{errors.name?.message && <p>{errors.name?.message}</p>}</div>
+      <div className="p-2">
+        {errors.name?.message && (
+          <p className="text-red-600 dark:text-red-400 text-sm font-medium">
+            {errors.name?.message}
+          </p>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/app/frontend/src/pages/rag/RagManagement.tsx b/app/frontend/src/components/rag/RagManagement.tsx
similarity index 99%
rename from app/frontend/src/pages/rag/RagManagement.tsx
rename to app/frontend/src/components/rag/RagManagement.tsx
index c78b4ad4..606f1bb5 100644
--- a/app/frontend/src/pages/rag/RagManagement.tsx
+++ b/app/frontend/src/components/rag/RagManagement.tsx
@@ -25,7 +25,7 @@ import {
   deleteCollection,
   createCollection,
   uploadDocument,
-} from "@/src/pages/rag";
+} from "@/src/components/rag";
 
 interface RagDataSource {
   id: string;
diff --git a/app/frontend/src/pages/rag/index.ts b/app/frontend/src/components/rag/index.ts
similarity index 100%
rename from app/frontend/src/pages/rag/index.ts
rename to app/frontend/src/components/rag/index.ts
diff --git a/app/frontend/src/components/ui/button.tsx b/app/frontend/src/components/ui/button.tsx
index 5b735639..e4f754e5 100644
--- a/app/frontend/src/components/ui/button.tsx
+++ b/app/frontend/src/components/ui/button.tsx
@@ -9,16 +9,18 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-stone-900 text-stone-300 hover:text-white hover:bg-stone-900/90 dark:bg-stone-700 dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-600 hover:shadow-[0px_3px] hover:shadow-gray-400 dark:hover:shadow-black active:bg-stone-800 dark:active:bg-stone-500",
+          "bg-stone-900 text-stone-100 hover:bg-stone-800 dark:bg-stone-200 dark:text-stone-900 dark:hover:bg-stone-300 hover:shadow-[0_4px_8px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_8px_rgba(0,0,0,0.1)] hover:-translate-y-0.5 active:translate-y-0 active:shadow-none",
         destructive:
-          "bg-red-500 text-stone-300 hover:text-white hover:bg-red-500/90 dark:bg-red-700 dark:text-stone-300 dark:hover:text-white dark:hover:bg-red-600 hover:shadow-[0px_3px] hover:shadow-red-400 dark:hover:shadow-black active:bg-red-400 dark:active:bg-red-500",
+          "bg-red-600 text-white hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 hover:shadow-[0_4px_8px_rgba(239,68,68,0.2)] dark:hover:shadow-[0_4px_8px_rgba(239,68,68,0.2)] hover:-translate-y-0.5 active:translate-y-0 active:shadow-none",
         outline:
+          "border border-stone-200 bg-white text-stone-900 hover:bg-stone-100 hover:text-stone-900 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-100 dark:hover:bg-stone-800 dark:hover:text-white hover:shadow-[0_4px_8px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_8px_rgba(255,255,255,0.1)] hover:-translate-y-0.5 active:translate-y-0 active:shadow-none",
+        navbar:
           "border border-stone-200 bg-white text-stone-700 hover:text-white hover:bg-stone-100 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-700 hover:shadow-[0px_3px] hover:shadow-gray-400 dark:hover:shadow-black active:bg-stone-100 dark:active:bg-stone-700",
         secondary:
-          "bg-stone-100 text-stone-700 hover:text-white hover:bg-stone-100/80 dark:bg-stone-700 dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-600 hover:shadow-[0px_3px] hover:shadow-gray-400 dark:hover:shadow-black active:bg-stone-200 dark:active:bg-stone-600",
+          "bg-stone-100 text-stone-900 hover:bg-stone-200 dark:bg-stone-800 dark:text-stone-100 dark:hover:bg-stone-700 hover:shadow-[0_4px_8px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_8px_rgba(255,255,255,0.1)] hover:-translate-y-0.5 active:translate-y-0 active:shadow-none",
         ghost:
-          "text-stone-700 hover:text-white hover:bg-stone-100 dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-700 hover:shadow-[0px_3px] hover:shadow-gray-400 dark:hover:shadow-black active:bg-stone-200 dark:active:bg-stone-700",
-        link: "text-stone-700 hover:text-white underline-offset-4 hover:underline dark:text-stone-300 dark:hover:text-white",
+          "text-stone-900 hover:bg-stone-100 hover:text-stone-900 dark:text-stone-100 dark:hover:bg-stone-800 dark:hover:text-white hover:shadow-[0_4px_8px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_8px_rgba(255,255,255,0.1)] hover:-translate-y-0.5 active:translate-y-0 active:shadow-none",
+        link: "text-stone-900 underline-offset-4 hover:underline dark:text-stone-100 hover:text-stone-700 dark:hover:text-stone-300",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -54,4 +56,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+export { Button, buttonVariants };
\ No newline at end of file
diff --git a/app/frontend/src/pages/ChatUIPage.tsx b/app/frontend/src/pages/ChatUIPage.tsx
index db807d33..5d7f6f38 100644
--- a/app/frontend/src/pages/ChatUIPage.tsx
+++ b/app/frontend/src/pages/ChatUIPage.tsx
@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import ChatComponent from "../components/ChatComponent";
+import ChatComponent from "../components/chatui/ChatComponent";
 
 const ChatUI = () => {
   return (
@@ -10,7 +10,7 @@ const ChatUI = () => {
           className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white"
           style={{
             maskImage:
-              "radial-gradient(ellipse at center, transparent 20%, black 100%)",
+              "radial-gradient(ellipse at center, transparent 95%, black 100%)",
           }}
         ></div>
         <div className="flex flex-grow justify-center items-center w-full h-screen ">
diff --git a/app/frontend/src/pages/LogsPage.tsx b/app/frontend/src/pages/LogsPage.tsx
new file mode 100644
index 00000000..a15758ec
--- /dev/null
+++ b/app/frontend/src/pages/LogsPage.tsx
@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+import LogsViewer from "../components/log_viewer/LogViewer";
+
+const HomePage = () => {
+  return (
+    <>
+      <div className="h-screen w-full dark:bg-black bg-white dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex items-center justify-center">
+        <div
+          className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white"
+          style={{
+            maskImage:
+              "radial-gradient(ellipse at center, transparent 45%, black 100%)",
+          }}
+        ></div>
+        <div className="flex flex-grow justify-center items-center w-full h-screen">
+          <LogsViewer />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default HomePage;
diff --git a/app/frontend/src/pages/ModelsDeployed.tsx b/app/frontend/src/pages/ModelsDeployed.tsx
index 85f9a58b..445ab99b 100644
--- a/app/frontend/src/pages/ModelsDeployed.tsx
+++ b/app/frontend/src/pages/ModelsDeployed.tsx
@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import { ModelsDeployedTable } from "../components/ModelsDeployedTable";
+import ModelsDeployedTable from "../components/ModelsDeployedTable";
 
 const ModelsDeployed = () => {
   return (
diff --git a/app/frontend/src/providers/ModelsContext.tsx b/app/frontend/src/providers/ModelsContext.tsx
new file mode 100644
index 00000000..f915cbc1
--- /dev/null
+++ b/app/frontend/src/providers/ModelsContext.tsx
@@ -0,0 +1,52 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+"use client";
+
+import React, { createContext, useContext, useState, useCallback } from "react";
+import { fetchModels } from "../api/modelsDeployedApis";
+
+export interface Model {
+  id: string;
+  name: string;
+  image: string;
+  status: string;
+  health: string;
+  ports: string;
+}
+
+interface ModelsContextType {
+  models: Model[];
+  setModels: React.Dispatch<React.SetStateAction<Model[]>>;
+  refreshModels: () => Promise<void>;
+}
+
+const ModelsContext = createContext<ModelsContextType | undefined>(undefined);
+
+export const ModelsProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [models, setModels] = useState<Model[]>([]);
+
+  const refreshModels = useCallback(async () => {
+    try {
+      const fetchedModels = await fetchModels();
+      setModels(fetchedModels);
+    } catch (error) {
+      console.error("Error refreshing models:", error);
+    }
+  }, []);
+
+  return (
+    <ModelsContext.Provider value={{ models, setModels, refreshModels }}>
+      {children}
+    </ModelsContext.Provider>
+  );
+};
+
+export const useModels = () => {
+  const context = useContext(ModelsContext);
+  if (context === undefined) {
+    throw new Error("useModels must be used within a ModelsProvider");
+  }
+  return context;
+};
diff --git a/app/frontend/src/routes/index.tsx b/app/frontend/src/routes/index.tsx
index faa9f9dd..c41b0714 100644
--- a/app/frontend/src/routes/index.tsx
+++ b/app/frontend/src/routes/index.tsx
@@ -1,26 +1,31 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import React from "react";
+
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import HomePage from "../pages/HomePage";
 import ModelsDeployed from "../pages/ModelsDeployed";
 import NavBar from "../components/NavBar";
 import ChatUI from "../pages/ChatUIPage";
 import { RefreshProvider } from "../providers/RefreshContext";
-import RagManagement from "../pages/rag/RagManagement";
+import { ModelsProvider } from "../providers/ModelsContext";
+import RagManagement from "../components/rag/RagManagement";
+import LogsPage from "../pages/LogsPage";
 
 const AppRouter = () => {
   return (
     <RefreshProvider>
-      <Router>
-        <NavBar />
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/models-deployed" element={<ModelsDeployed />} />
-          <Route path="/chat-ui" element={<ChatUI />} />
-          <Route path="/rag-management" element={<RagManagement />} />
-        </Routes>
-      </Router>
+      <ModelsProvider>
+        <Router>
+          <NavBar />
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/models-deployed" element={<ModelsDeployed />} />
+            <Route path="/chat-ui" element={<ChatUI />} />
+            <Route path="/rag-management" element={<RagManagement />} />
+            <Route path="/logs" element={<LogsPage />} />
+          </Routes>
+        </Router>
+      </ModelsProvider>
     </RefreshProvider>
   );
 };
diff --git a/app/frontend/tsconfig.json b/app/frontend/tsconfig.json
index 273db652..bcff25a6 100644
--- a/app/frontend/tsconfig.json
+++ b/app/frontend/tsconfig.json
@@ -2,10 +2,9 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["es2023", "dom"],
     "module": "ESNext",
     "skipLibCheck": true,
-
     "baseUrl": ".",
     "paths": {
       // "@/*": ["./src/*"],
diff --git a/app/frontend/vite.config.ts b/app/frontend/vite.config.ts
index 63b6b2c1..800d8afd 100644
--- a/app/frontend/vite.config.ts
+++ b/app/frontend/vite.config.ts
@@ -13,6 +13,7 @@ const VITE_BACKEND_PROXY_MAPPING: { [key: string]: string } = {
   "models-api": "models",
   "app-api": "app",
   "collections-api": "collections",
+  "logs-api": "logs",
 };
 
 const proxyConfig: Record<string, string | ProxyOptions> = Object.fromEntries(