diff --git a/SearchQnA/docker/gaudi/compose.yaml b/SearchQnA/docker/gaudi/compose.yaml
index b7198e3637..9847b2ee27 100644
--- a/SearchQnA/docker/gaudi/compose.yaml
+++ b/SearchQnA/docker/gaudi/compose.yaml
@@ -157,6 +157,22 @@ services:
       - LLM_SERVICE_PORT=${LLM_SERVICE_PORT}
     ipc: host
     restart: always
+  searchqna-gaudi-ui-server:
+    image: opea/searchqna-ui:latest
+    container_name: searchqna-gaudi-ui-server
+    depends_on:
+      - searchqna-gaudi-backend-server
+    ports:
+      - "5173:5173"
+    environment:
+      - no_proxy=${no_proxy}
+      - https_proxy=${https_proxy}
+      - http_proxy=${http_proxy}
+      - BACKEND_BASE_URL=${BACKEND_SERVICE_ENDPOINT}
+    ipc: host
+    restart: always
+
+
 
 networks:
   default:
diff --git a/SearchQnA/docker/ui/svelte/.env b/SearchQnA/docker/ui/svelte/.env
index a3c0eb228a..89db8c4674 100644
--- a/SearchQnA/docker/ui/svelte/.env
+++ b/SearchQnA/docker/ui/svelte/.env
@@ -1 +1 @@
-BACKEND_BASE_URL = 'http://x.x.x.x:yyyy/v1/searchqna'
\ No newline at end of file
+BACKEND_BASE_URL = 'http://backend_address:3008/v1/searchqna'
\ No newline at end of file
diff --git a/SearchQnA/docker/ui/svelte/package.json b/SearchQnA/docker/ui/svelte/package.json
index 404e71a9f4..f10053e73f 100644
--- a/SearchQnA/docker/ui/svelte/package.json
+++ b/SearchQnA/docker/ui/svelte/package.json
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@fortawesome/free-solid-svg-icons": "6.2.0",
+    "@playwright/test": "^1.45.2",
     "@sveltejs/adapter-auto": "1.0.0-next.75",
     "@sveltejs/kit": "^1.30.4",
     "@tailwindcss/typography": "0.5.7",
diff --git a/SearchQnA/docker/ui/svelte/playwright.config.ts b/SearchQnA/docker/ui/svelte/playwright.config.ts
new file mode 100644
index 0000000000..578a1c2872
--- /dev/null
+++ b/SearchQnA/docker/ui/svelte/playwright.config.ts
@@ -0,0 +1,54 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: "./tests",
+	/* Maximum time one test can run for. */
+	timeout: 30 * 1000,
+	expect: {
+		/**
+		 * Maximum time expect() should wait for the condition to be met.
+		 * For example in `await expect(locator).toHaveText();`
+		 */
+		timeout: 5000,
+	},
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: [["html", { open: "never" }]],
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+		actionTimeout: 0,
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: "http://localhost:5173",
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: "on-first-retry",
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: "webkit",
+			use: { ...devices["Desktop Safari"] },
+		},
+	],
+});
diff --git a/SearchQnA/docker/ui/svelte/src/lib/modules/chat/ChatMessage.svelte b/SearchQnA/docker/ui/svelte/src/lib/modules/chat/ChatMessage.svelte
index ff7f4121c7..12261aa82e 100644
--- a/SearchQnA/docker/ui/svelte/src/lib/modules/chat/ChatMessage.svelte
+++ b/SearchQnA/docker/ui/svelte/src/lib/modules/chat/ChatMessage.svelte
@@ -31,6 +31,9 @@
 	class={msg.role === 0
 		? "flex w-full gap-3"
 		: "flex w-full items-center gap-3"}
