diff --git a/ApiDocs/nodemon.json b/ApiDocs/nodemon.json
new file mode 100644
index 0000000000..c62054f0d8
--- /dev/null
+++ b/ApiDocs/nodemon.json
@@ -0,0 +1,5 @@
+{
+    "watch": ["./", "../Common", "../CommonServer", "../Model"],
+    "ext": "ts,json,tsx,env,js,jsx,ejs",
+    "exec": "node --inspect=0.0.0.0:9229 --require ts-node/register Index.ts"
+}
\ No newline at end of file
diff --git a/ApiDocs/package.json b/ApiDocs/package.json
index 52800c55da..f875708f08 100755
--- a/ApiDocs/package.json
+++ b/ApiDocs/package.json
@@ -32,10 +32,8 @@
         "preinstall": "npx npm-force-resolutions || echo 'No package-lock.json file. Skipping force resolutions'",
         "start": "node --require ts-node/register Index.ts",
         "compile": "tsc",
-        "dev": "ts-node-dev server.js",
-        "test": "mocha --exit test/index.ts",
-        "audit": "npm audit --audit-level=low",
-        "dep-check": "depcheck ./ --skip-missing=true --ignores='babel-*,browserslist,ejs,path'"
+        "dev": "npx nodemon",
+        "test": "jest"
     },
     "resolutions": {},
     "devDependencies": {
@@ -45,4 +43,4 @@
         "npm-force-resolutions": "0.0.10",
         "ts-node-dev": "^1.1.8"
     }
-}
+}
\ No newline at end of file
diff --git a/Dashboard/src/App.tsx b/Dashboard/src/App.tsx
index b2253d5cde..78895b6f89 100644
--- a/Dashboard/src/App.tsx
+++ b/Dashboard/src/App.tsx
@@ -18,10 +18,14 @@ import OngoingScheduledEvents from './Pages/Home/OngingScheduledMaintenance';
 import useAsyncEffect from 'use-async-effect';
 
 import Workflows from './Pages/Workflow/Workflows';
+import WorkflowsVariables from './Pages/Workflow/Variable';
+import WorkflowsLogs from './Pages/Workflow/Logs';
 import WorkflowLogs from './Pages/Workflow/View/Logs';
 import WorkflowDelete from './Pages/Workflow/View/Delete';
 import WorkflowBuilder from './Pages/Workflow/View/Builder';
 import WorkflowOverview from './Pages/Workflow/View/Index';
+import WorkflowVariables from './Pages/Workflow/View/Variable';
+
 
 import StatusPages from './Pages/StatusPages/StatusPages';
 import StatusPagesView from './Pages/StatusPages/View/Index';
@@ -188,7 +192,7 @@ const App: FunctionComponent = () => {
         } catch (err) {
             setError(
                 (err as HTTPErrorResponse).message ||
-                    'Server Error. Please try again'
+                'Server Error. Please try again'
             );
         }
 
