chore(release): 0.25.1 [skip ci]

## [0.25.1](https://github.com/sasjs/server/compare/v0.25.0...v0.25.1) (2022-11-07) ### Bug Fixes * **web:** use mui treeView instead of custom implementation ([c51b504](c51b50428f))
Merge pull request #313 from sasjs/tree-view
2025-12-10 19:34:34 +00:00 · 2022-11-07 15:50:02 +00:00 · 2022-11-07 15:46:14 +00:00 · 2022-11-06 01:14:58 +05:00 · 2022-11-02 15:24:25 +00:00 · 2022-11-02 15:19:54 +00:00
107 changed files with 7632 additions and 4471 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,266 @@
+## [0.25.1](https://github.com/sasjs/server/compare/v0.25.0...v0.25.1) (2022-11-07)
+
+
+### Bug Fixes
+
+* **web:** use mui treeView instead of custom implementation ([c51b504](https://github.com/sasjs/server/commit/c51b50428f32608bc46438e9d7964429b2d595da))
+
+# [0.25.0](https://github.com/sasjs/server/compare/v0.24.0...v0.25.0) (2022-11-02)
+
+
+### Features
+
+* Enable DRIVE_LOCATION setting for deploying multiple instances of SASjs Server ([1c9d167](https://github.com/sasjs/server/commit/1c9d167f86bbbb108b96e9bc30efaf8de65d82ff))
+
+# [0.24.0](https://github.com/sasjs/server/compare/v0.23.4...v0.24.0) (2022-10-28)
+
+
+### Features
+
+* cli mock testing ([6434123](https://github.com/sasjs/server/commit/643412340162e854f31fba2f162d83b7ab1751d8))
+* mocking sas9 responses with JS STP ([36be3a7](https://github.com/sasjs/server/commit/36be3a7d5e7df79f9a1f3f00c3661b925f462383))
+
+## [0.23.4](https://github.com/sasjs/server/compare/v0.23.3...v0.23.4) (2022-10-11)
+
+
+### Bug Fixes
+
+* add action to editor ref for running code ([2412622](https://github.com/sasjs/server/commit/2412622367eb46c40f388e988ae4606a7ec239b2))
+
+## [0.23.3](https://github.com/sasjs/server/compare/v0.23.2...v0.23.3) (2022-10-09)
+
+
+### Bug Fixes
+
+* added domain for session cookies ([94072c3](https://github.com/sasjs/server/commit/94072c3d24a4d0d4c97900dc31bfbf1c9d2559b7))
+
+## [0.23.2](https://github.com/sasjs/server/compare/v0.23.1...v0.23.2) (2022-10-06)
+
+
+### Bug Fixes
+
+* bump in correct place ([14731e8](https://github.com/sasjs/server/commit/14731e8824fa9f3d1daf89fd62f9916d5e3fcae4))
+* bumping sasjs/score ([258cc35](https://github.com/sasjs/server/commit/258cc35f14cf50f2160f607000c60de27593fd79))
+* reverting commit ([fda0e0b](https://github.com/sasjs/server/commit/fda0e0b57d56e3b5231e626a8d933343ac0c5cdc))
+
+## [0.23.1](https://github.com/sasjs/server/compare/v0.23.0...v0.23.1) (2022-10-04)
+
+
+### Bug Fixes
+
+* ldap issues ([4d64420](https://github.com/sasjs/server/commit/4d64420c45424134b4d2014a2d5dd6e846ed03b3))
+
+# [0.23.0](https://github.com/sasjs/server/compare/v0.22.1...v0.23.0) (2022-10-03)
+
+
+### Features
+
+* Enable SAS_PACKAGES in SASjs Server ([424f0fc](https://github.com/sasjs/server/commit/424f0fc1faec765eb7a14619584e649454105b70))
+
+## [0.22.1](https://github.com/sasjs/server/compare/v0.22.0...v0.22.1) (2022-10-03)
+
+
+### Bug Fixes
+
+* spelling issues ([3bb0597](https://github.com/sasjs/server/commit/3bb05974d216d69368f4498eb9f309bce7d97fd8))
+
+# [0.22.0](https://github.com/sasjs/server/compare/v0.21.7...v0.22.0) (2022-10-03)
+
+
+### Bug Fixes
+
+* do not throw error on deleting group when it is created by an external auth provider ([68f0c5c](https://github.com/sasjs/server/commit/68f0c5c5884431e7e8f586dccf98132abebb193e))
+* no need to restrict api endpoints when ldap auth is applied ([a142660](https://github.com/sasjs/server/commit/a14266077d3541c7a33b7635efa4208335e73519))
+* remove authProvider attribute from user and group payload interface ([bbd7786](https://github.com/sasjs/server/commit/bbd7786c6ce13b374d896a45c23255b8fa3e8bd2))
+
+
+### Features
+
+* implemented LDAP authentication ([f915c51](https://github.com/sasjs/server/commit/f915c51b077a2b8c4099727355ed914ecd6364bd))
+
+## [0.21.7](https://github.com/sasjs/server/compare/v0.21.6...v0.21.7) (2022-09-30)
+
+
+### Bug Fixes
+
+* csrf package is changed to pillarjs-csrf ([fe3e508](https://github.com/sasjs/server/commit/fe3e5088f8dfff50042ec8e8aac9ba5ba1394deb))
+
+## [0.21.6](https://github.com/sasjs/server/compare/v0.21.5...v0.21.6) (2022-09-23)
+
+
+### Bug Fixes
+
+* in getTokensFromDB handle the scenario when tokens are expired ([40f95f9](https://github.com/sasjs/server/commit/40f95f9072c8685910138d88fd2410f8704fc975))
+
+## [0.21.5](https://github.com/sasjs/server/compare/v0.21.4...v0.21.5) (2022-09-22)
+
+
+### Bug Fixes
+
+* made files extensions case insensitive ([2496043](https://github.com/sasjs/server/commit/249604384e42be4c12c88c70a7dff90fc1917a8f))
+
+## [0.21.4](https://github.com/sasjs/server/compare/v0.21.3...v0.21.4) (2022-09-21)
+
+
+### Bug Fixes
+
+* removing single quotes from _program value ([a0e7875](https://github.com/sasjs/server/commit/a0e7875ae61cbb6e7d3995d2e36e7300b0daec86))
+
+## [0.21.3](https://github.com/sasjs/server/compare/v0.21.2...v0.21.3) (2022-09-21)
+
+
+### Bug Fixes
+
+* return same tokens if not expired ([330c020](https://github.com/sasjs/server/commit/330c020933f1080261b38f07d6b627f6d7c62446))
+
+## [0.21.2](https://github.com/sasjs/server/compare/v0.21.1...v0.21.2) (2022-09-20)
+
+
+### Bug Fixes
+
+* default content-type for sas programs should be text/plain ([9977c9d](https://github.com/sasjs/server/commit/9977c9d161947b11d45ab2513f99a5320a3f5a06))
+* **studio:** inject program path to code before sending for execution ([edc2e2a](https://github.com/sasjs/server/commit/edc2e2a302ccea4985f3d6b83ef8c23620ab82b6))
+
+## [0.21.1](https://github.com/sasjs/server/compare/v0.21.0...v0.21.1) (2022-09-19)
+
+
+### Bug Fixes
+
+* SASJS_WEBOUT_HEADERS path for windows ([0749d65](https://github.com/sasjs/server/commit/0749d65173e8cfe9a93464711b7be1e123c289ff))
+
+# [0.21.0](https://github.com/sasjs/server/compare/v0.20.0...v0.21.0) (2022-09-19)
+
+
+### Features
+
+* sas9 mocker improved - public access denied scenario ([06d3b17](https://github.com/sasjs/server/commit/06d3b1715432ea245ee755ae1dfd0579d3eb30e9))
+
+# [0.20.0](https://github.com/sasjs/server/compare/v0.19.0...v0.20.0) (2022-09-16)
+
+
+### Features
+
+* add support for R stored programs ([d6651bb](https://github.com/sasjs/server/commit/d6651bbdbeee5067f53c36e69a0eefa973c523b6))
+
+# [0.19.0](https://github.com/sasjs/server/compare/v0.18.0...v0.19.0) (2022-09-05)
+
+
+### Features
+
+* added mocking endpoints ([0a0ba2c](https://github.com/sasjs/server/commit/0a0ba2cca5db867de46fb2486d856a84ec68d3b4))
+
+# [0.18.0](https://github.com/sasjs/server/compare/v0.17.5...v0.18.0) (2022-09-02)
+
+
+### Features
+
+* add option for program launch in context menu ([ee2db27](https://github.com/sasjs/server/commit/ee2db276bb0bbd522f758e0b66f7e7b2f4afd9d5))
+
+## [0.17.5](https://github.com/sasjs/server/compare/v0.17.4...v0.17.5) (2022-09-02)
+
+
+### Bug Fixes
+
+* SASINITIALFOLDER split over 2 params, closes [#271](https://github.com/sasjs/server/issues/271) ([393b5ea](https://github.com/sasjs/server/commit/393b5eaf990049c39eecf2b9e8dd21a001b6e298))
+
+## [0.17.4](https://github.com/sasjs/server/compare/v0.17.3...v0.17.4) (2022-09-01)
+
+
+### Bug Fixes
+
+* invalid JS logic ([9f06080](https://github.com/sasjs/server/commit/9f06080348aed076f8188a26fb4890d38a5a3510))
+
+## [0.17.3](https://github.com/sasjs/server/compare/v0.17.2...v0.17.3) (2022-09-01)
+
+
+### Bug Fixes
+
+* making SASINITIALFOLDER option windows only.  Closes [#267](https://github.com/sasjs/server/issues/267) ([e63271a](https://github.com/sasjs/server/commit/e63271a67a0deb3059a5f2bec1854efee5a6e5a5))
+
+## [0.17.2](https://github.com/sasjs/server/compare/v0.17.1...v0.17.2) (2022-08-31)
+
+
+### Bug Fixes
+
+* addition of SASINITIALFOLDER startup option.  Closes [#260](https://github.com/sasjs/server/issues/260) ([a5ee2f2](https://github.com/sasjs/server/commit/a5ee2f292384f90e9d95d003d652311c0d91a7a7))
+
+## [0.17.1](https://github.com/sasjs/server/compare/v0.17.0...v0.17.1) (2022-08-30)
+
+
+### Bug Fixes
+
+* typo mistake ([ee17d37](https://github.com/sasjs/server/commit/ee17d37aa188b0ca43cea0e89d6cd1a566b765cb))
+
+# [0.17.0](https://github.com/sasjs/server/compare/v0.16.1...v0.17.0) (2022-08-25)
+
+
+### Bug Fixes
+
+* allow underscores in file name ([bce83cb](https://github.com/sasjs/server/commit/bce83cb6fbc98f8198564c9399821f5829acc767))
+
+
+### Features
+
+* add the functionality of saving file by ctrl + s in editor ([3a3c90d](https://github.com/sasjs/server/commit/3a3c90d9e690ac5267bf1acc834b5b5c5b4dadb6))
+
+## [0.16.1](https://github.com/sasjs/server/compare/v0.16.0...v0.16.1) (2022-08-24)
+
+
+### Bug Fixes
+
+* update response of /SASjsApi/stp/execute and /SASjsApi/code/execute ([98ea2ac](https://github.com/sasjs/server/commit/98ea2ac9b98631605e39e5900e533727ea0e3d85))
+
+# [0.16.0](https://github.com/sasjs/server/compare/v0.15.3...v0.16.0) (2022-08-17)
+
+
+### Bug Fixes
+
+* add a new variable _SASJS_WEBOUT_HEADERS to code.js and code.py ([882bedd](https://github.com/sasjs/server/commit/882bedd5d5da22de6ed45c03d0a261aadfb3a33c))
+* update content for code.sas file ([02e88ae](https://github.com/sasjs/server/commit/02e88ae7280d020a753bc2c095a931c79ac392d1))
+* update default content type for python and js runtimes ([8780b80](https://github.com/sasjs/server/commit/8780b800a34aa618631821e5d97e26e8b0f15806))
+
+
+### Features
+
+* implement the logic for running python stored programs ([b06993a](https://github.com/sasjs/server/commit/b06993ab9ea24b28d9e553763187387685aaa666))
+
+## [0.15.3](https://github.com/sasjs/server/compare/v0.15.2...v0.15.3) (2022-08-11)
+
+
+### Bug Fixes
+
+* adding proc printto in precode to enable print output in log.  Closes [#253](https://github.com/sasjs/server/issues/253) ([f8bb732](https://github.com/sasjs/server/commit/f8bb7327a8a4649ac77bb6237e31cea075d46bb9))
+
+## [0.15.2](https://github.com/sasjs/server/compare/v0.15.1...v0.15.2) (2022-08-10)
+
+
+### Bug Fixes
+
+* remove vulnerabitities ([f27ac51](https://github.com/sasjs/server/commit/f27ac51fc4beb21070d0ab551cfdaec1f6ba39e0))
+
+## [0.15.1](https://github.com/sasjs/server/compare/v0.15.0...v0.15.1) (2022-08-10)
+
+
+### Bug Fixes
+
+* **web:** fix UI responsiveness ([d99fdd1](https://github.com/sasjs/server/commit/d99fdd1ec7991b94a0d98338d7a7a6216f46ce45))
+
+# [0.15.0](https://github.com/sasjs/server/compare/v0.14.1...v0.15.0) (2022-08-05)
+
+
+### Bug Fixes
+
+* after selecting file in sidebar collapse sidebar in mobile view ([e215958](https://github.com/sasjs/server/commit/e215958b8b05d7a8ce9d82395e0640b5b37fb40d))
+* improve mobile view for studio page ([c67d3ee](https://github.com/sasjs/server/commit/c67d3ee2f102155e2e9781e13d5d33c1ab227cb4))
+* improve responsiveness for mobile view ([6ef40b9](https://github.com/sasjs/server/commit/6ef40b954a87ebb0a2621119064f38d58ea85148))
+* improve user experience for adding permissions ([7a162ed](https://github.com/sasjs/server/commit/7a162eda8fc60383ff647d93e6611799e2e6af7a))
+* show logout button only when user is logged in ([9227cd4](https://github.com/sasjs/server/commit/9227cd449dc46fd960a488eb281804a9b9ffc284))
+
+
+### Features
+
+* add multiple permission for same combination of type and principal at once ([754704b](https://github.com/sasjs/server/commit/754704bca89ecbdbcc3bd4ef04b94124c4f24167))
+
 ## [0.14.1](https://github.com/sasjs/server/compare/v0.14.0...v0.14.1) (2022-08-04)


--- a/README.md
+++ b/README.md
@@ -64,23 +64,53 @@ Example contents of a `.env` file:
 # Server mode is multi-user and suitable for intranet / internet use
 MODE=

+# A comma separated string that defines the available runTimes.
+# Priority is given to the runtime that comes first in the string.
+# Possible options at the moment are sas, js, py and r
+
+# This string sets the priority of the available analytic runtimes
+# Valid runtimes are SAS (sas), JavaScript (js), Python (py) and R (r)
+# For each option provided, there should be a corresponding path,
+# eg SAS_PATH, NODE_PATH, PYTHON_PATH or RSCRIPT_PATH
+# Priority is given to runtimes earlier in the string
+# Example options:  [sas,js,py | js,py | sas | sas,js | r | sas,r]
+RUN_TIMES=
+
 # Path to SAS executable (sas.exe / sas.sh)
 SAS_PATH=/path/to/sas/executable.exe

 # Path to Node.js executable
 NODE_PATH=~/.nvm/versions/node/v16.14.0/bin/node

+# Path to Python executable
+PYTHON_PATH=/usr/bin/python
+
+# Path to R executable
+R_PATH=/usr/bin/Rscript
+
 # Path to working directory
 # This location is for SAS WORK, staged files, DRIVE, configuration etc
 SASJS_ROOT=./sasjs_root


+# This location is for files, sasjs packages and appStreamConfig.json
+DRIVE_LOCATION=./sasjs_root/drive
+
+
 # options: [http|https] default: http
 PROTOCOL=

 # default: 5000
 PORT=

+# options: [sas9|sasviya]
+# If not present, mocking function is disabled
+MOCK_SERVERTYPE=
+
+# default: /api/mocks
+# Path to mocking folder, for generic responses, it's sub directories should be: sas9, viya, sasjs
+# Server will automatically use subdirectory accordingly
+STATIC_MOCK_LOCATION=

 #
 ## Additional SAS Options
@@ -104,9 +134,19 @@ PRIVATE_KEY=privkey.pem (required)
 CERT_CHAIN=certificate.pem (required)
 CA_ROOT=fullchain.pem (optional)

-# ENV variables required for MODE: `server`
+## ENV variables required for MODE: `server`
 DB_CONNECT=mongodb+srv://<DB_USERNAME>:<DB_PASSWORD>@<CLUSTER>/<DB_NAME>?retryWrites=true&w=majority

+# AUTH_PROVIDERS options: [ldap] default: ``
+AUTH_PROVIDERS=
+
+## ENV variables required for AUTH_MECHANISM: `ldap`
+LDAP_URL= <LDAP_SERVER_URL>
+LDAP_BIND_DN= <cn=admin,ou=system,dc=cloudron>
+LDAP_BIND_PASSWORD = <password>
+LDAP_USERS_BASE_DN = <ou=users,dc=cloudron>
+LDAP_GROUPS_BASE_DN = <ou=groups,dc=cloudron>
+
 # options: [disable|enable] default: `disable` for `server` & `enable` for `desktop`
 # If enabled, be sure to also configure the WHITELIST of third party servers.
 CORS=
@@ -139,13 +179,6 @@ LOG_FORMAT_MORGAN=
 # This location is for server logs with classical UNIX logrotate behavior
 LOG_LOCATION=./sasjs_root/logs

-# A comma separated string that defines the available runTimes.
-# Priority is given to the runtime that comes first in the string.
-# Possible options at the moment are sas and js
-
-# options: [sas,js|js,sas|sas|js] default:sas
-RUN_TIMES=
-
 ```

 ## Persisting the Session
--- a/api/.env.example
+++ b/api/.env.example
@@ -1,5 +1,6 @@
 MODE=[desktop|server] default considered as desktop
 CORS=[disable|enable] default considered as disable for server MODE & enable for desktop MODE
+ALLOWED_DOMAIN=<just domain e.g. example.com >
 WHITELIST=<space separated urls, each starting with protocol `http` or `https`>

 PROTOCOL=[http|https] default considered as http
@@ -14,11 +15,22 @@ HELMET_COEP=[true|false] if omitted HELMET default will be used

 DB_CONNECT=mongodb+srv://<DB_USERNAME>:<DB_PASSWORD>@<CLUSTER>/<DB_NAME>?retryWrites=true&w=majority

-RUN_TIMES=[sas|js|sas,js|js,sas] default considered as sas
+AUTH_PROVIDERS=[ldap]
+
+LDAP_URL= <LDAP_SERVER_URL>
+LDAP_BIND_DN= <cn=admin,ou=system,dc=cloudron>
+LDAP_BIND_PASSWORD = <password>
+LDAP_USERS_BASE_DN = <ou=users,dc=cloudron>
+LDAP_GROUPS_BASE_DN = <ou=groups,dc=cloudron>
+
+RUN_TIMES=[sas,js,py | js,py | sas | sas,js] default considered as sas
 SAS_PATH=/opt/sas/sas9/SASHome/SASFoundation/9.4/sas
 NODE_PATH=~/.nvm/versions/node/v16.14.0/bin/node
+PYTHON_PATH=/usr/bin/python
+R_PATH=/usr/bin/Rscript

 SASJS_ROOT=./sasjs_root
+DRIVE_LOCATION=./sasjs_root/drive

 LOG_FORMAT_MORGAN=common
 LOG_LOCATION=./sasjs_root/logs
--- a/api/mocks/sas9/generic/logged-in
+++ b/api/mocks/sas9/generic/logged-in
@@ -0,0 +1 @@
+You have signed in.
--- a/api/mocks/sas9/generic/logged-out
+++ b/api/mocks/sas9/generic/logged-out
@@ -0,0 +1 @@
+You have signed out.
--- a/api/mocks/sas9/generic/login
+++ b/api/mocks/sas9/generic/login
@@ -0,0 +1,30 @@
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr" class="bg">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="initial-scale=1" />
+</head>
+
+
+<div class="content">
+  <form id="credentials" class="minimal" action="/SASLogon/login?service=http%3A%2F%2Flocalhost:5004%2FSASStoredProcess%2Fj_spring_cas_security_check" method="post">
+    <!--form container-->
+    <input type="hidden" name="lt" value="validtoken" aria-hidden="true" />
+    <input type="hidden" name="execution" value="e2s1" aria-hidden="true" />
+    <input type="hidden" name="_eventId" value="submit" aria-hidden="true" />
+
+    <span class="userid">
+
+      <input id="username" name="username" tabindex="3" aria-labelledby="username1 message1 message2 message3" name="username" placeholder="User ID" type="text" autofocus="true" value="" maxlength="500" autocomplete="off" />
+    </span>
+    <span class="password">
+
+      <input id="password" name="password" tabindex="4" name="password" placeholder="Password" type="password" value="" maxlength="500" autocomplete="off" />
+    </span>
+
+    <button type="submit" class="btn-submit" title="Sign In" tabindex="5" onClick="this.disabled=true;setSubmitUrl(this.form);this.form.submit();return false;">Sign In</button>
+
+
+  </form>
+</div>
+</html>
--- a/api/mocks/sas9/generic/public-access-denied
+++ b/api/mocks/sas9/generic/public-access-denied
@@ -0,0 +1 @@
+Public access has been denied.
--- a/api/mocks/sas9/generic/sas-stored-process
+++ b/api/mocks/sas9/generic/sas-stored-process
@@ -0,0 +1 @@
+"title": "Log Off SAS Demo User"
--- a/api/package-lock.json
+++ b/api/package-lock.json
--- a/api/package.json
+++ b/api/package.json
@@ -4,7 +4,7 @@
  "description": "Api of SASjs server",
  "main": "./src/server.ts",
  "scripts": {
-    "initial": "npm run swagger && npm run compileSysInit && npm run copySASjsCore",
+    "initial": "npm run swagger && npm run compileSysInit && npm run copySASjsCore && npm run downloadMacros",
    "prestart": "npm run initial",
    "prebuild": "npm run initial",
    "start": "NODE_ENV=development nodemon ./src/server.ts",
@@ -17,20 +17,21 @@
    "lint:fix": "npx prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
    "lint": "npx prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
    "exe": "npm run build && pkg .",
-    "copy:files": "npm run public:copy && npm run sasjsbuild:copy && npm run sasjscore:copy && npm run web:copy",
+    "copy:files": "npm run public:copy && npm run sasjsbuild:copy && npm run sas:copy && npm run web:copy",
    "public:copy": "cp -r ./public/ ./build/public/",
    "sasjsbuild:copy": "cp -r ./sasjsbuild/ ./build/sasjsbuild/",
-    "sasjscore:copy": "cp -r ./sasjscore/ ./build/sasjscore/",
+    "sas:copy": "cp -r ./sas/ ./build/sas/",
    "web:copy": "rimraf web && mkdir web && cp -r ../web/build/ ./web/build/",
    "compileSysInit": "ts-node ./scripts/compileSysInit.ts",
-    "copySASjsCore": "ts-node ./scripts/copySASjsCore.ts"
+    "copySASjsCore": "ts-node ./scripts/copySASjsCore.ts",
+    "downloadMacros": "ts-node ./scripts/downloadMacros.ts"
  },
  "bin": "./build/src/server.js",
  "pkg": {
    "assets": [
      "./build/public/**/*",
      "./build/sasjsbuild/**/*",
-      "./build/sasjscore/**/*",
+      "./build/sas/**/*",
      "./web/build/**/*"
    ],
    "targets": [
@@ -47,22 +48,22 @@
  },
  "author": "4GL Ltd",
  "dependencies": {
-    "@sasjs/core": "^4.31.3",
-    "@sasjs/utils": "2.42.1",
+    "@sasjs/core": "^4.40.1",
+    "@sasjs/utils": "2.48.1",
    "bcryptjs": "^2.4.3",
    "connect-mongo": "^4.6.0",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
-    "csurf": "^1.11.0",
    "express": "^4.17.1",
    "express-session": "^1.17.2",
    "helmet": "^5.0.2",
    "joi": "^17.4.2",
    "jsonwebtoken": "^8.5.1",
+    "ldapjs": "2.3.3",
    "mongoose": "^6.0.12",
    "mongoose-sequence": "^5.3.1",
    "morgan": "^1.10.0",
-    "multer": "^1.4.3",
+    "multer": "^1.4.5-lts.1",
    "rotating-file-stream": "^3.0.4",
    "swagger-ui-express": "4.3.0",
    "unzipper": "^0.10.11",
@@ -73,11 +74,11 @@
    "@types/bcryptjs": "^2.4.2",
    "@types/cookie-parser": "^1.4.2",
    "@types/cors": "^2.8.12",
-    "@types/csurf": "^1.11.2",
    "@types/express": "^4.17.12",
    "@types/express-session": "^1.17.4",
    "@types/jest": "^26.0.24",
    "@types/jsonwebtoken": "^8.5.5",
+    "@types/ldapjs": "^2.2.4",
    "@types/mongoose-sequence": "^3.0.6",
    "@types/morgan": "^1.9.3",
    "@types/multer": "^1.4.7",
@@ -86,10 +87,13 @@
    "@types/swagger-ui-express": "^4.1.3",
    "@types/unzipper": "^0.10.5",
    "adm-zip": "^0.5.9",
+    "axios": "0.27.2",
+    "csrf": "^3.1.0",
    "dotenv": "^10.0.0",
    "http-headers-validation": "^0.0.1",
    "jest": "^27.0.6",
    "mongodb-memory-server": "^8.0.0",
+    "nodejs-file-downloader": "4.10.2",
    "nodemon": "^2.0.7",
    "pkg": "5.6.0",
    "prettier": "^2.3.1",
--- a/api/public/swagger.yaml
+++ b/api/public/swagger.yaml
--- a/api/scripts/downloadMacros.ts
+++ b/api/scripts/downloadMacros.ts
@@ -0,0 +1,39 @@
+import axios from 'axios'
+import Downloader from 'nodejs-file-downloader'
+import { createFile, listFilesInFolder } from '@sasjs/utils'
+
+import { sasJSCoreMacros, sasJSCoreMacrosInfo } from '../src/utils/file'
+
+export const downloadMacros = async () => {
+  const url =
+    'https://api.github.com/repos/yabwon/SAS_PACKAGES/contents/SPF/Macros'
+
+  console.info(`Downloading macros from ${url}`)
+
+  await axios
+    .get(url)
+    .then(async (res) => {
+      await downloadFiles(res.data)
+    })
+    .catch((err) => {
+      throw new Error(err)
+    })
+}
+
+const downloadFiles = async function (fileList: any) {
+  for (const file of fileList) {
+    const downloader = new Downloader({
+      url: file.download_url,
+      directory: sasJSCoreMacros,
+      fileName: file.path.replace(/^SPF\/Macros/, ''),
+      cloneFiles: false
+    })
+    await downloader.download()
+  }
+
+  const fileNames = await listFilesInFolder(sasJSCoreMacros)
+
+  await createFile(sasJSCoreMacrosInfo, fileNames.join('\n'))
+}
+
+downloadMacros()
--- a/api/src/app-modules/configureExpressSession.ts
+++ b/api/src/app-modules/configureExpressSession.ts
@@ -1,10 +1,9 @@
-import { Express } from 'express'
+import { Express, CookieOptions } from 'express'
 import mongoose from 'mongoose'
 import session from 'express-session'
 import MongoStore from 'connect-mongo'

-import { ModeType } from '../utils'
-import { cookieOptions } from '../app'
+import { ModeType, ProtocolType } from '../utils'

 export const configureExpressSession = (app: Express) => {
  const { MODE } = process.env
@@ -19,6 +18,15 @@ export const configureExpressSession = (app: Express) => {
      })
    }

+    const { PROTOCOL, ALLOWED_DOMAIN } = process.env
+    const cookieOptions: CookieOptions = {
+      secure: PROTOCOL === ProtocolType.HTTPS,
+      httpOnly: true,
+      sameSite: PROTOCOL === ProtocolType.HTTPS ? 'none' : undefined,
+      maxAge: 24 * 60 * 60 * 1000, // 24 hours
+      domain: ALLOWED_DOMAIN?.trim() || undefined
+    }
+
    app.use(
      session({
        secret: process.secrets.SESSION_SECRET,
--- a/api/src/app.ts
+++ b/api/src/app.ts
@@ -1,6 +1,5 @@
 import path from 'path'
 import express, { ErrorRequestHandler } from 'express'
-import csrf, { CookieOptions } from 'csurf'
 import cookieParser from 'cookie-parser'
 import dotenv from 'dotenv'

@@ -9,10 +8,10 @@ import {
  getWebBuildFolder,
  instantiateLogger,
  loadAppStreamConfig,
-  ProtocolType,
  ReturnCode,
  setProcessVariables,
  setupFolders,
+  setupUserAutoExec,
  verifyEnvVariables
 } from './utils'
 import {
@@ -30,24 +29,7 @@ if (verifyEnvVariables()) process.exit(ReturnCode.InvalidEnv)

 const app = express()

-const { PROTOCOL } = process.env
-
-export const cookieOptions: CookieOptions = {
-  secure: PROTOCOL === ProtocolType.HTTPS,
-  httpOnly: true,
-  sameSite: PROTOCOL === ProtocolType.HTTPS ? 'none' : undefined,
-  maxAge: 24 * 60 * 60 * 1000 // 24 hours
-}
-
-/***********************************
- *         CSRF Protection         *
- ***********************************/
-export const csrfProtection = csrf({ cookie: cookieOptions })
-
 const onError: ErrorRequestHandler = (err, req, res, next) => {
-  if (err.code === 'EBADCSRFTOKEN')
-    return res.status(400).send('Invalid CSRF token!')
-
  console.error(err.stack)
  res.status(500).send('Something broke!')
 }
@@ -77,8 +59,16 @@ export default setProcessVariables().then(async () => {
  app.use(express.json({ limit: '100mb' }))
  app.use(express.static(path.join(__dirname, '../public')))

-  await setupFolders()
-  await copySASjsCore()
+  // Body parser is used for decoding the formdata on POST request.
+  // Currently only place we use it is SAS9 Mock - POST /SASLogon/login
+  app.use(express.urlencoded({ extended: true }))
+
+  await setupUserAutoExec()
+
+  if (process.driveLoc === path.join(process.sasjsRoot, 'drive')) {
+    await setupFolders()
+    await copySASjsCore()
+  }

  // loading these modules after setting up variables due to
  // multer's usage of process var process.driveLoc
--- a/api/src/controllers/auth.ts
+++ b/api/src/controllers/auth.ts
@@ -4,6 +4,7 @@ import { InfoJWT } from '../types'
 import {
  generateAccessToken,
  generateRefreshToken,
+  getTokensFromDB,
  removeTokensInDB,
  saveTokensInDB
 } from '../utils'
@@ -73,6 +74,15 @@ const token = async (data: any): Promise<TokenResponse> => {

  AuthController.deleteCode(userInfo.userId, clientId)

+  // get tokens from DB
+  const existingTokens = await getTokensFromDB(userInfo.userId, clientId)
+  if (existingTokens) {
+    return {
+      accessToken: existingTokens.accessToken,
+      refreshToken: existingTokens.refreshToken
+    }
+  }
+
  const accessToken = generateAccessToken(userInfo)
  const refreshToken = generateRefreshToken(userInfo)

--- a/api/src/controllers/authConfig.ts
+++ b/api/src/controllers/authConfig.ts
@@ -0,0 +1,185 @@
+import express from 'express'
+import { Security, Route, Tags, Get, Post, Example } from 'tsoa'
+
+import { LDAPClient, LDAPUser, LDAPGroup, AuthProviderType } from '../utils'
+import { randomBytes } from 'crypto'
+import User from '../model/User'
+import Group from '../model/Group'
+import Permission from '../model/Permission'
+
+@Security('bearerAuth')
+@Route('SASjsApi/authConfig')
+@Tags('Auth_Config')
+export class AuthConfigController {
+  /**
+   * @summary Gives the detail of Auth Mechanism.
+   *
+   */
+  @Example({
+    ldap: {
+      LDAP_URL: 'ldaps://my.ldap.server:636',
+      LDAP_BIND_DN: 'cn=admin,ou=system,dc=cloudron',
+      LDAP_BIND_PASSWORD: 'secret',
+      LDAP_USERS_BASE_DN: 'ou=users,dc=cloudron',
+      LDAP_GROUPS_BASE_DN: 'ou=groups,dc=cloudron'
+    }
+  })
+  @Get('/')
+  public getDetail() {
+    return getAuthConfigDetail()
+  }
+
+  /**
+   * @summary Synchronises LDAP users and groups with internal DB and returns the count of imported users and groups.
+   *
+   */
+  @Example({
+    users: 5,
+    groups: 3
+  })
+  @Post('/synchroniseWithLDAP')
+  public async synchroniseWithLDAP() {
+    return synchroniseWithLDAP()
+  }
+}
+
+const synchroniseWithLDAP = async () => {
+  process.logger.info('Syncing LDAP with internal DB')
+
+  const permissions = await Permission.get({})
+  await Permission.deleteMany()
+  await User.deleteMany({ authProvider: AuthProviderType.LDAP })
+  await Group.deleteMany({ authProvider: AuthProviderType.LDAP })
+
+  const ldapClient = await LDAPClient.init()
+
+  process.logger.info('fetching LDAP users')
+  const users = await ldapClient.getAllLDAPUsers()
+
+  process.logger.info('inserting LDAP users to DB')
+
+  const existingUsers: string[] = []
+  const importedUsers: LDAPUser[] = []
+
+  for (const user of users) {
+    const usernameExists = await User.findOne({ username: user.username })
+    if (usernameExists) {
+      existingUsers.push(user.username)
+      continue
+    }
+
+    const hashPassword = User.hashPassword(randomBytes(64).toString('hex'))
+
+    await User.create({
+      displayName: user.displayName,
+      username: user.username,
+      password: hashPassword,
+      authProvider: AuthProviderType.LDAP
+    })
+
+    importedUsers.push(user)
+  }
+
+  if (existingUsers.length > 0) {
+    process.logger.info(
+      'Failed to insert following users as they already exist in DB:'
+    )
+    existingUsers.forEach((user) => process.logger.log(`* ${user}`))
+  }
+
+  process.logger.info('fetching LDAP groups')
+  const groups = await ldapClient.getAllLDAPGroups()
+
+  process.logger.info('inserting LDAP groups to DB')
+
+  const existingGroups: string[] = []
+  const importedGroups: LDAPGroup[] = []
+
+  for (const group of groups) {
+    const groupExists = await Group.findOne({ name: group.name })
+    if (groupExists) {
+      existingGroups.push(group.name)
+      continue
+    }
+
+    await Group.create({
+      name: group.name,
+      authProvider: AuthProviderType.LDAP
+    })
+
+    importedGroups.push(group)
+  }
+
+  if (existingGroups.length > 0) {
+    process.logger.info(
+      'Failed to insert following groups as they already exist in DB:'
+    )
+    existingGroups.forEach((group) => process.logger.log(`* ${group}`))
+  }
+
+  process.logger.info('associating users and groups')
+
+  for (const group of importedGroups) {
+    const dbGroup = await Group.findOne({ name: group.name })
+    if (dbGroup) {
+      for (const member of group.members) {
+        const user = importedUsers.find((user) => user.uid === member)
+        if (user) {
+          const dbUser = await User.findOne({ username: user.username })
+          if (dbUser) await dbGroup.addUser(dbUser)
+        }
+      }
+    }
+  }
+
+  process.logger.info('setting permissions')
+
+  for (const permission of permissions) {
+    const newPermission = new Permission({
+      path: permission.path,
+      type: permission.type,
+      setting: permission.setting
+    })
+
+    if (permission.user) {
+      const dbUser = await User.findOne({ username: permission.user.username })
+      if (dbUser) newPermission.user = dbUser._id
+    } else if (permission.group) {
+      const dbGroup = await Group.findOne({ name: permission.group.name })
+      if (dbGroup) newPermission.group = dbGroup._id
+    }
+    await newPermission.save()
+  }
+
+  process.logger.info('LDAP synchronization completed!')
+
+  return {
+    userCount: importedUsers.length,
+    groupCount: importedGroups.length
+  }
+}
+
+const getAuthConfigDetail = () => {
+  const { AUTH_PROVIDERS } = process.env
+
+  const returnObj: any = {}
+
+  if (AUTH_PROVIDERS === AuthProviderType.LDAP) {
+    const {
+      LDAP_URL,
+      LDAP_BIND_DN,
+      LDAP_BIND_PASSWORD,
+      LDAP_USERS_BASE_DN,
+      LDAP_GROUPS_BASE_DN
+    } = process.env
+
+    returnObj.ldap = {
+      LDAP_URL: LDAP_URL ?? '',
+      LDAP_BIND_DN: LDAP_BIND_DN ?? '',
+      LDAP_BIND_PASSWORD: LDAP_BIND_PASSWORD ?? '',
+      LDAP_USERS_BASE_DN: LDAP_USERS_BASE_DN ?? '',
+      LDAP_GROUPS_BASE_DN: LDAP_GROUPS_BASE_DN ?? ''
+    }
+  }
+  return returnObj
+}
--- a/api/src/controllers/code.ts
+++ b/api/src/controllers/code.ts
@@ -1,7 +1,6 @@
 import express from 'express'
 import { Request, Security, Route, Tags, Post, Body } from 'tsoa'
-import { ExecuteReturnJson, ExecutionController } from './internal'
-import { ExecuteReturnJsonResponse } from '.'
+import { ExecutionController } from './internal'
 import {
  getPreProgramVariables,
  getUserAutoExec,
@@ -25,17 +24,17 @@ interface ExecuteCodePayload {

@Security('bearerAuth')
@Route('SASjsApi/code')
-@Tags('CODE')
+@Tags('Code')
 export class CodeController {
  /**
-   * Execute SAS code.
-   * @summary Run SAS Code and returns log
+   * Execute Code on the Specified Runtime
+   * @summary Run Code and Return Webout Content and Log
   */
  @Post('/execute')
  public async executeCode(
    @Request() request: express.Request,
    @Body() body: ExecuteCodePayload
-  ): Promise<ExecuteReturnJsonResponse> {
+  ): Promise<string | Buffer> {
    return executeCode(request, body)
  }
 }
@@ -51,22 +50,15 @@ const executeCode = async (
      : await getUserAutoExec()

  try {
-    const { webout, log, httpHeaders } =
-      (await new ExecutionController().executeProgram({
-        program: code,
-        preProgramVariables: getPreProgramVariables(req),
-        vars: { ...req.query, _debug: 131 },
-        otherArgs: { userAutoExec },
-        returnJson: true,
-        runTime: runTime
-      })) as ExecuteReturnJson
+    const { result } = await new ExecutionController().executeProgram({
+      program: code,
+      preProgramVariables: getPreProgramVariables(req),
+      vars: { ...req.query, _debug: 131 },
+      otherArgs: { userAutoExec },
+      runTime: runTime
+    })

-    return {
-      status: 'success',
-      _webout: webout as string,
-      log: parseLogToArray(log),
-      httpHeaders
-    }
+    return result
  } catch (err: any) {
    throw {
      code: 400,
--- a/api/src/controllers/group.ts
+++ b/api/src/controllers/group.ts
@@ -12,6 +12,7 @@ import {

 import Group, { GroupPayload, PUBLIC_GROUP_NAME } from '../model/Group'
 import User from '../model/User'
+import { AuthProviderType } from '../utils'
 import { UserResponse } from './user'

 export interface GroupResponse {
@@ -147,12 +148,14 @@ export class GroupController {
  @Delete('{groupId}')
  public async deleteGroup(@Path() groupId: number) {
    const group = await Group.findOne({ groupId })
-    if (group) return await group.remove()
-    throw {
-      code: 404,
-      status: 'Not Found',
-      message: 'Group not found.'
-    }
+    if (!group)
+      throw {
+        code: 404,
+        status: 'Not Found',
+        message: 'Group not found.'
+      }
+
+    return await group.remove()
  }
 }

@@ -248,6 +251,13 @@ const updateUsersListInGroup = async (
      message: `Can't add/remove user to '${PUBLIC_GROUP_NAME}' group.`
    }

+  if (group.authProvider)
+    throw {
+      code: 405,
+      status: 'Method Not Allowed',
+      message: `Can't add/remove user to group created by external auth provider.`
+    }
+
  const user = await User.findOne({ id: userId })
  if (!user)
    throw {
@@ -256,6 +266,13 @@ const updateUsersListInGroup = async (
      message: 'User not found.'
    }

+  if (user.authProvider)
+    throw {
+      code: 405,
+      status: 'Method Not Allowed',
+      message: `Can't add/remove user to group created by external auth provider.`
+    }
+
  const updatedGroup =
    action === 'addUser'
      ? await group.addUser(user)
--- a/api/src/controllers/index.ts
+++ b/api/src/controllers/index.ts
@@ -1,4 +1,5 @@
 export * from './auth'
+export * from './authConfig'
 export * from './client'
 export * from './code'
 export * from './drive'
--- a/api/src/controllers/internal/Execution.ts
+++ b/api/src/controllers/internal/Execution.ts
@@ -20,12 +20,6 @@ export interface ExecuteReturnRaw {
  result: string | Buffer
 }

-export interface ExecuteReturnJson {
-  httpHeaders: HTTPHeaders
-  webout: string | Buffer
-  log?: string
-}
-
 interface ExecuteFileParams {
  programPath: string
  preProgramVariables: PreProgramVars
@@ -34,6 +28,7 @@ interface ExecuteFileParams {
  returnJson?: boolean
  session?: Session
  runTime: RunTimeType
+  forceStringResult?: boolean
 }

 interface ExecuteProgramParams extends Omit<ExecuteFileParams, 'programPath'> {
@@ -48,7 +43,8 @@ export class ExecutionController {
    otherArgs,
    returnJson,
    session,
-    runTime
+    runTime,
+    forceStringResult
  }: ExecuteFileParams) {
    const program = await readFile(programPath)

@@ -59,7 +55,8 @@ export class ExecutionController {
      otherArgs,
      returnJson,
      session,
-      runTime
+      runTime,
+      forceStringResult
    })
  }

@@ -68,10 +65,10 @@ export class ExecutionController {
    preProgramVariables,
    vars,
    otherArgs,
-    returnJson,
    session: sessionByFileUpload,
-    runTime
-  }: ExecuteProgramParams): Promise<ExecuteReturnRaw | ExecuteReturnJson> {
+    runTime,
+    forceStringResult
+  }: ExecuteProgramParams): Promise<ExecuteReturnRaw> {
    const sessionController = getSessionController(runTime)

    const session =
@@ -96,6 +93,7 @@ export class ExecutionController {
      vars,
      session,
      weboutPath,
+      headersPath,
      tokenFile,
      runTime,
      logPath,
@@ -107,13 +105,10 @@ export class ExecutionController {
      ? await readFile(headersPath)
      : ''
    const httpHeaders: HTTPHeaders = extractHeaders(headersContent)
-    const fileResponse: boolean =
-      httpHeaders.hasOwnProperty('content-type') &&
-      !returnJson && // not a POST Request
-      !isDebugOn(vars) // Debug is not enabled
+    const fileResponse: boolean = httpHeaders.hasOwnProperty('content-type')

    const webout = (await fileExists(weboutPath))
-      ? fileResponse
+      ? fileResponse && !forceStringResult
        ? await readFileBinary(weboutPath)
        : await readFile(weboutPath)
      : ''
@@ -121,19 +116,11 @@ export class ExecutionController {
    // it should be deleted by scheduleSessionDestroy
    session.inUse = false

-    if (returnJson) {
-      return {
-        httpHeaders,
-        webout,
-        log: isDebugOn(vars) || session.crashed ? log : undefined
-      }
-    }
-
    return {
      httpHeaders,
      result:
        isDebugOn(vars) || session.crashed
-          ? `<html><body>${webout}<div style="text-align:left"><hr /><h2>SAS Log</h2><pre>${log}</pre></div></body></html>`
+          ? `${webout}\n${process.logsUUID}\n${log}`
          : webout
    }
  }
--- a/api/src/controllers/internal/Session.ts
+++ b/api/src/controllers/internal/Session.ts
@@ -3,6 +3,7 @@ import { Session } from '../../types'
 import { promisify } from 'util'
 import { execFile } from 'child_process'
 import {
+  getPackagesFolder,
  getSessionsFolder,
  generateUniqueFileName,
  sysInitCompiledPath,
@@ -19,13 +20,41 @@ import {

 const execFilePromise = promisify(execFile)

-abstract class SessionController {
+export class SessionController {
  protected sessions: Session[] = []

  protected getReadySessions = (): Session[] =>
    this.sessions.filter((sess: Session) => sess.ready && !sess.consumed)

-  protected abstract createSession(): Promise<Session>
+  protected async createSession(): Promise<Session> {
+    const sessionId = generateUniqueFileName(generateTimestamp())
+    const sessionFolder = path.join(getSessionsFolder(), sessionId)
+
+    const creationTimeStamp = sessionId.split('-').pop() as string
+    // death time of session is 15 mins from creation
+    const deathTimeStamp = (
+      parseInt(creationTimeStamp) +
+      15 * 60 * 1000 -
+      1000
+    ).toString()
+
+    const session: Session = {
+      id: sessionId,
+      ready: true,
+      inUse: true,
+      consumed: false,
+      completed: false,
+      creationTimeStamp,
+      deathTimeStamp,
+      path: sessionFolder
+    }
+
+    const headersPath = path.join(session.path, 'stpsrv_header.txt')
+    await createFile(headersPath, 'Content-type: text/plain')
+
+    this.sessions.push(session)
+    return session
+  }

  public async getSession() {
    const readySessions = this.getReadySessions()
@@ -64,6 +93,9 @@ export class SASSessionController extends SessionController {
      path: sessionFolder
    }

+    const headersPath = path.join(session.path, 'stpsrv_header.txt')
+    await createFile(headersPath, 'Content-type: text/plain')
+
    // we do not want to leave sessions running forever
    // we clean them up after a predefined period, if unused
    this.scheduleSessionDestroy(session)
@@ -73,7 +105,8 @@ export class SASSessionController extends SessionController {

    // the autoexec file is executed on SAS startup
    const autoExecPath = path.join(sessionFolder, 'autoexec.sas')
-    const contentForAutoExec = `/* compiled systemInit */
+    const contentForAutoExec = `filename packages "${getPackagesFolder()}";
+/* compiled systemInit */
 ${compiledSystemInitContent}
 /* autoexec */
 ${autoExecContent}`
@@ -101,12 +134,14 @@ ${autoExecContent}`
      session.path,
      '-AUTOEXEC',
      autoExecPath,
+      isWindows() ? '-nologo' : '',
      process.sasLoc!.endsWith('sas.exe') ? '-nosplash' : '',
      process.sasLoc!.endsWith('sas.exe') ? '-icon' : '',
      process.sasLoc!.endsWith('sas.exe') ? '-nodms' : '',
      process.sasLoc!.endsWith('sas.exe') ? '-noterminal' : '',
      process.sasLoc!.endsWith('sas.exe') ? '-nostatuswin' : '',
-      isWindows() ? '-nologo' : ''
+      process.sasLoc!.endsWith('sas.exe') ? '-SASINITIALFOLDER' : '',
+      process.sasLoc!.endsWith('sas.exe') ? session.path : ''
    ])
      .then(() => {
        session.completed = true
@@ -140,7 +175,7 @@ ${autoExecContent}`
    session.ready = true
  }

-  public async deleteSession(session: Session) {
+  private async deleteSession(session: Session) {
    // remove the temporary files, to avoid buildup
    await deleteFolder(session.path)

@@ -165,66 +200,17 @@ ${autoExecContent}`
  }
 }

-export class JSSessionController extends SessionController {
-  protected async createSession(): Promise<Session> {
-    const sessionId = generateUniqueFileName(generateTimestamp())
-    const sessionFolder = path.join(getSessionsFolder(), sessionId)
-
-    const creationTimeStamp = sessionId.split('-').pop() as string
-    // death time of session is 15 mins from creation
-    const deathTimeStamp = (
-      parseInt(creationTimeStamp) +
-      15 * 60 * 1000 -
-      1000
-    ).toString()
-
-    const session: Session = {
-      id: sessionId,
-      ready: true,
-      inUse: true,
-      consumed: false,
-      completed: false,
-      creationTimeStamp,
-      deathTimeStamp,
-      path: sessionFolder
-    }
-
-    const headersPath = path.join(session.path, 'stpsrv_header.txt')
-    await createFile(headersPath, 'Content-type: application/json')
-
-    this.sessions.push(session)
-    return session
-  }
-}
-
 export const getSessionController = (
  runTime: RunTimeType
-): SASSessionController | JSSessionController => {
-  if (runTime === RunTimeType.SAS) {
-    return getSASSessionController()
-  }
+): SessionController => {
+  if (process.sessionController) return process.sessionController

-  if (runTime === RunTimeType.JS) {
-    return getJSSessionController()
-  }
+  process.sessionController =
+    runTime === RunTimeType.SAS
+      ? new SASSessionController()
+      : new SessionController()

-  throw new Error('No Runtime is configured')
-}
-
-const getSASSessionController = (): SASSessionController => {
-  if (process.sasSessionController) return process.sasSessionController
-
-  process.sasSessionController = new SASSessionController()
-
-  return process.sasSessionController
-}
-
-const getJSSessionController = (): JSSessionController => {
-  if (process.jsSessionController) return process.jsSessionController
-
-  process.jsSessionController = new JSSessionController()
-
-  return process.jsSessionController
+  return process.sessionController
 }

 const autoExecContent = `
--- a/api/src/controllers/internal/createJSProgram.ts
+++ b/api/src/controllers/internal/createJSProgram.ts
@@ -1,4 +1,4 @@
-import { isWindows } from '@sasjs/utils'
+import { escapeWinSlashes } from '@sasjs/utils'
 import { PreProgramVars, Session } from '../../types'
 import { generateFileUploadJSCode } from '../../utils'
 import { ExecutionVars } from './'
@@ -9,6 +9,7 @@ export const createJSProgram = async (
  vars: ExecutionVars,
  session: Session,
  weboutPath: string,
+  headersPath: string,
  tokenFile: string,
  otherArgs?: any
 ) => {
@@ -20,18 +21,15 @@ export const createJSProgram = async (

  const preProgramVarStatments = `
 let _webout = '';
-const weboutPath = '${
-    isWindows() ? weboutPath.replace(/\\/g, '\\\\') : weboutPath
-  }'; 
-const _sasjs_tokenfile = '${
-    isWindows() ? tokenFile.replace(/\\/g, '\\\\') : tokenFile
-  }';
-const _sasjs_username = '${preProgramVariables?.username}';
-const _sasjs_userid = '${preProgramVariables?.userId}';
-const _sasjs_displayname = '${preProgramVariables?.displayName}';
-const _metaperson = _sasjs_displayname;
-const _metauser = _sasjs_username;
-const sasjsprocessmode = 'Stored Program';
+const weboutPath = '${escapeWinSlashes(weboutPath)}'; 
+const _SASJS_TOKENFILE = '${escapeWinSlashes(tokenFile)}';
+const _SASJS_WEBOUT_HEADERS = '${escapeWinSlashes(headersPath)}';
+const _SASJS_USERNAME = '${preProgramVariables?.username}';
+const _SASJS_USERID = '${preProgramVariables?.userId}';
+const _SASJS_DISPLAYNAME = '${preProgramVariables?.displayName}';
+const _METAPERSON = _SASJS_DISPLAYNAME;
+const _METAUSER = _SASJS_USERNAME;
+const SASJSPROCESSMODE = 'Stored Program';
 `

  const requiredModules = `const fs = require('fs')`
@@ -55,14 +53,15 @@ if (_webout) {
 `
  // if no files are uploaded filesNamesMap will be undefined
  if (otherArgs?.filesNamesMap) {
-    const uploadJSCode = await generateFileUploadJSCode(
+    const uploadJsCode = await generateFileUploadJSCode(
      otherArgs.filesNamesMap,
      session.path
    )

-    //If js code for the file is generated it will be appended to the top of jsCode
-    if (uploadJSCode.length > 0) {
-      program = `${uploadJSCode}\n` + program
+    // If any files are uploaded, the program needs to be updated with some
+    // dynamically generated variables (pointers) for ease of ingestion
+    if (uploadJsCode.length > 0) {
+      program = `${uploadJsCode}\n` + program
    }
  }
  return requiredModules + program
--- a/api/src/controllers/internal/createPythonProgram.ts
+++ b/api/src/controllers/internal/createPythonProgram.ts
@@ -0,0 +1,64 @@
+import { escapeWinSlashes } from '@sasjs/utils'
+import { PreProgramVars, Session } from '../../types'
+import { generateFileUploadPythonCode } from '../../utils'
+import { ExecutionVars } from './'
+
+export const createPythonProgram = async (
+  program: string,
+  preProgramVariables: PreProgramVars,
+  vars: ExecutionVars,
+  session: Session,
+  weboutPath: string,
+  headersPath: string,
+  tokenFile: string,
+  otherArgs?: any
+) => {
+  const varStatments = Object.keys(vars).reduce(
+    (computed: string, key: string) => `${computed}${key} = '${vars[key]}';\n`,
+    ''
+  )
+
+  const preProgramVarStatments = `
+_SASJS_SESSION_PATH = '${escapeWinSlashes(session.path)}';
+_WEBOUT = '${escapeWinSlashes(weboutPath)}'; 
+_SASJS_WEBOUT_HEADERS = '${escapeWinSlashes(headersPath)}';
+_SASJS_TOKENFILE = '${escapeWinSlashes(tokenFile)}';
+_SASJS_USERNAME = '${preProgramVariables?.username}';
+_SASJS_USERID = '${preProgramVariables?.userId}';
+_SASJS_DISPLAYNAME = '${preProgramVariables?.displayName}';
+_METAPERSON = _SASJS_DISPLAYNAME;
+_METAUSER = _SASJS_USERNAME;
+SASJSPROCESSMODE = 'Stored Program';
+`
+
+  const requiredModules = `import os`
+
+  program = `
+# runtime vars
+${varStatments}
+
+# dynamic user-provided vars
+${preProgramVarStatments}
+
+# change working directory to  session folder
+os.chdir(_SASJS_SESSION_PATH)
+
+# actual job code
+${program}
+
+`
+  // if no files are uploaded filesNamesMap will be undefined
+  if (otherArgs?.filesNamesMap) {
+    const uploadPythonCode = await generateFileUploadPythonCode(
+      otherArgs.filesNamesMap,
+      session.path
+    )
+
+    // If any files are uploaded, the program needs to be updated with some
+    // dynamically generated variables (pointers) for ease of ingestion
+    if (uploadPythonCode.length > 0) {
+      program = `${uploadPythonCode}\n` + program
+    }
+  }
+  return requiredModules + program
+}
--- a/api/src/controllers/internal/createRProgram.ts
+++ b/api/src/controllers/internal/createRProgram.ts
@@ -0,0 +1,64 @@
+import { escapeWinSlashes } from '@sasjs/utils'
+import { PreProgramVars, Session } from '../../types'
+import { generateFileUploadRCode } from '../../utils'
+import { ExecutionVars } from '.'
+
+export const createRProgram = async (
+  program: string,
+  preProgramVariables: PreProgramVars,
+  vars: ExecutionVars,
+  session: Session,
+  weboutPath: string,
+  headersPath: string,
+  tokenFile: string,
+  otherArgs?: any
+) => {
+  const varStatments = Object.keys(vars).reduce(
+    (computed: string, key: string) => `${computed}.${key} <- '${vars[key]}'\n`,
+    ''
+  )
+
+  const preProgramVarStatments = `
+._SASJS_SESSION_PATH <- '${escapeWinSlashes(session.path)}';
+._WEBOUT <- '${escapeWinSlashes(weboutPath)}'; 
+._SASJS_WEBOUT_HEADERS <- '${escapeWinSlashes(headersPath)}';
+._SASJS_TOKENFILE <- '${escapeWinSlashes(tokenFile)}';
+._SASJS_USERNAME <- '${preProgramVariables?.username}';
+._SASJS_USERID <- '${preProgramVariables?.userId}';
+._SASJS_DISPLAYNAME <- '${preProgramVariables?.displayName}';
+._METAPERSON <- ._SASJS_DISPLAYNAME;
+._METAUSER <- ._SASJS_USERNAME;
+SASJSPROCESSMODE <- 'Stored Program';
+`
+
+  const requiredModules = ``
+
+  program = `
+# runtime vars
+${varStatments}
+
+# dynamic user-provided vars
+${preProgramVarStatments}
+
+# change working directory to  session folder
+setwd(._SASJS_SESSION_PATH)
+
+# actual job code
+${program}
+
+`
+  // if no files are uploaded filesNamesMap will be undefined
+  if (otherArgs?.filesNamesMap) {
+    const uploadRCode = await generateFileUploadRCode(
+      otherArgs.filesNamesMap,
+      session.path
+    )
+
+    // If any files are uploaded, the program needs to be updated with some
+    // dynamically generated variables (pointers) for ease of ingestion
+    if (uploadRCode.length > 0) {
+      program = `${uploadRCode}\n` + program
+    }
+  }
+  return requiredModules + program
+}
--- a/api/src/controllers/internal/createSASProgram.ts
+++ b/api/src/controllers/internal/createSASProgram.ts
@@ -8,6 +8,7 @@ export const createSASProgram = async (
  vars: ExecutionVars,
  session: Session,
  weboutPath: string,
+  headersPath: string,
  tokenFile: string,
  otherArgs?: any
 ) => {
@@ -23,10 +24,14 @@ export const createSASProgram = async (
 %let _sasjs_displayname=${preProgramVariables?.displayName};
 %let _sasjs_apiserverurl=${preProgramVariables?.serverUrl};
 %let _sasjs_apipath=/SASjsApi/stp/execute;
+%let _sasjs_webout_headers=${headersPath};
 %let _metaperson=&_sasjs_displayname;
 %let _metauser=&_sasjs_username;
+
+/* the below is here for compatibility and will be removed in a future release */
+%let sasjs_stpsrv_header_loc=&_sasjs_webout_headers;
+
 %let sasjsprocessmode=Stored Program;
-%let sasjs_stpsrv_header_loc=%sysfunc(pathname(work))/../stpsrv_header.txt;

 %global SYSPROCESSMODE SYSTCPIPHOSTNAME SYSHOSTINFOLONG;
 %macro _sasjs_server_init();
@@ -34,6 +39,9 @@ export const createSASProgram = async (
 %if "&SYSTCPIPHOSTNAME"="" %then %let SYSTCPIPHOSTNAME=&_sasjs_apiserverurl;
 %mend;
 %_sasjs_server_init()
+
+proc printto print="%sysfunc(getoption(log))";
+run;
 `

  program = `
@@ -60,7 +68,8 @@ ${program}`
      session.path
    )

-    //If sas code for the file is generated it will be appended to the top of sasCode
+    // If any files are uploaded, the program needs to be updated with some
+    // dynamically generated variables (pointers) for ease of ingestion
    if (uploadSasCode.length > 0) {
      program = `${uploadSasCode}` + program
    }
--- a/api/src/controllers/internal/index.ts
+++ b/api/src/controllers/internal/index.ts
@@ -4,4 +4,6 @@ export * from './Execution'
 export * from './FileUploadController'
 export * from './createSASProgram'
 export * from './createJSProgram'
+export * from './createPythonProgram'
+export * from './createRProgram'
 export * from './processProgram'
--- a/api/src/controllers/internal/processProgram.ts
+++ b/api/src/controllers/internal/processProgram.ts
@@ -5,7 +5,13 @@ import { once } from 'stream'
 import { createFile, moveFile } from '@sasjs/utils'
 import { PreProgramVars, Session } from '../../types'
 import { RunTimeType } from '../../utils'
-import { ExecutionVars, createSASProgram, createJSProgram } from './'
+import {
+  ExecutionVars,
+  createSASProgram,
+  createJSProgram,
+  createPythonProgram,
+  createRProgram
+} from './'

 export const processProgram = async (
  program: string,
@@ -13,54 +19,20 @@ export const processProgram = async (
  vars: ExecutionVars,
  session: Session,
  weboutPath: string,
+  headersPath: string,
  tokenFile: string,
  runTime: RunTimeType,
  logPath: string,
  otherArgs?: any
 ) => {
-  if (runTime === RunTimeType.JS) {
-    program = await createJSProgram(
-      program,
-      preProgramVariables,
-      vars,
-      session,
-      weboutPath,
-      tokenFile,
-      otherArgs
-    )
-
-    const codePath = path.join(session.path, 'code.js')
-
-    try {
-      await createFile(codePath, program)
-
-      // create a stream that will write to console outputs to log file
-      const writeStream = fs.createWriteStream(logPath)
-
-      // waiting for the open event so that we can have underlying file descriptor
-      await once(writeStream, 'open')
-
-      execFileSync(process.nodeLoc!, [codePath], {
-        stdio: ['ignore', writeStream, writeStream]
-      })
-
-      // copy the code.js program to log and end write stream
-      writeStream.end(program)
-
-      session.completed = true
-      console.log('session completed', session)
-    } catch (err: any) {
-      session.completed = true
-      session.crashed = err.toString()
-      console.log('session crashed', session.id, session.crashed)
-    }
-  } else {
+  if (runTime === RunTimeType.SAS) {
    program = await createSASProgram(
      program,
      preProgramVariables,
      vars,
      session,
      weboutPath,
+      headersPath,
      tokenFile,
      otherArgs
    )
@@ -80,6 +52,78 @@ export const processProgram = async (
    while (!session.completed) {
      await delay(50)
    }
+  } else {
+    let codePath: string
+    let executablePath: string
+    switch (runTime) {
+      case RunTimeType.JS:
+        program = await createJSProgram(
+          program,
+          preProgramVariables,
+          vars,
+          session,
+          weboutPath,
+          headersPath,
+          tokenFile,
+          otherArgs
+        )
+        codePath = path.join(session.path, 'code.js')
+        executablePath = process.nodeLoc!
+
+        break
+      case RunTimeType.PY:
+        program = await createPythonProgram(
+          program,
+          preProgramVariables,
+          vars,
+          session,
+          weboutPath,
+          headersPath,
+          tokenFile,
+          otherArgs
+        )
+        codePath = path.join(session.path, 'code.py')
+        executablePath = process.pythonLoc!
+
+        break
+      case RunTimeType.R:
+        program = await createRProgram(
+          program,
+          preProgramVariables,
+          vars,
+          session,
+          weboutPath,
+          headersPath,
+          tokenFile,
+          otherArgs
+        )
+        codePath = path.join(session.path, 'code.r')
+        executablePath = process.rLoc!
+
+        break
+      default:
+        throw new Error('Invalid runtime!')
+    }
+
+    try {
+      await createFile(codePath, program)
+
+      // create a stream that will write to console outputs to log file
+      const writeStream = fs.createWriteStream(logPath)
+      // waiting for the open event so that we can have underlying file descriptor
+      await once(writeStream, 'open')
+      execFileSync(executablePath, [codePath], {
+        stdio: ['ignore', writeStream, writeStream]
+      })
+      // copy the code file to log and end write stream
+      writeStream.end(program)
+      session.completed = true
+      console.log('session completed', session)
+    } catch (err: any) {
+      session.completed = true
+      session.crashed = err.toString()
+      console.log('session crashed', session.id, session.crashed)
+    }
  }
 }

--- a/api/src/controllers/mock-sas9.ts
+++ b/api/src/controllers/mock-sas9.ts
@@ -0,0 +1,283 @@
+import { readFile } from '@sasjs/utils'
+import express from 'express'
+import path from 'path'
+import { Request, Post, Get } from 'tsoa'
+import dotenv from 'dotenv'
+import { ExecutionController } from './internal'
+import {
+  getPreProgramVariables,
+  getRunTimeAndFilePath,
+  makeFilesNamesMap
+} from '../utils'
+import { MulterFile } from '../types/Upload'
+
+dotenv.config()
+
+export interface Sas9Response {
+  content: string
+  redirect?: string
+  error?: boolean
+}
+
+export interface MockFileRead {
+  content: string
+  error?: boolean
+}
+
+export class MockSas9Controller {
+  private loggedIn: string | undefined
+  private mocksPath = process.env.STATIC_MOCK_LOCATION || 'mocks'
+
+  @Get('/SASStoredProcess')
+  public async sasStoredProcess(
+    @Request() req: express.Request
+  ): Promise<Sas9Response> {
+    const username = req.query._username?.toString() || undefined
+    const password = req.query._password?.toString() || undefined
+
+    if (username && password) this.loggedIn = req.body.username
+
+    if (!this.loggedIn) {
+      return {
+        content: '',
+        redirect: '/SASLogon/login'
+      }
+    }
+
+    let program = req.query._program?.toString() || undefined
+    const filePath: string[] = program
+      ? program.replace('/', '').split('/')
+      : ['generic', 'sas-stored-process']
+
+    if (program) {
+      return await getMockResponseFromFile([
+        process.cwd(),
+        this.mocksPath,
+        'sas9',
+        ...filePath
+      ])
+    }
+
+    return await getMockResponseFromFile([
+      process.cwd(),
+      'mocks',
+      'sas9',
+      ...filePath
+    ])
+  }
+
+  @Get('/SASStoredProcess/do')
+  public async sasStoredProcessDoGet(
+    @Request() req: express.Request
+  ): Promise<Sas9Response> {
+    const username = req.query._username?.toString() || undefined
+    const password = req.query._password?.toString() || undefined
+
+    if (username && password) this.loggedIn = username
+
+    if (!this.loggedIn) {
+      return {
+        content: '',
+        redirect: '/SASLogon/login'
+      }
+    }
+
+    const program = req.query._program ?? req.body?._program
+    const filePath: string[] = ['generic', 'sas-stored-process']
+
+    if (program) {
+      const vars = { ...req.query, ...req.body, _requestMethod: req.method }
+      const otherArgs = {}
+
+      try {
+        const { codePath, runTime } = await getRunTimeAndFilePath(
+          program + '.js'
+        )
+
+        const result = await new ExecutionController().executeFile({
+          programPath: codePath,
+          preProgramVariables: getPreProgramVariables(req),
+          vars: vars,
+          otherArgs: otherArgs,
+          runTime,
+          forceStringResult: true
+        })
+
+        return {
+          content: result.result as string
+        }
+      } catch (err) {
+        console.log('err', err)
+      }
+
+      return {
+        content: 'No webout returned.'
+      }
+    }
+
+    return await getMockResponseFromFile([
+      process.cwd(),
+      'mocks',
+      'sas9',
+      ...filePath
+    ])
+  }
+
+  @Post('/SASStoredProcess/do/')
+  public async sasStoredProcessDoPost(
+    @Request() req: express.Request
+  ): Promise<Sas9Response> {
+    if (!this.loggedIn) {
+      return {
+        content: '',
+        redirect: '/SASLogon/login'
+      }
+    }
+
+    if (this.isPublicAccount()) {
+      return {
+        content: '',
+        redirect: '/SASLogon/Login'
+      }
+    }
+
+    const program = req.query._program ?? req.body?._program
+    const vars = {
+      ...req.query,
+      ...req.body,
+      _requestMethod: req.method,
+      _driveLoc: process.driveLoc
+    }
+    const filesNamesMap = req.files?.length
+      ? makeFilesNamesMap(req.files as MulterFile[])
+      : null
+    const otherArgs = { filesNamesMap: filesNamesMap }
+    const { codePath, runTime } = await getRunTimeAndFilePath(program + '.js')
+    try {
+      const result = await new ExecutionController().executeFile({
+        programPath: codePath,
+        preProgramVariables: getPreProgramVariables(req),
+        vars: vars,
+        otherArgs: otherArgs,
+        runTime,
+        session: req.sasjsSession,
+        forceStringResult: true
+      })
+
+      return {
+        content: result.result as string
+      }
+    } catch (err) {
+      console.log('err', err)
+    }
+
+    return {
+      content: 'No webout returned.'
+    }
+  }
+
+  @Get('/SASLogon/login')
+  public async loginGet(): Promise<Sas9Response> {
+    if (this.loggedIn) {
+      if (this.isPublicAccount()) {
+        return {
+          content: '',
+          redirect: '/SASStoredProcess/Logoff?publicDenied=true'
+        }
+      } else {
+        return await getMockResponseFromFile([
+          process.cwd(),
+          'mocks',
+          'sas9',
+          'generic',
+          'logged-in'
+        ])
+      }
+    }
+
+    return await getMockResponseFromFile([
+      process.cwd(),
+      'mocks',
+      'sas9',
+      'generic',
+      'login'
+    ])
+  }
+
+  @Post('/SASLogon/login')
+  public async loginPost(req: express.Request): Promise<Sas9Response> {
+    if (req.body.lt && req.body.lt !== 'validtoken')
+      return {
+        content: '',
+        redirect: '/SASLogon/login'
+      }
+
+    this.loggedIn = req.body.username
+
+    return await getMockResponseFromFile([
+      process.cwd(),
+      'mocks',
+      'sas9',
+      'generic',
+      'logged-in'
+    ])
+  }
+
+  @Get('/SASLogon/logout')
+  public async logout(req: express.Request): Promise<Sas9Response> {
+    this.loggedIn = undefined
+
+    if (req.query.publicDenied === 'true') {
+      return await getMockResponseFromFile([
+        process.cwd(),
+        'mocks',
+        'sas9',
+        'generic',
+        'public-access-denied'
+      ])
+    }
+
+    return await getMockResponseFromFile([
+      process.cwd(),
+      'mocks',
+      'sas9',
+      'generic',
+      'logged-out'
+    ])
+  }
+
+  @Get('/SASStoredProcess/Logoff') //publicDenied=true
+  public async logoff(req: express.Request): Promise<Sas9Response> {
+    const params = req.query.publicDenied
+      ? `?publicDenied=${req.query.publicDenied}`
+      : ''
+
+    return {
+      content: '',
+      redirect: '/SASLogon/logout' + params
+    }
+  }
+
+  private isPublicAccount = () => this.loggedIn?.toLowerCase() === 'public'
+}
+
+const getMockResponseFromFile = async (
+  filePath: string[]
+): Promise<MockFileRead> => {
+  const filePathParsed = path.join(...filePath)
+  let error: boolean = false
+
+  let file = await readFile(filePathParsed).catch((err: any) => {
+    const errMsg = `Error reading mocked file on path: ${filePathParsed}\nError: ${err}`
+    console.error(errMsg)
+
+    error = true
+
+    return errMsg
+  })
+
+  return {
+    content: file,
+    error: error
+  }
+}
--- a/api/src/controllers/stp.ts
+++ b/api/src/controllers/stp.ts
@@ -1,33 +1,16 @@
 import express from 'express'
-import {
-  Request,
-  Security,
-  Route,
-  Tags,
-  Post,
-  Body,
-  Get,
-  Query,
-  Example
-} from 'tsoa'
-import {
-  ExecuteReturnJson,
-  ExecuteReturnRaw,
-  ExecutionController,
-  ExecutionVars
-} from './internal'
+import { Request, Security, Route, Tags, Post, Body, Get, Query } from 'tsoa'
+import { ExecutionController, ExecutionVars } from './internal'
 import {
  getPreProgramVariables,
  HTTPHeaders,
-  isDebugOn,
  LogLine,
  makeFilesNamesMap,
-  parseLogToArray,
  getRunTimeAndFilePath
 } from '../utils'
 import { MulterFile } from '../types/Upload'

-interface ExecuteReturnJsonPayload {
+interface ExecutePostRequestPayload {
  /**
   * Location of SAS program
   * @example "/Public/somefolder/some.file"
@@ -35,102 +18,78 @@ interface ExecuteReturnJsonPayload {
  _program?: string
 }

-interface IRecordOfAny {
-  [key: string]: any
-}
-export interface ExecuteReturnJsonResponse {
-  status: string
-  _webout: string | IRecordOfAny
-  log: LogLine[]
-  message?: string
-  httpHeaders: HTTPHeaders
-}
-
@Security('bearerAuth')
@Route('SASjsApi/stp')
@Tags('STP')
 export class STPController {
  /**
-   * Trigger a SAS or JS program using the _program URL parameter.
+   * Trigger a Stored Program using the _program URL parameter.
   *
   * Accepts URL parameters and file uploads.  For more details, see docs:
   *
   * https://server.sasjs.io/storedprograms
   *
-   * @summary Execute a Stored Program, returns raw _webout content.
-   * @param _program Location of SAS or JS code
+   * @summary Execute a Stored Program, returns _webout and (optionally) log.
+   * @param _program Location of code in SASjs Drive
   * @example _program "/Projects/myApp/some/program"
   */
  @Get('/execute')
-  public async executeReturnRaw(
+  public async executeGetRequest(
    @Request() request: express.Request,
    @Query() _program: string
  ): Promise<string | Buffer> {
-    return executeReturnRaw(request, _program)
+    const vars = request.query as ExecutionVars
+    return execute(request, _program, vars)
  }

  /**
-   * Trigger a SAS or JS program using the _program URL parameter.
+   * Trigger a Stored Program using the _program URL parameter.
   *
   * Accepts URL parameters and file uploads.  For more details, see docs:
   *
   * https://server.sasjs.io/storedprograms
   *
-   * The response will be a JSON object with the following root attributes:
-   * log, webout, headers.
   *
-   * The webout attribute will be nested JSON ONLY if the response-header
-   * contains a content-type of application/json AND it is valid JSON.
-   * Otherwise it will be a stringified version of the webout content.
-   *
-   * @summary Execute a Stored Program, return a JSON object
-   * @param _program Location of SAS or JS code
+   * @summary Execute a Stored Program, returns _webout and (optionally) log.
+   * @param _program Location of code in SASjs Drive
   * @example _program "/Projects/myApp/some/program"
   */
-  @Example<ExecuteReturnJsonResponse>({
-    status: 'success',
-    _webout: 'webout content',
-    log: [],
-    httpHeaders: {
-      'Content-type': 'application/zip',
-      'Cache-Control': 'public, max-age=1000'
-    }
-  })
  @Post('/execute')
-  public async executeReturnJson(
+  public async executePostRequest(
    @Request() request: express.Request,
-    @Body() body?: ExecuteReturnJsonPayload,
+    @Body() body?: ExecutePostRequestPayload,
    @Query() _program?: string
-  ): Promise<ExecuteReturnJsonResponse> {
+  ): Promise<string | Buffer> {
    const program = _program ?? body?._program
-    return executeReturnJson(request, program!)
+    const vars = { ...request.query, ...request.body }
+    const filesNamesMap = request.files?.length
+      ? makeFilesNamesMap(request.files as MulterFile[])
+      : null
+    const otherArgs = { filesNamesMap: filesNamesMap }
+
+    return execute(request, program!, vars, otherArgs)
  }
 }

-const executeReturnRaw = async (
+const execute = async (
  req: express.Request,
-  _program: string
+  _program: string,
+  vars: ExecutionVars,
+  otherArgs?: any
 ): Promise<string | Buffer> => {
-  const query = req.query as ExecutionVars
-
  try {
    const { codePath, runTime } = await getRunTimeAndFilePath(_program)

-    const { result, httpHeaders } =
-      (await new ExecutionController().executeFile({
+    const { result, httpHeaders } = await new ExecutionController().executeFile(
+      {
        programPath: codePath,
+        runTime,
        preProgramVariables: getPreProgramVariables(req),
-        vars: query,
-        runTime
-      })) as ExecuteReturnRaw
-
-    // Should over-ride response header for debug
-    // on GET request to see entire log rendering on browser.
-    if (isDebugOn(query)) {
-      httpHeaders['content-type'] = 'text/plain'
-    }
-
-    req.res?.set(httpHeaders)
+        vars,
+        otherArgs,
+        session: req.sasjsSession
+      }
+    )

    if (result instanceof Buffer) {
      ;(req as any).sasHeaders = httpHeaders
@@ -146,48 +105,3 @@ const executeReturnRaw = async (
    }
  }
 }
-
-const executeReturnJson = async (
-  req: express.Request,
-  _program: string
-): Promise<ExecuteReturnJsonResponse> => {
-  const filesNamesMap = req.files?.length
-    ? makeFilesNamesMap(req.files as MulterFile[])
-    : null
-
-  try {
-    const { codePath, runTime } = await getRunTimeAndFilePath(_program)
-
-    const { webout, log, httpHeaders } =
-      (await new ExecutionController().executeFile({
-        programPath: codePath,
-        preProgramVariables: getPreProgramVariables(req),
-        vars: { ...req.query, ...req.body },
-        otherArgs: { filesNamesMap: filesNamesMap },
-        returnJson: true,
-        session: req.sasjsSession,
-        runTime
-      })) as ExecuteReturnJson
-
-    let weboutRes: string | IRecordOfAny = webout
-    if (httpHeaders['content-type']?.toLowerCase() === 'application/json') {
-      try {
-        weboutRes = JSON.parse(webout as string)
-      } catch (_) {}
-    }
-
-    return {
-      status: 'success',
-      _webout: weboutRes,
-      log: parseLogToArray(log),
-      httpHeaders
-    }
-  } catch (err: any) {
-    throw {
-      code: 400,
-      status: 'failure',
-      message: 'Job execution failed.',
-      error: typeof err === 'object' ? err.toString() : err
-    }
-  }
-}
--- a/api/src/controllers/user.ts
+++ b/api/src/controllers/user.ts
@@ -17,7 +17,12 @@ import {
 import { desktopUser } from '../middlewares'

 import User, { UserPayload } from '../model/User'
-import { getUserAutoExec, updateUserAutoExec, ModeType } from '../utils'
+import {
+  getUserAutoExec,
+  updateUserAutoExec,
+  ModeType,
+  AuthProviderType
+} from '../utils'
 import { GroupResponse } from './group'

 export interface UserResponse {
@@ -211,7 +216,11 @@ const createUser = async (data: UserPayload): Promise<UserDetailsResponse> => {

  // Checking if user is already in the database
  const usernameExist = await User.findOne({ username })
-  if (usernameExist) throw new Error('Username already exists.')
+  if (usernameExist)
+    throw {
+      code: 409,
+      message: 'Username already exists.'
+    }

  // Hash passwords
  const hashPassword = User.hashPassword(password)
@@ -255,7 +264,11 @@ const getUser = async (
    'groupId name description -_id'
  )) as unknown as UserDetailsResponse

-  if (!user) throw new Error('User is not found.')
+  if (!user)
+    throw {
+      code: 404,
+      message: 'User is not found.'
+    }

  return {
    id: user.id,
@@ -284,6 +297,24 @@ const updateUser = async (

  const params: any = { displayName, isAdmin, isActive, autoExec }

+  const user = await User.findOne(findBy)
+
+  if (username && username !== user?.username && user?.authProvider) {
+    throw {
+      code: 405,
+      message:
+        'Can not update username of user that is created by an external auth provider.'
+    }
+  }
+
+  if (displayName && displayName !== user?.displayName && user?.authProvider) {
+    throw {
+      code: 405,
+      message:
+        'Can not update display name of user that is created by an external auth provider.'
+    }
+  }
+
  if (username) {
    // Checking if user is already in the database
    const usernameExist = await User.findOne({ username })
@@ -292,7 +323,10 @@ const updateUser = async (
        (findBy.id && usernameExist.id != findBy.id) ||
        (findBy.username && usernameExist.username != findBy.username)
      )
-        throw new Error('Username already exists.')
+        throw {
+          code: 409,
+          message: 'Username already exists.'
+        }
    }
    params.username = username
  }
@@ -305,7 +339,10 @@ const updateUser = async (
  const updatedUser = await User.findOneAndUpdate(findBy, params, { new: true })

  if (!updatedUser)
-    throw new Error(`Unable to find user with ${findBy.id || findBy.username}`)
+    throw {
+      code: 404,
+      message: `Unable to find user with ${findBy.id || findBy.username}`
+    }

  return {
    id: updatedUser.id,
@@ -332,11 +369,19 @@ const deleteUser = async (
  { password }: { password?: string }
 ) => {
  const user = await User.findOne(findBy)
-  if (!user) throw new Error('User is not found.')
+  if (!user)
+    throw {
+      code: 404,
+      message: 'User is not found.'
+    }

  if (!isAdmin) {
    const validPass = user.comparePassword(password!)
-    if (!validPass) throw new Error('Invalid password.')
+    if (!validPass)
+      throw {
+        code: 401,
+        message: 'Invalid password.'
+      }
  }

  await User.deleteOne(findBy)
--- a/api/src/controllers/web.ts
+++ b/api/src/controllers/web.ts
@@ -5,7 +5,12 @@ import { readFile } from '@sasjs/utils'

 import User from '../model/User'
 import Client from '../model/Client'
-import { getWebBuildFolder, generateAuthCode } from '../utils'
+import {
+  getWebBuildFolder,
+  generateAuthCode,
+  AuthProviderType,
+  LDAPClient
+} from '../utils'
 import { InfoJWT } from '../types'
 import { AuthController } from './auth'

@@ -80,8 +85,16 @@ const login = async (
  const user = await User.findOne({ username })
  if (!user) throw new Error('Username is not found.')

-  const validPass = user.comparePassword(password)
-  if (!validPass) throw new Error('Invalid password.')
+  if (
+    process.env.AUTH_PROVIDERS === AuthProviderType.LDAP &&
+    user.authProvider === AuthProviderType.LDAP
+  ) {
+    const ldapClient = await LDAPClient.init()
+    await ldapClient.verifyUser(username, password)
+  } else {
+    const validPass = user.comparePassword(password)
+    if (!validPass) throw new Error('Invalid password.')
+  }

  req.session.loggedIn = true
  req.session.user = {
--- a/api/src/middlewares/authenticateToken.ts
+++ b/api/src/middlewares/authenticateToken.ts
@@ -1,6 +1,6 @@
 import { RequestHandler, Request, Response, NextFunction } from 'express'
 import jwt from 'jsonwebtoken'
-import { csrfProtection } from '../app'
+import { csrfProtection } from './'
 import {
  fetchLatestAutoExec,
  ModeType,
--- a/api/src/middlewares/authorize.ts
+++ b/api/src/middlewares/authorize.ts
@@ -10,9 +10,7 @@ import { getPath, isPublicRoute } from '../utils'
 export const authorize: RequestHandler = async (req, res, next) => {
  const { user } = req

-  if (!user) {
-    return res.sendStatus(401)
-  }
+  if (!user) return res.sendStatus(401)

  // no need to check for permissions when user is admin
  if (user.isAdmin) return next()
--- a/api/src/middlewares/csrfProtection.ts
+++ b/api/src/middlewares/csrfProtection.ts
@@ -0,0 +1,32 @@
+import { RequestHandler } from 'express'
+import csrf from 'csrf'
+
+const csrfTokens = new csrf()
+const secret = csrfTokens.secretSync()
+
+export const generateCSRFToken = () => csrfTokens.create(secret)
+
+export const csrfProtection: RequestHandler = (req, res, next) => {
+  if (req.method === 'GET') return next()
+
+  // Reads the token from the following locations, in order:
+  // req.body.csrf_token - typically generated by the body-parser module.
+  // req.query.csrf_token - a built-in from Express.js to read from the URL query string.
+  // req.headers['csrf-token'] - the CSRF-Token HTTP request header.
+  // req.headers['xsrf-token'] - the XSRF-Token HTTP request header.
+  // req.headers['x-csrf-token'] - the X-CSRF-Token HTTP request header.
+  // req.headers['x-xsrf-token'] - the X-XSRF-Token HTTP request header.
+
+  const token =
+    req.body?.csrf_token ||
+    req.query?.csrf_token ||
+    req.headers['csrf-token'] ||
+    req.headers['xsrf-token'] ||
+    req.headers['x-csrf-token'] ||
+    req.headers['x-xsrf-token']
+
+  if (!csrfTokens.verify(secret, token)) {
+    return res.status(400).send('Invalid CSRF token!')
+  }
+  next()
+}
--- a/api/src/middlewares/index.ts
+++ b/api/src/middlewares/index.ts
@@ -1,5 +1,6 @@
 export * from './authenticateToken'
+export * from './authorize'
+export * from './csrfProtection'
 export * from './desktop'
 export * from './verifyAdmin'
 export * from './verifyAdminIfNeeded'
-export * from './authorize'
--- a/api/src/model/Group.ts
+++ b/api/src/model/Group.ts
@@ -1,6 +1,7 @@
 import mongoose, { Schema, model, Document, Model } from 'mongoose'
 import { GroupDetailsResponse } from '../controllers'
 import User, { IUser } from './User'
+import { AuthProviderType } from '../utils'
 const AutoIncrement = require('mongoose-sequence')(mongoose)

 export const PUBLIC_GROUP_NAME = 'Public'
@@ -27,6 +28,7 @@ interface IGroupDocument extends GroupPayload, Document {
  groupId: number
  isActive: boolean
  users: Schema.Types.ObjectId[]
+  authProvider?: AuthProviderType
 }

 interface IGroup extends IGroupDocument {
@@ -46,6 +48,10 @@ const groupSchema = new Schema<IGroupDocument>({
    type: String,
    default: 'Group description.'
  },
+  authProvider: {
+    type: String,
+    enum: AuthProviderType
+  },
  isActive: {
    type: Boolean,
    default: true
--- a/api/src/model/User.ts
+++ b/api/src/model/User.ts
@@ -1,6 +1,7 @@
 import mongoose, { Schema, model, Document, Model } from 'mongoose'
 const AutoIncrement = require('mongoose-sequence')(mongoose)
 import bcrypt from 'bcryptjs'
+import { AuthProviderType } from '../utils'

 export interface UserPayload {
  /**
@@ -42,6 +43,7 @@ interface IUserDocument extends UserPayload, Document {
  autoExec: string
  groups: Schema.Types.ObjectId[]
  tokens: [{ [key: string]: string }]
+  authProvider?: AuthProviderType
 }

 export interface IUser extends IUserDocument {
@@ -67,6 +69,10 @@ const userSchema = new Schema<IUserDocument>({
    type: String,
    required: true
  },
+  authProvider: {
+    type: String,
+    enum: AuthProviderType
+  },
  isAdmin: {
    type: Boolean,
    default: false
--- a/api/src/routes/api/auth.ts
+++ b/api/src/routes/api/auth.ts
@@ -7,7 +7,7 @@ import {
  authenticateRefreshToken
 } from '../../middlewares'

-import { authorizeValidation, tokenValidation } from '../../utils'
+import { tokenValidation } from '../../utils'
 import { InfoJWT } from '../../types'

 const authRouter = express.Router()
--- a/api/src/routes/api/authConfig.ts
+++ b/api/src/routes/api/authConfig.ts
@@ -0,0 +1,25 @@
+import express from 'express'
+import { AuthConfigController } from '../../controllers'
+const authConfigRouter = express.Router()
+
+authConfigRouter.get('/', async (req, res) => {
+  const controller = new AuthConfigController()
+  try {
+    const response = controller.getDetail()
+    res.send(response)
+  } catch (err: any) {
+    res.status(500).send(err.toString())
+  }
+})
+
+authConfigRouter.post('/synchroniseWithLDAP', async (req, res) => {
+  const controller = new AuthConfigController()
+  try {
+    const response = await controller.synchroniseWithLDAP()
+    res.send(response)
+  } catch (err: any) {
+    res.status(500).send(err.toString())
+  }
+})
+
+export default authConfigRouter
--- a/api/src/routes/api/group.ts
+++ b/api/src/routes/api/group.ts
@@ -18,11 +18,7 @@ groupRouter.post(
      const response = await controller.createGroup(body)
      res.send(response)
    } catch (err: any) {
-      const statusCode = err.code
-
-      delete err.code
-
-      res.status(statusCode).send(err.message)
+      res.status(err.code).send(err.message)
    }
  }
 )
@@ -33,11 +29,7 @@ groupRouter.get('/', authenticateAccessToken, async (req, res) => {
    const response = await controller.getAllGroups()
    res.send(response)
  } catch (err: any) {
-    const statusCode = err.code
-
-    delete err.code
-
-    res.status(statusCode).send(err.message)
+    res.status(err.code).send(err.message)
  }
 })

@@ -49,11 +41,7 @@ groupRouter.get('/:groupId', authenticateAccessToken, async (req, res) => {
    const response = await controller.getGroup(parseInt(groupId))
    res.send(response)
  } catch (err: any) {
-    const statusCode = err.code
-
-    delete err.code
-
-    res.status(statusCode).send(err.message)
+    res.status(err.code).send(err.message)
  }
 })

@@ -71,11 +59,7 @@ groupRouter.get(
      const response = await controller.getGroupByGroupName(name)
      res.send(response)
    } catch (err: any) {
-      const statusCode = err.code
-
-      delete err.code
-
-      res.status(statusCode).send(err.message)
+      res.status(err.code).send(err.message)
    }
  }
 )
@@ -95,11 +79,7 @@ groupRouter.post(
      )
      res.send(response)
    } catch (err: any) {
-      const statusCode = err.code
-
-      delete err.code
-
-      res.status(statusCode).send(err.message)
+      res.status(err.code).send(err.message)
    }
  }
 )
@@ -119,11 +99,7 @@ groupRouter.delete(
      )
      res.send(response)
    } catch (err: any) {
-      const statusCode = err.code
-
-      delete err.code
-
-      res.status(statusCode).send(err.message)
+      res.status(err.code).send(err.message)
    }
  }
 )
@@ -140,11 +116,7 @@ groupRouter.delete(
      await controller.deleteGroup(parseInt(groupId))
      res.status(200).send('Group Deleted!')
    } catch (err: any) {
-      const statusCode = err.code
-
-      delete err.code
-
-      res.status(statusCode).send(err.message)
+      res.status(err.code).send(err.message)
    }
  }
 )
--- a/api/src/routes/api/index.ts
+++ b/api/src/routes/api/index.ts
@@ -18,6 +18,7 @@ import clientRouter from './client'
 import authRouter from './auth'
 import sessionRouter from './session'
 import permissionRouter from './permission'
+import authConfigRouter from './authConfig'

 const router = express.Router()

@@ -43,6 +44,14 @@ router.use(
  permissionRouter
 )

+router.use(
+  '/authConfig',
+  desktopRestrict,
+  authenticateAccessToken,
+  verifyAdmin,
+  authConfigRouter
+)
+
 router.use(
  '/',
  swaggerUi.serve,
--- a/api/src/routes/api/spec/group.spec.ts
+++ b/api/src/routes/api/spec/group.spec.ts
@@ -4,8 +4,13 @@ import { MongoMemoryServer } from 'mongodb-memory-server'
 import request from 'supertest'
 import appPromise from '../../../app'
 import { UserController, GroupController } from '../../../controllers/'
-import { generateAccessToken, saveTokensInDB } from '../../../utils'
-import { PUBLIC_GROUP_NAME } from '../../../model/Group'
+import {
+  generateAccessToken,
+  saveTokensInDB,
+  AuthProviderType
+} from '../../../utils'
+import Group, { PUBLIC_GROUP_NAME } from '../../../model/Group'
+import User from '../../../model/User'

 const clientId = 'someclientID'
 const adminUser = {
@@ -560,6 +565,46 @@ describe('group', () => {
        `Can't add/remove user to '${PUBLIC_GROUP_NAME}' group.`
      )
    })
+
+    it('should respond with Method Not Allowed if group is created by an external authProvider', async () => {
+      const dbGroup = await Group.create({
+        ...group,
+        authProvider: AuthProviderType.LDAP
+      })
+      const dbUser = await userController.createUser({
+        ...user,
+        username: 'ldapGroupUser'
+      })
+
+      const res = await request(app)
+        .post(`/SASjsApi/group/${dbGroup.groupId}/${dbUser.id}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(405)
+
+      expect(res.text).toEqual(
+        `Can't add/remove user to group created by external auth provider.`
+      )
+    })
+
+    it('should respond with Method Not Allowed if user is created by an external authProvider', async () => {
+      const dbGroup = await groupController.createGroup(group)
+      const dbUser = await User.create({
+        ...user,
+        username: 'ldapUser',
+        authProvider: AuthProviderType.LDAP
+      })
+
+      const res = await request(app)
+        .post(`/SASjsApi/group/${dbGroup.groupId}/${dbUser.id}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(405)
+
+      expect(res.text).toEqual(
+        `Can't add/remove user to group created by external auth provider.`
+      )
+    })
  })

  describe('RemoveUser', () => {
@@ -611,6 +656,46 @@ describe('group', () => {
      expect(res.body.groups).toEqual([])
    })

+    it('should respond with Method Not Allowed if group is created by an external authProvider', async () => {
+      const dbGroup = await Group.create({
+        ...group,
+        authProvider: AuthProviderType.LDAP
+      })
+      const dbUser = await userController.createUser({
+        ...user,
+        username: 'removeLdapGroupUser'
+      })
+
+      const res = await request(app)
+        .delete(`/SASjsApi/group/${dbGroup.groupId}/${dbUser.id}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(405)
+
+      expect(res.text).toEqual(
+        `Can't add/remove user to group created by external auth provider.`
+      )
+    })
+
+    it('should respond with Method Not Allowed if user is created by an external authProvider', async () => {
+      const dbGroup = await groupController.createGroup(group)
+      const dbUser = await User.create({
+        ...user,
+        username: 'removeLdapUser',
+        authProvider: AuthProviderType.LDAP
+      })
+
+      const res = await request(app)
+        .delete(`/SASjsApi/group/${dbGroup.groupId}/${dbUser.id}`)
+        .auth(adminAccessToken, { type: 'bearer' })
+        .send()
+        .expect(405)
+
+      expect(res.text).toEqual(
+        `Can't add/remove user to group created by external auth provider.`
+      )
+    })
+
    it('should respond with Unauthorized if access token is not present', async () => {
      const res = await request(app)
        .delete('/SASjsApi/group/123/123')
--- a/api/src/routes/api/spec/stp.spec.ts
+++ b/api/src/routes/api/spec/stp.spec.ts
@@ -21,8 +21,8 @@ import {
 } from '../../../utils'
 import { createFile, generateTimestamp, deleteFolder } from '@sasjs/utils'
 import {
-  SASSessionController,
-  JSSessionController
+  SessionController,
+  SASSessionController
 } from '../../../controllers/internal'
 import * as ProcessProgramModule from '../../../controllers/internal/processProgram'
 import { Session } from '../../../types'
@@ -39,14 +39,17 @@ const user = {

 const sampleSasProgram = '%put hello world!;'
 const sampleJsProgram = `console.log('hello world!/')`
+const samplePyProgram = `print('hello world!/')`

 const filesFolder = getFilesFolder()
+const testFilesFolder = `test-stp-${generateTimestamp()}`
+
+let app: Express
+let accessToken: string

 describe('stp', () => {
-  let app: Express
  let con: Mongoose
  let mongoServer: MongoMemoryServer
-  let accessToken: string
  const userController = new UserController()
  const permissionController = new PermissionController()

@@ -72,8 +75,6 @@ describe('stp', () => {
  })

  describe('execute', () => {
-    const testFilesFolder = `test-stp-${generateTimestamp()}`
-
    describe('get', () => {
      describe('with runtime js', () => {
        const testFilesFolder = `test-stp-${generateTimestamp()}`
@@ -93,41 +94,45 @@ describe('stp', () => {
        })

        it('should execute js program when both js and sas program are present', async () => {
-          const programPath = path.join(testFilesFolder, 'program')
-          const sasProgramPath = path.join(filesFolder, `${programPath}.sas`)
-          const jsProgramPath = path.join(filesFolder, `${programPath}.js`)
-          await createFile(sasProgramPath, sampleSasProgram)
-          await createFile(jsProgramPath, sampleJsProgram)
-
-          await request(app)
-            .get(`/SASjsApi/stp/execute?_program=${programPath}`)
-            .auth(accessToken, { type: 'bearer' })
-            .send()
-            .expect(200)
-
-          expect(ProcessProgramModule.processProgram).toHaveBeenCalledWith(
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            RunTimeType.JS,
-            expect.anything(),
-            undefined
+          await makeRequestAndAssert(
+            [RunTimeType.JS, RunTimeType.SAS],
+            200,
+            RunTimeType.JS
          )
        })

        it('should throw error when js program is not present but sas program exists', async () => {
-          const programPath = path.join(testFilesFolder, 'program')
-          const sasProgramPath = path.join(filesFolder, `${programPath}.sas`)
-          await createFile(sasProgramPath, sampleSasProgram)
+          await makeRequestAndAssert([], 400)
+        })
+      })

-          await request(app)
-            .get(`/SASjsApi/stp/execute?_program=${programPath}`)
-            .auth(accessToken, { type: 'bearer' })
-            .send()
-            .expect(400)
+      describe('with runtime py', () => {
+        const testFilesFolder = `test-stp-${generateTimestamp()}`
+
+        beforeAll(() => {
+          process.runTimes = [RunTimeType.PY]
+        })
+
+        beforeEach(() => {
+          jest.resetModules() // it clears the cache
+          setupMocks()
+        })
+
+        afterEach(async () => {
+          jest.resetAllMocks()
+          await deleteFolder(path.join(filesFolder, testFilesFolder))
+        })
+
+        it('should execute python program when python, js and sas programs are present', async () => {
+          await makeRequestAndAssert(
+            [RunTimeType.PY, RunTimeType.SAS, RunTimeType.JS],
+            200,
+            RunTimeType.PY
+          )
+        })
+
+        it('should throw error when py program is not present but js or sas program exists', async () => {
+          await makeRequestAndAssert([], 400)
        })
      })

@@ -147,41 +152,11 @@ describe('stp', () => {
        })

        it('should execute sas program when both sas and js programs are present', async () => {
-          const programPath = path.join(testFilesFolder, 'program')
-          const sasProgramPath = path.join(filesFolder, `${programPath}.sas`)
-          const jsProgramPath = path.join(filesFolder, `${programPath}.js`)
-          await createFile(sasProgramPath, sampleSasProgram)
-          await createFile(jsProgramPath, sampleJsProgram)
-
-          await request(app)
-            .get(`/SASjsApi/stp/execute?_program=${programPath}`)
-            .auth(accessToken, { type: 'bearer' })
-            .send()
-            .expect(200)
-
-          expect(ProcessProgramModule.processProgram).toHaveBeenCalledWith(
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            RunTimeType.SAS,
-            expect.anything(),
-            undefined
-          )
+          await makeRequestAndAssert([RunTimeType.SAS], 200, RunTimeType.SAS)
        })

        it('should throw error when sas program do not exit but js exists', async () => {
-          const programPath = path.join(testFilesFolder, 'program')
-          const jsProgramPath = path.join(filesFolder, `${programPath}.js`)
-          await createFile(jsProgramPath, sampleJsProgram)
-
-          await request(app)
-            .get(`/SASjsApi/stp/execute?_program=${programPath}`)
-            .auth(accessToken, { type: 'bearer' })
-            .send()
-            .expect(400)
+          await makeRequestAndAssert([], 400)
        })
      })

@@ -201,63 +176,51 @@ describe('stp', () => {
        })

        it('should execute js program when both js and sas program are present', async () => {
-          const programPath = path.join(testFilesFolder, 'program')
-          const sasProgramPath = path.join(filesFolder, `${programPath}.sas`)
-          const jsProgramPath = path.join(filesFolder, `${programPath}.js`)
-          await createFile(sasProgramPath, sampleSasProgram)
-          await createFile(jsProgramPath, sampleJsProgram)
-
-          await request(app)
-            .get(`/SASjsApi/stp/execute?_program=${programPath}`)
-            .auth(accessToken, { type: 'bearer' })
-            .send()
-            .expect(200)
-
-          expect(ProcessProgramModule.processProgram).toHaveBeenCalledWith(
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            RunTimeType.JS,
-            expect.anything(),
-            undefined
+          await makeRequestAndAssert(
+            [RunTimeType.SAS, RunTimeType.JS],
+            200,
+            RunTimeType.JS
          )
        })

        it('should execute sas program when js program is not present but sas program exists', async () => {
-          const programPath = path.join(testFilesFolder, 'program')
-          const sasProgramPath = path.join(filesFolder, `${programPath}.sas`)
-          await createFile(sasProgramPath, sampleSasProgram)
-
-          await request(app)
-            .get(`/SASjsApi/stp/execute?_program=${programPath}`)
-            .auth(accessToken, { type: 'bearer' })
-            .send()
-            .expect(200)
-
-          expect(ProcessProgramModule.processProgram).toHaveBeenCalledWith(
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            RunTimeType.SAS,
-            expect.anything(),
-            undefined
-          )
+          await makeRequestAndAssert([RunTimeType.SAS], 200, RunTimeType.SAS)
        })

        it('should throw error when both sas and js programs do not exist', async () => {
-          const programPath = path.join(testFilesFolder, 'program')
+          await makeRequestAndAssert([], 400)
+        })
+      })

-          await request(app)
-            .get(`/SASjsApi/stp/execute?_program=${programPath}`)
-            .auth(accessToken, { type: 'bearer' })
-            .send()
-            .expect(400)
+      describe('with runtime py and sas', () => {
+        beforeAll(() => {
+          process.runTimes = [RunTimeType.PY, RunTimeType.SAS]
+        })
+
+        beforeEach(() => {
+          jest.resetModules() // it clears the cache
+          setupMocks()
+        })
+
+        afterEach(async () => {
+          jest.resetAllMocks()
+          await deleteFolder(path.join(filesFolder, testFilesFolder))
+        })
+
+        it('should execute python program when both python and sas program are present', async () => {
+          await makeRequestAndAssert(
+            [RunTimeType.PY, RunTimeType.SAS],
+            200,
+            RunTimeType.PY
+          )
+        })
+
+        it('should execute sas program when python program is not present but sas program exists', async () => {
+          await makeRequestAndAssert([RunTimeType.SAS], 200, RunTimeType.SAS)
+        })
+
+        it('should throw error when both sas and js programs do not exist', async () => {
+          await makeRequestAndAssert([], 400)
        })
      })

@@ -277,76 +240,220 @@ describe('stp', () => {
        })

        it('should execute sas program when both sas and js programs  exist', async () => {
-          const programPath = path.join(testFilesFolder, 'program')
-          const sasProgramPath = path.join(filesFolder, `${programPath}.sas`)
-          const jsProgramPath = path.join(filesFolder, `${programPath}.js`)
-          await createFile(sasProgramPath, sampleSasProgram)
-          await createFile(jsProgramPath, sampleJsProgram)
-
-          await request(app)
-            .get(`/SASjsApi/stp/execute?_program=${programPath}`)
-            .auth(accessToken, { type: 'bearer' })
-            .send()
-            .expect(200)
-
-          expect(ProcessProgramModule.processProgram).toHaveBeenCalledWith(
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            RunTimeType.SAS,
-            expect.anything(),
-            undefined
+          await makeRequestAndAssert(
+            [RunTimeType.SAS, RunTimeType.JS],
+            200,
+            RunTimeType.SAS
          )
        })

        it('should execute js program when sas program is not present but js program exists', async () => {
-          const programPath = path.join(testFilesFolder, 'program')
-          const jsProgramPath = path.join(filesFolder, `${programPath}.js`)
-          await createFile(jsProgramPath, sampleJsProgram)
-
-          await request(app)
-            .get(`/SASjsApi/stp/execute?_program=${programPath}`)
-            .auth(accessToken, { type: 'bearer' })
-            .send()
-            .expect(200)
-
-          expect(ProcessProgramModule.processProgram).toHaveBeenCalledWith(
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            expect.anything(),
-            RunTimeType.JS,
-            expect.anything(),
-            undefined
-          )
+          await makeRequestAndAssert([RunTimeType.JS], 200, RunTimeType.JS)
        })

        it('should throw error when both sas and js programs do not exist', async () => {
-          const programPath = path.join(testFilesFolder, 'program')
+          await makeRequestAndAssert([], 400)
+        })
+      })

-          await request(app)
-            .get(`/SASjsApi/stp/execute?_program=${programPath}`)
-            .auth(accessToken, { type: 'bearer' })
-            .send()
-            .expect(400)
+      describe('with runtime sas and py', () => {
+        beforeAll(() => {
+          process.runTimes = [RunTimeType.SAS, RunTimeType.PY]
+        })
+
+        beforeEach(() => {
+          jest.resetModules() // it clears the cache
+          setupMocks()
+        })
+
+        afterEach(async () => {
+          jest.resetAllMocks()
+          await deleteFolder(path.join(filesFolder, testFilesFolder))
+        })
+
+        it('should execute sas program when both sas and python programs exist', async () => {
+          await makeRequestAndAssert(
+            [RunTimeType.SAS, RunTimeType.PY],
+            200,
+            RunTimeType.SAS
+          )
+        })
+
+        it('should execute python program when sas program is not present but python program exists', async () => {
+          await makeRequestAndAssert([RunTimeType.PY], 200, RunTimeType.PY)
+        })
+
+        it('should throw error when both sas and python programs do not exist', async () => {
+          await makeRequestAndAssert([], 400)
+        })
+      })
+
+      describe('with runtime sas, js and py', () => {
+        beforeAll(() => {
+          process.runTimes = [RunTimeType.SAS, RunTimeType.JS, RunTimeType.PY]
+        })
+
+        beforeEach(() => {
+          jest.resetModules() // it clears the cache
+          setupMocks()
+        })
+
+        afterEach(async () => {
+          jest.resetAllMocks()
+          await deleteFolder(path.join(filesFolder, testFilesFolder))
+        })
+
+        it('should execute sas program when it exists, no matter js and python programs exist or not', async () => {
+          await makeRequestAndAssert(
+            [RunTimeType.SAS, RunTimeType.PY, RunTimeType.JS],
+            200,
+            RunTimeType.SAS
+          )
+        })
+
+        it('should execute js program when sas program is absent but js and python programs are present', async () => {
+          await makeRequestAndAssert(
+            [RunTimeType.JS, RunTimeType.PY],
+            200,
+            RunTimeType.JS
+          )
+        })
+
+        it('should execute python program when both sas and js programs are not present', async () => {
+          await makeRequestAndAssert([RunTimeType.PY], 200, RunTimeType.PY)
+        })
+
+        it('should throw error when no program exists', async () => {
+          await makeRequestAndAssert([], 400)
+        })
+      })
+
+      describe('with runtime js, sas and py', () => {
+        beforeAll(() => {
+          process.runTimes = [RunTimeType.JS, RunTimeType.SAS, RunTimeType.PY]
+        })
+
+        beforeEach(() => {
+          jest.resetModules() // it clears the cache
+          setupMocks()
+        })
+
+        afterEach(async () => {
+          jest.resetAllMocks()
+          await deleteFolder(path.join(filesFolder, testFilesFolder))
+        })
+
+        it('should execute js program when it exists, no matter sas and python programs exist or not', async () => {
+          await makeRequestAndAssert(
+            [RunTimeType.JS, RunTimeType.SAS, RunTimeType.PY],
+            200,
+            RunTimeType.JS
+          )
+        })
+
+        it('should execute sas program when js program is absent but sas and python programs are present', async () => {
+          await makeRequestAndAssert(
+            [RunTimeType.SAS, RunTimeType.PY],
+            200,
+            RunTimeType.SAS
+          )
+        })
+
+        it('should execute python program when both sas and js programs are not present', async () => {
+          await makeRequestAndAssert([RunTimeType.PY], 200, RunTimeType.PY)
+        })
+
+        it('should throw error when no program exists', async () => {
+          await makeRequestAndAssert([], 400)
+        })
+      })
+
+      describe('with runtime py, sas and js', () => {
+        beforeAll(() => {
+          process.runTimes = [RunTimeType.PY, RunTimeType.SAS, RunTimeType.JS]
+        })
+
+        beforeEach(() => {
+          jest.resetModules() // it clears the cache
+          setupMocks()
+        })
+
+        afterEach(async () => {
+          jest.resetAllMocks()
+          await deleteFolder(path.join(filesFolder, testFilesFolder))
+        })
+
+        it('should execute python program when it exists, no matter sas and js programs exist or not', async () => {
+          await makeRequestAndAssert(
+            [RunTimeType.PY, RunTimeType.SAS, RunTimeType.JS],
+            200,
+            RunTimeType.PY
+          )
+        })
+
+        it('should execute sas program when python program is absent but sas and js programs are present', async () => {
+          await makeRequestAndAssert(
+            [RunTimeType.SAS, RunTimeType.JS],
+            200,
+            RunTimeType.SAS
+          )
+        })
+
+        it('should execute js program when both sas and python programs are not present', async () => {
+          await makeRequestAndAssert([RunTimeType.JS], 200, RunTimeType.JS)
+        })
+
+        it('should throw error when no program exists', async () => {
+          await makeRequestAndAssert([], 400)
        })
      })
    })
  })
 })

-const generateSaveTokenAndCreateUser = async (
-  someUser: any
-): Promise<string> => {
-  const userController = new UserController()
-  const dbUser = await userController.createUser(someUser)
+const makeRequestAndAssert = async (
+  programTypes: RunTimeType[],
+  expectedStatusCode: number,
+  expectedRuntime?: RunTimeType
+) => {
+  const programPath = path.join(testFilesFolder, 'program')
+  for (const programType of programTypes) {
+    if (programType === RunTimeType.JS)
+      await createFile(
+        path.join(filesFolder, `${programPath}.js`),
+        sampleJsProgram
+      )
+    else if (programType === RunTimeType.PY)
+      await createFile(
+        path.join(filesFolder, `${programPath}.py`),
+        samplePyProgram
+      )
+    else if (programType === RunTimeType.SAS)
+      await createFile(
+        path.join(filesFolder, `${programPath}.sas`),
+        sampleSasProgram
+      )
+  }

-  return generateAndSaveToken(dbUser.id)
+  await request(app)
+    .get(`/SASjsApi/stp/execute?_program=${programPath}`)
+    .auth(accessToken, { type: 'bearer' })
+    .send()
+    .expect(expectedStatusCode)
+
+  if (expectedRuntime)
+    expect(ProcessProgramModule.processProgram).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+      expectedRuntime,
+      expect.anything(),
+      undefined
+    )
 }

 const generateAndSaveToken = async (userId: number) => {
@@ -364,7 +471,7 @@ const setupMocks = async () => {
    .mockImplementation(mockedGetSession)

  jest
-    .spyOn(JSSessionController.prototype, 'getSession')
+    .spyOn(SASSessionController.prototype, 'getSession')
    .mockImplementation(mockedGetSession)

  jest
--- a/api/src/routes/api/spec/user.spec.ts
+++ b/api/src/routes/api/spec/user.spec.ts
@@ -4,7 +4,12 @@ import { MongoMemoryServer } from 'mongodb-memory-server'
 import request from 'supertest'
 import appPromise from '../../../app'
 import { UserController, GroupController } from '../../../controllers/'
-import { generateAccessToken, saveTokensInDB } from '../../../utils'
+import {
+  generateAccessToken,
+  saveTokensInDB,
+  AuthProviderType
+} from '../../../utils'
+import User from '../../../model/User'

 const clientId = 'someclientID'
 const adminUser = {
@@ -110,16 +115,16 @@ describe('user', () => {
      expect(res.body).toEqual({})
    })

-    it('should respond with Forbidden if username is already present', async () => {
+    it('should respond with Conflict if username is already present', async () => {
      await controller.createUser(user)

      const res = await request(app)
        .post('/SASjsApi/user')
        .auth(adminAccessToken, { type: 'bearer' })
        .send(user)
-        .expect(403)
+        .expect(409)

-      expect(res.text).toEqual('Error: Username already exists.')
+      expect(res.text).toEqual('Username already exists.')
      expect(res.body).toEqual({})
    })

@@ -226,6 +231,36 @@ describe('user', () => {
        .expect(400)
    })

+    it('should respond with Method Not Allowed, when updating username of user created by an external auth provider', async () => {
+      const dbUser = await User.create({
+        ...user,
+        authProvider: AuthProviderType.LDAP
+      })
+      const accessToken = await generateAndSaveToken(dbUser!.id)
+      const newUsername = 'newUsername'
+
+      await request(app)
+        .patch(`/SASjsApi/user/${dbUser!.id}`)
+        .auth(accessToken, { type: 'bearer' })
+        .send({ username: newUsername })
+        .expect(405)
+    })
+
+    it('should respond with Method Not Allowed, when updating displayName of user created by an external auth provider', async () => {
+      const dbUser = await User.create({
+        ...user,
+        authProvider: AuthProviderType.LDAP
+      })
+      const accessToken = await generateAndSaveToken(dbUser!.id)
+      const newDisplayName = 'My new display Name'
+
+      await request(app)
+        .patch(`/SASjsApi/user/${dbUser!.id}`)
+        .auth(accessToken, { type: 'bearer' })
+        .send({ displayName: newDisplayName })
+        .expect(405)
+    })
+
    it('should respond with Unauthorized if access token is not present', async () => {
      const res = await request(app)
        .patch('/SASjsApi/user/1234')
@@ -254,7 +289,7 @@ describe('user', () => {
      expect(res.body).toEqual({})
    })

-    it('should respond with Forbidden if username is already present', async () => {
+    it('should respond with Conflict if username is already present', async () => {
      const dbUser1 = await controller.createUser(user)
      const dbUser2 = await controller.createUser({
        ...user,
@@ -265,9 +300,9 @@ describe('user', () => {
        .patch(`/SASjsApi/user/${dbUser1.id}`)
        .auth(adminAccessToken, { type: 'bearer' })
        .send({ username: dbUser2.username })
-        .expect(403)
+        .expect(409)

-      expect(res.text).toEqual('Error: Username already exists.')
+      expect(res.text).toEqual('Username already exists.')
      expect(res.body).toEqual({})
    })

@@ -349,7 +384,7 @@ describe('user', () => {
        expect(res.body).toEqual({})
      })

-      it('should respond with Forbidden if username is already present', async () => {
+      it('should respond with Conflict if username is already present', async () => {
        const dbUser1 = await controller.createUser(user)
        const dbUser2 = await controller.createUser({
          ...user,
@@ -360,9 +395,9 @@ describe('user', () => {
          .patch(`/SASjsApi/user/by/username/${dbUser1.username}`)
          .auth(adminAccessToken, { type: 'bearer' })
          .send({ username: dbUser2.username })
-          .expect(403)
+          .expect(409)

-        expect(res.text).toEqual('Error: Username already exists.')
+        expect(res.text).toEqual('Username already exists.')
        expect(res.body).toEqual({})
      })
    })
@@ -446,7 +481,7 @@ describe('user', () => {
      expect(res.body).toEqual({})
    })

-    it('should respond with Forbidden when user himself requests and password is incorrect', async () => {
+    it('should respond with Unauthorized when user himself requests and password is incorrect', async () => {
      const dbUser = await controller.createUser(user)
      const accessToken = await generateAndSaveToken(dbUser.id)

@@ -454,9 +489,9 @@ describe('user', () => {
        .delete(`/SASjsApi/user/${dbUser.id}`)
        .auth(accessToken, { type: 'bearer' })
        .send({ password: 'incorrectpassword' })
-        .expect(403)
+        .expect(401)

-      expect(res.text).toEqual('Error: Invalid password.')
+      expect(res.text).toEqual('Invalid password.')
      expect(res.body).toEqual({})
    })

@@ -528,7 +563,7 @@ describe('user', () => {
        expect(res.body).toEqual({})
      })

-      it('should respond with Forbidden when user himself requests and password is incorrect', async () => {
+      it('should respond with Unauthorized when user himself requests and password is incorrect', async () => {
        const dbUser = await controller.createUser(user)
        const accessToken = await generateAndSaveToken(dbUser.id)

@@ -536,9 +571,9 @@ describe('user', () => {
          .delete(`/SASjsApi/user/by/username/${dbUser.username}`)
          .auth(accessToken, { type: 'bearer' })
          .send({ password: 'incorrectpassword' })
-          .expect(403)
+          .expect(401)

-        expect(res.text).toEqual('Error: Invalid password.')
+        expect(res.text).toEqual('Invalid password.')
        expect(res.body).toEqual({})
      })
    })
@@ -652,16 +687,16 @@ describe('user', () => {
      expect(res.body).toEqual({})
    })

-    it('should respond with Forbidden if userId is incorrect', async () => {
+    it('should respond with Not Found if userId is incorrect', async () => {
      await controller.createUser(user)

      const res = await request(app)
        .get('/SASjsApi/user/1234')
        .auth(adminAccessToken, { type: 'bearer' })
        .send()
-        .expect(403)
+        .expect(404)

-      expect(res.text).toEqual('Error: User is not found.')
+      expect(res.text).toEqual('User is not found.')
      expect(res.body).toEqual({})
    })

@@ -731,16 +766,16 @@ describe('user', () => {
        expect(res.body).toEqual({})
      })

-      it('should respond with Forbidden if username is incorrect', async () => {
+      it('should respond with Not Found if username is incorrect', async () => {
        await controller.createUser(user)

        const res = await request(app)
          .get('/SASjsApi/user/by/username/randomUsername')
          .auth(adminAccessToken, { type: 'bearer' })
          .send()
-          .expect(403)
+          .expect(404)

-        expect(res.text).toEqual('Error: User is not found.')
+        expect(res.text).toEqual('User is not found.')
        expect(res.body).toEqual({})
      })
    })
--- a/api/src/routes/api/spec/web.spec.ts
+++ b/api/src/routes/api/spec/web.spec.ts
@@ -49,10 +49,9 @@ describe('web', () => {

  describe('SASLogon/login', () => {
    let csrfToken: string
-    let cookies: string

    beforeAll(async () => {
-      ;({ csrfToken, cookies } = await getCSRF(app))
+      ;({ csrfToken } = await getCSRF(app))
    })

    afterEach(async () => {
@@ -66,7 +65,6 @@ describe('web', () => {

      const res = await request(app)
        .post('/SASLogon/login')
-        .set('Cookie', cookies)
        .set('x-xsrf-token', csrfToken)
        .send({
          username: user.username,
@@ -82,15 +80,45 @@ describe('web', () => {
        isAdmin: user.isAdmin
      })
    })
+
+    it('should respond with Bad Request if CSRF Token is not present', async () => {
+      await userController.createUser(user)
+
+      const res = await request(app)
+        .post('/SASLogon/login')
+        .send({
+          username: user.username,
+          password: user.password
+        })
+        .expect(400)
+
+      expect(res.text).toEqual('Invalid CSRF token!')
+      expect(res.body).toEqual({})
+    })
+
+    it('should respond with Bad Request if CSRF Token is invalid', async () => {
+      await userController.createUser(user)
+
+      const res = await request(app)
+        .post('/SASLogon/login')
+        .set('x-xsrf-token', 'INVALID_CSRF_TOKEN')
+        .send({
+          username: user.username,
+          password: user.password
+        })
+        .expect(400)
+
+      expect(res.text).toEqual('Invalid CSRF token!')
+      expect(res.body).toEqual({})
+    })
  })

  describe('SASLogon/authorize', () => {
    let csrfToken: string
-    let cookies: string
    let authCookies: string

    beforeAll(async () => {
-      ;({ csrfToken, cookies } = await getCSRF(app))
+      ;({ csrfToken } = await getCSRF(app))

      await userController.createUser(user)

@@ -99,12 +127,7 @@ describe('web', () => {
        password: user.password
      }

-      ;({ cookies: authCookies } = await performLogin(
-        app,
-        credentials,
-        cookies,
-        csrfToken
-      ))
+      ;({ authCookies } = await performLogin(app, credentials, csrfToken))
    })

    afterAll(async () => {
@@ -116,17 +139,28 @@ describe('web', () => {
    it('should respond with authorization code', async () => {
      const res = await request(app)
        .post('/SASLogon/authorize')
-        .set('Cookie', [authCookies, cookies].join('; '))
+        .set('Cookie', [authCookies].join('; '))
        .set('x-xsrf-token', csrfToken)
        .send({ clientId })

      expect(res.body).toHaveProperty('code')
    })

+    it('should respond with Bad Request if CSRF Token is missing', async () => {
+      const res = await request(app)
+        .post('/SASLogon/authorize')
+        .set('Cookie', [authCookies].join('; '))
+        .send({ clientId })
+        .expect(400)
+
+      expect(res.text).toEqual('Invalid CSRF token!')
+      expect(res.body).toEqual({})
+    })
+
    it('should respond with Bad Request if clientId is missing', async () => {
      const res = await request(app)
        .post('/SASLogon/authorize')
-        .set('Cookie', [authCookies, cookies].join('; '))
+        .set('Cookie', [authCookies].join('; '))
        .set('x-xsrf-token', csrfToken)
        .send({})
        .expect(400)
@@ -138,7 +172,7 @@ describe('web', () => {
    it('should respond with Forbidden if clientId is incorrect', async () => {
      const res = await request(app)
        .post('/SASLogon/authorize')
-        .set('Cookie', [authCookies, cookies].join('; '))
+        .set('Cookie', [authCookies].join('; '))
        .set('x-xsrf-token', csrfToken)
        .send({
          clientId: 'WrongClientID'
@@ -153,27 +187,22 @@ describe('web', () => {

 const getCSRF = async (app: Express) => {
  // make request to get CSRF
-  const { header, text } = await request(app).get('/')
-  const cookies = header['set-cookie'].join()
+  const { text } = await request(app).get('/')

-  const csrfToken = extractCSRF(text)
-  return { csrfToken, cookies }
+  return { csrfToken: extractCSRF(text) }
 }

 const performLogin = async (
  app: Express,
  credentials: { username: string; password: string },
-  cookies: string,
  csrfToken: string
 ) => {
  const { header } = await request(app)
    .post('/SASLogon/login')
-    .set('Cookie', cookies)
    .set('x-xsrf-token', csrfToken)
    .send(credentials)

-  const newCookies: string = header['set-cookie'].join()
-  return { cookies: newCookies }
+  return { authCookies: header['set-cookie'].join() }
 }

 const extractCSRF = (text: string) =>
--- a/api/src/routes/api/stp.ts
+++ b/api/src/routes/api/stp.ts
@@ -13,7 +13,7 @@ stpRouter.get('/execute', async (req, res) => {
  if (error) return res.status(400).send(error.details[0].message)

  try {
-    const response = await controller.executeReturnRaw(req, query._program)
+    const response = await controller.executeGetRequest(req, query._program)

    if (response instanceof Buffer) {
      res.writeHead(200, (req as any).sasHeaders)
@@ -42,7 +42,7 @@ stpRouter.post(
    // if (errQ && errB) return res.status(400).send(errB.details[0].message)

    try {
-      const response = await controller.executeReturnJson(
+      const response = await controller.executePostRequest(
        req,
        req.body,
        req.query?._program as string
--- a/api/src/routes/api/user.ts
+++ b/api/src/routes/api/user.ts
@@ -23,7 +23,7 @@ userRouter.post('/', authenticateAccessToken, verifyAdmin, async (req, res) => {
    const response = await controller.createUser(body)
    res.send(response)
  } catch (err: any) {
-    res.status(403).send(err.toString())
+    res.status(err.code).send(err.message)
  }
 })

@@ -33,7 +33,7 @@ userRouter.get('/', authenticateAccessToken, async (req, res) => {
    const response = await controller.getAllUsers()
    res.send(response)
  } catch (err: any) {
-    res.status(403).send(err.toString())
+    res.status(err.code).send(err.message)
  }
 })

@@ -51,7 +51,7 @@ userRouter.get(
      const response = await controller.getUserByUsername(req, username)
      res.send(response)
    } catch (err: any) {
-      res.status(403).send(err.toString())
+      res.status(err.code).send(err.message)
    }
  }
 )
@@ -64,7 +64,7 @@ userRouter.get('/:userId', authenticateAccessToken, async (req, res) => {
    const response = await controller.getUser(req, parseInt(userId))
    res.send(response)
  } catch (err: any) {
-    res.status(403).send(err.toString())
+    res.status(err.code).send(err.message)
  }
 })

@@ -91,7 +91,7 @@ userRouter.patch(
      const response = await controller.updateUserByUsername(username, body)
      res.send(response)
    } catch (err: any) {
-      res.status(403).send(err.toString())
+      res.status(err.code).send(err.message)
    }
  }
 )
@@ -113,7 +113,7 @@ userRouter.patch(
      const response = await controller.updateUser(parseInt(userId), body)
      res.send(response)
    } catch (err: any) {
-      res.status(403).send(err.toString())
+      res.status(err.code).send(err.message)
    }
  }
 )
@@ -141,7 +141,7 @@ userRouter.delete(
      await controller.deleteUserByUsername(username, data, user!.isAdmin)
      res.status(200).send('Account Deleted!')
    } catch (err: any) {
-      res.status(403).send(err.toString())
+      res.status(err.code).send(err.message)
    }
  }
 )
@@ -163,7 +163,7 @@ userRouter.delete(
      await controller.deleteUser(parseInt(userId), data, user!.isAdmin)
      res.status(200).send('Account Deleted!')
    } catch (err: any) {
-      res.status(403).send(err.toString())
+      res.status(err.code).send(err.message)
    }
  }
 )
--- a/api/src/routes/appStream/index.ts
+++ b/api/src/routes/appStream/index.ts
@@ -1,6 +1,6 @@
 import path from 'path'
 import express, { Request } from 'express'
-import { authenticateAccessToken } from '../../middlewares'
+import { authenticateAccessToken, generateCSRFToken } from '../../middlewares'
 import { folderExists } from '@sasjs/utils'

 import { addEntryToAppStreamConfig, getFilesFolder } from '../../utils'
@@ -13,7 +13,7 @@ const router = express.Router()
 router.get('/', authenticateAccessToken, async (req, res) => {
  const content = appStreamHtml(process.appStreamConfig)

-  res.cookie('XSRF-TOKEN', req.csrfToken())
+  res.cookie('XSRF-TOKEN', generateCSRFToken())

  return res.send(content)
 })
--- a/api/src/routes/setupRoutes.ts
+++ b/api/src/routes/setupRoutes.ts
@@ -4,7 +4,7 @@ import webRouter from './web'
 import apiRouter from './api'
 import appStreamRouter from './appStream'

-import { csrfProtection } from '../app'
+import { csrfProtection } from '../middlewares'

 export const setupRoutes = (app: Express) => {
  app.use('/SASjsApi', apiRouter)
@@ -15,5 +15,5 @@ export const setupRoutes = (app: Express) => {
    appStreamRouter(req, res, next)
  })

-  app.use('/', csrfProtection, webRouter)
+  app.use('/', webRouter)
 }
--- a/api/src/routes/web/index.ts
+++ b/api/src/routes/web/index.ts
@@ -1,8 +1,26 @@
 import express from 'express'
+import sas9WebRouter from './sas9-web'
+import sasViyaWebRouter from './sasviya-web'
 import webRouter from './web'
+import { MOCK_SERVERTYPEType } from '../../utils'
+import { csrfProtection } from '../../middlewares'

 const router = express.Router()

-router.use('/', webRouter)
+const { MOCK_SERVERTYPE } = process.env
+
+switch (MOCK_SERVERTYPE) {
+  case MOCK_SERVERTYPEType.SAS9: {
+    router.use('/', sas9WebRouter)
+    break
+  }
+  case MOCK_SERVERTYPEType.SASVIYA: {
+    router.use('/', sasViyaWebRouter)
+    break
+  }
+  default: {
+    router.use('/', csrfProtection, webRouter)
+  }
+}

 export default router
--- a/api/src/routes/web/sas9-web.ts
+++ b/api/src/routes/web/sas9-web.ts
@@ -0,0 +1,152 @@
+import express from 'express'
+import { generateCSRFToken } from '../../middlewares'
+import { WebController } from '../../controllers'
+import { MockSas9Controller } from '../../controllers/mock-sas9'
+import multer from 'multer'
+import path from 'path'
+import dotenv from 'dotenv'
+import { FileUploadController } from '../../controllers/internal'
+
+dotenv.config()
+
+const sas9WebRouter = express.Router()
+const webController = new WebController()
+// Mock controller must be singleton because it keeps the states
+// for example `isLoggedIn` and potentially more in future mocks
+const controller = new MockSas9Controller()
+const fileUploadController = new FileUploadController()
+
+const mockPath = process.env.STATIC_MOCK_LOCATION || 'mocks'
+
+const upload = multer({
+  dest: path.join(process.cwd(), mockPath, 'sas9', 'files-received')
+})
+
+sas9WebRouter.get('/', async (req, res) => {
+  let response
+  try {
+    response = await webController.home()
+  } catch (_) {
+    response = '<html><head></head><body>Web Build is not present</body></html>'
+  } finally {
+    const codeToInject = `<script>document.cookie = 'XSRF-TOKEN=${generateCSRFToken()}; Max-Age=86400; SameSite=Strict; Path=/;'</script>`
+    const injectedContent = response?.replace(
+      '</head>',
+      `${codeToInject}</head>`
+    )
+
+    return res.send(injectedContent)
+  }
+})
+
+sas9WebRouter.get('/SASStoredProcess', async (req, res) => {
+  const response = await controller.sasStoredProcess(req)
+
+  if (response.redirect) {
+    res.redirect(response.redirect)
+    return
+  }
+
+  try {
+    res.send(response.content)
+  } catch (err: any) {
+    res.status(403).send(err.toString())
+  }
+})
+
+sas9WebRouter.get('/SASStoredProcess/do/', async (req, res) => {
+  const response = await controller.sasStoredProcessDoGet(req)
+
+  if (response.redirect) {
+    res.redirect(response.redirect)
+    return
+  }
+
+  try {
+    res.send(response.content)
+  } catch (err: any) {
+    res.status(403).send(err.toString())
+  }
+})
+
+sas9WebRouter.post(
+  '/SASStoredProcess/do/',
+  fileUploadController.preUploadMiddleware,
+  fileUploadController.getMulterUploadObject().any(),
+  async (req, res) => {
+    const response = await controller.sasStoredProcessDoPost(req)
+
+    if (response.redirect) {
+      res.redirect(response.redirect)
+      return
+    }
+
+    try {
+      res.send(response.content)
+    } catch (err: any) {
+      res.status(403).send(err.toString())
+    }
+  }
+)
+
+sas9WebRouter.get('/SASLogon/login', async (req, res) => {
+  const response = await controller.loginGet()
+
+  if (response.redirect) {
+    res.redirect(response.redirect)
+    return
+  }
+
+  try {
+    res.send(response.content)
+  } catch (err: any) {
+    res.status(403).send(err.toString())
+  }
+})
+
+sas9WebRouter.post('/SASLogon/login', async (req, res) => {
+  const response = await controller.loginPost(req)
+
+  if (response.redirect) {
+    res.redirect(response.redirect)
+    return
+  }
+
+  try {
+    res.send(response.content)
+  } catch (err: any) {
+    res.status(403).send(err.toString())
+  }
+})
+
+sas9WebRouter.get('/SASLogon/logout', async (req, res) => {
+  const response = await controller.logout(req)
+
+  if (response.redirect) {
+    res.redirect(response.redirect)
+    return
+  }
+
+  try {
+    res.send(response.content)
+  } catch (err: any) {
+    res.status(403).send(err.toString())
+  }
+})
+
+sas9WebRouter.get('/SASStoredProcess/Logoff', async (req, res) => {
+  const response = await controller.logoff(req)
+
+  if (response.redirect) {
+    res.redirect(response.redirect)
+    return
+  }
+
+  try {
+    res.send(response.content)
+  } catch (err: any) {
+    res.status(403).send(err.toString())
+  }
+})
+
+export default sas9WebRouter
--- a/api/src/routes/web/sasviya-web.ts
+++ b/api/src/routes/web/sasviya-web.ts
@@ -0,0 +1,33 @@
+import express from 'express'
+import { generateCSRFToken } from '../../middlewares'
+import { WebController } from '../../controllers/web'
+
+const sasViyaWebRouter = express.Router()
+const controller = new WebController()
+
+sasViyaWebRouter.get('/', async (req, res) => {
+  let response
+  try {
+    response = await controller.home()
+  } catch (_) {
+    response = '<html><head></head><body>Web Build is not present</body></html>'
+  } finally {
+    const codeToInject = `<script>document.cookie = 'XSRF-TOKEN=${generateCSRFToken()}; Max-Age=86400; SameSite=Strict; Path=/;'</script>`
+    const injectedContent = response?.replace(
+      '</head>',
+      `${codeToInject}</head>`
+    )
+
+    return res.send(injectedContent)
+  }
+})
+
+sasViyaWebRouter.post('/SASJobExecution/', async (req, res) => {
+  try {
+    res.send({ test: 'test' })
+  } catch (err: any) {
+    res.status(403).send(err.toString())
+  }
+})
+
+export default sasViyaWebRouter
--- a/api/src/routes/web/web.ts
+++ b/api/src/routes/web/web.ts
@@ -1,4 +1,5 @@
 import express from 'express'
+import { generateCSRFToken } from '../../middlewares'
 import { WebController } from '../../controllers/web'
 import { authenticateAccessToken, desktopRestrict } from '../../middlewares'
 import { authorizeValidation, loginWebValidation } from '../../utils'
@@ -13,7 +14,10 @@ webRouter.get('/', async (req, res) => {
  } catch (_) {
    response = '<html><head></head><body>Web Build is not present</body></html>'
  } finally {
-    const codeToInject = `<script>document.cookie = 'XSRF-TOKEN=${req.csrfToken()}; Max-Age=86400; SameSite=Strict; Path=/;'</script>`
+    const { ALLOWED_DOMAIN } = process.env
+    const allowedDomain = ALLOWED_DOMAIN?.trim()
+    const domain = allowedDomain ? ` Domain=${allowedDomain};` : ''
+    const codeToInject = `<script>document.cookie = 'XSRF-TOKEN=${generateCSRFToken()};${domain} Max-Age=86400; SameSite=Strict; Path=/;'</script>`
    const injectedContent = response?.replace(
      '</head>',
      `${codeToInject}</head>`
--- a/api/src/types/system/process.d.ts
+++ b/api/src/types/system/process.d.ts
@@ -2,10 +2,13 @@ declare namespace NodeJS {
  export interface Process {
    sasLoc?: string
    nodeLoc?: string
+    pythonLoc?: string
+    rLoc?: string
    driveLoc: string
+    sasjsRoot: string
    logsLoc: string
-    sasSessionController?: import('../../controllers/internal').SASSessionController
-    jsSessionController?: import('../../controllers/internal').JSSessionController
+    logsUUID: string
+    sessionController?: import('../../controllers/internal').SessionController
    appStreamConfig: import('../').AppStreamConfig
    logger: import('@sasjs/utils/logger').Logger
    runTimes: import('../../utils').RunTimeType[]
--- a/api/src/utils/copySASjsCore.ts
+++ b/api/src/utils/copySASjsCore.ts
@@ -12,7 +12,7 @@ import { getMacrosFolder, sasJSCoreMacros, sasJSCoreMacrosInfo } from '.'
 export const copySASjsCore = async () => {
  if (process.env.NODE_ENV === 'test') return

-  console.log('Copying Macros from container to drive(tmp).')
+  console.log('Copying Macros from container to drive.')

  const macrosDrivePath = getMacrosFolder()

--- a/api/src/utils/file.ts
+++ b/api/src/utils/file.ts
@@ -10,7 +10,7 @@ export const sysInitCompiledPath = path.join(
  'systemInitCompiled.sas'
 )

-export const sasJSCoreMacros = path.join(apiRoot, 'sasjscore')
+export const sasJSCoreMacros = path.join(apiRoot, 'sas', 'sasautos')
 export const sasJSCoreMacrosInfo = path.join(sasJSCoreMacros, '.macrolist')

 export const getWebBuildFolder = () => path.join(codebaseRoot, 'web', 'build')
@@ -20,19 +20,24 @@ export const getSasjsHomeFolder = () => path.join(homedir(), '.sasjs-server')
 export const getDesktopUserAutoExecPath = () =>
  path.join(getSasjsHomeFolder(), 'user-autoexec.sas')

-export const getSasjsRootFolder = () => process.driveLoc
+export const getSasjsRootFolder = () => process.sasjsRoot
+
+export const getSasjsDriveFolder = () => process.driveLoc

 export const getLogFolder = () => process.logsLoc

 export const getAppStreamConfigPath = () =>
-  path.join(getSasjsRootFolder(), 'appStreamConfig.json')
+  path.join(getSasjsDriveFolder(), 'appStreamConfig.json')

 export const getMacrosFolder = () =>
-  path.join(getSasjsRootFolder(), 'sasjscore')
+  path.join(getSasjsDriveFolder(), 'sas', 'sasautos')
+
+export const getPackagesFolder = () =>
+  path.join(getSasjsDriveFolder(), 'sas', 'sas_packages')

 export const getUploadsFolder = () => path.join(getSasjsRootFolder(), 'uploads')

-export const getFilesFolder = () => path.join(getSasjsRootFolder(), 'files')
+export const getFilesFolder = () => path.join(getSasjsDriveFolder(), 'files')

 export const getWeboutFolder = () => path.join(getSasjsRootFolder(), 'webouts')

--- a/api/src/utils/getDesktopFields.ts
+++ b/api/src/utils/getDesktopFields.ts
@@ -4,9 +4,9 @@ import { createFolder, fileExists, folderExists, isWindows } from '@sasjs/utils'
 import { RunTimeType } from './verifyEnvVariables'

 export const getDesktopFields = async () => {
-  const { SAS_PATH, NODE_PATH } = process.env
+  const { SAS_PATH, NODE_PATH, PYTHON_PATH, R_PATH } = process.env

-  let sasLoc, nodeLoc
+  let sasLoc, nodeLoc, pythonLoc, rLoc

  if (process.runTimes.includes(RunTimeType.SAS)) {
    sasLoc = SAS_PATH ?? (await getSASLocation())
@@ -16,7 +16,15 @@ export const getDesktopFields = async () => {
    nodeLoc = NODE_PATH ?? (await getNodeLocation())
  }

-  return { sasLoc, nodeLoc }
+  if (process.runTimes.includes(RunTimeType.PY)) {
+    pythonLoc = PYTHON_PATH ?? (await getPythonLocation())
+  }
+
+  if (process.runTimes.includes(RunTimeType.R)) {
+    rLoc = R_PATH ?? (await getRLocation())
+  }
+
+  return { sasLoc, nodeLoc, pythonLoc, rLoc }
 }

 const getDriveLocation = async (): Promise<string> => {
@@ -91,3 +99,47 @@ const getNodeLocation = async (): Promise<string> => {

  return targetName
 }
+
+const getPythonLocation = async (): Promise<string> => {
+  const validator = async (filePath: string) => {
+    if (!filePath) return 'Path to Python executable is required.'
+
+    if (!(await fileExists(filePath))) {
+      return 'No file found at provided path.'
+    }
+
+    return true
+  }
+
+  const defaultLocation = isWindows() ? 'C:\\Python' : '/usr/bin/python'
+
+  const targetName = await getString(
+    'Please enter full path to a Python executable: ',
+    validator,
+    defaultLocation
+  )
+
+  return targetName
+}
+
+const getRLocation = async (): Promise<string> => {
+  const validator = async (filePath: string) => {
+    if (!filePath) return 'Path to R executable is required.'
+
+    if (!(await fileExists(filePath))) {
+      return 'No file found at provided path.'
+    }
+
+    return true
+  }
+
+  const defaultLocation = isWindows() ? 'C:\\Rscript' : '/usr/bin/Rscript'
+
+  const targetName = await getString(
+    'Please enter full path to a R executable: ',
+    validator,
+    defaultLocation
+  )
+
+  return targetName
+}
--- a/api/src/utils/getPreProgramVariables.ts
+++ b/api/src/utils/getPreProgramVariables.ts
@@ -7,7 +7,6 @@ export const getPreProgramVariables = (req: Request): PreProgramVars => {
  const { user, accessToken } = req
  const csrfToken = req.headers['x-xsrf-token'] || req.cookies['XSRF-TOKEN']
  const sessionId = req.cookies['connect.sid']
-  const { _csrf } = req.cookies

  const httpHeaders: string[] = []

@@ -16,14 +15,15 @@ export const getPreProgramVariables = (req: Request): PreProgramVars => {

  const cookies: string[] = []
  if (sessionId) cookies.push(`connect.sid=${sessionId}`)
-  if (_csrf) cookies.push(`_csrf=${_csrf}`)

  if (cookies.length) httpHeaders.push(`cookie: ${cookies.join('; ')}`)

+  //In desktop mode when mocking mode is enabled, user was undefined.
+  //So this is workaround.
  return {
-    username: user!.username,
-    userId: user!.userId,
-    displayName: user!.displayName,
+    username: user ? user.username : 'demo',
+    userId: user ? user.userId : 0,
+    displayName: user ? user.displayName : 'demo',
    serverUrl: protocol + host,
    httpHeaders
  }
--- a/api/src/utils/getRunTimeAndFilePath.ts
+++ b/api/src/utils/getRunTimeAndFilePath.ts
@@ -4,8 +4,8 @@ import { getFilesFolder } from './file'
 import { RunTimeType } from '.'

 export const getRunTimeAndFilePath = async (programPath: string) => {
-  const ext = path.extname(programPath)
-  // If programPath (_program) is provided with a ".sas" or ".js" extension
+  const ext = path.extname(programPath).toLowerCase()
+  // If programPath (_program) is provided with a ".sas", ".js", ".py" or ".r" extension
  // we should use that extension to determine the appropriate runTime
  if (ext && Object.values(RunTimeType).includes(ext.slice(1) as RunTimeType)) {
    const runTime = ext.slice(1)
--- a/api/src/utils/getTokensFromDB.ts
+++ b/api/src/utils/getTokensFromDB.ts
@@ -0,0 +1,55 @@
+import jwt from 'jsonwebtoken'
+import User from '../model/User'
+
+const isValidToken = async (
+  token: string,
+  key: string,
+  userId: number,
+  clientId: string
+) => {
+  const promise = new Promise<boolean>((resolve, reject) =>
+    jwt.verify(token, key, (err, decoded) => {
+      if (err) return reject(false)
+
+      if (decoded?.userId === userId && decoded?.clientId === clientId) {
+        return resolve(true)
+      }
+
+      return reject(false)
+    })
+  )
+
+  return await promise.then(() => true).catch(() => false)
+}
+
+export const getTokensFromDB = async (userId: number, clientId: string) => {
+  const user = await User.findOne({ id: userId })
+  if (!user) return
+
+  const currentTokenObj = user.tokens.find(
+    (tokenObj: any) => tokenObj.clientId === clientId
+  )
+
+  if (currentTokenObj) {
+    const accessToken = currentTokenObj.accessToken
+    const refreshToken = currentTokenObj.refreshToken
+
+    const isValidAccessToken = await isValidToken(
+      accessToken,
+      process.secrets.ACCESS_TOKEN_SECRET,
+      userId,
+      clientId
+    )
+
+    const isValidRefreshToken = await isValidToken(
+      refreshToken,
+      process.secrets.REFRESH_TOKEN_SECRET,
+      userId,
+      clientId
+    )
+
+    if (isValidAccessToken && isValidRefreshToken) {
+      return { accessToken, refreshToken }
+    }
+  }
+}
--- a/api/src/utils/index.ts
+++ b/api/src/utils/index.ts
@@ -14,9 +14,11 @@ export * from './getDesktopFields'
 export * from './getPreProgramVariables'
 export * from './getRunTimeAndFilePath'
 export * from './getServerUrl'
+export * from './getTokensFromDB'
 export * from './instantiateLogger'
 export * from './isDebugOn'
 export * from './isPublicRoute'
+export * from './ldapClient'
 export * from './zipped'
 export * from './parseLogToArray'
 export * from './removeTokensInDB'
@@ -24,6 +26,7 @@ export * from './saveTokensInDB'
 export * from './seedDB'
 export * from './setProcessVariables'
 export * from './setupFolders'
+export * from './setupUserAutoExec'
 export * from './upload'
 export * from './validation'
 export * from './verifyEnvVariables'
--- a/api/src/utils/ldapClient.ts
+++ b/api/src/utils/ldapClient.ts
@@ -0,0 +1,163 @@
+import { createClient, Client } from 'ldapjs'
+import { ReturnCode } from './verifyEnvVariables'
+
+export interface LDAPUser {
+  uid: string
+  username: string
+  displayName: string
+}
+
+export interface LDAPGroup {
+  name: string
+  members: string[]
+}
+
+export class LDAPClient {
+  private ldapClient: Client
+  private static classInstance: LDAPClient | null
+
+  private constructor() {
+    process.logger.info('creating LDAP client')
+    this.ldapClient = createClient({ url: process.env.LDAP_URL as string })
+
+    this.ldapClient.on('error', (error) => {
+      process.logger.error(error.message)
+    })
+  }
+
+  static async init() {
+    if (!LDAPClient.classInstance) {
+      LDAPClient.classInstance = new LDAPClient()
+
+      process.logger.info('binding LDAP client')
+      await LDAPClient.classInstance.bind().catch((error) => {
+        LDAPClient.classInstance = null
+        throw error
+      })
+    }
+    return LDAPClient.classInstance
+  }
+
+  private async bind() {
+    const promise = new Promise<void>((resolve, reject) => {
+      const { LDAP_BIND_DN, LDAP_BIND_PASSWORD } = process.env
+      this.ldapClient.bind(LDAP_BIND_DN!, LDAP_BIND_PASSWORD!, (error) => {
+        if (error) reject(error)
+
+        resolve()
+      })
+    })
+
+    await promise.catch((error) => {
+      throw new Error(error.message)
+    })
+  }
+
+  async getAllLDAPUsers() {
+    const promise = new Promise<LDAPUser[]>((resolve, reject) => {
+      const { LDAP_USERS_BASE_DN } = process.env
+      const filter = `(objectClass=*)`
+
+      this.ldapClient.search(
+        LDAP_USERS_BASE_DN!,
+        { filter },
+        (error, result) => {
+          if (error) reject(error)
+
+          const users: LDAPUser[] = []
+
+          result.on('searchEntry', (entry) => {
+            users.push({
+              uid: entry.object.uid as string,
+              username: entry.object.username as string,
+              displayName: entry.object.displayname as string
+            })
+          })
+
+          result.on('end', (result) => {
+            resolve(users)
+          })
+        }
+      )
+    })
+
+    return await promise
+      .then((res) => res)
+      .catch((error) => {
+        throw new Error(error.message)
+      })
+  }
+
+  async getAllLDAPGroups() {
+    const promise = new Promise<LDAPGroup[]>((resolve, reject) => {
+      const { LDAP_GROUPS_BASE_DN } = process.env
+
+      this.ldapClient.search(LDAP_GROUPS_BASE_DN!, {}, (error, result) => {
+        if (error) reject(error)
+
+        const groups: LDAPGroup[] = []
+
+        result.on('searchEntry', (entry) => {
+          const members =
+            typeof entry.object.memberuid === 'string'
+              ? [entry.object.memberuid]
+              : entry.object.memberuid
+          groups.push({
+            name: entry.object.cn as string,
+            members
+          })
+        })
+
+        result.on('end', (result) => {
+          resolve(groups)
+        })
+      })
+    })
+
+    return await promise
+      .then((res) => res)
+      .catch((error) => {
+        throw new Error(error.message)
+      })
+  }
+
+  async verifyUser(username: string, password: string) {
+    const promise = new Promise<boolean>((resolve, reject) => {
+      const { LDAP_USERS_BASE_DN } = process.env
+      const filter = `(username=${username})`
+
+      this.ldapClient.search(
+        LDAP_USERS_BASE_DN!,
+        { filter },
+        (error, result) => {
+          if (error) reject(error)
+
+          const items: any = []
+
+          result.on('searchEntry', (entry) => {
+            items.push(entry.object)
+          })
+
+          result.on('end', (result) => {
+            if (result?.status !== 0 || items.length === 0) return reject()
+
+            // pick the first found
+            const user = items[0]
+
+            this.ldapClient.bind(user.dn, password, (error) => {
+              if (error) return reject(error)
+
+              resolve(true)
+            })
+          })
+        }
+      )
+    })
+
+    return await promise
+      .then(() => true)
+      .catch(() => {
+        throw new Error('Invalid password.')
+      })
+  }
+}
--- a/api/src/utils/setProcessVariables.ts
+++ b/api/src/utils/setProcessVariables.ts
@@ -19,7 +19,8 @@ export const setProcessVariables = async () => {
  }

  if (process.env.NODE_ENV === 'test') {
-    process.driveLoc = path.join(process.cwd(), 'sasjs_root')
+    process.sasjsRoot = path.join(process.cwd(), 'sasjs_root')
+    process.driveLoc = path.join(process.cwd(), 'sasjs_root', 'drive')
    return
  }

@@ -28,26 +29,39 @@ export const setProcessVariables = async () => {
  if (MODE === ModeType.Server) {
    process.sasLoc = process.env.SAS_PATH
    process.nodeLoc = process.env.NODE_PATH
+    process.pythonLoc = process.env.PYTHON_PATH
+    process.rLoc = process.env.R_PATH
  } else {
-    const { sasLoc, nodeLoc } = await getDesktopFields()
-
+    const { sasLoc, nodeLoc, pythonLoc, rLoc } = await getDesktopFields()
    process.sasLoc = sasLoc
    process.nodeLoc = nodeLoc
+    process.pythonLoc = pythonLoc
+    process.rLoc = rLoc
  }

  const { SASJS_ROOT } = process.env
  const absPath = getAbsolutePath(SASJS_ROOT ?? 'sasjs_root', process.cwd())
  await createFolder(absPath)
-  process.driveLoc = getRealPath(absPath)
+  process.sasjsRoot = getRealPath(absPath)
+
+  const { DRIVE_LOCATION } = process.env
+  const absDrivePath = getAbsolutePath(
+    DRIVE_LOCATION ?? path.join(process.sasjsRoot, 'drive'),
+    process.cwd()
+  )
+  await createFolder(absDrivePath)
+  process.driveLoc = getRealPath(absDrivePath)

  const { LOG_LOCATION } = process.env
  const absLogsPath = getAbsolutePath(
-    LOG_LOCATION ?? `sasjs_root${path.sep}logs`,
+    LOG_LOCATION ?? path.join(process.sasjsRoot, 'logs'),
    process.cwd()
  )
  await createFolder(absLogsPath)
  process.logsLoc = getRealPath(absLogsPath)

+  process.logsUUID = 'SASJS_LOGS_SEPARATOR_163ee17b6ff24f028928972d80a26784'
+
  console.log('sasLoc: ', process.sasLoc)
  console.log('sasDrive: ', process.driveLoc)
  console.log('sasLogs: ', process.logsLoc)
--- a/api/src/utils/setupFolders.ts
+++ b/api/src/utils/setupFolders.ts
@@ -1,14 +1,7 @@
-import { createFile, createFolder, fileExists } from '@sasjs/utils'
-import { getDesktopUserAutoExecPath, getFilesFolder } from './file'
-import { ModeType } from './verifyEnvVariables'
+import { createFolder } from '@sasjs/utils'
+import { getFilesFolder, getPackagesFolder } from './file'

 export const setupFolders = async () => {
-  const drivePath = getFilesFolder()
-  await createFolder(drivePath)
-
-  if (process.env.MODE === ModeType.Desktop) {
-    if (!(await fileExists(getDesktopUserAutoExecPath()))) {
-      await createFile(getDesktopUserAutoExecPath(), '')
-    }
-  }
+  await createFolder(getFilesFolder())
+  await createFolder(getPackagesFolder())
 }
--- a/api/src/utils/setupUserAutoExec.ts
+++ b/api/src/utils/setupUserAutoExec.ts
@@ -0,0 +1,11 @@
+import { createFile, fileExists } from '@sasjs/utils'
+import { getDesktopUserAutoExecPath } from './file'
+import { ModeType } from './verifyEnvVariables'
+
+export const setupUserAutoExec = async () => {
+  if (process.env.MODE === ModeType.Desktop) {
+    if (!(await fileExists(getDesktopUserAutoExecPath()))) {
+      await createFile(getDesktopUserAutoExecPath(), '')
+    }
+  }
+}
--- a/api/src/utils/upload.ts
+++ b/api/src/utils/upload.ts
@@ -126,9 +126,61 @@ export const generateFileUploadJSCode = async (
    }
  })

-  if (fileCount) {
-    uploadCode = `\nconst _WEBIN_FILE_COUNT = ${fileCount}` + uploadCode
-  }
+  uploadCode += `\nconst _WEBIN_FILE_COUNT = ${fileCount}`
+
+  return uploadCode
+}
+
+/**
+ * Generates the python code that references uploaded files in the concurrent request
+ * @param filesNamesMap object that maps hashed file names and original file names
+ * @param sessionFolder name of the folder that is created for the purpose of files in concurrent request
+ * @returns generated python code
+ */
+export const generateFileUploadPythonCode = async (
+  filesNamesMap: FilenamesMap,
+  sessionFolder: string
+) => {
+  let uploadCode = ''
+  let fileCount = 0
+
+  const sessionFolderList: string[] = await listFilesInFolder(sessionFolder)
+  sessionFolderList.forEach(async (fileName) => {
+    if (fileName.includes('req_file')) {
+      fileCount++
+      uploadCode += `\n_WEBIN_FILENAME${fileCount} = '${filesNamesMap[fileName].originalName}'`
+      uploadCode += `\n_WEBIN_NAME${fileCount} = '${filesNamesMap[fileName].fieldName}'`
+    }
+  })
+
+  uploadCode += `\n_WEBIN_FILE_COUNT = ${fileCount}`
+
+  return uploadCode
+}
+
+/**
+ * Generates the R code that references uploaded files in the concurrent request
+ * @param filesNamesMap object that maps hashed file names and original file names
+ * @param sessionFolder name of the folder that is created for the purpose of files in concurrent request
+ * @returns generated python code
+ */
+export const generateFileUploadRCode = async (
+  filesNamesMap: FilenamesMap,
+  sessionFolder: string
+) => {
+  let uploadCode = ''
+  let fileCount = 0
+
+  const sessionFolderList: string[] = await listFilesInFolder(sessionFolder)
+  sessionFolderList.forEach(async (fileName) => {
+    if (fileName.includes('req_file')) {
+      fileCount++
+      uploadCode += `\n._WEBIN_FILENAME${fileCount} <- '${filesNamesMap[fileName].originalName}'`
+      uploadCode += `\n._WEBIN_NAME${fileCount} <- '${filesNamesMap[fileName].fieldName}'`
+    }
+  })
+
+  uploadCode += `\n._WEBIN_FILE_COUNT <- ${fileCount}`

  return uploadCode
 }
--- a/api/src/utils/verifyEnvVariables.ts
+++ b/api/src/utils/verifyEnvVariables.ts
@@ -1,8 +1,17 @@
+export enum MOCK_SERVERTYPEType {
+  SAS9 = 'sas9',
+  SASVIYA = 'sasviya'
+}
+
 export enum ModeType {
  Server = 'server',
  Desktop = 'desktop'
 }

+export enum AuthProviderType {
+  LDAP = 'ldap'
+}
+
 export enum ProtocolType {
  HTTP = 'http',
  HTTPS = 'https'
@@ -28,7 +37,9 @@ export enum LOG_FORMAT_MORGANType {

 export enum RunTimeType {
  SAS = 'sas',
-  JS = 'js'
+  JS = 'js',
+  PY = 'py',
+  R = 'r'
 }

 export enum ReturnCode {
@@ -39,6 +50,8 @@ export enum ReturnCode {
 export const verifyEnvVariables = (): ReturnCode => {
  const errors: string[] = []

+  errors.push(...verifyMOCK_SERVERTYPE())
+
  errors.push(...verifyMODE())

  errors.push(...verifyPROTOCOL())
@@ -55,6 +68,8 @@ export const verifyEnvVariables = (): ReturnCode => {

  errors.push(...verifyExecutablePaths())

+  errors.push(...verifyLDAPVariables())
+
  if (errors.length) {
    process.logger?.error(
      `Invalid environment variable(s) provided: \n${errors.join('\n')}`
@@ -65,6 +80,23 @@ export const verifyEnvVariables = (): ReturnCode => {
  return ReturnCode.Success
 }

+const verifyMOCK_SERVERTYPE = (): string[] => {
+  const errors: string[] = []
+  const { MOCK_SERVERTYPE } = process.env
+
+  if (MOCK_SERVERTYPE) {
+    const modeTypes = Object.values(MOCK_SERVERTYPEType)
+    if (!modeTypes.includes(MOCK_SERVERTYPE as MOCK_SERVERTYPEType))
+      errors.push(
+        `- MOCK_SERVERTYPE '${MOCK_SERVERTYPE}'\n - valid options ${modeTypes}`
+      )
+  } else {
+    process.env.MOCK_SERVERTYPE = undefined
+  }
+
+  return errors
+}
+
 const verifyMODE = (): string[] => {
  const errors: string[] = []
  const { MODE } = process.env
@@ -78,13 +110,22 @@ const verifyMODE = (): string[] => {
  }

  if (process.env.MODE === ModeType.Server) {
-    const { DB_CONNECT } = process.env
+    const { DB_CONNECT, AUTH_PROVIDERS } = process.env

-    if (process.env.NODE_ENV !== 'test')
+    if (process.env.NODE_ENV !== 'test') {
      if (!DB_CONNECT)
        errors.push(
          `- DB_CONNECT is required for PROTOCOL '${ModeType.Server}'`
        )
+
+      if (AUTH_PROVIDERS) {
+        const authProvidersType = Object.values(AuthProviderType)
+        if (!authProvidersType.includes(AUTH_PROVIDERS as AuthProviderType))
+          errors.push(
+            `- AUTH_PROVIDERS '${AUTH_PROVIDERS}'\n - valid options ${authProvidersType}`
+          )
+      }
+    }
  }

  return errors
@@ -226,9 +267,10 @@ const verifyRUN_TIMES = (): string[] => {
  return errors
 }

-const verifyExecutablePaths = () => {
+const verifyExecutablePaths = (): string[] => {
  const errors: string[] = []
-  const { RUN_TIMES, SAS_PATH, NODE_PATH, MODE } = process.env
+  const { RUN_TIMES, SAS_PATH, NODE_PATH, PYTHON_PATH, R_PATH, MODE } =
+    process.env

  if (MODE === ModeType.Server) {
    const runTimes = RUN_TIMES?.split(',')
@@ -240,6 +282,61 @@ const verifyExecutablePaths = () => {
    if (runTimes?.includes(RunTimeType.JS) && !NODE_PATH) {
      errors.push(`- NODE_PATH is required for ${RunTimeType.JS} run time`)
    }
+
+    if (runTimes?.includes(RunTimeType.PY) && !PYTHON_PATH) {
+      errors.push(`- PYTHON_PATH is required for ${RunTimeType.PY} run time`)
+    }
+
+    if (runTimes?.includes(RunTimeType.R) && !R_PATH) {
+      errors.push(`- R_PATH is required for ${RunTimeType.R} run time`)
+    }
+  }
+
+  return errors
+}
+
+const verifyLDAPVariables = () => {
+  const errors: string[] = []
+  const {
+    LDAP_URL,
+    LDAP_BIND_DN,
+    LDAP_BIND_PASSWORD,
+    LDAP_USERS_BASE_DN,
+    LDAP_GROUPS_BASE_DN,
+    MODE,
+    AUTH_PROVIDERS
+  } = process.env
+
+  if (MODE === ModeType.Server && AUTH_PROVIDERS === AuthProviderType.LDAP) {
+    if (!LDAP_URL) {
+      errors.push(
+        `- LDAP_URL is required for AUTH_PROVIDER '${AuthProviderType.LDAP}'`
+      )
+    }
+
+    if (!LDAP_BIND_DN) {
+      errors.push(
+        `- LDAP_BIND_DN is required for AUTH_PROVIDER '${AuthProviderType.LDAP}'`
+      )
+    }
+
+    if (!LDAP_BIND_PASSWORD) {
+      errors.push(
+        `- LDAP_BIND_PASSWORD is required for AUTH_PROVIDER '${AuthProviderType.LDAP}'`
+      )
+    }
+
+    if (!LDAP_USERS_BASE_DN) {
+      errors.push(
+        `- LDAP_USERS_BASE_DN is required for AUTH_PROVIDER '${AuthProviderType.LDAP}'`
+      )
+    }
+
+    if (!LDAP_GROUPS_BASE_DN) {
+      errors.push(
+        `- LDAP_GROUPS_BASE_DN is required for AUTH_PROVIDER '${AuthProviderType.LDAP}'`
+      )
+    }
  }

  return errors
--- a/api/tsoa.json
+++ b/api/tsoa.json
@@ -15,12 +15,16 @@
        "name": "Auth",
        "description": "Operations about auth"
      },
+      {
+        "name": "Auth_Config",
+        "description": "Operations about external auth providers"
+      },
      {
        "name": "Client",
        "description": "Operations about clients"
      },
      {
-        "name": "CODE",
+        "name": "Code",
        "description": "Execution of code (various runtimes are supported)"
      },
      {
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -2284,6 +2284,58 @@
        "node": ">=8"
      }
    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
    "node_modules/@mui/core": {
      "version": "5.0.0-alpha.54",
      "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.54.tgz",
@@ -3937,11 +3989,9 @@
      }
    },
    "node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "peer": true,
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -6522,18 +6572,6 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
-    "node_modules/espree/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
    "node_modules/espree/node_modules/eslint-visitor-keys": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
@@ -7197,20 +7235,6 @@
        "node": ">=12"
      }
    },
-    "node_modules/html-minifier-terser/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
    "node_modules/html-minifier-terser/node_modules/commander": {
      "version": "8.3.0",
      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -7220,46 +7244,6 @@
        "node": ">= 12"
      }
    },
-    "node_modules/html-minifier-terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/html-minifier-terser/node_modules/terser": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
-      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
-      "dev": true,
-      "dependencies": {
-        "commander": "^2.20.0",
-        "source-map": "~0.7.2",
-        "source-map-support": "~0.5.20"
-      },
-      "bin": {
-        "terser": "bin/terser"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "acorn": "^8.5.0"
-      },
-      "peerDependenciesMeta": {
-        "acorn": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/html-minifier-terser/node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
    "node_modules/html-webpack-plugin": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -10287,6 +10271,28 @@
        "node": ">=6"
      }
    },
+    "node_modules/terser": {
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
    "node_modules/text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -11124,17 +11130,6 @@
        "node": ">=10.0.0"
      }
    },
-    "node_modules/webpack/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
    "node_modules/webpack/node_modules/acorn-import-assertions": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
@@ -11143,11 +11138,6 @@
        "acorn": "^8"
      }
    },
-    "node_modules/webpack/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-    },
    "node_modules/webpack/node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -11216,30 +11206,6 @@
        "url": "https://github.com/chalk/supports-color?sponsor=1"
      }
    },
-    "node_modules/webpack/node_modules/terser": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
-      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
-      "dependencies": {
-        "commander": "^2.20.0",
-        "source-map": "~0.7.2",
-        "source-map-support": "~0.5.20"
-      },
-      "bin": {
-        "terser": "bin/terser"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "acorn": "^8.5.0"
-      },
-      "peerDependenciesMeta": {
-        "acorn": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/webpack/node_modules/terser-webpack-plugin": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.1.tgz",
@@ -11273,14 +11239,6 @@
        }
      }
    },
-    "node_modules/webpack/node_modules/terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
    "node_modules/webpack/node_modules/webpack-sources": {
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -12914,6 +12872,49 @@
        }
      }
    },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w=="
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
    "@mui/core": {
      "version": "5.0.0-alpha.54",
      "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.54.tgz",
@@ -14110,11 +14111,9 @@
      }
    },
    "acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "peer": true
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w=="
    },
    "acorn-jsx": {
      "version": "5.3.2",
@@ -16061,12 +16060,6 @@
        "eslint-visitor-keys": "^3.3.0"
      },
      "dependencies": {
-        "acorn": {
-          "version": "8.7.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-          "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-          "dev": true
-        },
        "eslint-visitor-keys": {
          "version": "3.3.0",
          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
@@ -16585,44 +16578,11 @@
        "terser": "^5.10.0"
      },
      "dependencies": {
-        "acorn": {
-          "version": "8.7.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-          "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-          "dev": true,
-          "optional": true,
-          "peer": true
-        },
        "commander": {
          "version": "8.3.0",
          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
          "dev": true
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
-        },
-        "terser": {
-          "version": "5.10.0",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
-          "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
-          "dev": true,
-          "requires": {
-            "commander": "^2.20.0",
-            "source-map": "~0.7.2",
-            "source-map-support": "~0.5.20"
-          },
-          "dependencies": {
-            "commander": {
-              "version": "2.20.3",
-              "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-              "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-              "dev": true
-            }
-          }
        }
      }
    },
@@ -18903,6 +18863,24 @@
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
    },
+    "terser": {
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+      "requires": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        }
+      }
+    },
    "text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -19259,22 +19237,12 @@
        "webpack-sources": "^3.2.2"
      },
      "dependencies": {
-        "acorn": {
-          "version": "8.7.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-          "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ=="
-        },
        "acorn-import-assertions": {
          "version": "1.8.0",
          "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
          "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
          "requires": {}
        },
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -19321,23 +19289,6 @@
            "has-flag": "^4.0.0"
          }
        },
-        "terser": {
-          "version": "5.10.0",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
-          "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
-          "requires": {
-            "commander": "^2.20.0",
-            "source-map": "~0.7.2",
-            "source-map-support": "~0.5.20"
-          },
-          "dependencies": {
-            "source-map": {
-              "version": "0.7.3",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-              "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
-            }
-          }
-        },
        "terser-webpack-plugin": {
          "version": "5.3.1",
          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.1.tgz",
--- a/web/src/components/deleteConfirmationModal.tsx
+++ b/web/src/components/deleteConfirmationModal.tsx
@@ -31,14 +31,24 @@ const DeleteConfirmationModal = ({
  message,
  _delete
 }: DeleteConfirmationModalProps) => {
+  const handleDeleteClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    _delete()
+  }
+
+  const handleClose = (event: any) => {
+    event.stopPropagation()
+    setOpen(false)
+  }
+
  return (
-    <BootstrapDialog onClose={() => setOpen(false)} open={open}>
+    <BootstrapDialog onClose={handleClose} open={open}>
      <DialogContent dividers>
        <Typography gutterBottom>{message}</Typography>
      </DialogContent>
      <DialogActions>
-        <Button onClick={() => setOpen(false)}>Cancel</Button>
-        <Button color="error" onClick={() => _delete()}>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button color="error" onClick={handleDeleteClick}>
          Delete
        </Button>
      </DialogActions>
--- a/web/src/components/filePathInputModal.tsx
+++ b/web/src/components/filePathInputModal.tsx
@@ -23,7 +23,7 @@ const FilePathInputModal = ({
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value

-    const specialChars = /[`!@#$%^&*()_+\-=[\]{};':"\\|,<>?~]/
+    const specialChars = /[`!@#$%^&*()+\-=[\]{};':"\\|,<>?~]/
    const fileExtension = /\.(exe|sh|htaccess)$/i

    if (specialChars.test(value)) {
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -2,16 +2,18 @@ import React, { useState, useEffect, useContext } from 'react'
 import { Link, useNavigate, useLocation } from 'react-router-dom'

 import {
+  Box,
  AppBar,
  Toolbar,
  Tabs,
  Tab,
  Button,
  Menu,
-  MenuItem
+  MenuItem,
+  IconButton,
+  Typography
 } from '@mui/material'
-import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-import SettingsIcon from '@mui/icons-material/Settings'
+import { OpenInNew, Settings, Menu as MenuIcon } from '@mui/icons-material'

 import Username from './username'
 import { AppContext } from '../context/appContext'
@@ -30,31 +32,38 @@ const Header = (props: any) => {
  const [tabValue, setTabValue] = useState(
    validTabs.includes(pathname) ? pathname : '/'
  )
-  const [anchorEl, setAnchorEl] = useState<
-    (EventTarget & HTMLButtonElement) | null
-  >(null)
+
+  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null)
+  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
+    null
+  )
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget)
+  }
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget)
+  }
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null)
+  }
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null)
+  }

  useEffect(() => {
    setTabValue(validTabs.includes(pathname) ? pathname : '/')
  }, [pathname])

-  const handleMenu = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
  const handleTabChange = (event: React.SyntheticEvent, value: string) => {
    setTabValue(value)
  }

  const handleLogout = () => {
    if (appContext.logout) {
-      handleClose()
+      handleCloseUserMenu()
      appContext.logout()
    }
  }
@@ -64,43 +73,129 @@ const Header = (props: any) => {
      sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
    >
      <Toolbar variant="dense">
-        <img
-          src="logo.png"
-          alt="logo"
-          style={{
-            width: '35px',
-            cursor: 'pointer',
-            marginRight: '25px'
-          }}
-          onClick={() => {
-            setTabValue('/')
-            navigate('/')
-          }}
-        />
-        <Tabs
-          indicatorColor="secondary"
-          value={tabValue}
-          onChange={handleTabChange}
-        >
-          <Tab label="Home" value="/" to="/" component={Link} />
-          <Tab
-            label="Studio"
-            value="/SASjsStudio"
-            to="/SASjsStudio"
-            component={Link}
+        <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+          <img
+            src="logo.png"
+            alt="logo"
+            style={{
+              width: '35px',
+              height: '35px',
+              marginTop: '9px',
+              cursor: 'pointer',
+              marginRight: '25px'
+            }}
+            onClick={() => {
+              setTabValue('/')
+              navigate('/')
+            }}
          />
-        </Tabs>
-        <Button
-          href={`${baseUrl}/AppStream`}
-          target="_blank"
-          rel="noreferrer"
-          variant="contained"
-          color="primary"
-          size="large"
-          endIcon={<OpenInNewIcon />}
-        >
-          Apps
-        </Button>
+          <Tabs
+            indicatorColor="secondary"
+            value={tabValue}
+            onChange={handleTabChange}
+          >
+            <Tab label="Home" value="/" to="/" component={Link} />
+            <Tab
+              label="Studio"
+              value="/SASjsStudio"
+              to="/SASjsStudio"
+              component={Link}
+            />
+          </Tabs>
+          <Button
+            href={`${baseUrl}/AppStream`}
+            target="_blank"
+            rel="noreferrer"
+            variant="contained"
+            color="primary"
+            size="large"
+            endIcon={<OpenInNew />}
+          >
+            Apps
+          </Button>
+        </Box>
+
+        <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+          <IconButton size="large" onClick={handleOpenNavMenu} color="inherit">
+            <MenuIcon />
+          </IconButton>
+
+          <Menu
+            id="menu-appbar"
+            anchorEl={anchorElNav}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left'
+            }}
+            keepMounted
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'left'
+            }}
+            open={!!anchorElNav}
+            onClose={handleCloseNavMenu}
+            sx={{
+              display: { xs: 'block', md: 'none' }
+            }}
+          >
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                component={Link}
+                to="/"
+                onClick={handleCloseNavMenu}
+                variant="contained"
+                color="primary"
+              >
+                Home
+              </Button>
+            </MenuItem>
+
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                component={Link}
+                to="/SASjsStudio"
+                onClick={handleCloseNavMenu}
+                variant="contained"
+                color="primary"
+              >
+                Studio
+              </Button>
+            </MenuItem>
+
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                href={`${baseUrl}/AppStream`}
+                target="_blank"
+                rel="noreferrer"
+                onClick={handleCloseNavMenu}
+                variant="contained"
+                color="primary"
+                endIcon={<OpenInNew />}
+              >
+                Apps
+              </Button>
+            </MenuItem>
+          </Menu>
+        </Box>
+
+        <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
+          <img
+            src="logo.png"
+            alt="logo"
+            style={{
+              width: '35px',
+              height: '35px',
+              marginTop: '2px',
+              cursor: 'pointer',
+              marginRight: '25px'
+            }}
+            onClick={() => {
+              setTabValue('/')
+              navigate('/')
+            }}
+          />
+        </Box>
+
        <div
          style={{
            display: 'flex',
@@ -110,11 +205,11 @@ const Header = (props: any) => {
        >
          <Username
            username={appContext.displayName || appContext.username}
-            onClickHandler={handleMenu}
+            onClickHandler={handleOpenUserMenu}
          />
          <Menu
            id="menu-appbar"
-            anchorEl={anchorEl}
+            anchorEl={anchorElUser}
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'center'
@@ -124,17 +219,30 @@ const Header = (props: any) => {
              vertical: 'top',
              horizontal: 'center'
            }}
-            open={!!anchorEl}
-            onClose={handleClose}
+            open={!!anchorElUser}
+            onClose={handleCloseUserMenu}
          >
+            {appContext.loggedIn && (
+              <MenuItem
+                sx={{ justifyContent: 'center', display: { md: 'none' } }}
+              >
+                <Typography
+                  variant="h5"
+                  sx={{ border: '1px solid black', padding: '5px' }}
+                >
+                  {appContext.displayName || appContext.username}
+                </Typography>
+              </MenuItem>
+            )}
+
            <MenuItem sx={{ justifyContent: 'center' }}>
              <Button
                component={Link}
                to="/SASjsSettings"
-                onClick={handleClose}
+                onClick={handleCloseUserMenu}
                variant="contained"
                color="primary"
-                startIcon={<SettingsIcon />}
+                startIcon={<Settings />}
              >
                Settings
              </Button>
@@ -147,7 +255,7 @@ const Header = (props: any) => {
                variant="contained"
                size="large"
                color="primary"
-                endIcon={<OpenInNewIcon />}
+                endIcon={<OpenInNew />}
              >
                Docs
              </Button>
@@ -160,16 +268,21 @@ const Header = (props: any) => {
                variant="contained"
                color="primary"
                size="large"
-                endIcon={<OpenInNewIcon />}
+                endIcon={<OpenInNew />}
              >
                API
              </Button>
            </MenuItem>
-            <MenuItem onClick={handleLogout} sx={{ justifyContent: 'center' }}>
-              <Button variant="contained" color="primary">
-                Logout
-              </Button>
-            </MenuItem>
+            {appContext.loggedIn && (
+              <MenuItem
+                onClick={handleLogout}
+                sx={{ justifyContent: 'center' }}
+              >
+                <Button variant="contained" color="primary">
+                  Logout
+                </Button>
+              </MenuItem>
+            )}
          </Menu>
        </div>
      </Toolbar>
--- a/web/src/components/nameInputModal.tsx
+++ b/web/src/components/nameInputModal.tsx
@@ -44,7 +44,7 @@ const NameInputModal = ({
    const value = event.target.value

    const folderNameRegex = /[`!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/
-    const fileNameRegex = /[`!@#$%^&*()_+\-=[\]{};':"\\|,<>/?~]/
+    const fileNameRegex = /[`!@#$%^&*()+\-=[\]{};':"\\|,<>/?~]/
    const fileNameExtensionRegex = /.(exe|sh|htaccess)$/i

    const specialChars = isFolder ? folderNameRegex : fileNameRegex
@@ -69,8 +69,18 @@ const NameInputModal = ({
    action(name)
  }

+  const handleActionClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    action(name)
+  }
+
+  const handleClose = (event: any) => {
+    event.stopPropagation()
+    setOpen(false)
+  }
+
  return (
-    <BootstrapDialog fullWidth onClose={() => setOpen(false)} open={open}>
+    <BootstrapDialog fullWidth onClose={handleClose} open={open}>
      <BootstrapDialogTitle id="abort-modal" handleOpen={setOpen}>
        {title}
      </BootstrapDialogTitle>
@@ -91,12 +101,12 @@ const NameInputModal = ({
        </form>
      </DialogContent>
      <DialogActions>
-        <Button variant="contained" onClick={() => setOpen(false)}>
+        <Button variant="contained" onClick={handleClose}>
          Cancel
        </Button>
        <Button
          variant="contained"
-          onClick={() => action(name)}
+          onClick={handleActionClick}
          disabled={hasError || !name}
        >
          {actionLabel}
--- a/web/src/components/tree.tsx
+++ b/web/src/components/tree.tsx
@@ -1,67 +1,79 @@
-import React, { useEffect, useState } from 'react'
-import { Menu, MenuItem } from '@mui/material'
+import React, { useState } from 'react'
+import { Menu, MenuItem, Typography } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import MuiTreeView from '@mui/lab/TreeView'
+import MuiTreeItem from '@mui/lab/TreeItem'

 import DeleteConfirmationModal from './deleteConfirmationModal'
 import NameInputModal from './nameInputModal'

 import { TreeNode } from '../utils/types'

-type Props = {
+interface Props {
  node: TreeNode
-  selectedFilePath: string
  handleSelect: (filePath: string) => void
  deleteNode: (path: string, isFolder: boolean) => void
  addFile: (path: string) => void
  addFolder: (path: string) => void
  rename: (oldPath: string, newPath: string) => void
+}
+
+interface TreeViewProps extends Props {
  defaultExpanded?: string[]
 }

 const TreeView = ({
  node,
-  selectedFilePath,
  handleSelect,
  deleteNode,
  addFile,
  addFolder,
  rename,
  defaultExpanded
-}: Props) => {
-  return (
-    <ul
-      style={{
-        listStyle: 'none',
-        padding: '0.25rem 0.85rem',
-        width: 'max-content'
-      }}
+}: TreeViewProps) => {
+  const renderTree = (nodes: TreeNode) => (
+    <MuiTreeItem
+      key={nodes.relativePath}
+      nodeId={nodes.relativePath}
+      label={
+        <TreeItemWithContextMenu
+          node={nodes}
+          handleSelect={handleSelect}
+          deleteNode={deleteNode}
+          addFile={addFile}
+          addFolder={addFolder}
+          rename={rename}
+        />
+      }
    >
-      <TreeViewNode
-        node={node}
-        selectedFilePath={selectedFilePath}
-        handleSelect={handleSelect}
-        deleteNode={deleteNode}
-        addFile={addFile}
-        addFolder={addFolder}
-        rename={rename}
-        defaultExpanded={defaultExpanded}
-      />
-    </ul>
+      {Array.isArray(nodes.children)
+        ? nodes.children.map((node) => renderTree(node))
+        : null}
+    </MuiTreeItem>
+  )
+
+  return (
+    <MuiTreeView
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+      defaultExpanded={defaultExpanded}
+      sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+    >
+      {renderTree(node)}
+    </MuiTreeView>
  )
 }

 export default TreeView

-const TreeViewNode = ({
+const TreeItemWithContextMenu = ({
  node,
-  selectedFilePath,
  handleSelect,
  deleteNode,
  addFile,
  addFolder,
-  rename,
-  defaultExpanded
+  rename
 }: Props) => {
  const [deleteConfirmationModalOpen, setDeleteConfirmationModalOpen] =
    useState(false)
@@ -72,12 +84,25 @@ const TreeViewNode = ({
  const [nameInputModalTitle, setNameInputModalTitle] = useState('')
  const [nameInputModalActionLabel, setNameInputModalActionLabel] = useState('')
  const [nameInputModalForFolder, setNameInputModalForFolder] = useState(false)
-  const [childVisible, setChildVisibility] = useState(false)
  const [contextMenu, setContextMenu] = useState<{
    mouseX: number
    mouseY: number
  } | null>(null)

+  const launchProgram = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    const baseUrl = window.location.origin
+    window.open(`${baseUrl}/SASjsApi/stp/execute?_program=${node.relativePath}`)
+  }
+
+  const launchProgramWithDebug = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    const baseUrl = window.location.origin
+    window.open(
+      `${baseUrl}/SASjsApi/stp/execute?_program=${node.relativePath}&_debug=131`
+    )
+  }
+
  const handleContextMenu = (event: React.MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()
@@ -91,25 +116,18 @@ const TreeViewNode = ({
    )
  }

-  const hasChild = node.children.length ? true : false
-
-  const handleItemClick = () => {
-    if (node.children.length) {
-      setChildVisibility((v) => !v)
-      return
-    }
+  const handleClose = (event: any) => {
+    event.stopPropagation()
+    setContextMenu(null)
+  }

+  const handleItemClick = (event: React.MouseEvent) => {
+    if (node.children.length) return
    handleSelect(node.relativePath)
  }

-  useEffect(() => {
-    if (defaultExpanded && defaultExpanded[0] === node.relativePath) {
-      setChildVisibility(true)
-      defaultExpanded.shift()
-    }
-  }, [defaultExpanded, node.relativePath])
-
-  const handleDeleteItemClick = () => {
+  const handleDeleteItemClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
    setContextMenu(null)
    setDeleteConfirmationModalOpen(true)
    setDeleteConfirmationModalMessage(
@@ -124,7 +142,8 @@ const TreeViewNode = ({
    deleteNode(node.relativePath, node.isFolder)
  }

-  const handleNewFolderItemClick = () => {
+  const handleNewFolderItemClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
    setContextMenu(null)
    setNameInputModalOpen(true)
    setNameInputModalTitle('Add Folder')
@@ -133,7 +152,8 @@ const TreeViewNode = ({
    setDefaultInputModalName('')
  }

-  const handleNewFileItemClick = () => {
+  const handleNewFileItemClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
    setContextMenu(null)
    setNameInputModalOpen(true)
    setNameInputModalTitle('Add File')
@@ -149,7 +169,8 @@ const TreeViewNode = ({
    else addFile(path)
  }

-  const handleRenameItemClick = () => {
+  const handleRenameItemClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
    setContextMenu(null)
    setNameInputModalOpen(true)
    setNameInputModalTitle('Rename')
@@ -169,34 +190,7 @@ const TreeViewNode = ({

  return (
    <div onContextMenu={handleContextMenu} style={{ cursor: 'context-menu' }}>
-      <li style={{ display: 'list-item' }}>
-        <div
-          className={`tree-item-label ${
-            selectedFilePath === node.relativePath ? 'selected' : ''
-          }`}
-          onClick={() => handleItemClick()}
-        >
-          {hasChild &&
-            (childVisible ? <ExpandMoreIcon /> : <ChevronRightIcon />)}
-          <div>{node.name}</div>
-        </div>
-
-        {hasChild &&
-          childVisible &&
-          node.children.map((child, index) => (
-            <TreeView
-              key={node.relativePath + '-' + index}
-              node={child}
-              selectedFilePath={selectedFilePath}
-              handleSelect={handleSelect}
-              deleteNode={deleteNode}
-              addFile={addFile}
-              addFolder={addFolder}
-              rename={rename}
-              defaultExpanded={defaultExpanded}
-            />
-          ))}
-      </li>
+      <Typography onClick={handleItemClick}>{node.name}</Typography>
      <DeleteConfirmationModal
        open={deleteConfirmationModalOpen}
        setOpen={setDeleteConfirmationModalOpen}
@@ -216,7 +210,7 @@ const TreeViewNode = ({
      />
      <Menu
        open={contextMenu !== null}
-        onClose={() => setContextMenu(null)}
+        onClose={handleClose}
        anchorReference="anchorPosition"
        anchorPosition={
          contextMenu !== null
@@ -224,8 +218,8 @@ const TreeViewNode = ({
            : undefined
        }
      >
-        {node.isFolder && (
-          <div>
+        {node.isFolder ? (
+          <>
            <MenuItem onClick={handleNewFolderItemClick}>Add Folder</MenuItem>
            <MenuItem
              disabled={!node.relativePath}
@@ -233,14 +227,21 @@ const TreeViewNode = ({
            >
              Add File
            </MenuItem>
-          </div>
+          </>
+        ) : (
+          <>
+            <MenuItem onClick={launchProgram}>Launch</MenuItem>
+            <MenuItem onClick={launchProgramWithDebug}>
+              Launch and Debug
+            </MenuItem>
+          </>
+        )}
+        {!!node.relativePath && (
+          <>
+            <MenuItem onClick={handleRenameItemClick}>Rename</MenuItem>
+            <MenuItem onClick={handleDeleteItemClick}>Delete</MenuItem>
+          </>
        )}
-        <MenuItem disabled={!node.relativePath} onClick={handleRenameItemClick}>
-          Rename
-        </MenuItem>
-        <MenuItem disabled={!node.relativePath} onClick={handleDeleteItemClick}>
-          Delete
-        </MenuItem>
      </Menu>
    </div>
  )
--- a/web/src/components/username.tsx
+++ b/web/src/components/username.tsx
@@ -20,7 +20,14 @@ const Username = (props: any) => {
      ) : (
        <AccountCircle></AccountCircle>
      )}
-      <Typography variant="h6" sx={{ color: 'white', padding: '0 8px' }}>
+      <Typography
+        variant="h6"
+        sx={{
+          color: 'white',
+          padding: '0 8px',
+          display: { xs: 'none', md: 'flex' }
+        }}
+      >
        {props.username}
      </Typography>
    </IconButton>
--- a/web/src/containers/Settings/authConfig.tsx
+++ b/web/src/containers/Settings/authConfig.tsx
@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react'
+import axios from 'axios'
+import {
+  Box,
+  Grid,
+  CircularProgress,
+  Card,
+  CardHeader,
+  Divider,
+  CardContent,
+  TextField,
+  CardActions,
+  Button,
+  Typography
+} from '@mui/material'
+import { toast } from 'react-toastify'
+
+const AuthConfig = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [authDetail, setAuthDetail] = useState<any>({})
+
+  useEffect(() => {
+    setIsLoading(true)
+    axios
+      .get(`/SASjsApi/authConfig`)
+      .then((res: any) => {
+        setAuthDetail(res.data)
+      })
+      .catch((err) => {
+        toast.error('Failed: ' + err.response?.data || err.text, {
+          theme: 'dark',
+          position: toast.POSITION.BOTTOM_RIGHT
+        })
+      })
+      .finally(() => setIsLoading(false))
+  }, [])
+
+  const synchroniseWithLDAP = () => {
+    setIsLoading(true)
+    axios
+      .post(`/SASjsApi/authConfig/synchroniseWithLDAP`)
+      .then((res: any) => {
+        const { userCount, groupCount } = res.data
+        toast.success(
+          `Imported ${userCount} ${
+            userCount > 1 ? 'users' : 'user'
+          } and ${groupCount} ${groupCount > 1 ? 'groups' : 'group'}`,
+          {
+            theme: 'dark',
+            position: toast.POSITION.BOTTOM_RIGHT
+          }
+        )
+      })
+      .catch((err) => {
+        toast.error('Failed: ' + err.response?.data || err.text, {
+          theme: 'dark',
+          position: toast.POSITION.BOTTOM_RIGHT
+        })
+      })
+      .finally(() => setIsLoading(false))
+  }
+
+  return isLoading ? (
+    <CircularProgress
+      style={{ position: 'absolute', left: '50%', top: '50%' }}
+    />
+  ) : (
+    <Box>
+      {Object.entries(authDetail).length === 0 && (
+        <Typography>No external Auth Provider is used</Typography>
+      )}
+      {authDetail.ldap && (
+        <Card>
+          <CardHeader title="LDAP Authentication" />
+          <Divider />
+          <CardContent>
+            <Grid container spacing={4}>
+              <Grid item md={6} xs={12}>
+                <TextField
+                  fullWidth
+                  label="LDAP_URL"
+                  name="LDAP_URL"
+                  value={authDetail.ldap.LDAP_URL}
+                  variant="outlined"
+                  disabled
+                />
+              </Grid>
+
+              <Grid item md={6} xs={12}>
+                <TextField
+                  fullWidth
+                  label="LDAP_BIND_DN"
+                  name="LDAP_BIND_DN"
+                  value={authDetail.ldap.LDAP_BIND_DN}
+                  variant="outlined"
+                  disabled={true}
+                />
+              </Grid>
+
+              <Grid item md={6} xs={12}>
+                <TextField
+                  fullWidth
+                  label="LDAP_BIND_PASSWORD"
+                  name="LDAP_BIND_PASSWORD"
+                  type="password"
+                  value={authDetail.ldap.LDAP_BIND_PASSWORD}
+                  variant="outlined"
+                  disabled
+                />
+              </Grid>
+
+              <Grid item md={6} xs={12}>
+                <TextField
+                  fullWidth
+                  label="LDAP_USERS_BASE_DN"
+                  name="LDAP_USERS_BASE_DN"
+                  value={authDetail.ldap.LDAP_USERS_BASE_DN}
+                  variant="outlined"
+                  disabled={true}
+                />
+              </Grid>
+
+              <Grid item md={6} xs={12}>
+                <TextField
+                  fullWidth
+                  label="LDAP_GROUPS_BASE_DN"
+                  name="LDAP_GROUPS_BASE_DN"
+                  value={authDetail.ldap.LDAP_GROUPS_BASE_DN}
+                  variant="outlined"
+                  disabled={true}
+                />
+              </Grid>
+            </Grid>
+          </CardContent>
+          <Divider />
+          <CardActions>
+            <Button
+              type="submit"
+              variant="contained"
+              onClick={synchroniseWithLDAP}
+            >
+              Synchronise
+            </Button>
+          </CardActions>
+        </Card>
+      )}
+    </Box>
+  )
+}
+
+export default AuthConfig
--- a/web/src/containers/Settings/index.tsx
+++ b/web/src/containers/Settings/index.tsx
@@ -7,8 +7,10 @@ import TabPanel from '@mui/lab/TabPanel'

 import Permission from './permission'
 import Profile from './profile'
+import AuthConfig from './authConfig'

 import { AppContext, ModeType } from '../../context/appContext'
+import PermissionsContextProvider from '../../context/permissionsContext'

 const StyledTab = styled(Tab)({
  background: 'black',
@@ -31,11 +33,20 @@ const Settings = () => {
    <Box
      sx={{
        display: 'flex',
+        flexDirection: { xs: 'column', md: 'row' },
        marginTop: '65px'
      }}
    >
      <TabContext value={value}>
-        <Box component={Paper} sx={{ margin: '0 5px', height: '92vh' }}>
+        <Box
+          component={Paper}
+          sx={{
+            margin: '0 5px',
+            height: { md: '92vh' },
+            display: 'flex',
+            justifyContent: 'center'
+          }}
+        >
          <TabList
            TabIndicatorProps={{
              style: {
@@ -47,7 +58,10 @@ const Settings = () => {
          >
            <StyledTab label="Profile" value="profile" />
            {appContext.mode === ModeType.Server && (
-              <StyledTab label="Permission" value="permission" />
+              <StyledTab label="Permissions" value="permission" />
+            )}
+            {appContext.mode === ModeType.Server && appContext.isAdmin && (
+              <StyledTab label="Auth Config" value="auth_config" />
            )}
          </TabList>
        </Box>
@@ -55,7 +69,12 @@ const Settings = () => {
          <Profile />
        </StyledTabpanel>
        <StyledTabpanel value="permission">
-          <Permission />
+          <PermissionsContextProvider>
+            <Permission />
+          </PermissionsContextProvider>
+        </StyledTabpanel>
+        <StyledTabpanel value="auth_config">
+          <AuthConfig />
        </StyledTabpanel>
      </TabContext>
    </Box>
--- a/web/src/containers/Settings/internal/components/addPermission.tsx
+++ b/web/src/containers/Settings/internal/components/addPermission.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { IconButton, Tooltip } from '@mui/material'
+import { Add } from '@mui/icons-material'
+import { RegisterPermissionPayload } from '../../../../utils/types'
+import AddPermissionModal from './addPermissionModal'
+
+type Props = {
+  openModal: boolean
+  setOpenModal: React.Dispatch<React.SetStateAction<boolean>>
+  addPermission: (
+    permissionsToAdd: RegisterPermissionPayload[],
+    permissionType: string,
+    principalType: string,
+    principal: string,
+    permissionSetting: string
+  ) => Promise<void>
+}
+
+const AddPermission = ({ openModal, setOpenModal, addPermission }: Props) => {
+  return (
+    <>
+      <Tooltip
+        sx={{ marginLeft: 'auto' }}
+        title="Add Permission"
+        placement="bottom-end"
+      >
+        <IconButton onClick={() => setOpenModal(true)}>
+          <Add />
+        </IconButton>
+      </Tooltip>
+      <AddPermissionModal
+        open={openModal}
+        handleOpen={setOpenModal}
+        addPermission={addPermission}
+      />
+    </>
+  )
+}
+
+export default AddPermission
--- a/web/src/containers/Settings/internal/components/addPermissionModal.tsx
+++ b/web/src/containers/Settings/internal/components/addPermissionModal.tsx
@@ -3,36 +3,32 @@ import axios from 'axios'
 import {
  Button,
  Grid,
-  Dialog,
  DialogContent,
  DialogActions,
  TextField,
  CircularProgress,
  Autocomplete
 } from '@mui/material'
-import { styled } from '@mui/material/styles'

-import { BootstrapDialogTitle } from '../../components/dialogTitle'
+import { BootstrapDialog } from '../../../../components/modal'
+import { BootstrapDialogTitle } from '../../../../components/dialogTitle'

 import {
  UserResponse,
  GroupResponse,
  RegisterPermissionPayload
-} from '../../utils/types'
-
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
-  '& .MuiDialogContent-root': {
-    padding: theme.spacing(2)
-  },
-  '& .MuiDialogActions-root': {
-    padding: theme.spacing(1)
-  }
-}))
+} from '../../../../utils/types'

 type AddPermissionModalProps = {
  open: boolean
  handleOpen: Dispatch<SetStateAction<boolean>>
-  addPermission: (addPermissionPayload: RegisterPermissionPayload) => void
+  addPermission: (
+    permissions: RegisterPermissionPayload[],
+    permissionType: string,
+    principalType: string,
+    principal: string,
+    permissionSetting: string
+  ) => void
 }

 const AddPermissionModal = ({
@@ -42,9 +38,9 @@ const AddPermissionModal = ({
 }: AddPermissionModalProps) => {
  const [paths, setPaths] = useState<string[]>([])
  const [loadingPaths, setLoadingPaths] = useState(false)
-  const [path, setPath] = useState<string>()
+  const [selectedPaths, setSelectedPaths] = useState<string[]>([])
  const [permissionType, setPermissionType] = useState('Route')
-  const [principalType, setPrincipalType] = useState('group')
+  const [principalType, setPrincipalType] = useState('Group')
  const [userPrincipal, setUserPrincipal] = useState<UserResponse>()
  const [groupPrincipal, setGroupPrincipal] = useState<GroupResponse>()
  const [permissionSetting, setPermissionSetting] = useState('Grant')
@@ -72,10 +68,10 @@ const AddPermissionModal = ({
  useEffect(() => {
    setLoadingPrincipals(true)
    axios
-      .get(`/SASjsApi/${principalType}`)
+      .get(`/SASjsApi/${principalType.toLowerCase()}`)
      .then((res: any) => {
        if (res.data) {
-          if (principalType === 'user') {
+          if (principalType.toLowerCase() === 'user') {
            const users: UserResponse[] = res.data
            const nonAdminUsers = users.filter((user) => !user.isAdmin)
            setUserPrincipals(nonAdminUsers)
@@ -93,22 +89,40 @@ const AddPermissionModal = ({
  }, [principalType])

  const handleAddPermission = () => {
-    const addPermissionPayload: any = {
-      path,
-      type: permissionType,
-      setting: permissionSetting,
-      principalType
-    }
-    if (principalType === 'user' && userPrincipal) {
-      addPermissionPayload.principalId = userPrincipal.id
-    } else if (principalType === 'group' && groupPrincipal) {
-      addPermissionPayload.principalId = groupPrincipal.groupId
-    }
-    addPermission(addPermissionPayload)
+    const permissions: RegisterPermissionPayload[] = []
+
+    selectedPaths.forEach((path) => {
+      const addPermissionPayload: any = {
+        path,
+        type: permissionType,
+        setting: permissionSetting,
+        principalType: principalType.toLowerCase(),
+        principalId:
+          principalType.toLowerCase() === 'user'
+            ? userPrincipal?.id
+            : groupPrincipal?.groupId
+      }
+
+      permissions.push(addPermissionPayload)
+    })
+
+    const principal =
+      principalType.toLowerCase() === 'user'
+        ? userPrincipal?.username
+        : groupPrincipal?.name
+
+    addPermission(
+      permissions,
+      permissionType,
+      principalType,
+      principal!,
+      permissionSetting
+    )
  }

  const addButtonDisabled =
-    !path || (principalType === 'user' ? !userPrincipal : !groupPrincipal)
+    !selectedPaths.length ||
+    (principalType.toLowerCase() === 'user' ? !userPrincipal : !groupPrincipal)

  return (
    <BootstrapDialog onClose={() => handleOpen(false)} open={open}>
@@ -122,17 +136,15 @@ const AddPermissionModal = ({
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <Autocomplete
-              options={paths}
+              multiple
              disableClearable
-              value={path}
-              onChange={(event: any, newValue: string) => setPath(newValue)}
-              renderInput={(params) =>
-                loadingPaths ? (
-                  <CircularProgress />
-                ) : (
-                  <TextField {...params} autoFocus label="Path" />
-                )
-              }
+              options={paths}
+              filterSelectedOptions
+              value={selectedPaths}
+              onChange={(event: any, newValue: string[]) => {
+                setSelectedPaths(newValue)
+              }}
+              renderInput={(params) => <TextField {...params} label="Paths" />}
            />
          </Grid>
          <Grid item xs={12}>
@@ -154,8 +166,7 @@ const AddPermissionModal = ({
          </Grid>
          <Grid item xs={12}>
            <Autocomplete
-              options={['group', 'user']}
-              getOptionLabel={(option) => option.toUpperCase()}
+              options={['Group', 'User']}
              disableClearable
              value={principalType}
              onChange={(event: any, newValue: string) =>
@@ -167,7 +178,7 @@ const AddPermissionModal = ({
            />
          </Grid>
          <Grid item xs={12}>
-            {principalType === 'user' ? (
+            {principalType.toLowerCase() === 'user' ? (
              <Autocomplete
                options={userPrincipals}
                getOptionLabel={(option) => option.displayName}
--- a/web/src/containers/Settings/internal/components/displayGroup.tsx
+++ b/web/src/containers/Settings/internal/components/displayGroup.tsx
@@ -0,0 +1,63 @@
+import { useState } from 'react'
+import { Typography, Popover } from '@mui/material'
+import { GroupDetailsResponse } from '../../../../utils/types'
+
+type DisplayGroupProps = {
+  group: GroupDetailsResponse
+}
+
+const DisplayGroup = ({ group }: DisplayGroupProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <div>
+      <Typography
+        aria-owns={open ? 'mouse-over-popover' : undefined}
+        aria-haspopup="true"
+        onMouseEnter={handlePopoverOpen}
+        onMouseLeave={handlePopoverClose}
+      >
+        {group.name}
+      </Typography>
+      <Popover
+        id="mouse-over-popover"
+        sx={{
+          pointerEvents: 'none'
+        }}
+        open={open}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left'
+        }}
+        onClose={handlePopoverClose}
+        disableRestoreFocus
+      >
+        <Typography sx={{ p: 1 }} variant="h6" component="div">
+          Group Members
+        </Typography>
+        {group.users.map((user, index) => (
+          <Typography key={index} sx={{ p: 1 }} component="li">
+            {user.username}
+          </Typography>
+        ))}
+      </Popover>
+    </div>
+  )
+}
+
+export default DisplayGroup
--- a/web/src/containers/Settings/internal/components/filterPermissions.tsx
+++ b/web/src/containers/Settings/internal/components/filterPermissions.tsx
@@ -0,0 +1,72 @@
+import React, { Dispatch, SetStateAction, useState } from 'react'
+import { IconButton, Tooltip } from '@mui/material'
+import { FilterList } from '@mui/icons-material'
+import { PermissionResponse } from '../../../../utils/types'
+import PermissionFilterModal from './permissionFilterModal'
+import { PrincipalType } from '../hooks/usePermission'
+
+type Props = {
+  open: boolean
+  handleOpen: Dispatch<SetStateAction<boolean>>
+  permissions: PermissionResponse[]
+  applyFilter: (
+    pathFilter: string[],
+    principalFilter: string[],
+    principalTypeFilter: PrincipalType[],
+    settingFilter: string[]
+  ) => void
+  resetFilter: () => void
+}
+
+const FilterPermissions = ({
+  open,
+  handleOpen,
+  permissions,
+  applyFilter,
+  resetFilter
+}: Props) => {
+  const [pathFilter, setPathFilter] = useState<string[]>([])
+  const [principalFilter, setPrincipalFilter] = useState<string[]>([])
+  const [principalTypeFilter, setPrincipalTypeFilter] = useState<
+    PrincipalType[]
+  >([])
+  const [settingFilter, setSettingFilter] = useState<string[]>([])
+  const handleApplyFilter = () => {
+    applyFilter(pathFilter, principalFilter, principalTypeFilter, settingFilter)
+  }
+
+  const handleResetFilter = () => {
+    setPathFilter([])
+    setPrincipalFilter([])
+    setPrincipalFilter([])
+    setSettingFilter([])
+    resetFilter()
+  }
+
+  return (
+    <>
+      <Tooltip title="Filter Permissions">
+        <IconButton onClick={() => handleOpen(true)}>
+          <FilterList />
+        </IconButton>
+      </Tooltip>
+      <PermissionFilterModal
+        open={open}
+        handleOpen={handleOpen}
+        permissions={permissions}
+        pathFilter={pathFilter}
+        setPathFilter={setPathFilter}
+        principalFilter={principalFilter}
+        setPrincipalFilter={setPrincipalFilter}
+        principalTypeFilter={principalTypeFilter}
+        setPrincipalTypeFilter={setPrincipalTypeFilter}
+        settingFilter={settingFilter}
+        setSettingFilter={setSettingFilter}
+        applyFilter={handleApplyFilter}
+        resetFilter={handleResetFilter}
+      />
+    </>
+  )
+}
+
+export default FilterPermissions
--- a/web/src/containers/Settings/internal/components/permissionFilterModal.tsx
+++ b/web/src/containers/Settings/internal/components/permissionFilterModal.tsx
@@ -10,9 +10,9 @@ import {
 import { styled } from '@mui/material/styles'
 import Autocomplete from '@mui/material/Autocomplete'

-import { PermissionResponse } from '../../utils/types'
-import { BootstrapDialogTitle } from '../../components/dialogTitle'
-import { PrincipalType } from './permission'
+import { PermissionResponse } from '../../../../utils/types'
+import { BootstrapDialogTitle } from '../../../../components/dialogTitle'
+import { PrincipalType } from '../hooks/usePermission'

 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
  '& .MuiDialogContent-root': {
@@ -92,7 +92,7 @@ const PermissionFilterModal = ({
              onChange={(event: any, newValue: string[]) => {
                setPathFilter(newValue)
              }}
-              renderInput={(params) => <TextField {...params} label="URIs" />}
+              renderInput={(params) => <TextField {...params} label="Paths" />}
            />
          </Grid>
          <Grid item xs={12}>
--- a/web/src/containers/Settings/internal/components/permissionResponseModal.tsx
+++ b/web/src/containers/Settings/internal/components/permissionResponseModal.tsx
@@ -0,0 +1,120 @@
+import React from 'react'
+
+import { Typography, DialogContent } from '@mui/material'
+
+import { BootstrapDialog } from '../../../../components/modal'
+import { BootstrapDialogTitle } from '../../../../components/dialogTitle'
+import { PermissionResponse } from '../../../../utils/types'
+
+export interface PermissionResponsePayload {
+  permissionType: string
+  principalType: string
+  principal: string
+  permissionSetting: string
+  existingPermissions: PermissionResponse[]
+  newAddedPermissions: PermissionResponse[]
+  updatedPermissions: PermissionResponse[]
+  errorPaths: string[]
+}
+
+type Props = {
+  open: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  payload: PermissionResponsePayload
+}
+
+const PermissionResponseModal = ({ open, setOpen, payload }: Props) => {
+  const newAddedPermissionsLength = payload.newAddedPermissions.length
+  const updatedPermissionsLength = payload.updatedPermissions.length
+  const existingPermissionsLength = payload.existingPermissions.length
+  const appliedPermissionsLength =
+    newAddedPermissionsLength + updatedPermissionsLength
+
+  return (
+    <div>
+      <BootstrapDialog onClose={() => setOpen(false)} open={open}>
+        <BootstrapDialogTitle
+          id="permission-response-modal"
+          handleOpen={setOpen}
+        >
+          Permission Response
+        </BootstrapDialogTitle>
+        <DialogContent dividers>
+          <Typography sx={{ fontWeight: 'bold', marginBottom: '15px' }}>
+            {`${appliedPermissionsLength} "${payload.permissionSetting}", "${
+              payload.permissionType
+            }", "${payload.principalType}", "${payload.principal}" ${
+              appliedPermissionsLength > 1 ? 'Rules' : 'Rule'
+            }`}{' '}
+            Applied:
+          </Typography>
+
+          {newAddedPermissionsLength > 0 && (
+            <>
+              <Typography>
+                {`${newAddedPermissionsLength} ${
+                  newAddedPermissionsLength > 1 ? 'Rules' : 'Rule'
+                }`}{' '}
+                Added:
+              </Typography>
+              <ul>
+                {payload.newAddedPermissions.map((permission, index) => (
+                  <li key={index}>{permission.path}</li>
+                ))}
+              </ul>
+            </>
+          )}
+
+          {updatedPermissionsLength > 0 && (
+            <>
+              <Typography>
+                {` ${updatedPermissionsLength} ${
+                  updatedPermissionsLength > 1 ? 'Rules' : 'Rule'
+                }`}{' '}
+                Updated:
+              </Typography>
+              <ul>
+                {payload.updatedPermissions.map((permission, index) => (
+                  <li key={index}>{permission.path}</li>
+                ))}
+              </ul>
+            </>
+          )}
+
+          {existingPermissionsLength > 0 && (
+            <>
+              <Typography>
+                {`${existingPermissionsLength} ${
+                  existingPermissionsLength > 1 ? 'Rules' : 'Rule'
+                }`}{' '}
+                Unchanged:
+              </Typography>
+              <ul>
+                {payload.existingPermissions.map((permission, index) => (
+                  <li key={index}>{permission.path}</li>
+                ))}
+              </ul>
+            </>
+          )}
+
+          {payload.errorPaths.length > 0 && (
+            <>
+              <Typography style={{ color: 'red', marginTop: '10px' }}>
+                Errors occurred for following paths:
+              </Typography>
+              <ul>
+                {payload.errorPaths.map((path, index) => (
+                  <li key={index}>
+                    <Typography>{path}</Typography>
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </DialogContent>
+      </BootstrapDialog>
+    </div>
+  )
+}
+
+export default PermissionResponseModal
--- a/web/src/containers/Settings/internal/components/permissionTable.tsx
+++ b/web/src/containers/Settings/internal/components/permissionTable.tsx
@@ -0,0 +1,101 @@
+import { useContext } from 'react'
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  IconButton,
+  Tooltip
+} from '@mui/material'
+
+import EditIcon from '@mui/icons-material/Edit'
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+
+import { styled } from '@mui/material/styles'
+
+import { PermissionResponse } from '../../../../utils/types'
+
+import { AppContext } from '../../../../context/appContext'
+import { displayPrincipal, displayPrincipalType } from '../helper'
+
+const BootstrapTableCell = styled(TableCell)({
+  textAlign: 'left'
+})
+
+export enum PrincipalType {
+  User = 'User',
+  Group = 'Group'
+}
+
+type PermissionTableProps = {
+  permissions: PermissionResponse[]
+  handleUpdatePermissionClick: (permission: PermissionResponse) => void
+  handleDeletePermissionClick: (permission: PermissionResponse) => void
+}
+
+const PermissionTable = ({
+  permissions,
+  handleUpdatePermissionClick,
+  handleDeletePermissionClick
+}: PermissionTableProps) => {
+  const appContext = useContext(AppContext)
+
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }}>
+        <TableHead sx={{ background: 'rgb(0,0,0, 0.3)' }}>
+          <TableRow>
+            <BootstrapTableCell>Path</BootstrapTableCell>
+            <BootstrapTableCell>Permission Type</BootstrapTableCell>
+            <BootstrapTableCell>Principal</BootstrapTableCell>
+            <BootstrapTableCell>Principal Type</BootstrapTableCell>
+            <BootstrapTableCell>Setting</BootstrapTableCell>
+            {appContext.isAdmin && (
+              <BootstrapTableCell>Action</BootstrapTableCell>
+            )}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {permissions.map((permission) => (
+            <TableRow key={permission.permissionId}>
+              <BootstrapTableCell>{permission.path}</BootstrapTableCell>
+              <BootstrapTableCell>{permission.type}</BootstrapTableCell>
+              <BootstrapTableCell>
+                {displayPrincipal(permission)}
+              </BootstrapTableCell>
+              <BootstrapTableCell>
+                {displayPrincipalType(permission)}
+              </BootstrapTableCell>
+              <BootstrapTableCell>{permission.setting}</BootstrapTableCell>
+              {appContext.isAdmin && (
+                <BootstrapTableCell>
+                  <Tooltip title="Edit Permission">
+                    <IconButton
+                      onClick={() => handleUpdatePermissionClick(permission)}
+                    >
+                      <EditIcon />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="Delete Permission">
+                    <IconButton
+                      color="error"
+                      onClick={() => handleDeletePermissionClick(permission)}
+                    >
+                      <DeleteForeverIcon />
+                    </IconButton>
+                  </Tooltip>
+                </BootstrapTableCell>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}
+
+export default PermissionTable
--- a/web/src/containers/Settings/internal/components/updatePermissionModal.tsx
+++ b/web/src/containers/Settings/internal/components/updatePermissionModal.tsx
@@ -2,26 +2,17 @@ import React, { useState, Dispatch, SetStateAction, useEffect } from 'react'
 import {
  Button,
  Grid,
-  Dialog,
  DialogContent,
  DialogActions,
  TextField
 } from '@mui/material'
-import { styled } from '@mui/material/styles'
+
 import Autocomplete from '@mui/material/Autocomplete'

-import { BootstrapDialogTitle } from '../../components/dialogTitle'
+import { BootstrapDialog } from '../../../../components/modal'
+import { BootstrapDialogTitle } from '../../../../components/dialogTitle'

-import { PermissionResponse } from '../../utils/types'
-
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
-  '& .MuiDialogContent-root': {
-    padding: theme.spacing(2)
-  },
-  '& .MuiDialogActions-root': {
-    padding: theme.spacing(1)
-  }
-}))
+import { PermissionResponse } from '../../../../utils/types'

 type UpdatePermissionModalProps = {
  open: boolean
--- a/web/src/containers/Settings/internal/helper.tsx
+++ b/web/src/containers/Settings/internal/helper.tsx
@@ -0,0 +1,13 @@
+import { PermissionResponse } from '../../../utils/types'
+import { PrincipalType } from './hooks/usePermission'
+import DisplayGroup from './components/displayGroup'
+
+export const displayPrincipal = (permission: PermissionResponse) => {
+  if (permission.user) return permission.user.username
+  if (permission.group) return <DisplayGroup group={permission.group} />
+}
+
+export const displayPrincipalType = (permission: PermissionResponse) => {
+  if (permission.user) return PrincipalType.User
+  if (permission.group) return PrincipalType.Group
+}
--- a/web/src/containers/Settings/internal/hooks/useAddPermission.tsx
+++ b/web/src/containers/Settings/internal/hooks/useAddPermission.tsx
@@ -0,0 +1,109 @@
+import axios from 'axios'
+import { useState, useContext } from 'react'
+import {
+  PermissionResponse,
+  RegisterPermissionPayload
+} from '../../../../utils/types'
+import AddPermission from '../components/addPermission'
+import { PermissionsContext } from '../../../../context/permissionsContext'
+import {
+  findExistingPermission,
+  findUpdatingPermission
+} from '../../../../utils/helper'
+
+const useAddPermission = () => {
+  const {
+    permissions,
+    fetchPermissions,
+    setIsLoading,
+    setPermissionResponsePayload,
+    setOpenPermissionResponseModal
+  } = useContext(PermissionsContext)
+
+  const [addPermissionModalOpen, setAddPermissionModalOpen] = useState(false)
+
+  const addPermission = async (
+    permissionsToAdd: RegisterPermissionPayload[],
+    permissionType: string,
+    principalType: string,
+    principal: string,
+    permissionSetting: string
+  ) => {
+    setAddPermissionModalOpen(false)
+    setIsLoading(true)
+
+    const newAddedPermissions: PermissionResponse[] = []
+    const updatedPermissions: PermissionResponse[] = []
+    const errorPaths: string[] = []
+
+    const existingPermissions: PermissionResponse[] = []
+    const updatingPermissions: PermissionResponse[] = []
+    const newPermissions: RegisterPermissionPayload[] = []
+
+    permissionsToAdd.forEach((permission) => {
+      const existingPermission = findExistingPermission(permissions, permission)
+      if (existingPermission) {
+        existingPermissions.push(existingPermission)
+        return
+      }
+
+      const updatingPermission = findUpdatingPermission(permissions, permission)
+      if (updatingPermission) {
+        updatingPermissions.push(updatingPermission)
+        return
+      }
+
+      newPermissions.push(permission)
+    })
+
+    for (const permission of newPermissions) {
+      await axios
+        .post('/SASjsApi/permission', permission)
+        .then((res) => {
+          newAddedPermissions.push(res.data)
+        })
+        .catch((error) => {
+          errorPaths.push(permission.path)
+        })
+    }
+
+    for (const permission of updatingPermissions) {
+      await axios
+        .patch(`/SASjsApi/permission/${permission.permissionId}`, {
+          setting: permission.setting === 'Grant' ? 'Deny' : 'Grant'
+        })
+        .then((res) => {
+          updatedPermissions.push(res.data)
+        })
+        .catch((error) => {
+          errorPaths.push(permission.path)
+        })
+    }
+
+    fetchPermissions()
+    setIsLoading(false)
+    setPermissionResponsePayload({
+      permissionType,
+      principalType,
+      principal,
+      permissionSetting,
+      existingPermissions,
+      updatedPermissions,
+      newAddedPermissions,
+      errorPaths
+    })
+    setOpenPermissionResponseModal(true)
+  }
+
+  const AddPermissionButton = () => (
+    <AddPermission
+      openModal={addPermissionModalOpen}
+      setOpenModal={setAddPermissionModalOpen}
+      addPermission={addPermission}
+    />
+  )
+
+  return { AddPermissionButton, setAddPermissionModalOpen }
+}
+
+export default useAddPermission
--- a/web/src/containers/Settings/internal/hooks/useDeletePermissionModal.tsx
+++ b/web/src/containers/Settings/internal/hooks/useDeletePermissionModal.tsx
@@ -0,0 +1,61 @@
+import axios from 'axios'
+import { useState, useContext } from 'react'
+import { PermissionsContext } from '../../../../context/permissionsContext'
+import { AlertSeverityType } from '../../../../components/snackbar'
+import DeleteConfirmationModal from '../../../../components/deleteConfirmationModal'
+
+const useDeletePermissionModal = () => {
+  const {
+    selectedPermission,
+    setSelectedPermission,
+    fetchPermissions,
+    setIsLoading,
+    setSnackbarMessage,
+    setSnackbarSeverity,
+    setOpenSnackbar,
+    setModalTitle,
+    setModalPayload,
+    setOpenModal
+  } = useContext(PermissionsContext)
+  const [deleteConfirmationModalOpen, setDeleteConfirmationModalOpen] =
+    useState(false)
+
+  const deletePermission = () => {
+    setDeleteConfirmationModalOpen(false)
+    setIsLoading(true)
+    axios
+      .delete(`/SASjsApi/permission/${selectedPermission?.permissionId}`)
+      .then((res: any) => {
+        fetchPermissions()
+        setSnackbarMessage('Permission deleted!')
+        setSnackbarSeverity(AlertSeverityType.Success)
+        setOpenSnackbar(true)
+      })
+      .catch((err) => {
+        setModalTitle('Abort')
+        setModalPayload(
+          typeof err.response.data === 'object'
+            ? JSON.stringify(err.response.data)
+            : err.response.data
+        )
+        setOpenModal(true)
+      })
+      .finally(() => {
+        setIsLoading(false)
+        setSelectedPermission(undefined)
+      })
+  }
+
+  const DeletePermissionDialog = () => (
+    <DeleteConfirmationModal
+      open={deleteConfirmationModalOpen}
+      setOpen={setDeleteConfirmationModalOpen}
+      message="Are you sure you want to delete this permission?"
+      _delete={deletePermission}
+    />
+  )
+
+  return { DeletePermissionDialog, setDeleteConfirmationModalOpen }
+}
+
+export default useDeletePermissionModal
--- a/web/src/containers/Settings/internal/hooks/useFilterPermissions.tsx
+++ b/web/src/containers/Settings/internal/hooks/useFilterPermissions.tsx
@@ -0,0 +1,105 @@
+import { useState, useContext } from 'react'
+import { PermissionsContext } from '../../../../context/permissionsContext'
+import { PrincipalType } from './usePermission'
+import FilterPermissions from '../components/filterPermissions'
+
+const useFilterPermissions = () => {
+  const { permissions, setFilteredPermissions, setFilterApplied } =
+    useContext(PermissionsContext)
+
+  const [filterModalOpen, setFilterModalOpen] = useState(false)
+
+  /**
+   * first find the permissions w.r.t each filter type
+   * take intersection of resultant arrays
+   */
+  const applyFilter = (
+    pathFilter: string[],
+    principalFilter: string[],
+    principalTypeFilter: PrincipalType[],
+    settingFilter: string[]
+  ) => {
+    setFilterModalOpen(false)
+
+    const uriFilteredPermissions =
+      pathFilter.length > 0
+        ? permissions.filter((permission) =>
+            pathFilter.includes(permission.path)
+          )
+        : permissions
+
+    const principalFilteredPermissions =
+      principalFilter.length > 0
+        ? permissions.filter((permission) => {
+            if (permission.user) {
+              return principalFilter.includes(permission.user.username)
+            }
+            if (permission.group) {
+              return principalFilter.includes(permission.group.name)
+            }
+            return false
+          })
+        : permissions
+
+    const principalTypeFilteredPermissions =
+      principalTypeFilter.length > 0
+        ? permissions.filter((permission) => {
+            if (permission.user) {
+              return principalTypeFilter.includes(PrincipalType.User)
+            }
+            if (permission.group) {
+              return principalTypeFilter.includes(PrincipalType.Group)
+            }
+            return false
+          })
+        : permissions
+
+    const settingFilteredPermissions =
+      settingFilter.length > 0
+        ? permissions.filter((permission) =>
+            settingFilter.includes(permission.setting)
+          )
+        : permissions
+
+    let filteredArray = uriFilteredPermissions.filter((permission) =>
+      principalFilteredPermissions.some(
+        (item) => item.permissionId === permission.permissionId
+      )
+    )
+
+    filteredArray = filteredArray.filter((permission) =>
+      principalTypeFilteredPermissions.some(
+        (item) => item.permissionId === permission.permissionId
+      )
+    )
+
+    filteredArray = filteredArray.filter((permission) =>
+      settingFilteredPermissions.some(
+        (item) => item.permissionId === permission.permissionId
+      )
+    )
+
+    setFilteredPermissions(filteredArray)
+    setFilterApplied(true)
+  }
+
+  const resetFilter = () => {
+    setFilterModalOpen(false)
+    setFilterApplied(false)
+    setFilteredPermissions([])
+  }
+
+  const FilterPermissionsButton = () => (
+    <FilterPermissions
+      open={filterModalOpen}
+      handleOpen={setFilterModalOpen}
+      permissions={permissions}
+      applyFilter={applyFilter}
+      resetFilter={resetFilter}
+    />
+  )
+
+  return { FilterPermissionsButton }
+}
+
+export default useFilterPermissions
--- a/web/src/containers/Settings/internal/hooks/usePermission.ts
+++ b/web/src/containers/Settings/internal/hooks/usePermission.ts
@@ -0,0 +1,71 @@
+import { useContext, useEffect } from 'react'
+import { AppContext } from '../../../../context/appContext'
+import { PermissionsContext } from '../../../../context/permissionsContext'
+import { PermissionResponse } from '../../../../utils/types'
+import useAddPermission from './useAddPermission'
+import useUpdatePermissionModal from './useUpdatePermissionModal'
+import useDeletePermissionModal from './useDeletePermissionModal'
+import useFilterPermissions from './useFilterPermissions'
+
+export enum PrincipalType {
+  User = 'User',
+  Group = 'Group'
+}
+
+const usePermission = () => {
+  const { isAdmin } = useContext(AppContext)
+  const {
+    filterApplied,
+    filteredPermissions,
+    isLoading,
+    permissions,
+    Dialog,
+    Snackbar,
+    PermissionResponseDialog,
+    fetchPermissions,
+    setSelectedPermission
+  } = useContext(PermissionsContext)
+
+  const { AddPermissionButton } = useAddPermission()
+
+  const { UpdatePermissionDialog, setUpdatePermissionModalOpen } =
+    useUpdatePermissionModal()
+
+  const { DeletePermissionDialog, setDeleteConfirmationModalOpen } =
+    useDeletePermissionModal()
+
+  const { FilterPermissionsButton } = useFilterPermissions()
+
+  useEffect(() => {
+    if (fetchPermissions) fetchPermissions()
+  }, [fetchPermissions])
+
+  const handleUpdatePermissionClick = (permission: PermissionResponse) => {
+    setSelectedPermission(permission)
+    setUpdatePermissionModalOpen(true)
+  }
+
+  const handleDeletePermissionClick = (permission: PermissionResponse) => {
+    setSelectedPermission(permission)
+    setDeleteConfirmationModalOpen(true)
+  }
+
+  return {
+    filterApplied,
+    filteredPermissions,
+    isAdmin,
+    isLoading,
+    permissions,
+    AddPermissionButton,
+    UpdatePermissionDialog,
+    DeletePermissionDialog,
+    FilterPermissionsButton,
+    handleDeletePermissionClick,
+    handleUpdatePermissionClick,
+    PermissionResponseDialog,
+    Dialog,
+    Snackbar
+  }
+}
+
+export default usePermission
--- a/web/src/containers/Settings/internal/hooks/usePermissionResponseModal.tsx
+++ b/web/src/containers/Settings/internal/hooks/usePermissionResponseModal.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import PermissionResponseModal, {
+  PermissionResponsePayload
+} from '../components/permissionResponseModal'
+
+const usePermissionResponseModal = () => {
+  const [openPermissionResponseModal, setOpenPermissionResponseModal] =
+    useState(false)
+  const [permissionResponsePayload, setPermissionResponsePayload] =
+    useState<PermissionResponsePayload>({
+      permissionType: '',
+      principalType: '',
+      principal: '',
+      permissionSetting: '',
+      existingPermissions: [],
+      newAddedPermissions: [],
+      updatedPermissions: [],
+      errorPaths: []
+    })
+
+  const PermissionResponseDialog = () => (
+    <PermissionResponseModal
+      open={openPermissionResponseModal}
+      setOpen={setOpenPermissionResponseModal}
+      payload={permissionResponsePayload}
+    />
+  )
+
+  return {
+    PermissionResponseDialog,
+    setOpenPermissionResponseModal,
+    setPermissionResponsePayload
+  }
+}
+
+export default usePermissionResponseModal
--- a/web/src/containers/Settings/internal/hooks/useUpdatePermissionModal.tsx
+++ b/web/src/containers/Settings/internal/hooks/useUpdatePermissionModal.tsx
@@ -0,0 +1,63 @@
+import axios from 'axios'
+import { useState, useContext } from 'react'
+import UpdatePermissionModal from '../components/updatePermissionModal'
+import { PermissionsContext } from '../../../../context/permissionsContext'
+import { AlertSeverityType } from '../../../../components/snackbar'
+
+const useUpdatePermissionModal = () => {
+  const {
+    selectedPermission,
+    setSelectedPermission,
+    fetchPermissions,
+    setIsLoading,
+    setSnackbarMessage,
+    setSnackbarSeverity,
+    setOpenSnackbar,
+    setModalTitle,
+    setModalPayload,
+    setOpenModal
+  } = useContext(PermissionsContext)
+  const [updatePermissionModalOpen, setUpdatePermissionModalOpen] =
+    useState(false)
+
+  const updatePermission = (setting: string) => {
+    setUpdatePermissionModalOpen(false)
+    setIsLoading(true)
+    axios
+      .patch(`/SASjsApi/permission/${selectedPermission?.permissionId}`, {
+        setting
+      })
+      .then((res: any) => {
+        fetchPermissions()
+        setSnackbarMessage('Permission updated!')
+        setSnackbarSeverity(AlertSeverityType.Success)
+        setOpenSnackbar(true)
+      })
+      .catch((err) => {
+        setModalTitle('Abort')
+        setModalPayload(
+          typeof err.response.data === 'object'
+            ? JSON.stringify(err.response.data)
+            : err.response.data
+        )
+        setOpenModal(true)
+      })
+      .finally(() => {
+        setIsLoading(false)
+        setSelectedPermission(undefined)
+      })
+  }
+
+  const UpdatePermissionDialog = () => (
+    <UpdatePermissionModal
+      open={updatePermissionModalOpen}
+      handleOpen={setUpdatePermissionModalOpen}
+      permission={selectedPermission}
+      updatePermission={updatePermission}
+    />
+  )
+
+  return { UpdatePermissionDialog, setUpdatePermissionModalOpen }
+}
+
+export default useUpdatePermissionModal
--- a/web/src/containers/Settings/permission.tsx
+++ b/web/src/containers/Settings/permission.tsx
@@ -1,277 +1,31 @@
-import React, { useState, useEffect, useContext, useCallback } from 'react'
-import axios from 'axios'
-import {
-  Box,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Paper,
-  Grid,
-  CircularProgress,
-  IconButton,
-  Tooltip,
-  Typography,
-  Popover
-} from '@mui/material'
-
-import FilterListIcon from '@mui/icons-material/FilterList'
-import AddIcon from '@mui/icons-material/Add'
-import EditIcon from '@mui/icons-material/Edit'
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
-
+import { Box, Paper, Grid, CircularProgress } from '@mui/material'
 import { styled } from '@mui/material/styles'
+import PermissionTable from './internal/components/permissionTable'
+import usePermission from './internal/hooks/usePermission'

-import Modal from '../../components/modal'
-import PermissionFilterModal from './permissionFilterModal'
-import AddPermissionModal from './addPermissionModal'
-import UpdatePermissionModal from './updatePermissionModal'
-import DeleteConfirmationModal from '../../components/deleteConfirmationModal'
-import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
-
-import {
-  GroupDetailsResponse,
-  PermissionResponse,
-  RegisterPermissionPayload
-} from '../../utils/types'
-import { AppContext } from '../../context/appContext'
-
-const BootstrapTableCell = styled(TableCell)({
-  textAlign: 'left'
+const BootstrapGridItem = styled(Grid)({
+  '&.MuiGrid-item': {
+    maxWidth: '100%'
+  }
 })

-export enum PrincipalType {
-  User = 'User',
-  Group = 'Group'
-}
-
 const Permission = () => {
-  const appContext = useContext(AppContext)
-  const [isLoading, setIsLoading] = useState(false)
-  const [openModal, setOpenModal] = useState(false)
-  const [modalTitle, setModalTitle] = useState('')
-  const [modalPayload, setModalPayload] = useState('')
-  const [openSnackbar, setOpenSnackbar] = useState(false)
-  const [snackbarMessage, setSnackbarMessage] = useState('')
-  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertSeverityType>(
-    AlertSeverityType.Success
-  )
-  const [addPermissionModalOpen, setAddPermissionModalOpen] = useState(false)
-  const [updatePermissionModalOpen, setUpdatePermissionModalOpen] =
-    useState(false)
-  const [deleteConfirmationModalOpen, setDeleteConfirmationModalOpen] =
-    useState(false)
-  const [deleteConfirmationModalMessage, setDeleteConfirmationModalMessage] =
-    useState('')
-  const [selectedPermission, setSelectedPermission] =
-    useState<PermissionResponse>()
-  const [filterModalOpen, setFilterModalOpen] = useState(false)
-  const [pathFilter, setPathFilter] = useState<string[]>([])
-  const [principalFilter, setPrincipalFilter] = useState<string[]>([])
-  const [principalTypeFilter, setPrincipalTypeFilter] = useState<
-    PrincipalType[]
-  >([])
-  const [settingFilter, setSettingFilter] = useState<string[]>([])
-  const [permissions, setPermissions] = useState<PermissionResponse[]>([])
-  const [filteredPermissions, setFilteredPermissions] = useState<
-    PermissionResponse[]
-  >([])
-  const [filterApplied, setFilterApplied] = useState(false)
-
-  const fetchPermissions = useCallback(() => {
-    axios
-      .get(`/SASjsApi/permission`)
-      .then((res: any) => {
-        if (res.data?.length > 0) {
-          setPermissions(res.data)
-        }
-      })
-      .catch((err) => {
-        setModalTitle('Abort')
-        setModalPayload(
-          typeof err.response.data === 'object'
-            ? JSON.stringify(err.response.data)
-            : err.response.data
-        )
-        setOpenModal(true)
-      })
-  }, [])
-
-  useEffect(() => {
-    fetchPermissions()
-  }, [fetchPermissions])
-
-  /**
-   * first find the permissions w.r.t each filter type
-   * take intersection of resultant arrays
-   */
-  const applyFilter = () => {
-    setFilterModalOpen(false)
-
-    const uriFilteredPermissions =
-      pathFilter.length > 0
-        ? permissions.filter((permission) =>
-            pathFilter.includes(permission.path)
-          )
-        : permissions
-
-    const principalFilteredPermissions =
-      principalFilter.length > 0
-        ? permissions.filter((permission) => {
-            if (permission.user) {
-              return principalFilter.includes(permission.user.username)
-            }
-            if (permission.group) {
-              return principalFilter.includes(permission.group.name)
-            }
-            return false
-          })
-        : permissions
-
-    const principalTypeFilteredPermissions =
-      principalTypeFilter.length > 0
-        ? permissions.filter((permission) => {
-            if (permission.user) {
-              return principalTypeFilter.includes(PrincipalType.User)
-            }
-            if (permission.group) {
-              return principalTypeFilter.includes(PrincipalType.Group)
-            }
-            return false
-          })
-        : permissions
-
-    const settingFilteredPermissions =
-      settingFilter.length > 0
-        ? permissions.filter((permission) =>
-            settingFilter.includes(permission.setting)
-          )
-        : permissions
-
-    let filteredArray = uriFilteredPermissions.filter((permission) =>
-      principalFilteredPermissions.some(
-        (item) => item.permissionId === permission.permissionId
-      )
-    )
-
-    filteredArray = filteredArray.filter((permission) =>
-      principalTypeFilteredPermissions.some(
-        (item) => item.permissionId === permission.permissionId
-      )
-    )
-
-    filteredArray = filteredArray.filter((permission) =>
-      settingFilteredPermissions.some(
-        (item) => item.permissionId === permission.permissionId
-      )
-    )
-
-    setFilteredPermissions(filteredArray)
-    setFilterApplied(true)
-  }
-
-  const resetFilter = () => {
-    setFilterModalOpen(false)
-    setPathFilter([])
-    setPrincipalFilter([])
-    setSettingFilter([])
-    setFilteredPermissions([])
-    setFilterApplied(false)
-  }
-
-  const addPermission = (addPermissionPayload: RegisterPermissionPayload) => {
-    setAddPermissionModalOpen(false)
-    setIsLoading(true)
-    axios
-      .post('/SASjsApi/permission', addPermissionPayload)
-      .then((res: any) => {
-        fetchPermissions()
-        setSnackbarMessage('Permission added!')
-        setSnackbarSeverity(AlertSeverityType.Success)
-        setOpenSnackbar(true)
-      })
-      .catch((err) => {
-        setModalTitle('Abort')
-        setModalPayload(
-          typeof err.response.data === 'object'
-            ? JSON.stringify(err.response.data)
-            : err.response.data
-        )
-        setOpenModal(true)
-      })
-      .finally(() => {
-        setIsLoading(false)
-      })
-  }
-
-  const handleUpdatePermissionClick = (permission: PermissionResponse) => {
-    setSelectedPermission(permission)
-    setUpdatePermissionModalOpen(true)
-  }
-
-  const updatePermission = (setting: string) => {
-    setUpdatePermissionModalOpen(false)
-    setIsLoading(true)
-    axios
-      .patch(`/SASjsApi/permission/${selectedPermission?.permissionId}`, {
-        setting
-      })
-      .then((res: any) => {
-        fetchPermissions()
-        setSnackbarMessage('Permission updated!')
-        setSnackbarSeverity(AlertSeverityType.Success)
-        setOpenSnackbar(true)
-      })
-      .catch((err) => {
-        setModalTitle('Abort')
-        setModalPayload(
-          typeof err.response.data === 'object'
-            ? JSON.stringify(err.response.data)
-            : err.response.data
-        )
-        setOpenModal(true)
-      })
-      .finally(() => {
-        setIsLoading(false)
-        setSelectedPermission(undefined)
-      })
-  }
-
-  const handleDeletePermissionClick = (permission: PermissionResponse) => {
-    setSelectedPermission(permission)
-    setDeleteConfirmationModalOpen(true)
-    setDeleteConfirmationModalMessage(
-      'Are you sure you want to delete this permission?'
-    )
-  }
-
-  const deletePermission = () => {
-    setDeleteConfirmationModalOpen(false)
-    setIsLoading(true)
-    axios
-      .delete(`/SASjsApi/permission/${selectedPermission?.permissionId}`)
-      .then((res: any) => {
-        fetchPermissions()
-        setSnackbarMessage('Permission deleted!')
-        setSnackbarSeverity(AlertSeverityType.Success)
-        setOpenSnackbar(true)
-      })
-      .catch((err) => {
-        setModalTitle('Abort')
-        setModalPayload(
-          typeof err.response.data === 'object'
-            ? JSON.stringify(err.response.data)
-            : err.response.data
-        )
-        setOpenModal(true)
-      })
-      .finally(() => {
-        setIsLoading(false)
-        setSelectedPermission(undefined)
-      })
-  }
+  const {
+    filterApplied,
+    filteredPermissions,
+    isAdmin,
+    isLoading,
+    permissions,
+    AddPermissionButton,
+    UpdatePermissionDialog,
+    DeletePermissionDialog,
+    FilterPermissionsButton,
+    handleDeletePermissionClick,
+    handleUpdatePermissionClick,
+    PermissionResponseDialog,
+    Dialog,
+    Snackbar
+  } = usePermission()

  return isLoading ? (
    <CircularProgress
@@ -280,215 +34,27 @@ const Permission = () => {
  ) : (
    <Box className="permissions-page">
      <Grid container direction="column" spacing={1}>
-        <Grid item xs={12}>
+        <BootstrapGridItem item xs={12}>
          <Paper elevation={3} sx={{ display: 'flex' }}>
-            <Tooltip title="Filter Permissions">
-              <IconButton>
-                <FilterListIcon onClick={() => setFilterModalOpen(true)} />
-              </IconButton>
-            </Tooltip>
-            {appContext.isAdmin && (
-              <Tooltip
-                sx={{ marginLeft: 'auto' }}
-                title="Add Permission"
-                placement="bottom-end"
-              >
-                <IconButton onClick={() => setAddPermissionModalOpen(true)}>
-                  <AddIcon />
-                </IconButton>
-              </Tooltip>
-            )}
+            <FilterPermissionsButton />
+            {isAdmin && <AddPermissionButton />}
          </Paper>
-        </Grid>
-        <Grid item xs={12}>
+        </BootstrapGridItem>
+        <BootstrapGridItem item xs={12}>
          <PermissionTable
            permissions={filterApplied ? filteredPermissions : permissions}
            handleUpdatePermissionClick={handleUpdatePermissionClick}
            handleDeletePermissionClick={handleDeletePermissionClick}
          />
-        </Grid>
+        </BootstrapGridItem>
      </Grid>
-      <BootstrapSnackbar
-        open={openSnackbar}
-        setOpen={setOpenSnackbar}
-        message={snackbarMessage}
-        severity={snackbarSeverity}
-      />
-      <Modal
-        open={openModal}
-        setOpen={setOpenModal}
-        title={modalTitle}
-        payload={modalPayload}
-      />
-      <PermissionFilterModal
-        open={filterModalOpen}
-        handleOpen={setFilterModalOpen}
-        permissions={permissions}
-        pathFilter={pathFilter}
-        setPathFilter={setPathFilter}
-        principalFilter={principalFilter}
-        setPrincipalFilter={setPrincipalFilter}
-        principalTypeFilter={principalTypeFilter}
-        setPrincipalTypeFilter={setPrincipalTypeFilter}
-        settingFilter={settingFilter}
-        setSettingFilter={setSettingFilter}
-        applyFilter={applyFilter}
-        resetFilter={resetFilter}
-      />
-      <AddPermissionModal
-        open={addPermissionModalOpen}
-        handleOpen={setAddPermissionModalOpen}
-        addPermission={addPermission}
-      />
-      <UpdatePermissionModal
-        open={updatePermissionModalOpen}
-        handleOpen={setUpdatePermissionModalOpen}
-        permission={selectedPermission}
-        updatePermission={updatePermission}
-      />
-      <DeleteConfirmationModal
-        open={deleteConfirmationModalOpen}
-        setOpen={setDeleteConfirmationModalOpen}
-        message={deleteConfirmationModalMessage}
-        _delete={deletePermission}
-      />
+      <PermissionResponseDialog />
+      <UpdatePermissionDialog />
+      <DeletePermissionDialog />
+      <Dialog />
+      <Snackbar />
    </Box>
  )
 }

 export default Permission
-
-type PermissionTableProps = {
-  permissions: PermissionResponse[]
-  handleUpdatePermissionClick: (permission: PermissionResponse) => void
-  handleDeletePermissionClick: (permission: PermissionResponse) => void
-}
-
-const PermissionTable = ({
-  permissions,
-  handleUpdatePermissionClick,
-  handleDeletePermissionClick
-}: PermissionTableProps) => {
-  const appContext = useContext(AppContext)
-
-  return (
-    <TableContainer component={Paper}>
-      <Table sx={{ minWidth: 650 }}>
-        <TableHead sx={{ background: 'rgb(0,0,0, 0.3)' }}>
-          <TableRow>
-            <BootstrapTableCell>Path</BootstrapTableCell>
-            <BootstrapTableCell>Permission Type</BootstrapTableCell>
-            <BootstrapTableCell>Principal</BootstrapTableCell>
-            <BootstrapTableCell>Principal Type</BootstrapTableCell>
-            <BootstrapTableCell>Setting</BootstrapTableCell>
-            {appContext.isAdmin && (
-              <BootstrapTableCell>Action</BootstrapTableCell>
-            )}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {permissions.map((permission) => (
-            <TableRow key={permission.permissionId}>
-              <BootstrapTableCell>{permission.path}</BootstrapTableCell>
-              <BootstrapTableCell>{permission.type}</BootstrapTableCell>
-              <BootstrapTableCell>
-                {displayPrincipal(permission)}
-              </BootstrapTableCell>
-              <BootstrapTableCell>
-                {displayPrincipalType(permission)}
-              </BootstrapTableCell>
-              <BootstrapTableCell>{permission.setting}</BootstrapTableCell>
-              {appContext.isAdmin && (
-                <BootstrapTableCell>
-                  <Tooltip title="Edit Permission">
-                    <IconButton
-                      onClick={() => handleUpdatePermissionClick(permission)}
-                    >
-                      <EditIcon />
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip title="Delete Permission">
-                    <IconButton
-                      color="error"
-                      onClick={() => handleDeletePermissionClick(permission)}
-                    >
-                      <DeleteForeverIcon />
-                    </IconButton>
-                  </Tooltip>
-                </BootstrapTableCell>
-              )}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
-}
-
-const displayPrincipal = (permission: PermissionResponse) => {
-  if (permission.user) return permission.user.username
-  if (permission.group) return <DisplayGroup group={permission.group} />
-}
-
-type DisplayGroupProps = {
-  group: GroupDetailsResponse
-}
-
-const DisplayGroup = ({ group }: DisplayGroupProps) => {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-
-  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handlePopoverClose = () => {
-    setAnchorEl(null)
-  }
-
-  const open = Boolean(anchorEl)
-
-  return (
-    <div>
-      <Typography
-        aria-owns={open ? 'mouse-over-popover' : undefined}
-        aria-haspopup="true"
-        onMouseEnter={handlePopoverOpen}
-        onMouseLeave={handlePopoverClose}
-      >
-        {group.name}
-      </Typography>
-      <Popover
-        id="mouse-over-popover"
-        sx={{
-          pointerEvents: 'none'
-        }}
-        open={open}
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left'
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left'
-        }}
-        onClose={handlePopoverClose}
-        disableRestoreFocus
-      >
-        <Typography sx={{ p: 1 }} variant="h6" component="div">
-          Group Members
-        </Typography>
-        {group.users.map((user) => (
-          <Typography sx={{ p: 1 }} component="li">
-            {user.username}
-          </Typography>
-        ))}
-      </Popover>
-    </div>
-  )
-}
-
-const displayPrincipalType = (permission: PermissionResponse) => {
-  if (permission.user) return PrincipalType.User
-  if (permission.group) return PrincipalType.Group
-}
--- a/web/src/containers/Studio/editor.tsx
+++ b/web/src/containers/Studio/editor.tsx
@@ -1,47 +1,26 @@
-import React, { useEffect, useRef, useState, useContext } from 'react'
-import axios from 'axios'
+import React, { Dispatch, SetStateAction } from 'react'

 import {
  Backdrop,
  Box,
-  Button,
  CircularProgress,
-  FormControl,
-  IconButton,
-  Menu,
-  MenuItem,
  Paper,
-  Select,
-  SelectChangeEvent,
  Tab,
  Tooltip,
  Typography
 } from '@mui/material'
 import { styled } from '@mui/material/styles'

-import {
-  RocketLaunch,
-  MoreVert,
-  Save,
-  SaveAs,
-  Difference,
-  Edit
-} from '@mui/icons-material'
-import Editor, {
-  MonacoDiffEditor,
-  DiffEditorDidMount,
-  EditorDidMount,
-  monaco
-} from 'react-monaco-editor'
+import Editor, { MonacoDiffEditor } from 'react-monaco-editor'
 import { TabContext, TabList, TabPanel } from '@mui/lab'

-import { AppContext, RunTimeType } from '../../context/appContext'
-
 import FilePathInputModal from '../../components/filePathInputModal'
-import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
-import Modal from '../../components/modal'
+import FileMenu from './internal/components/fileMenu'
+import RunMenu from './internal/components/runMenu'

-import { usePrompt, useStateWithCallback } from '../../utils/hooks'
+import { usePrompt } from '../../utils/hooks'
+import { getLanguageFromExtension } from './internal/helper'
+import useEditor from './internal/hooks/useEditor'

 const StyledTabPanel = styled(TabPanel)(() => ({
  padding: '10px'
@@ -58,241 +37,76 @@ const StyledTab = styled(Tab)(() => ({
 type SASjsEditorProps = {
  selectedFilePath: string
  setSelectedFilePath: (filePath: string, refreshSideBar?: boolean) => void
+  tab: string
+  setTab: Dispatch<SetStateAction<string>>
 }

-const baseUrl = window.location.origin
-
 const SASjsEditor = ({
  selectedFilePath,
-  setSelectedFilePath
+  setSelectedFilePath,
+  tab,
+  setTab
 }: SASjsEditorProps) => {
-  const appContext = useContext(AppContext)
-  const [isLoading, setIsLoading] = useState(false)
-  const [openModal, setOpenModal] = useState(false)
-  const [modalTitle, setModalTitle] = useState('')
-  const [modalPayload, setModalPayload] = useState('')
-  const [openSnackbar, setOpenSnackbar] = useState(false)
-  const [snackbarMessage, setSnackbarMessage] = useState('')
-  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertSeverityType>(
-    AlertSeverityType.Success
-  )
-  const [prevFileContent, setPrevFileContent] = useStateWithCallback('')
-  const [fileContent, setFileContent] = useState('')
-  const [log, setLog] = useState('')
-  const [ctrlPressed, setCtrlPressed] = useState(false)
-  const [webout, setWebout] = useState('')
-  const [tab, setTab] = useState('1')
-  const [runTimes, setRunTimes] = useState<string[]>([])
-  const [selectedRunTime, setSelectedRunTime] = useState('')
-  const [selectedFileExtension, setSelectedFileExtension] = useState('')
-  const [openFilePathInputModal, setOpenFilePathInputModal] = useState(false)
-  const [showDiff, setShowDiff] = useState(false)
-
-  const editorRef = useRef(null as any)
-
-  const handleEditorDidMount: EditorDidMount = (editor) => {
-    editorRef.current = editor
-    editor.focus()
-    editor.addAction({
-      // An unique identifier of the contributed action.
-      id: 'show-difference',
-
-      // A label of the action that will be presented to the user.
-      label: 'Show Differences',
-
-      // An optional array of keybindings for the action.
-      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD],
-
-      contextMenuGroupId: 'navigation',
-
-      contextMenuOrder: 1,
-
-      // Method that will be executed when the action is triggered.
-      // @param editor The editor instance is passed in as a convenience
-      run: function (ed) {
-        setShowDiff(true)
-      }
-    })
-  }
-
-  const handleDiffEditorDidMount: DiffEditorDidMount = (diffEditor) => {
-    diffEditor.focus()
-    diffEditor.addCommand(monaco.KeyCode.Escape, function () {
-      setShowDiff(false)
-    })
-  }
+  const {
+    fileContent,
+    isLoading,
+    log,
+    openFilePathInputModal,
+    prevFileContent,
+    runTimes,
+    selectedFileExtension,
+    selectedRunTime,
+    showDiff,
+    webout,
+    Dialog,
+    handleChangeRunTime,
+    handleDiffEditorDidMount,
+    handleEditorDidMount,
+    handleFilePathInput,
+    handleRunBtnClick,
+    handleTabChange,
+    saveFile,
+    setShowDiff,
+    setOpenFilePathInputModal,
+    setFileContent,
+    Snackbar
+  } = useEditor({ selectedFilePath, setSelectedFilePath, setTab })

  usePrompt(
    'Changes you made may not be saved.',
    prevFileContent !== fileContent && !!selectedFilePath
  )

-  useEffect(() => {
-    setRunTimes(Object.values(appContext.runTimes))
-  }, [appContext.runTimes])
+  const fileMenu = (
+    <FileMenu
+      showDiff={showDiff}
+      setShowDiff={setShowDiff}
+      prevFileContent={prevFileContent}
+      currentFileContent={fileContent}
+      selectedFilePath={selectedFilePath}
+      setOpenFilePathInputModal={setOpenFilePathInputModal}
+      saveFile={saveFile}
+    />
+  )

-  useEffect(() => {
-    if (runTimes.length) setSelectedRunTime(runTimes[0])
-  }, [runTimes])
-
-  useEffect(() => {
-    if (selectedFilePath) {
-      setIsLoading(true)
-      setSelectedFileExtension(selectedFilePath.split('.').pop() ?? '')
-      axios
-        .get(`/SASjsApi/drive/file?_filePath=${selectedFilePath}`)
-        .then((res: any) => {
-          setPrevFileContent(res.data)
-          setFileContent(res.data)
-        })
-        .catch((err) => {
-          setModalTitle('Abort')
-          setModalPayload(
-            typeof err.response.data === 'object'
-              ? JSON.stringify(err.response.data)
-              : err.response.data
-          )
-          setOpenModal(true)
-        })
-        .finally(() => setIsLoading(false))
-    } else {
-      const content = localStorage.getItem('fileContent') ?? ''
-      setFileContent(content)
-    }
-    setLog('')
-    setWebout('')
-    setTab('1')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedFilePath])
-
-  useEffect(() => {
-    if (fileContent.length && !selectedFilePath) {
-      localStorage.setItem('fileContent', fileContent)
-    }
-  }, [fileContent, selectedFilePath])
-
-  useEffect(() => {
-    if (runTimes.includes(selectedFileExtension))
-      setSelectedRunTime(selectedFileExtension)
-  }, [selectedFileExtension, runTimes])
-
-  const handleTabChange = (_e: any, newValue: string) => {
-    setTab(newValue)
-  }
-
-  const getSelection = () => {
-    const editor = editorRef.current as any
-    const selection = editor?.getModel().getValueInRange(editor?.getSelection())
-    return selection ?? ''
-  }
-
-  const handleRunBtnClick = () => runCode(getSelection() || fileContent)
-
-  const runCode = (code: string) => {
-    setIsLoading(true)
-    axios
-      .post(`/SASjsApi/code/execute`, { code, runTime: selectedRunTime })
-      .then((res: any) => {
-        const parsedLog = res?.data?.log
-          .map((logLine: any) => logLine.line)
-          .join('\n')
-
-        setLog(parsedLog)
-
-        setWebout(`${res.data?._webout}`)
-        setTab('2')
-
-        // Scroll to bottom of log
-        window.scrollTo(0, document.body.scrollHeight)
-      })
-      .catch((err) => {
-        setModalTitle('Abort')
-        setModalPayload(
-          typeof err.response.data === 'object'
-            ? JSON.stringify(err.response.data)
-            : err.response.data
-        )
-        setOpenModal(true)
-      })
-      .finally(() => setIsLoading(false))
-  }
-
-  const handleKeyDown = (event: any) => {
-    if (event.ctrlKey) {
-      if (event.key === 'v') {
-        setCtrlPressed(false)
-      }
-
-      if (event.key === 'Enter') runCode(getSelection() || fileContent)
-      if (!ctrlPressed) setCtrlPressed(true)
-    }
-  }
-
-  const handleKeyUp = (event: any) => {
-    if (!event.ctrlKey && ctrlPressed) setCtrlPressed(false)
-  }
-
-  const handleChangeRunTime = (event: SelectChangeEvent) => {
-    setSelectedRunTime(event.target.value as RunTimeType)
-  }
-
-  const handleFilePathInput = (filePath: string) => {
-    setOpenFilePathInputModal(false)
-    saveFile(filePath)
-  }
-
-  const saveFile = (filePath?: string) => {
-    setIsLoading(true)
-
-    if (filePath) {
-      filePath = filePath.startsWith('/') ? filePath : `/${filePath}`
-    }
-
-    const formData = new FormData()
-
-    const stringBlob = new Blob([fileContent], { type: 'text/plain' })
-    formData.append('file', stringBlob, 'filename.sas')
-    formData.append('filePath', filePath ?? selectedFilePath)
-
-    const axiosPromise = filePath
-      ? axios.post('/SASjsApi/drive/file', formData)
-      : axios.patch('/SASjsApi/drive/file', formData)
-
-    axiosPromise
-      .then(() => {
-        if (filePath && fileContent === prevFileContent) {
-          // when fileContent and prevFileContent is same,
-          // callback function in setPrevFileContent method is not called
-          // because behind the scene useEffect hook is being used
-          // for calling callback function, and it's only fired when the
-          // new value is not equal to old value.
-          // So, we'll have to explicitly update the selected file path
-
-          setSelectedFilePath(filePath, true)
-        } else {
-          setPrevFileContent(fileContent, () => {
-            if (filePath) {
-              setSelectedFilePath(filePath, true)
-            }
-          })
-        }
-        setSnackbarMessage('File saved!')
-        setSnackbarSeverity(AlertSeverityType.Success)
-        setOpenSnackbar(true)
-      })
-      .catch((err) => {
-        setModalTitle('Abort')
-        setModalPayload(
-          typeof err.response.data === 'object'
-            ? JSON.stringify(err.response.data)
-            : err.response.data
-        )
-        setOpenModal(true)
-      })
-      .finally(() => {
-        setIsLoading(false)
-      })
-  }
+  const monacoEditor = showDiff ? (
+    <MonacoDiffEditor
+      height="98%"
+      language={getLanguageFromExtension(selectedFileExtension)}
+      original={prevFileContent}
+      value={fileContent}
+      editorDidMount={handleDiffEditorDidMount}
+      onChange={(val) => setFileContent(val)}
+    />
+  ) : (
+    <Editor
+      height="98%"
+      language={getLanguageFromExtension(selectedFileExtension)}
+      value={fileContent}
+      editorDidMount={handleEditorDidMount}
+      onChange={(val) => setFileContent(val)}
+    />
+  )

  return (
    <Box sx={{ width: '100%', typography: 'body1', marginTop: '50px' }}>
@@ -305,15 +119,7 @@ const SASjsEditor = ({
      {selectedFilePath && !runTimes.includes(selectedFileExtension) ? (
        <Box sx={{ marginTop: '10px' }}>
          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-            <FileMenu
-              showDiff={showDiff}
-              setShowDiff={setShowDiff}
-              prevFileContent={prevFileContent}
-              currentFileContent={fileContent}
-              selectedFilePath={selectedFilePath}
-              setOpenFilePathInputModal={setOpenFilePathInputModal}
-              saveFile={saveFile}
-            />
+            {fileMenu}
          </Box>
          <Paper
            sx={{
@@ -325,26 +131,7 @@ const SASjsEditor = ({
            }}
            elevation={3}
          >
-            {showDiff ? (
-              <MonacoDiffEditor
-                height="98%"
-                language={getLanguage(selectedFileExtension)}
-                original={prevFileContent}
-                value={fileContent}
-                editorDidMount={handleDiffEditorDidMount}
-                options={{ readOnly: ctrlPressed }}
-                onChange={(val) => setFileContent(val)}
-              />
-            ) : (
-              <Editor
-                height="98%"
-                language={getLanguage(selectedFileExtension)}
-                value={fileContent}
-                editorDidMount={handleEditorDidMount}
-                options={{ readOnly: ctrlPressed }}
-                onChange={(val) => setFileContent(val)}
-              />
-            )}
+            {monacoEditor}
          </Paper>
        </Box>
      ) : (
@@ -353,29 +140,24 @@ const SASjsEditor = ({
            sx={{
              borderBottom: 1,
              borderColor: 'divider',
-              position: 'fixed',
-              background: 'white',
-              width: '85%'
+              background: 'white'
            }}
          >
            <TabList onChange={handleTabChange} centered>
-              <StyledTab label="Code" value="1" />
-              <StyledTab label="Log" value="2" />
+              <StyledTab label="Code" value="code" />
+              <StyledTab label="Log" value="log" />
              <StyledTab
                label={
                  <Tooltip title="Displays content from the _webout fileref">
                    <Typography>Webout</Typography>
                  </Tooltip>
                }
-                value="3"
+                value="webout"
              />
            </TabList>
          </Box>

-          <StyledTabPanel
-            sx={{ paddingBottom: 0, marginTop: '45px' }}
-            value="1"
-          >
+          <StyledTabPanel sx={{ paddingBottom: 0 }} value="code">
            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
              <RunMenu
                fileContent={fileContent}
@@ -386,19 +168,9 @@ const SASjsEditor = ({
                handleChangeRunTime={handleChangeRunTime}
                handleRunBtnClick={handleRunBtnClick}
              />
-              <FileMenu
-                showDiff={showDiff}
-                setShowDiff={setShowDiff}
-                prevFileContent={prevFileContent}
-                currentFileContent={fileContent}
-                selectedFilePath={selectedFilePath}
-                setOpenFilePathInputModal={setOpenFilePathInputModal}
-                saveFile={saveFile}
-              />
+              {fileMenu}
            </Box>
            <Paper
-              onKeyUp={handleKeyUp}
-              onKeyDown={handleKeyDown}
              sx={{
                height: 'calc(100vh - 170px)',
                padding: '10px',
@@ -407,26 +179,7 @@ const SASjsEditor = ({
              }}
              elevation={3}
            >
-              {showDiff ? (
-                <MonacoDiffEditor
-                  height="98%"
-                  language={getLanguage(selectedFileExtension)}
-                  original={prevFileContent}
-                  value={fileContent}
-                  editorDidMount={handleDiffEditorDidMount}
-                  options={{ readOnly: ctrlPressed }}
-                  onChange={(val) => setFileContent(val)}
-                />
-              ) : (
-                <Editor
-                  height="98%"
-                  language={getLanguage(selectedFileExtension)}
-                  value={fileContent}
-                  editorDidMount={handleEditorDidMount}
-                  options={{ readOnly: ctrlPressed }}
-                  onChange={(val) => setFileContent(val)}
-                />
-              )}
+              {monacoEditor}
              <p
                style={{
                  position: 'absolute',
@@ -441,31 +194,23 @@ const SASjsEditor = ({
              </p>
            </Paper>
          </StyledTabPanel>
-          <StyledTabPanel value="2">
-            <div style={{ marginTop: '50px' }}>
-              <h2>SAS Log</h2>
-              <pre>{log}</pre>
+          <StyledTabPanel value="log">
+            <div>
+              <h2>Log</h2>
+              <pre id="log" style={{ overflow: 'auto', height: '75vh' }}>
+                {log}
+              </pre>
            </div>
          </StyledTabPanel>
-          <StyledTabPanel value="3">
-            <div style={{ marginTop: '50px' }}>
+          <StyledTabPanel value="webout">
+            <div>
              <pre>{webout}</pre>
            </div>
          </StyledTabPanel>
        </TabContext>
      )}
-      <Modal
-        open={openModal}
-        setOpen={setOpenModal}
-        title={modalTitle}
-        payload={modalPayload}
-      />
-      <BootstrapSnackbar
-        open={openSnackbar}
-        setOpen={setOpenSnackbar}
-        message={snackbarMessage}
-        severity={snackbarSeverity}
-      />
+      <Dialog />
+      <Snackbar />
      <FilePathInputModal
        open={openFilePathInputModal}
        setOpen={setOpenFilePathInputModal}
@@ -476,203 +221,3 @@ const SASjsEditor = ({
 }

 export default SASjsEditor
-
-type RunMenuProps = {
-  selectedFilePath: string
-  fileContent: string
-  prevFileContent: string
-  selectedRunTime: string
-  runTimes: string[]
-  handleChangeRunTime: (event: SelectChangeEvent) => void
-  handleRunBtnClick: () => void
-}
-
-const RunMenu = ({
-  selectedFilePath,
-  fileContent,
-  prevFileContent,
-  selectedRunTime,
-  runTimes,
-  handleChangeRunTime,
-  handleRunBtnClick
-}: RunMenuProps) => {
-  const launchProgram = () => {
-    window.open(`${baseUrl}/SASjsApi/stp/execute?_program=${selectedFilePath}`)
-  }
-
-  return (
-    <>
-      <Tooltip title="CTRL+ENTER will also run code">
-        <Button
-          onClick={handleRunBtnClick}
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            padding: '5px 5px',
-            minWidth: 'unset'
-          }}
-        >
-          <img
-            alt=""
-            draggable="false"
-            style={{ width: '25px' }}
-            src="/running-sas.png"
-          ></img>
-          <span style={{ fontSize: '12px' }}>RUN</span>
-        </Button>
-      </Tooltip>
-      {selectedFilePath ? (
-        <Box sx={{ marginLeft: '10px' }}>
-          <Tooltip
-            title={
-              fileContent !== prevFileContent
-                ? 'Save file before launching program'
-                : 'Launch program in new window'
-            }
-          >
-            <span>
-              <IconButton
-                disabled={fileContent !== prevFileContent}
-                onClick={launchProgram}
-              >
-                <RocketLaunch />
-              </IconButton>
-            </span>
-          </Tooltip>
-        </Box>
-      ) : (
-        <Box sx={{ minWidth: '75px', marginLeft: '10px' }}>
-          <FormControl variant="standard">
-            <Select
-              labelId="run-time-select-label"
-              id="run-time-select"
-              value={selectedRunTime}
-              onChange={handleChangeRunTime}
-            >
-              {runTimes.map((runTime) => (
-                <MenuItem key={runTime} value={runTime}>
-                  {runTime}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        </Box>
-      )}
-    </>
-  )
-}
-
-type FileMenuProps = {
-  showDiff: boolean
-  setShowDiff: React.Dispatch<React.SetStateAction<boolean>>
-  prevFileContent: string
-  currentFileContent: string
-  selectedFilePath: string
-  setOpenFilePathInputModal: React.Dispatch<React.SetStateAction<boolean>>
-  saveFile: () => void
-}
-
-const FileMenu = ({
-  showDiff,
-  setShowDiff,
-  prevFileContent,
-  currentFileContent,
-  selectedFilePath,
-  setOpenFilePathInputModal,
-  saveFile
-}: FileMenuProps) => {
-  const [anchorEl, setAnchorEl] = useState<
-    (EventTarget & HTMLButtonElement) | null
-  >(null)
-
-  const handleMenu = (
-    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
-    if (event) setAnchorEl(event.currentTarget)
-    else setAnchorEl(null)
-  }
-
-  const handleDiffBtnClick = () => {
-    setAnchorEl(null)
-    setShowDiff(!showDiff)
-  }
-
-  const handleSaveAsBtnClick = () => {
-    setAnchorEl(null)
-    setOpenFilePathInputModal(true)
-  }
-
-  const handleSaveBtnClick = () => {
-    setAnchorEl(null)
-    saveFile()
-  }
-
-  return (
-    <>
-      <Tooltip title="Save File Menu">
-        <IconButton onClick={handleMenu}>
-          <MoreVert />
-        </IconButton>
-      </Tooltip>
-      <Menu
-        id="save-file-menu"
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center'
-        }}
-        keepMounted
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'center'
-        }}
-        open={!!anchorEl}
-        onClose={() => handleMenu()}
-      >
-        <MenuItem sx={{ justifyContent: 'center' }}>
-          <Button
-            onClick={handleDiffBtnClick}
-            variant="contained"
-            color="primary"
-            startIcon={showDiff ? <Edit /> : <Difference />}
-          >
-            {showDiff ? 'Edit' : 'Diff'}
-          </Button>
-        </MenuItem>
-        <MenuItem sx={{ justifyContent: 'center' }}>
-          <Button
-            onClick={handleSaveBtnClick}
-            variant="contained"
-            color="primary"
-            startIcon={<Save />}
-            disabled={
-              !selectedFilePath || prevFileContent === currentFileContent
-            }
-          >
-            Save
-          </Button>
-        </MenuItem>
-        <MenuItem sx={{ justifyContent: 'center' }}>
-          <Button
-            onClick={handleSaveAsBtnClick}
-            variant="contained"
-            color="primary"
-            startIcon={<SaveAs />}
-          >
-            Save As
-          </Button>
-        </MenuItem>
-      </Menu>
-    </>
-  )
-}
-
-const getLanguage = (extension: string) => {
-  if (extension === 'js') return 'javascript'
-
-  if (extension === 'ts') return 'typescript'
-
-  if (extension === 'md' || extension === 'mdx') return 'markdown'
-
-  return extension
-}
--- a/web/src/containers/Studio/index.tsx
+++ b/web/src/containers/Studio/index.tsx
@@ -14,6 +14,7 @@ const Studio = () => {
  const [searchParams, setSearchParams] = useSearchParams()
  const [selectedFilePath, setSelectedFilePath] = useState('')
  const [directoryData, setDirectoryData] = useState<TreeNode | null>(null)
+  const [tab, setTab] = useState('code')

  useEffect(() => {
    setSelectedFilePath(searchParams.get('filePath') ?? '')
@@ -83,16 +84,20 @@ const Studio = () => {
  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
-      <SideBar
-        selectedFilePath={selectedFilePath}
-        directoryData={directoryData}
-        handleSelect={handleSelect}
-        removeFileFromTree={removeFileFromTree}
-        refreshSideBar={fetchDirectoryData}
-      />
+      {tab === 'code' && (
+        <SideBar
+          selectedFilePath={selectedFilePath}
+          directoryData={directoryData}
+          handleSelect={handleSelect}
+          removeFileFromTree={removeFileFromTree}
+          refreshSideBar={fetchDirectoryData}
+        />
+      )}
      <SASjsEditor
        selectedFilePath={selectedFilePath}
        setSelectedFilePath={handleSelect}
+        tab={tab}
+        setTab={setTab}
      />
    </Box>
  )
--- a/web/src/containers/Studio/internal/components/fileMenu.tsx
+++ b/web/src/containers/Studio/internal/components/fileMenu.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react'
+
+import { Button, IconButton, Menu, MenuItem, Tooltip } from '@mui/material'
+
+import { MoreVert, Save, SaveAs, Difference, Edit } from '@mui/icons-material'
+
+type FileMenuProps = {
+  showDiff: boolean
+  setShowDiff: React.Dispatch<React.SetStateAction<boolean>>
+  prevFileContent: string
+  currentFileContent: string
+  selectedFilePath: string
+  setOpenFilePathInputModal: React.Dispatch<React.SetStateAction<boolean>>
+  saveFile: () => void
+}
+
+const FileMenu = ({
+  showDiff,
+  setShowDiff,
+  prevFileContent,
+  currentFileContent,
+  selectedFilePath,
+  setOpenFilePathInputModal,
+  saveFile
+}: FileMenuProps) => {
+  const [anchorEl, setAnchorEl] = useState<
+    (EventTarget & HTMLButtonElement) | null
+  >(null)
+
+  const handleMenu = (
+    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    if (event) setAnchorEl(event.currentTarget)
+    else setAnchorEl(null)
+  }
+
+  const handleDiffBtnClick = () => {
+    setAnchorEl(null)
+    setShowDiff(!showDiff)
+  }
+
+  const handleSaveAsBtnClick = () => {
+    setAnchorEl(null)
+    setOpenFilePathInputModal(true)
+  }
+
+  const handleSaveBtnClick = () => {
+    setAnchorEl(null)
+    saveFile()
+  }
+
+  return (
+    <>
+      <Tooltip title="Save File Menu">
+        <IconButton onClick={handleMenu}>
+          <MoreVert />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        id="save-file-menu"
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center'
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center'
+        }}
+        open={!!anchorEl}
+        onClose={() => handleMenu()}
+      >
+        <MenuItem sx={{ justifyContent: 'center' }}>
+          <Button
+            onClick={handleDiffBtnClick}
+            variant="contained"
+            color="primary"
+            startIcon={showDiff ? <Edit /> : <Difference />}
+          >
+            {showDiff ? 'Edit' : 'Diff'}
+          </Button>
+        </MenuItem>
+        <MenuItem sx={{ justifyContent: 'center' }}>
+          <Button
+            onClick={handleSaveBtnClick}
+            variant="contained"
+            color="primary"
+            startIcon={<Save />}
+            disabled={
+              !selectedFilePath || prevFileContent === currentFileContent
+            }
+          >
+            Save
+          </Button>
+        </MenuItem>
+        <MenuItem sx={{ justifyContent: 'center' }}>
+          <Button
+            onClick={handleSaveAsBtnClick}
+            variant="contained"
+            color="primary"
+            startIcon={<SaveAs />}
+          >
+            Save As
+          </Button>
+        </MenuItem>
+      </Menu>
+    </>
+  )
+}
+
+export default FileMenu
--- a/web/src/containers/Studio/internal/components/runMenu.tsx
+++ b/web/src/containers/Studio/internal/components/runMenu.tsx
@@ -0,0 +1,100 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  IconButton,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Tooltip
+} from '@mui/material'
+
+import { RocketLaunch } from '@mui/icons-material'
+
+type RunMenuProps = {
+  selectedFilePath: string
+  fileContent: string
+  prevFileContent: string
+  selectedRunTime: string
+  runTimes: string[]
+  handleChangeRunTime: (event: SelectChangeEvent) => void
+  handleRunBtnClick: () => void
+}
+
+const RunMenu = ({
+  selectedFilePath,
+  fileContent,
+  prevFileContent,
+  selectedRunTime,
+  runTimes,
+  handleChangeRunTime,
+  handleRunBtnClick
+}: RunMenuProps) => {
+  const launchProgram = () => {
+    const baseUrl = window.location.origin
+    window.open(`${baseUrl}/SASjsApi/stp/execute?_program=${selectedFilePath}`)
+  }
+
+  return (
+    <>
+      <Tooltip title="CTRL+ENTER will also run code">
+        <Button
+          onClick={handleRunBtnClick}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            padding: '5px 5px',
+            minWidth: 'unset'
+          }}
+        >
+          <img
+            alt=""
+            draggable="false"
+            style={{ width: '25px' }}
+            src="/running-sas.png"
+          ></img>
+          <span style={{ fontSize: '12px' }}>RUN</span>
+        </Button>
+      </Tooltip>
+      {selectedFilePath ? (
+        <Box sx={{ marginLeft: '10px' }}>
+          <Tooltip
+            title={
+              fileContent !== prevFileContent
+                ? 'Save file before launching program'
+                : 'Launch program in new window'
+            }
+          >
+            <span>
+              <IconButton
+                disabled={fileContent !== prevFileContent}
+                onClick={launchProgram}
+              >
+                <RocketLaunch />
+              </IconButton>
+            </span>
+          </Tooltip>
+        </Box>
+      ) : (
+        <Box sx={{ minWidth: '75px', marginLeft: '10px' }}>
+          <FormControl variant="standard">
+            <Select
+              labelId="run-time-select-label"
+              id="run-time-select"
+              value={selectedRunTime}
+              onChange={handleChangeRunTime}
+            >
+              {runTimes.map((runTime) => (
+                <MenuItem key={runTime} value={runTime}>
+                  {runTime}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+      )}
+    </>
+  )
+}
+
+export default RunMenu
--- a/web/src/containers/Studio/internal/helper.ts
+++ b/web/src/containers/Studio/internal/helper.ts
@@ -0,0 +1,39 @@
+import { RunTimeType } from '../../../context/appContext'
+
+export const getLanguageFromExtension = (extension: string) => {
+  if (extension === 'js') return 'javascript'
+
+  if (extension === 'ts') return 'typescript'
+
+  if (extension === 'md' || extension === 'mdx') return 'markdown'
+
+  return extension
+}
+
+export const getSelection = (editor: any) => {
+  const selection = editor?.getModel().getValueInRange(editor?.getSelection())
+  return selection ?? ''
+}
+
+export const programPathInjection = (
+  code: string,
+  path: string,
+  runtime: RunTimeType
+) => {
+  if (path) {
+    if (runtime === RunTimeType.JS) {
+      return `const _PROGRAM = '${path}';\n${code}`
+    }
+    if (runtime === RunTimeType.PY) {
+      return `_PROGRAM = '${path}';\n${code}`
+    }
+    if (runtime === RunTimeType.R) {
+      return `._PROGRAM = '${path}';\n${code}`
+    }
+    if (runtime === RunTimeType.SAS) {
+      return `%let _program = ${path};\n${code}`
+    }
+  }
+
+  return code
+}
--- a/web/src/containers/Studio/internal/hooks/useEditor.ts
+++ b/web/src/containers/Studio/internal/hooks/useEditor.ts
@@ -0,0 +1,319 @@
+import axios from 'axios'
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react'
+import { DiffEditorDidMount, EditorDidMount, monaco } from 'react-monaco-editor'
+import { SelectChangeEvent } from '@mui/material'
+import { getSelection, programPathInjection } from '../helper'
+import { AppContext, RunTimeType } from '../../../../context/appContext'
+import { AlertSeverityType } from '../../../../components/snackbar'
+import {
+  useModal,
+  useSnackbar,
+  useStateWithCallback
+} from '../../../../utils/hooks'
+
+const SASJS_LOGS_SEPARATOR =
+  'SASJS_LOGS_SEPARATOR_163ee17b6ff24f028928972d80a26784'
+
+type UseEditorParams = {
+  selectedFilePath: string
+  setSelectedFilePath: (filePath: string, refreshSideBar?: boolean) => void
+  setTab: Dispatch<SetStateAction<string>>
+}
+
+const useEditor = ({
+  selectedFilePath,
+  setSelectedFilePath,
+  setTab
+}: UseEditorParams) => {
+  const appContext = useContext(AppContext)
+  const { Dialog, setOpenModal, setModalTitle, setModalPayload } = useModal()
+  const { Snackbar, setOpenSnackbar, setSnackbarMessage, setSnackbarSeverity } =
+    useSnackbar()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const [prevFileContent, setPrevFileContent] = useStateWithCallback('')
+  const [fileContent, setFileContent] = useState('')
+  const [log, setLog] = useState('')
+  const [webout, setWebout] = useState('')
+  const [runTimes, setRunTimes] = useState<string[]>([])
+  const [selectedRunTime, setSelectedRunTime] = useState('')
+  const [selectedFileExtension, setSelectedFileExtension] = useState('')
+  const [openFilePathInputModal, setOpenFilePathInputModal] = useState(false)
+  const [showDiff, setShowDiff] = useState(false)
+
+  const editorRef = useRef(null as any)
+
+  const handleEditorDidMount: EditorDidMount = (editor) => {
+    editorRef.current = editor
+    editor.focus()
+    editor.addAction({
+      // An unique identifier of the contributed action.
+      id: 'show-difference',
+
+      // A label of the action that will be presented to the user.
+      label: 'Show Differences',
+
+      // An optional array of keybindings for the action.
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD],
+
+      contextMenuGroupId: 'navigation',
+
+      contextMenuOrder: 1,
+
+      // Method that will be executed when the action is triggered.
+      // @param editor The editor instance is passed in as a convenience
+      run: function (ed) {
+        setShowDiff(true)
+      }
+    })
+  }
+
+  const handleDiffEditorDidMount: DiffEditorDidMount = (diffEditor) => {
+    diffEditor.focus()
+    diffEditor.addCommand(monaco.KeyCode.Escape, function () {
+      setShowDiff(false)
+    })
+  }
+
+  const saveFile = useCallback(
+    (filePath?: string) => {
+      setIsLoading(true)
+
+      if (filePath) {
+        filePath = filePath.startsWith('/') ? filePath : `/${filePath}`
+      }
+
+      const formData = new FormData()
+
+      const stringBlob = new Blob([fileContent], { type: 'text/plain' })
+      formData.append('file', stringBlob)
+      formData.append('filePath', filePath ?? selectedFilePath)
+
+      const axiosPromise = filePath
+        ? axios.post('/SASjsApi/drive/file', formData)
+        : axios.patch('/SASjsApi/drive/file', formData)
+
+      axiosPromise
+        .then(() => {
+          if (filePath && fileContent === prevFileContent) {
+            // when fileContent and prevFileContent is same,
+            // callback function in setPrevFileContent method is not called
+            // because behind the scene useEffect hook is being used
+            // for calling callback function, and it's only fired when the
+            // new value is not equal to old value.
+            // So, we'll have to explicitly update the selected file path
+
+            setSelectedFilePath(filePath, true)
+          } else {
+            setPrevFileContent(fileContent, () => {
+              if (filePath) {
+                setSelectedFilePath(filePath, true)
+              }
+            })
+          }
+          setSnackbarMessage('File saved!')
+          setSnackbarSeverity(AlertSeverityType.Success)
+          setOpenSnackbar(true)
+        })
+        .catch((err) => {
+          setModalTitle('Abort')
+          setModalPayload(
+            typeof err.response.data === 'object'
+              ? JSON.stringify(err.response.data)
+              : err.response.data
+          )
+          setOpenModal(true)
+        })
+        .finally(() => {
+          setIsLoading(false)
+        })
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fileContent, prevFileContent, selectedFilePath]
+  )
+
+  const handleTabChange = (_e: any, newValue: string) => {
+    setTab(newValue)
+  }
+
+  const handleRunBtnClick = () =>
+    runCode(getSelection(editorRef.current as any) || fileContent)
+
+  const runCode = useCallback(
+    (code: string) => {
+      setIsLoading(true)
+      axios
+        .post(`/SASjsApi/code/execute`, {
+          code: programPathInjection(
+            code,
+            selectedFilePath,
+            selectedRunTime as RunTimeType
+          ),
+          runTime: selectedRunTime
+        })
+        .then((res: any) => {
+          setWebout(res.data.split(SASJS_LOGS_SEPARATOR)[0] ?? '')
+          setLog(res.data.split(SASJS_LOGS_SEPARATOR)[1] ?? '')
+          setTab('log')
+
+          // Scroll to bottom of log
+          const logElement = document.getElementById('log')
+          if (logElement) logElement.scrollTop = logElement.scrollHeight
+        })
+        .catch((err) => {
+          setModalTitle('Abort')
+          setModalPayload(
+            typeof err.response.data === 'object'
+              ? JSON.stringify(err.response.data)
+              : err.response.data
+          )
+          setOpenModal(true)
+        })
+        .finally(() => setIsLoading(false))
+    },
+    [
+      selectedFilePath,
+      selectedRunTime,
+      setModalPayload,
+      setModalTitle,
+      setOpenModal,
+      setTab
+    ]
+  )
+
+  const handleChangeRunTime = (event: SelectChangeEvent) => {
+    setSelectedRunTime(event.target.value as RunTimeType)
+  }
+
+  const handleFilePathInput = (filePath: string) => {
+    setOpenFilePathInputModal(false)
+    saveFile(filePath)
+  }
+
+  useEffect(() => {
+    editorRef.current.addAction({
+      // An unique identifier of the contributed action.
+      id: 'save-file',
+
+      // A label of the action that will be presented to the user.
+      label: 'Save',
+
+      // An optional array of keybindings for the action.
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+
+      // Method that will be executed when the action is triggered.
+      // @param editor The editor instance is passed in as a convenience
+      run: () => {
+        if (!selectedFilePath) return setOpenFilePathInputModal(true)
+        if (prevFileContent !== fileContent) return saveFile()
+      }
+    })
+
+    editorRef.current.addAction({
+      // An unique identifier of the contributed action.
+      id: 'run-code',
+
+      // A label of the action that will be presented to the user.
+      label: 'Run Code',
+
+      // An optional array of keybindings for the action.
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+
+      contextMenuGroupId: 'navigation',
+
+      contextMenuOrder: 1,
+
+      // Method that will be executed when the action is triggered.
+      // @param editor The editor instance is passed in as a convenience
+      run: function () {
+        runCode(getSelection(editorRef.current as any) || fileContent)
+      }
+    })
+  }, [fileContent, prevFileContent, selectedFilePath, saveFile, runCode])
+
+  useEffect(() => {
+    setRunTimes(Object.values(appContext.runTimes))
+  }, [appContext.runTimes])
+
+  useEffect(() => {
+    if (runTimes.length) setSelectedRunTime(runTimes[0])
+  }, [runTimes])
+
+  useEffect(() => {
+    if (selectedFilePath) {
+      setIsLoading(true)
+      setSelectedFileExtension(
+        selectedFilePath.split('.').pop()?.toLowerCase() ?? ''
+      )
+      axios
+        .get(`/SASjsApi/drive/file?_filePath=${selectedFilePath}`)
+        .then((res: any) => {
+          setPrevFileContent(res.data)
+          setFileContent(res.data)
+        })
+        .catch((err) => {
+          setModalTitle('Abort')
+          setModalPayload(
+            typeof err.response.data === 'object'
+              ? JSON.stringify(err.response.data)
+              : err.response.data
+          )
+          setOpenModal(true)
+        })
+        .finally(() => setIsLoading(false))
+    } else {
+      const content = localStorage.getItem('fileContent') ?? ''
+      setFileContent(content)
+    }
+    setLog('')
+    setWebout('')
+    setTab('code')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedFilePath])
+
+  useEffect(() => {
+    if (fileContent.length && !selectedFilePath) {
+      localStorage.setItem('fileContent', fileContent)
+    }
+  }, [fileContent, selectedFilePath])
+
+  useEffect(() => {
+    const fileExtension = selectedFileExtension.toLowerCase()
+    if (runTimes.includes(fileExtension)) setSelectedRunTime(fileExtension)
+  }, [selectedFileExtension, runTimes])
+
+  return {
+    fileContent,
+    isLoading,
+    log,
+    openFilePathInputModal,
+    prevFileContent,
+    runTimes,
+    selectedFileExtension,
+    selectedRunTime,
+    showDiff,
+    webout,
+    Dialog,
+    handleChangeRunTime,
+    handleDiffEditorDidMount,
+    handleEditorDidMount,
+    handleFilePathInput,
+    handleRunBtnClick,
+    handleTabChange,
+    saveFile,
+    setShowDiff,
+    setOpenFilePathInputModal,
+    setFileContent,
+    Snackbar
+  }
+}
+
+export default useEditor
--- a/web/src/containers/Studio/sideBar.tsx
+++ b/web/src/containers/Studio/sideBar.tsx
@@ -1,6 +1,15 @@
 import React, { useState, useMemo } from 'react'
 import axios from 'axios'
-import { Backdrop, Box, CircularProgress, Drawer, Toolbar } from '@mui/material'
+import {
+  Backdrop,
+  Box,
+  Paper,
+  CircularProgress,
+  Drawer,
+  Toolbar,
+  IconButton
+} from '@mui/material'
+import { FolderOpen } from '@mui/icons-material'

 import TreeView from '../../components/tree'
 import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
@@ -33,6 +42,17 @@ const SideBar = ({
  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertSeverityType>(
    AlertSeverityType.Success
  )
+  const [mobileOpen, setMobileOpen] = React.useState(false)
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen)
+  }
+
+  const handleFileSelect = (filePath: string) => {
+    setMobileOpen(false)
+    handleSelect(filePath)
+  }
+
  const defaultExpanded = useMemo(() => {
    const splittedPath = selectedFilePath.split('/')
    const arr = ['']
@@ -147,15 +167,8 @@ const SideBar = ({
      .finally(() => setIsLoading(false))
  }

-  return (
-    <Drawer
-      variant="permanent"
-      sx={{
-        width: drawerWidth,
-        flexShrink: 0,
-        [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' }
-      }}
-    >
+  const drawer = (
+    <div>
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={isLoading}
@@ -167,8 +180,7 @@ const SideBar = ({
        {directoryData && (
          <TreeView
            node={directoryData}
-            selectedFilePath={selectedFilePath}
-            handleSelect={handleSelect}
+            handleSelect={handleFileSelect}
            deleteNode={deleteNode}
            addFile={addFile}
            addFolder={addFolder}
@@ -189,7 +201,65 @@ const SideBar = ({
        title={modalTitle}
        payload={modalPayload}
      />
-    </Drawer>
+    </div>
+  )
+
+  return (
+    <>
+      <Box
+        component={Paper}
+        sx={{
+          margin: '5px',
+          height: '97vh',
+          paddingTop: '45px',
+          display: 'flex',
+          alignItems: 'flex-start'
+        }}
+      >
+        <IconButton
+          color="inherit"
+          size="large"
+          aria-label="open drawer"
+          edge="start"
+          onClick={handleDrawerToggle}
+          sx={{ left: '5px', display: { md: 'none' } }}
+        >
+          <FolderOpen />
+        </IconButton>
+      </Box>
+      <Drawer
+        variant="temporary"
+        open={mobileOpen}
+        onClose={handleDrawerToggle}
+        ModalProps={{
+          keepMounted: true // Better open performance on mobile.
+        }}
+        sx={{
+          display: { xs: 'block', md: 'none' },
+          flexShrink: 0,
+          [`& .MuiDrawer-paper`]: {
+            width: 240,
+            boxSizing: 'border-box'
+          }
+        }}
+      >
+        {drawer}
+      </Drawer>
+      <Drawer
+        variant="permanent"
+        sx={{
+          display: { xs: 'none', md: 'block' },
+          width: drawerWidth,
+          flexShrink: 0,
+          [`& .MuiDrawer-paper`]: {
+            width: drawerWidth,
+            boxSizing: 'border-box'
+          }
+        }}
+      >
+        {drawer}
+      </Drawer>
+    </>
  )
 }

--- a/Show More
+++ b/Show More