+	data-testid={msg.role === 0
+		? "display-answer"
+		: "display-question"}
 >
 	<div
 		class={msg.role === 0
diff --git a/SearchQnA/docker/ui/svelte/src/routes/+page.svelte b/SearchQnA/docker/ui/svelte/src/routes/+page.svelte
index a7aa82d44d..dae0b5e19e 100644
--- a/SearchQnA/docker/ui/svelte/src/routes/+page.svelte
+++ b/SearchQnA/docker/ui/svelte/src/routes/+page.svelte
@@ -188,6 +188,7 @@
 						class="text-md block w-full border-0 border-b-2 border-gray-300 px-1 py-4
 						text-gray-900 focus:border-gray-300 focus:ring-0 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
 						type="text"
+						data-testid="chat-input"
 						placeholder="Enter prompt here"
 						disabled={loading}
 						maxlength="1200"
diff --git a/SearchQnA/docker/ui/svelte/tests/searchQnA.spec.ts b/SearchQnA/docker/ui/svelte/tests/searchQnA.spec.ts
new file mode 100644
index 0000000000..faecd5250e
--- /dev/null
+++ b/SearchQnA/docker/ui/svelte/tests/searchQnA.spec.ts
@@ -0,0 +1,29 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { test, expect, type Page } from "@playwright/test";
+
+// Initialization before each test
+test.beforeEach(async ({ page }) => {
+	await page.goto("/");
+});
+
+// Constants definition
+const CHAT_ITEMS = ["What is the total revenue of Nike in 2023?"];
+
+// Helper function: Enter message to chat
+async function enterMessageToChat(page: Page, message: string) {
+	await page.getByTestId("chat-input").click();
+	await page.getByTestId("chat-input").fill(message);
+	await page.getByTestId("chat-input").press("Enter");
+	await page.waitForTimeout(10000);
+	await expect(page.getByTestId("display-answer")).toBeVisible();
+}
+
+// Test description: New Chat
+test.describe("New Chat", () => {
+	// Test: Enter message to chat
+	test("should enter message to chat", async ({ page }) => {
+		await enterMessageToChat(page, CHAT_ITEMS[0]);
+	});
+});
diff --git a/SearchQnA/docker/xeon/compose.yaml b/SearchQnA/docker/xeon/compose.yaml
index 9a81a989fd..ae388d2dc8 100644
--- a/SearchQnA/docker/xeon/compose.yaml
+++ b/SearchQnA/docker/xeon/compose.yaml
@@ -141,6 +141,21 @@ services:
       - LLM_SERVICE_PORT=${LLM_SERVICE_PORT}
     ipc: host
     restart: always
+  searchqna-gaudi-ui-server:
+    image: opea/searchqna-ui:latest
+    container_name: searchqna-xeon-ui-server
+    depends_on:
+      - searchqna-xeon-backend-server
+    ports:
+      - "5173:5173"
+    environment:
+      - no_proxy=${no_proxy}
+      - https_proxy=${https_proxy}
+      - http_proxy=${http_proxy}
+      - BACKEND_BASE_URL=${BACKEND_SERVICE_ENDPOINT}
+    ipc: host
+    restart: always
+
 
 networks:
   default:
diff --git a/SearchQnA/tests/test_searchqna_on_gaudi.sh b/SearchQnA/tests/test_searchqna_on_gaudi.sh
index 379a846e83..48fd32a7ec 100644
--- a/SearchQnA/tests/test_searchqna_on_gaudi.sh
+++ b/SearchQnA/tests/test_searchqna_on_gaudi.sh
@@ -4,7 +4,7 @@
 
 # for test
 
-set -e
+set -xe
 
 WORKPATH=$(dirname "$PWD")
 LOG_PATH="$WORKPATH/tests"
@@ -30,8 +30,8 @@ function build_docker_images() {
     cd $WORKPATH/docker
     docker build --no-cache -t opea/searchqna:latest -f Dockerfile .
 
-    # cd $WORKPATH/docker/ui
-    # docker build --no-cache -t opea/searchqna-ui:latest -f docker/Dockerfile .
+    cd $WORKPATH/docker/ui
+    docker build --no-cache -t opea/searchqna-ui:latest -f docker/Dockerfile .
 
     docker images
 }
@@ -66,8 +66,10 @@ function start_services() {
     export WEB_RETRIEVER_SERVICE_PORT=3003
     export RERANK_SERVICE_PORT=3005
     export LLM_SERVICE_PORT=3007
+    export BACKEND_SERVICE_ENDPOINT="http://${ip_address}:3008/v1/searchqna"
 
-    # sed -i "s/backend_address/$ip_address/g" $WORKPATH/docker/ui/svelte/.env
+
+    sed -i "s/backend_address/$ip_address/g" $WORKPATH/docker/ui/svelte/.env
 
     if [[ "$IMAGE_REPO" != "" ]]; then
         # Replace the container name with a test-specific name
@@ -111,30 +113,31 @@ function validate_megaservice() {
 
 }
 
-#function validate_frontend() {
-#    cd $WORKPATH/docker/ui/svelte
-#    local conda_env_name="OPEA_e2e"
-#    export PATH=${HOME}/miniforge3/bin/:$PATH
-##    conda remove -n ${conda_env_name} --all -y
-##    conda create -n ${conda_env_name} python=3.12 -y
-#    source activate ${conda_env_name}
-#
-#    sed -i "s/localhost/$ip_address/g" playwright.config.ts
-#
-##    conda install -c conda-forge nodejs -y
-#    npm install && npm ci && npx playwright install --with-deps
-#    node -v && npm -v && pip list
-#
-#    exit_status=0
-#    npx playwright test || exit_status=$?
-#
-#    if [ $exit_status -ne 0 ]; then
-#        echo "[TEST INFO]: ---------frontend test failed---------"
-#        exit $exit_status
-#    else
-#        echo "[TEST INFO]: ---------frontend test passed---------"
-#    fi
-#}
+function validate_frontend() {
+    cd $WORKPATH/docker/ui/svelte
+    local conda_env_name="OPEA_e2e"
+
+    export PATH=${HOME}/miniforge3/bin/:$PATH
+    #    conda remove -n ${conda_env_name} --all -y
+    #    conda create -n ${conda_env_name} python=3.12 -y
+    source activate ${conda_env_name}
+
+    sed -i "s/localhost/$ip_address/g" playwright.config.ts
+
+    #    conda install -c conda-forge nodejs -y
+    npm install && npm ci && npx playwright install --with-deps
+    node -v && npm -v && pip list
+
+    exit_status=0
+    npx playwright test || exit_status=$?
+
+    if [ $exit_status -ne 0 ]; then
+        echo "[TEST INFO]: ---------frontend test failed---------"
+        exit $exit_status
+    else
+        echo "[TEST INFO]: ---------frontend test passed---------"
+    fi
+}
 
 function stop_docker() {
     cd $WORKPATH/docker/gaudi
@@ -148,7 +151,7 @@ function main() {
     start_services
 
     validate_megaservice
-    # validate_frontend
+    validate_frontend
 
     stop_docker
     echo y | docker system prune
diff --git a/SearchQnA/tests/test_searchqna_on_xeon.sh b/SearchQnA/tests/test_searchqna_on_xeon.sh
index 73a6361f18..8bbc9d3466 100644
--- a/SearchQnA/tests/test_searchqna_on_xeon.sh
+++ b/SearchQnA/tests/test_searchqna_on_xeon.sh
@@ -2,7 +2,7 @@
 # Copyright (C) 2024 Intel Corporation
 # SPDX-License-Identifier: Apache-2.0
 
-set -e
+set -xe
 
 WORKPATH=$(dirname "$PWD")
 LOG_PATH="$WORKPATH/tests"
@@ -22,8 +22,8 @@ function build_docker_images() {
     cd $WORKPATH/docker
     docker build -t opea/searchqna:latest -f Dockerfile .
 
-    # cd $WORKPATH/docker/ui
-    # docker build --no-cache -t opea/searchqna-ui:latest -f docker/Dockerfile .
+    cd $WORKPATH/docker/ui
+    docker build --no-cache -t opea/searchqna-ui:latest -f docker/Dockerfile .
 
     docker images
 }
@@ -52,8 +52,10 @@ function start_services() {
     export WEB_RETRIEVER_SERVICE_PORT=3003
     export RERANK_SERVICE_PORT=3005
     export LLM_SERVICE_PORT=3007
+    export BACKEND_SERVICE_ENDPOINT="http://${ip_address}:3008/v1/searchqna"
 
-    # sed -i "s/backend_address/$ip_address/g" $WORKPATH/docker/ui/svelte/.env
+
+    sed -i "s/backend_address/$ip_address/g" $WORKPATH/docker/ui/svelte/.env
 
     if [[ "$IMAGE_REPO" != "" ]]; then
         # Replace the container name with a test-specific name
@@ -94,30 +96,30 @@ function validate_megaservice() {
 
 }
 
-#function validate_frontend() {
-#    cd $WORKPATH/docker/ui/svelte
-#    local conda_env_name="OPEA_e2e"
-#    export PATH=${HOME}/miniforge3/bin/:$PATH
-##    conda remove -n ${conda_env_name} --all -y
-##    conda create -n ${conda_env_name} python=3.12 -y
-#    source activate ${conda_env_name}
-#
-#    sed -i "s/localhost/$ip_address/g" playwright.config.ts
-#
-##    conda install -c conda-forge nodejs -y
-#    npm install && npm ci && npx playwright install --with-deps
-#    node -v && npm -v && pip list
-#
-#    exit_status=0
-#    npx playwright test || exit_status=$?
-#
-#    if [ $exit_status -ne 0 ]; then
-#        echo "[TEST INFO]: ---------frontend test failed---------"
-#        exit $exit_status
-#    else
-#        echo "[TEST INFO]: ---------frontend test passed---------"
-#    fi
-#}
+function validate_frontend() {
+   cd $WORKPATH/docker/ui/svelte
+   local conda_env_name="OPEA_e2e"
+   export PATH=${HOME}/miniforge3/bin/:$PATH
+#    conda remove -n ${conda_env_name} --all -y
+#    conda create -n ${conda_env_name} python=3.12 -y
+   source activate ${conda_env_name}
+
+   sed -i "s/localhost/$ip_address/g" playwright.config.ts
+
+#    conda install -c conda-forge nodejs -y
+   npm install && npm ci && npx playwright install --with-deps
+   node -v && npm -v && pip list
+
+   exit_status=0
+   npx playwright test || exit_status=$?
+
+   if [ $exit_status -ne 0 ]; then
+       echo "[TEST INFO]: ---------frontend test failed---------"
+       exit $exit_status
+   else
+       echo "[TEST INFO]: ---------frontend test passed---------"
+   fi
+}
 
 function stop_docker() {
     cd $WORKPATH/docker/xeon
@@ -131,7 +133,7 @@ function main() {
     start_services
 
     validate_megaservice
-    # validate_frontend
+    validate_frontend
 
     stop_docker
     echo y | docker system prune
