diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 135312808..00a3c52da 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -27,7 +27,8 @@ If applicable, add screenshots to help explain your problem.
 If applicable, add exported flow in order to help replicating the problem.
 
 **Setup**
--   Installation [e.g. docker, `npx flowise start`, `yarn start`]
+
+-   Installation [e.g. docker, `npx flowise start`, `pnpm start`]
 -   Flowise Version [e.g. 1.2.11]
 -   OS: [e.g. macOS, Windows, Linux]
 -   Browser [e.g. chrome, safari]
diff --git a/CONTRIBUTING-ZH.md b/CONTRIBUTING-ZH.md
index 5a7522802..b8abe4957 100644
--- a/CONTRIBUTING-ZH.md
+++ b/CONTRIBUTING-ZH.md
@@ -44,9 +44,9 @@ Flowise 在一个单一的单体存储库中有 3 个不同的模块。
 
 #### 先决条件
 
--   安装 [Yarn v1](https://classic.yarnpkg.com/en/docs/install)
+-   安装 [PNPM](https://pnpm.io/installation)
     ```bash
-    npm i -g yarn
+    npm i -g pnpm
     ```
 
 #### 逐步指南
@@ -71,45 +71,45 @@ Flowise 在一个单一的单体存储库中有 3 个不同的模块。
 6. 安装所有模块的依赖项：
 
     ```bash
-    yarn install
+    pnpm install
     ```
 
 7. 构建所有代码：
 
     ```bash
-    yarn build
+    pnpm build
     ```
 
 8. 在[http://localhost:3000](http://localhost:3000)上启动应用程序
 
     ```bash
-    yarn start
+    pnpm start
     ```
 
 9. 开发时：
 
-    - 在`packages/ui`中创建`.env`文件并指定`PORT`（参考`.env.example`）
+    - 在`packages/ui`中创建`.env`文件并指定`VITE_PORT`（参考`.env.example`）
     - 在`packages/server`中创建`.env`文件并指定`PORT`（参考`.env.example`）
     - 运行
 
     ```bash
-    yarn dev
+    pnpm dev
     ```
 
     对`packages/ui`或`packages/server`进行的任何更改都将反映在[http://localhost:8080](http://localhost:8080)上
 
-    对于`packages/components`中进行的更改，再次运行`yarn build`以应用更改。
+    对于`packages/components`中进行的更改，再次运行`pnpm build`以应用更改。
 
 10. 做完所有的更改后，运行以下命令来确保在生产环境中一切正常：
 
     ```bash
-    yarn build
+    pnpm build
     ```
 
     和
 
     ```bash
-    yarn start
+    pnpm start
     ```
 
 11. 提交代码并从指向 [Flowise 主分支](https://github.com/FlowiseAI/Flowise/tree/master) 的分叉分支上提交 Pull Request。
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index c1609b4b6..c933f1d47 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -88,7 +88,7 @@ Flowise has 3 different modules in a single mono repository.
 
 9. For development:
 
-    - Create `.env` file and specify the `PORT` (refer to `.env.example`) in `packages/ui`
+    - Create `.env` file and specify the `VITE_PORT` (refer to `.env.example`) in `packages/ui`
     - Create `.env` file and specify the `PORT` (refer to `.env.example`) in `packages/server`
     - Run
 
@@ -96,7 +96,7 @@ Flowise has 3 different modules in a single mono repository.
     pnpm dev
     ```
 
-    Any changes made in `packages/ui` or `packages/server` will be reflected on [http://localhost:5173](http://localhost:5173)
+    Any changes made in `packages/ui` or `packages/server` will be reflected on [http://localhost:8080](http://localhost:8080)
 
     For changes made in `packages/components`, run `pnpm build` again to pickup the changes.
 
diff --git a/README-ZH.md b/README-ZH.md
index 2805ef9bc..f076891dc 100644
--- a/README-ZH.md
+++ b/README-ZH.md
@@ -75,9 +75,9 @@ Flowise 在一个单一的代码库中有 3 个不同的模块。
 
 ### 先决条件
 
--   安装 [Yarn v1](https://classic.yarnpkg.com/en/docs/install)
+-   安装 [PNPM](https://pnpm.io/installation)
     ```bash
-    npm i -g yarn
+    npm i -g pnpm
     ```
 
 ### 设置
@@ -97,31 +97,31 @@ Flowise 在一个单一的代码库中有 3 个不同的模块。
 3. 安装所有模块的依赖：
 
     ```bash
-    yarn install
+    pnpm install
     ```
 
 4. 构建所有代码：
 
     ```bash
-    yarn build
+    pnpm build
     ```
 
 5. 启动应用：
 
     ```bash
-    yarn start
+    pnpm start
     ```
 
     现在可以在 [http://localhost:3000](http://localhost:3000) 访问应用
 
 6. 用于开发构建：
 
-    - 在 `packages/ui` 中创建 `.env` 文件并指定 `PORT`（参考 `.env.example`）
+    - 在 `packages/ui` 中创建 `.env` 文件并指定 `VITE_PORT`（参考 `.env.example`）
     - 在 `packages/server` 中创建 `.env` 文件并指定 `PORT`（参考 `.env.example`）
     - 运行
 
         ```bash
-        yarn dev
+        pnpm dev
         ```
 
     任何代码更改都会自动重新加载应用程序，访问 [http://localhost:8080](http://localhost:8080)
diff --git a/README.md b/README.md
index 25026237f..c20e9d854 100644
--- a/README.md
+++ b/README.md
@@ -75,9 +75,9 @@ Flowise has 3 different modules in a single mono repository.
 
 ### Prerequisite
 
--   Install [Yarn v1](https://classic.yarnpkg.com/en/docs/install)
+-   Install [Yarn v1](https://pnpm.io/installation)
     ```bash
-    npm i -g yarn
+    npm i -g pnpm
     ```
 
 ### Setup
@@ -97,31 +97,31 @@ Flowise has 3 different modules in a single mono repository.
 3. Install all dependencies of all modules:
 
     ```bash
-    yarn install
+    pnpm install
     ```
 
 4. Build all the code:
 
     ```bash
-    yarn build
+    pnpm build
     ```
 
 5. Start the app:
 
     ```bash
-    yarn start
+    pnpm start
     ```
 
     You can now access the app on [http://localhost:3000](http://localhost:3000)
 
 6. For development build:
 
-    - Create `.env` file and specify the `PORT` (refer to `.env.example`) in `packages/ui`
+    - Create `.env` file and specify the `VITE_PORT` (refer to `.env.example`) in `packages/ui`
     - Create `.env` file and specify the `PORT` (refer to `.env.example`) in `packages/server`
     - Run
 
         ```bash
-        yarn dev
+        pnpm dev
         ```
 
     Any code changes will reload the app automatically on [http://localhost:8080](http://localhost:8080)
diff --git a/packages/components/nodes/chatmodels/ChatHuggingFace/core.ts b/packages/components/nodes/chatmodels/ChatHuggingFace/core.ts
index 416567f0d..135734509 100644
--- a/packages/components/nodes/chatmodels/ChatHuggingFace/core.ts
+++ b/packages/components/nodes/chatmodels/ChatHuggingFace/core.ts
@@ -107,7 +107,7 @@ export class HuggingFaceInference extends LLM implements HFInput {
             const { HfInference } = await import('@huggingface/inference')
             return { HfInference }
         } catch (e) {
-            throw new Error('Please install huggingface as a dependency with, e.g. `yarn add @huggingface/inference`')
+            throw new Error('Please install huggingface as a dependency with, e.g. `pnpm install @huggingface/inference`')
         }
     }
 }
diff --git a/packages/components/nodes/llms/Cohere/core.ts b/packages/components/nodes/llms/Cohere/core.ts
index 97c815710..1f480c642 100644
--- a/packages/components/nodes/llms/Cohere/core.ts
+++ b/packages/components/nodes/llms/Cohere/core.ts
@@ -72,7 +72,7 @@ export class Cohere extends LLM implements CohereInput {
             const { default: cohere } = await import('cohere-ai')
             return { cohere }
         } catch (e) {
-            throw new Error('Please install cohere-ai as a dependency with, e.g. `yarn add cohere-ai`')
+            throw new Error('Please install cohere-ai as a dependency with, e.g. `pnpm install cohere-ai`')
         }
     }
 }
diff --git a/packages/ui/.env.example b/packages/ui/.env.example
index 25241b73a..db18b4cda 100644
--- a/packages/ui/.env.example
+++ b/packages/ui/.env.example
@@ -1 +1 @@
-PORT=8080
+VITE_PORT=8080
diff --git a/packages/ui/public/index.html b/packages/ui/public/index.html
index b4ec9ea10..c96afebca 100644
--- a/packages/ui/public/index.html
+++ b/packages/ui/public/index.html
@@ -55,8 +55,8 @@
           You can add webfonts, meta tags, or analytics to this file.
           The build step will place the bundled scripts into the <body> tag.
 
-          To begin the development, run `npm start` or `yarn start`.
-          To create a production bundle, use `npm run build` or `yarn build`.
+          To begin the development, run `pnpm start`.
+          To create a production bundle, use `pnpm build`.
    -->
     </body>
 </html>
diff --git a/packages/ui/src/store/constant.js b/packages/ui/src/store/constant.js
index 032e29044..c420558b0 100644
--- a/packages/ui/src/store/constant.js
+++ b/packages/ui/src/store/constant.js
@@ -3,7 +3,10 @@ export const gridSpacing = 3
 export const drawerWidth = 260
 export const appDrawerWidth = 320
 export const maxScroll = 100000
-export const baseURL = import.meta.env.PROD === true ? window.location.origin : window.location.origin.replace(':8080', ':3000')
+export const baseURL =
+    import.meta.env.PROD === true
+        ? window.location.origin
+        : window.location.origin.replace(`:${import.meta.env.VITE_PORT ?? '8080'}`, ':3000')
 export const uiBaseURL = window.location.origin
 export const FLOWISE_CREDENTIAL_ID = 'FLOWISE_CREDENTIAL_ID'
 export const REDACTED_CREDENTIAL_VALUE = '_FLOWISE_BLANK_07167752-1a71-43b1-bf8f-4f32252165db'
diff --git a/packages/ui/vite.config.js b/packages/ui/vite.config.js
index 223532998..4ccf09824 100644
--- a/packages/ui/vite.config.js
+++ b/packages/ui/vite.config.js
@@ -1,6 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { resolve } from 'path'
+import dotenv from 'dotenv'
+
+dotenv.config()
 
 export default defineConfig({
     plugins: [react()],
@@ -15,6 +18,6 @@ export default defineConfig({
     },
     server: {
         open: true,
-        port: 8080
+        port: process.env.VITE_PORT ?? 8080
     }
 })