@@ -273,7 +277,7 @@ const App: FunctionComponent = () => {
                         <NotOperationalMonitors
                             pageRoute={
                                 RouteMap[
-                                    PageMap.HOME_NOT_OPERATIONAL_MONITORS
+                                PageMap.HOME_NOT_OPERATIONAL_MONITORS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -293,8 +297,8 @@ const App: FunctionComponent = () => {
                         <OngoingScheduledEvents
                             pageRoute={
                                 RouteMap[
-                                    PageMap
-                                        .HOME_ONGOING_SCHEDULED_MAINTENANCE_EVENTS
+                                PageMap
+                                    .HOME_ONGOING_SCHEDULED_MAINTENANCE_EVENTS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -322,7 +326,7 @@ const App: FunctionComponent = () => {
                         <MonitorInoperational
                             pageRoute={
                                 RouteMap[
-                                    PageMap.MONITORS_INOPERATIONAL
+                                PageMap.MONITORS_INOPERATIONAL
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -364,7 +368,7 @@ const App: FunctionComponent = () => {
                         <MonitorViewStatusTimeline
                             pageRoute={
                                 RouteMap[
-                                    PageMap.MONITOR_VIEW_STATUS_TIMELINE
+                                PageMap.MONITOR_VIEW_STATUS_TIMELINE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -381,7 +385,7 @@ const App: FunctionComponent = () => {
                         <MonitorIncidents
                             pageRoute={
                                 RouteMap[
-                                    PageMap.MONITOR_VIEW_INCIDENTS
+                                PageMap.MONITOR_VIEW_INCIDENTS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -401,6 +405,37 @@ const App: FunctionComponent = () => {
                     }
                 />
 
+
+                <PageRoute
+                    path={RouteMap[PageMap.WORKFLOWS_VARIABLES]?.toString() || ''}
+                    element={
+                        <WorkflowsVariables
+                            pageRoute={RouteMap[PageMap.WORKFLOWS_VARIABLES] as Route}
+                            currentProject={selectedProject}
+                        />
+                    }
+                />
+
+                <PageRoute
+                    path={RouteMap[PageMap.WORKFLOWS_LOGS]?.toString() || ''}
+                    element={
+                        <WorkflowsLogs
+                            pageRoute={RouteMap[PageMap.WORKFLOWS_LOGS] as Route}
+                            currentProject={selectedProject}
+                        />
+                    }
+                />
+
+                <PageRoute
+                    path={RouteMap[PageMap.WORKFLOW_VARIABLES]?.toString() || ''}
+                    element={
+                        <WorkflowVariables
+                            pageRoute={RouteMap[PageMap.WORKFLOW_VARIABLES] as Route}
+                            currentProject={selectedProject}
+                        />
+                    }
+                />
+
                 <PageRoute
                     path={RouteMap[PageMap.WORKFLOW_BUILDER]?.toString() || ''}
                     element={
@@ -492,7 +527,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewDelete
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_DELETE
+                                PageMap.STATUS_PAGE_VIEW_DELETE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -510,7 +545,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewBranding
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_BRANDING
+                                PageMap.STATUS_PAGE_VIEW_BRANDING
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -528,7 +563,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewCustomHtmlCss
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_CUSTOM_HTML_CSS
+                                PageMap.STATUS_PAGE_VIEW_CUSTOM_HTML_CSS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -546,7 +581,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewAdvancedOptions
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_ADVANCED_OPTIONS
+                                PageMap.STATUS_PAGE_VIEW_ADVANCED_OPTIONS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -564,7 +599,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewEmailSubscribers
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_EMAIL_SUBSCRIBERS
+                                PageMap.STATUS_PAGE_VIEW_EMAIL_SUBSCRIBERS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -582,7 +617,7 @@ const App: FunctionComponent = () => {
                         <StatusPageViewPrivateUser
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_PRIVATE_USERS
+                                PageMap.STATUS_PAGE_VIEW_PRIVATE_USERS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -600,7 +635,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewSMSSubscribers
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_SMS_SUBSCRIBERS
+                                PageMap.STATUS_PAGE_VIEW_SMS_SUBSCRIBERS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -618,7 +653,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewHeaderStyle
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_HEADER_STYLE
+                                PageMap.STATUS_PAGE_VIEW_HEADER_STYLE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -636,7 +671,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewFooterStyle
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_FOOTER_STYLE
+                                PageMap.STATUS_PAGE_VIEW_FOOTER_STYLE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -654,7 +689,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewNavBarStyle
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_NAVBAR_STYLE
+                                PageMap.STATUS_PAGE_VIEW_NAVBAR_STYLE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -672,7 +707,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewWebhookSubscribers
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_WEBHOOK_SUBSCRIBERS
+                                PageMap.STATUS_PAGE_VIEW_WEBHOOK_SUBSCRIBERS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -690,7 +725,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewEmbedded
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_EMBEDDED
+                                PageMap.STATUS_PAGE_VIEW_EMBEDDED
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -708,7 +743,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewResources
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_RESOURCES
+                                PageMap.STATUS_PAGE_VIEW_RESOURCES
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -726,7 +761,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewDomains
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_DOMAINS
+                                PageMap.STATUS_PAGE_VIEW_DOMAINS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -743,7 +778,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewGroups
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_GROUPS
+                                PageMap.STATUS_PAGE_VIEW_GROUPS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -761,7 +796,7 @@ const App: FunctionComponent = () => {
                         <StatusPagesViewAnnouncement
                             pageRoute={
                                 RouteMap[
-                                    PageMap.STATUS_PAGE_VIEW_ANNOUNCEMENTS
+                                PageMap.STATUS_PAGE_VIEW_ANNOUNCEMENTS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -829,7 +864,7 @@ const App: FunctionComponent = () => {
                         <IncidentViewStateTimeline
                             pageRoute={
                                 RouteMap[
-                                    PageMap.INCIDENT_VIEW_STATE_TIMELINE
+                                PageMap.INCIDENT_VIEW_STATE_TIMELINE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -846,7 +881,7 @@ const App: FunctionComponent = () => {
                         <IncidentInternalNote
                             pageRoute={
                                 RouteMap[
-                                    PageMap.INCIDENT_INTERNAL_NOTE
+                                PageMap.INCIDENT_INTERNAL_NOTE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -880,7 +915,7 @@ const App: FunctionComponent = () => {
                         <ScheduledMaintenanceEvents
                             pageRoute={
                                 RouteMap[
-                                    PageMap.SCHEDULED_MAINTENANCE_EVENTS
+                                PageMap.SCHEDULED_MAINTENANCE_EVENTS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -898,7 +933,7 @@ const App: FunctionComponent = () => {
                         <OngoingScheduledMaintenanceEvents
                             pageRoute={
                                 RouteMap[
-                                    PageMap.ONGOING_SCHEDULED_MAINTENANCE_EVENTS
+                                PageMap.ONGOING_SCHEDULED_MAINTENANCE_EVENTS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -916,7 +951,7 @@ const App: FunctionComponent = () => {
                         <ScheduledMaintenanceEventView
                             pageRoute={
                                 RouteMap[
-                                    PageMap.SCHEDULED_MAINTENANCE_VIEW
+                                PageMap.SCHEDULED_MAINTENANCE_VIEW
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -934,7 +969,7 @@ const App: FunctionComponent = () => {
                         <ScheduledMaintenanceEventViewDelete
                             pageRoute={
                                 RouteMap[
-                                    PageMap.SCHEDULED_MAINTENANCE_VIEW_DELETE
+                                PageMap.SCHEDULED_MAINTENANCE_VIEW_DELETE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -952,8 +987,8 @@ const App: FunctionComponent = () => {
                         <ScheduledMaintenanceEventViewStateTimeline
                             pageRoute={
                                 RouteMap[
-                                    PageMap
-                                        .SCHEDULED_MAINTENANCE_VIEW_STATE_TIMELINE
+                                PageMap
+                                    .SCHEDULED_MAINTENANCE_VIEW_STATE_TIMELINE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -971,7 +1006,7 @@ const App: FunctionComponent = () => {
                         <ScheduledMaintenanceEventInternalNote
                             pageRoute={
                                 RouteMap[
-                                    PageMap.SCHEDULED_MAINTENANCE_INTERNAL_NOTE
+                                PageMap.SCHEDULED_MAINTENANCE_INTERNAL_NOTE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -989,7 +1024,7 @@ const App: FunctionComponent = () => {
                         <ScheduledMaintenanceEventPublicNote
                             pageRoute={
                                 RouteMap[
-                                    PageMap.SCHEDULED_MAINTENANCE_PUBLIC_NOTE
+                                PageMap.SCHEDULED_MAINTENANCE_PUBLIC_NOTE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -1051,7 +1086,7 @@ const App: FunctionComponent = () => {
                         <SettingsMonitors
                             pageRoute={
                                 RouteMap[
-                                    PageMap.SETTINGS_MONITORS_STATUS
+                                PageMap.SETTINGS_MONITORS_STATUS
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -1069,7 +1104,7 @@ const App: FunctionComponent = () => {
                         <SettingsIncidents
                             pageRoute={
                                 RouteMap[
-                                    PageMap.SETTINGS_INCIDENTS_STATE
+                                PageMap.SETTINGS_INCIDENTS_STATE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -1087,7 +1122,7 @@ const App: FunctionComponent = () => {
                         <SettingsScheduledMaintenanceState
                             pageRoute={
                                 RouteMap[
-                                    PageMap.SETTINGS_SCHEDULED_MAINTENANCE_STATE
+                                PageMap.SETTINGS_SCHEDULED_MAINTENANCE_STATE
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -1105,7 +1140,7 @@ const App: FunctionComponent = () => {
                         <SettingsIncidentSeverity
                             pageRoute={
                                 RouteMap[
-                                    PageMap.SETTINGS_INCIDENTS_SEVERITY
+                                PageMap.SETTINGS_INCIDENTS_SEVERITY
                                 ] as Route
                             }
                             currentProject={selectedProject}
@@ -1187,7 +1222,7 @@ const App: FunctionComponent = () => {
                         <SettingsInvoices
                             pageRoute={
                                 RouteMap[
-                                    PageMap.SETTINGS_BILLING_INVOICES
+                                PageMap.SETTINGS_BILLING_INVOICES
                                 ] as Route
                             }
                             currentProject={selectedProject}
diff --git a/Dashboard/src/Components/User/User.tsx b/Dashboard/src/Components/User/User.tsx
index 3ca79aefbe..f39581187a 100644
--- a/Dashboard/src/Components/User/User.tsx
+++ b/Dashboard/src/Components/User/User.tsx
@@ -1,6 +1,7 @@
 import { JSONObject } from 'Common/Types/JSON';
 import JSONFunctions from 'Common/Types/JSONFunctions';
-import Icon, { IconProp, ThickProp } from 'CommonUI/src/Components/Icon/Icon';
+import Icon, { ThickProp } from 'CommonUI/src/Components/Icon/Icon';
+import IconProp from 'Common/Types/Icon/IconProp';
 import User from 'Model/Models/User';
 import React, { FunctionComponent, ReactElement } from 'react';
 import Image from 'CommonUI/src/Components/Image/Image';
@@ -85,11 +86,10 @@ const UserElement: FunctionComponent<ComponentProps> = (
                                 ? props.usernameClassName
                                 : ''
                         }
-                    >{`${
-                        (user['name']?.toString() as string) ||
+                    >{`${(user['name']?.toString() as string) ||
                         (user['email']?.toString() as string) ||
                         ''
-                    }`}</span>{' '}
+                        }`}</span>{' '}
                 </div>
             </div>
             {props.suffix && (
diff --git a/Dashboard/src/Pages/Workflow/SideMenu.tsx b/Dashboard/src/Pages/Workflow/SideMenu.tsx
index e700494f1c..e04c9b13cf 100644
--- a/Dashboard/src/Pages/Workflow/SideMenu.tsx
+++ b/Dashboard/src/Pages/Workflow/SideMenu.tsx
@@ -16,7 +16,7 @@ const DashboardSideMenu: FunctionComponent = (): ReactElement => {
                         RouteMap[PageMap.WORKFLOWS] as Route
                     ),
                 }}
-                icon={IconProp.Info}
+                icon={IconProp.Workflow}
             />
             <SideMenuItem
                 link={{
@@ -25,7 +25,7 @@ const DashboardSideMenu: FunctionComponent = (): ReactElement => {
                         RouteMap[PageMap.WORKFLOWS_VARIABLES] as Route
                     ),
                 }}
-                icon={IconProp.Workflow}
+                icon={IconProp.Variable}
             />
 
             <SideMenuItem
diff --git a/Dashboard/src/Pages/Workflow/View/SideMenu.tsx b/Dashboard/src/Pages/Workflow/View/SideMenu.tsx
index 975f9811d4..510128c28b 100644
--- a/Dashboard/src/Pages/Workflow/View/SideMenu.tsx
+++ b/Dashboard/src/Pages/Workflow/View/SideMenu.tsx
@@ -39,6 +39,10 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
                     icon={IconProp.Workflow}
                 />
 
+
+            </SideMenuSection>
+
+            <SideMenuSection title="Advanced">
                 <SideMenuItem
                     link={{
                         title: 'Runs & Logs',
@@ -49,9 +53,19 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
                     }}
                     icon={IconProp.Logs}
                 />
-            </SideMenuSection>
 
-            <SideMenuSection title="Advanced">
+                <SideMenuItem
+                    link={{
+                        title: 'Workflow Variables',
+                        to: RouteUtil.populateRouteParams(
+                            RouteMap[PageMap.WORKFLOW_VARIABLES] as Route,
+                            props.modelId
+                        ),
+                    }}
+                    icon={IconProp.Variable}
+                />
+
+
                 <SideMenuItem
                     link={{
                         title: 'Delete Workflow',
diff --git a/Dashboard/src/Pages/Workflow/Workflows.tsx b/Dashboard/src/Pages/Workflow/Workflows.tsx
index 8f3cc1adbb..52dd9a195f 100644
--- a/Dashboard/src/Pages/Workflow/Workflows.tsx
+++ b/Dashboard/src/Pages/Workflow/Workflows.tsx
@@ -74,7 +74,7 @@ const Workflows: FunctionComponent<PageComponentProps> = (
                 ]}
                 showRefreshButton={true}
                 showFilterButton={true}
-                viewPageRoute={Navigation.getCurrentRoute()}
+                viewPageRoute={Navigation.getCurrentRoute().addRoute(new Route("/workflow"))}
                 columns={[
                     {
                         field: {
diff --git a/Dashboard/src/Utils/RouteMap.ts b/Dashboard/src/Utils/RouteMap.ts
index 1078d7799e..f08193bf97 100644
--- a/Dashboard/src/Utils/RouteMap.ts
+++ b/Dashboard/src/Utils/RouteMap.ts
@@ -274,19 +274,19 @@ const RouteMap: Dictionary<Route> = {
     ),
 
     [PageMap.WORKFLOW_BUILDER]: new Route(
-        `/dashboard/${RouteParams.ProjectID}/workflows/${RouteParams.ModelID}/builder`
+        `/dashboard/${RouteParams.ProjectID}/workflows/workflow/${RouteParams.ModelID}/builder`
     ),
 
     [PageMap.WORKFLOW_VIEW]: new Route(
-        `/dashboard/${RouteParams.ProjectID}/workflows/${RouteParams.ModelID}`
+        `/dashboard/${RouteParams.ProjectID}/workflows/workflow/${RouteParams.ModelID}`
     ),
 
     [PageMap.WORKFLOW_LOGS]: new Route(
-        `/dashboard/${RouteParams.ProjectID}/workflows/${RouteParams.ModelID}/logs`
+        `/dashboard/${RouteParams.ProjectID}/workflows/workflow/${RouteParams.ModelID}/logs`
     ),
 
     [PageMap.WORKFLOW_DELETE]: new Route(
-        `/dashboard/${RouteParams.ProjectID}/workflows/${RouteParams.ModelID}/delete`
+        `/dashboard/${RouteParams.ProjectID}/workflows/workflow/${RouteParams.ModelID}/delete`
     ),
 
     // logout.
@@ -298,7 +298,7 @@ export class RouteUtil {
         if (
             route.toString() === RouteMap[PageMap.USER_PROFILE]?.toString() ||
             route.toString() ===
-                RouteMap[PageMap.PROJECT_INVITATIONS]?.toString() ||
+            RouteMap[PageMap.PROJECT_INVITATIONS]?.toString() ||
             route.toString() === RouteMap[PageMap.ACTIVE_INCIDENTS]?.toString()
         ) {
             return true;
diff --git a/Model/Models/WorkflowVariable.ts b/Model/Models/WorkflowVariable.ts
index 59c5a63cfd..2053262aaa 100644
--- a/Model/Models/WorkflowVariable.ts
+++ b/Model/Models/WorkflowVariable.ts
@@ -40,11 +40,11 @@ import BaseModel from 'Common/Models/BaseModel';
         Permission.CanEditWorkflowVariable,
     ],
 })
-@CrudApiEndpoint(new Route('/workflow-secret'))
+@CrudApiEndpoint(new Route('/workflow-variable'))
 @Entity({
     name: 'WorkflowVariable',
 })
-@SingularPluralName('Workflow Secret', 'Workflow Secrets')
+@SingularPluralName('Workflow Variable', 'Workflow Variables')
 export default class Workflow extends BaseModel {
     @ColumnAccessControl({
         create: [
diff --git a/Nginx/default.tpl.conf b/Nginx/default.tpl.conf
index d9a0681690..21178c6642 100644
--- a/Nginx/default.tpl.conf
+++ b/Nginx/default.tpl.conf
@@ -18,6 +18,10 @@ upstream workflow {
     server workflow:3099 weight=10 max_fails=3 fail_timeout=30s; 
 }
 
+upstream api-docs {
+    server api-docs:1445 weight=10 max_fails=3 fail_timeout=30s; 
+}
+
 upstream alert {
     server alert:3088 weight=10 max_fails=3 fail_timeout=30s; 
 }
@@ -242,6 +246,19 @@ server {
         proxy_pass http://identity;
     }
 
+    location /docs {
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme; 
+
+        # enable WebSockets (for ws://sockjs not connected error in the accounts source: https://stackoverflow.com/questions/41381444/websocket-connection-failed-error-during-websocket-handshake-unexpected-respon)
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_pass http://api-docs;
+    }
+
 
 
     location /alert {
diff --git a/docker-compose.tpl.yml b/docker-compose.tpl.yml
index a7ae8f3e6b..d0736b6d19 100644
--- a/docker-compose.tpl.yml
+++ b/docker-compose.tpl.yml
@@ -485,6 +485,40 @@ services:
             - /usr/src/Model/node_modules/
         {{ end }}
     
+    api-docs:
+        ports:
+            - '1445:1445'
+            {{ if eq .Env.ENVIRONMENT "development" }}
+            - '9178:9229' # Debugging port.
+            {{ end }}
+        restart: always
+        env_file:
+            - ./Common/.env
+            - ./CommonServer/.env
+            - ./ApiDocs/.env
+        {{ if or (eq .Env.ENVIRONMENT "development") (eq .Env.ENVIRONMENT "ci")  }}
+        build:
+            network: host
+            context: .
+            dockerfile: ./ApiDocs/Dockerfile
+        {{ else }}
+        image:  oneuptime/api-docs:{{ .Env.APP_TAG }}
+        {{ end }}
+        {{ if eq .Env.ENVIRONMENT "development" }}
+        volumes:
+            - ./ApiDocs:/usr/src/app
+            # Use node modules of the container and not host system.
+            # https://stackoverflow.com/questions/29181032/add-a-volume-to-docker-but-exclude-a-sub-folder
+            - /usr/src/app/node_modules/
+            - ./Common:/usr/src/Common
+            - ./Model:/usr/src/Model
+            - ./CommonServer:/usr/src/CommonServer
+            - ./CommonUI:/usr/src/CommonUI
+            - /usr/src/Common/node_modules/
+            - /usr/src/CommonUI/node_modules/
+            - /usr/src/CommonServer/node_modules/
+            - /usr/src/Model/node_modules/
+        {{ end }}
 
     nginx:
         depends_on: