diff --git a/.docker/example.bake.Dockerfile b/.docker/example.bake.Dockerfile
index 692f1cfcd..032953622 100644
--- a/.docker/example.bake.Dockerfile
+++ b/.docker/example.bake.Dockerfile
@@ -16,14 +16,24 @@ FROM ubuntu:24.04 AS web-base
 
 #### DOCUMENTSERVER-EXAMPLE ####
 FROM web-base AS build-example
-ARG TARGETARCH
+    ARG TARGETARCH
+    ARG BRANDING_DIR
+    ARG COMPANY_NAME
 
-COPY document-server-integration/web/documentserver-example/nodejs/package*.json /app/
-RUN --mount=type=cache,target=/root/.npm cd /app && npm install
-COPY document-server-integration/web/documentserver-example/nodejs /app
-WORKDIR /app
-RUN TARGETARCH_PKG=$(echo "$TARGETARCH" | sed 's/amd64/x64/') && \
-pkg . -t linux-"$TARGETARCH_PKG" --node-options="--max_old_space_size=4096" -o /app/example
+    COPY document-server-integration/web/documentserver-example/nodejs/package*.json /app/
+    RUN --mount=type=cache,target=/root/.npm cd /app && npm install
+    COPY document-server-integration/web/documentserver-example/nodejs /app
+
+    ### Branding
+    ENV COMPANY_NAME=${COMPANY_NAME}
+    COPY ${BRANDING_DIR}/document-server-integration/web/documentserver-example/nodejs /app
+    RUN find /app/config/ -type f -name '*.json' \
+        -exec sed -i "s/Euro-Office/${COMPANY_NAME}/g" {} +
+
+
+    WORKDIR /app
+    RUN TARGETARCH_PKG=$(echo "$TARGETARCH" | sed 's/amd64/x64/') && \
+        pkg . -t linux-"$TARGETARCH_PKG" --node-options="--max_old_space_size=4096" -o /app/example
 
 FROM scratch AS example
     COPY --from=build-example /app/ /example
\ No newline at end of file
diff --git a/web/documentserver-example/csharp-mvc/Content/stylesheet.css b/web/documentserver-example/csharp-mvc/Content/stylesheet.css
index a753f1779..cfe877ad5 100644
--- a/web/documentserver-example/csharp-mvc/Content/stylesheet.css
+++ b/web/documentserver-example/csharp-mvc/Content/stylesheet.css
@@ -112,7 +112,7 @@ header img {
 }
 
 .portal-name {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 24px;
     font-weight: bold;
     line-height: 133%;
@@ -207,8 +207,8 @@ label .checkbox {
 }
 
 .button.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
@@ -219,7 +219,7 @@ label .checkbox {
 }
 
 .button.orange:not(.disable):hover {
-    background: #ff7a4b;
+    background: #00a5fd;
 }
 
 .button.gray {
@@ -234,8 +234,8 @@ label .checkbox {
 }
 
 .button.gray:not(.disable):hover {
-    border: 1px solid #FF6F3D;
-    color: #FF6F3D;
+    border: 1px solid #0082C9;
+    color: #0082C9;
 }
 
 .button.converting {
@@ -264,14 +264,14 @@ label .checkbox {
 }
 
 .button.hoar:not(.disable):hover {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
 .button.hoar.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
     cursor: default;
 }
@@ -370,11 +370,11 @@ label .checkbox {
 }
 
 .links li.active {
-    border-bottom: 2px solid #FF6F3D;
+    border-bottom: 2px solid #0082C9;
 }
 
 .links li.active a {
-    color: #FF6F3D;
+    color: #0082C9;
 }
 
 .links li.active a img {
@@ -490,7 +490,7 @@ label .checkbox {
 }
 
 .convertPercent {
-    color: #FF6F3D;
+    color: #0082C9;
     font-weight: 700;
     display: inline;
 }
@@ -553,7 +553,7 @@ footer table td {
 footer a,
 footer a:hover,
 footer a:visited {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 14px;
     line-height: 120%;
 }
diff --git a/web/documentserver-example/csharp/App_Themes/stylesheet.css b/web/documentserver-example/csharp/App_Themes/stylesheet.css
index 7c8e4037d..c61764899 100644
--- a/web/documentserver-example/csharp/App_Themes/stylesheet.css
+++ b/web/documentserver-example/csharp/App_Themes/stylesheet.css
@@ -112,7 +112,7 @@ header img {
 }
 
 .portal-name {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 24px;
     font-weight: bold;
     line-height: 133%;
@@ -207,8 +207,8 @@ label .checkbox {
 }
 
 .button.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
@@ -219,7 +219,7 @@ label .checkbox {
 }
 
 .button.orange:not(.disable):hover {
-    background: #ff7a4b;
+    background: #00a5fd;
 }
 
 .button.gray {
@@ -234,8 +234,8 @@ label .checkbox {
 }
 
 .button.gray:not(.disable):hover {
-    border: 1px solid #FF6F3D;
-    color: #FF6F3D;
+    border: 1px solid #0082C9;
+    color: #0082C9;
 }
 
 .button.converting {
@@ -264,14 +264,14 @@ label .checkbox {
 }
 
 .button.hoar:not(.disable):hover {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
 .button.hoar.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
     cursor: default;
 }
@@ -370,11 +370,11 @@ label .checkbox {
 }
 
 .links li.active {
-    border-bottom: 2px solid #FF6F3D;
+    border-bottom: 2px solid #0082C9;
 }
 
 .links li.active a {
-    color: #FF6F3D;
+    color: #0082C9;
 }
 
 .links li.active a img {
@@ -490,7 +490,7 @@ label .checkbox {
 }
 
 .convertPercent {
-    color: #FF6F3D;
+    color: #0082C9;
     font-weight: 700;
     display: inline;
 }
@@ -555,7 +555,7 @@ footer table td {
 footer a,
 footer a:hover,
 footer a:visited {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 14px;
     line-height: 120%;
 }
diff --git a/web/documentserver-example/go/static/stylesheets/stylesheet.css b/web/documentserver-example/go/static/stylesheets/stylesheet.css
index 37404c700..9022a36ab 100644
--- a/web/documentserver-example/go/static/stylesheets/stylesheet.css
+++ b/web/documentserver-example/go/static/stylesheets/stylesheet.css
@@ -112,7 +112,7 @@ header img {
 }
 
 .portal-name {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 24px;
     font-weight: bold;
     line-height: 133%;
@@ -207,8 +207,8 @@ label .checkbox {
 }
 
 .button.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
@@ -219,7 +219,7 @@ label .checkbox {
 }
 
 .button.orange:not(.disable):hover {
-    background: #ff7a4b;
+    background: #00a5fd;
 }
 
 .button.gray {
@@ -234,8 +234,8 @@ label .checkbox {
 }
 
 .button.gray:not(.disable):hover {
-    border: 1px solid #FF6F3D;
-    color: #FF6F3D;
+    border: 1px solid #0082C9;
+    color: #0082C9;
 }
 
 .button.converting {
@@ -264,14 +264,14 @@ label .checkbox {
 }
 
 .button.hoar:not(.disable):hover {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
 .button.hoar.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
     cursor: default;
 }
@@ -370,11 +370,11 @@ label .checkbox {
 }
 
 .links li.active {
-    border-bottom: 2px solid #FF6F3D;
+    border-bottom: 2px solid #0082C9;
 }
 
 .links li.active a {
-    color: #FF6F3D;
+    color: #0082C9;
 }
 
 .links li.active a img {
@@ -490,7 +490,7 @@ label .checkbox {
 }
 
 .convertPercent {
-    color: #FF6F3D;
+    color: #0082C9;
     font-weight: 700;
     display: inline;
 }
@@ -553,7 +553,7 @@ footer table td {
 footer a, 
 footer a:hover, 
 footer a:visited {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 14px;
     line-height: 120%; 
 }
diff --git a/web/documentserver-example/java-spring/src/main/resources/static/css/stylesheet.css b/web/documentserver-example/java-spring/src/main/resources/static/css/stylesheet.css
index 41720951f..33c440aed 100755
--- a/web/documentserver-example/java-spring/src/main/resources/static/css/stylesheet.css
+++ b/web/documentserver-example/java-spring/src/main/resources/static/css/stylesheet.css
@@ -112,7 +112,7 @@ header img {
 }
 
 .portal-name {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 24px;
     font-weight: bold;
     line-height: 133%;
@@ -207,8 +207,8 @@ label .checkbox {
 }
 
 .button.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
@@ -219,7 +219,7 @@ label .checkbox {
 }
 
 .button.orange:not(.disable):hover{
-    background: #ff7a4b;
+    background: #00a5fd;
 }
 
 .button.gray {
@@ -234,8 +234,8 @@ label .checkbox {
 }
 
 .button.gray:not(.disable):hover {
-    border: 1px solid #FF6F3D;
-    color: #FF6F3D;
+    border: 1px solid #0082C9;
+    color: #0082C9;
 }
 
 .button.converting {
@@ -264,14 +264,14 @@ label .checkbox {
 }
 
 .button.hoar:not(.disable):hover {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
 .button.hoar.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
     cursor: default;
 }
@@ -370,11 +370,11 @@ label .checkbox {
 }
 
 .links li.active {
-    border-bottom: 2px solid #FF6F3D;
+    border-bottom: 2px solid #0082C9;
 }
 
 .links li.active a {
-    color: #FF6F3D;
+    color: #0082C9;
 }
 
 .links li.active a img {
@@ -490,7 +490,7 @@ label .checkbox {
 }
 
 .convertPercent {
-    color: #FF6F3D;
+    color: #0082C9;
     font-weight: 700;
     display: inline;
 }
@@ -555,7 +555,7 @@ footer table td {
 footer a,
 footer a:hover,
 footer a:visited {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 14px;
     line-height: 120%;
 }
diff --git a/web/documentserver-example/java/src/main/webapp/css/stylesheet.css b/web/documentserver-example/java/src/main/webapp/css/stylesheet.css
index 9126a4654..9855f586c 100644
--- a/web/documentserver-example/java/src/main/webapp/css/stylesheet.css
+++ b/web/documentserver-example/java/src/main/webapp/css/stylesheet.css
@@ -112,7 +112,7 @@ header img {
 }
 
 .portal-name {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 24px;
     font-weight: bold;
     line-height: 133%;
@@ -207,8 +207,8 @@ label .checkbox {
 }
 
 .button.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
@@ -219,7 +219,7 @@ label .checkbox {
 }
 
 .button.orange:not(.disable):hover{
-    background: #ff7a4b;
+    background: #00a5fd;
 }
 
 .button.gray {
@@ -234,8 +234,8 @@ label .checkbox {
 }
 
 .button.gray:not(.disable):hover {
-    border: 1px solid #FF6F3D;
-    color: #FF6F3D;
+    border: 1px solid #0082C9;
+    color: #0082C9;
 }
 
 .button.converting {
@@ -264,14 +264,14 @@ label .checkbox {
 }
 
 .button.hoar:not(.disable):hover {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
 .button.hoar.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
     cursor: default;
 }
@@ -370,11 +370,11 @@ label .checkbox {
 }
 
 .links li.active {
-    border-bottom: 2px solid #FF6F3D;
+    border-bottom: 2px solid #0082C9;
 }
 
 .links li.active a {
-    color: #FF6F3D;
+    color: #0082C9;
 }
 
 .links li.active a img {
@@ -490,7 +490,7 @@ label .checkbox {
 }
 
 .convertPercent {
-    color: #FF6F3D;
+    color: #0082C9;
     font-weight: 700;
     display: inline;
 }
@@ -555,7 +555,7 @@ footer table td {
 footer a,
 footer a:hover,
 footer a:visited {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 14px;
     line-height: 120%;
 }
diff --git a/web/documentserver-example/nodejs/app.js b/web/documentserver-example/nodejs/app.js
index cb3ee8834..4f49b8e63 100755
--- a/web/documentserver-example/nodejs/app.js
+++ b/web/documentserver-example/nodejs/app.js
@@ -50,6 +50,8 @@ const cfgSignatureSecret = configServer.get('token.secret');
 const verifyPeerOff = configServer.get('verify_peer_off');
 const plugins = config.get('plugins');
 
+const appName = configServer.get('appName');
+
 if (verifyPeerOff) {
   process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
 }
@@ -95,6 +97,7 @@ app.get('/', (req, res) => { // define a handler for default page
     req.DocManager = new DocManager(req, res);
 
     res.render('index', { // render index template with the parameters specified
+      appName,
       preloaderUrl: siteUrl + configServer.get('preloaderUrl'),
       fillExts: fileUtility.getFillExtensions(),
       storedFiles: req.DocManager.getStoredFiles(),
@@ -162,7 +165,7 @@ app.get('/forgotten', async (req, res) => {
   }
 
   req.DocManager = new DocManager(req, res);
-  res.render('forgotten', { forgottenFiles });
+  res.render('forgotten', { forgottenFiles, appName, });
 });
 
 app.delete('/forgotten', (req, res) => { // define a handler for removing forgotten file
@@ -1252,6 +1255,7 @@ app.get('/editor', (req, res) => { // define a handler for editing document
 
     // file config data
     const argss = {
+      appName,
       apiUrl: siteUrl + configServer.get('apiUrl'),
       file: {
         name: fileName,
diff --git a/web/documentserver-example/nodejs/config/development-linux.json b/web/documentserver-example/nodejs/config/development-linux.json
index 958acb975..719eb689b 100644
--- a/web/documentserver-example/nodejs/config/development-linux.json
+++ b/web/documentserver-example/nodejs/config/development-linux.json
@@ -1,5 +1,6 @@
 {
   "server": {
+    "appName": "Euro-Office",
     "siteUrl": "/",
     "exampleUrl": "http://localhost/example",
     "token": {
diff --git a/web/documentserver-example/nodejs/config/development-mac.json b/web/documentserver-example/nodejs/config/development-mac.json
index f029d652a..3eb6951be 100644
--- a/web/documentserver-example/nodejs/config/development-mac.json
+++ b/web/documentserver-example/nodejs/config/development-mac.json
@@ -1,5 +1,6 @@
 {
   "server": {
+    "appName": "Euro-Office",
     "port": 3000,
     "siteUrl": "http://127.0.0.1:8000/"
   }
diff --git a/web/documentserver-example/nodejs/config/development-windows.json b/web/documentserver-example/nodejs/config/development-windows.json
index 179f70165..401b8f22c 100644
--- a/web/documentserver-example/nodejs/config/development-windows.json
+++ b/web/documentserver-example/nodejs/config/development-windows.json
@@ -1,5 +1,6 @@
 {
   "server": {
+    "appName": "Euro-Office",
     "port": 80,
     "siteUrl": "http://127.0.0.1:8000/"
   }
diff --git a/web/documentserver-example/nodejs/config/production-linux.json b/web/documentserver-example/nodejs/config/production-linux.json
index cd35ccaf6..798ba1fa9 100644
--- a/web/documentserver-example/nodejs/config/production-linux.json
+++ b/web/documentserver-example/nodejs/config/production-linux.json
@@ -1,5 +1,6 @@
 {
   "server": {
+    "appName": "Euro-Office",
     "siteUrl": "/",
     "maxFileSize": 104857600,
     "storageFolder": "/var/lib/euro-office/documentserver-example/files",
diff --git a/web/documentserver-example/nodejs/config/production-windows.json b/web/documentserver-example/nodejs/config/production-windows.json
index 1741a5a78..e233e341e 100644
--- a/web/documentserver-example/nodejs/config/production-windows.json
+++ b/web/documentserver-example/nodejs/config/production-windows.json
@@ -1,5 +1,6 @@
 {
   "server": {
+    "appName": "Euro-Office",
     "siteUrl": "/",
     "maxFileSize": 104857600,
     "enableForgotten": false
diff --git a/web/documentserver-example/nodejs/helpers/wopi/wopiRouting.js b/web/documentserver-example/nodejs/helpers/wopi/wopiRouting.js
index a4a48eafe..1127d2d76 100755
--- a/web/documentserver-example/nodejs/helpers/wopi/wopiRouting.js
+++ b/web/documentserver-example/nodejs/helpers/wopi/wopiRouting.js
@@ -27,6 +27,8 @@ const users = require('../users');
 const configServer = config.get('server');
 const siteUrl = configServer.get('siteUrl'); // the path to the editors installation
 
+const appName = configServer.get('appName');
+
 const getCustomWopiParams = function getCustomWopiParams(query) {
   let tokenParams = '';
   let actionParams = '';
@@ -87,6 +89,7 @@ exports.registerRoutes = function registerRoutes(app) {
 
       // render wopiIndex template with the parameters specified
       res.render('wopiIndex', {
+        appName,
         wopiEnable,
         storedFiles: wopiEnable ? files : [],
         params: req.DocManager.getCustomParams(),
@@ -137,6 +140,7 @@ exports.registerRoutes = function registerRoutes(app) {
 
       // render wopiAction template with the parameters specified
       res.render('wopiAction', {
+        appName,
         actionUrl: utils.getActionUrl(
           req.DocManager.getServerUrl(true),
           req.DocManager.curUserHostAddress(),
diff --git a/web/documentserver-example/nodejs/public/images/mobile-logo_eo.svg b/web/documentserver-example/nodejs/public/images/mobile-logo_eo.svg
new file mode 100644
index 000000000..d118dd050
--- /dev/null
+++ b/web/documentserver-example/nodejs/public/images/mobile-logo_eo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M320-240h320v-80H320v80Zm0-160h320v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>
\ No newline at end of file
diff --git a/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css b/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css
index c670a4de6..6770ccd43 100644
--- a/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css
+++ b/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css
@@ -110,7 +110,7 @@ header img {
 }
 
 .portal-name {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 24px;
     font-weight: bold;
     line-height: 133%;
@@ -208,8 +208,8 @@ label .checkbox {
 }
 
 .button.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
@@ -220,7 +220,7 @@ label .checkbox {
 }
 
 .button.orange:not(.disable):hover{
-    background: #ff7a4b;
+    background: #00a5fd;
 }
 
 .button.gray {
@@ -235,8 +235,8 @@ label .checkbox {
 }
 
 .button.gray:not(.disable):hover {
-    border: 1px solid #FF6F3D;
-    color: #FF6F3D;
+    border: 1px solid #0082C9;
+    color: #0082C9;
 }
 
 .button.converting {
@@ -265,14 +265,14 @@ label .checkbox {
 }
 
 .button.hoar:not(.disable):hover {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
 .button.hoar.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
     cursor: default;
 }
@@ -365,11 +365,11 @@ label .checkbox {
 }
 
 .links li.active {
-    border-bottom: 2px solid #FF6F3D;
+    border-bottom: 2px solid #0082C9;
 }
 
 .links li.active a {
-    color: #FF6F3D;
+    color: #0082C9;
 }
 
 .links li.active a img {
@@ -501,7 +501,7 @@ label .checkbox {
 }
 
 .convertPercent {
-    color: #FF6F3D;
+    color: #0082C9;
     font-weight: 700;
     display: inline;
 }
@@ -572,7 +572,7 @@ footer table td {
 footer a,
 footer a:hover,
 footer a:visited {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 14px;
     line-height: 120%;
 }
diff --git a/web/documentserver-example/nodejs/views/editor.ejs b/web/documentserver-example/nodejs/views/editor.ejs
index 1ede311bf..3b396601d 100644
--- a/web/documentserver-example/nodejs/views/editor.ejs
+++ b/web/documentserver-example/nodejs/views/editor.ejs
@@ -23,7 +23,7 @@
     * limitations under the License.
     *
     -->
-    <title><%- file.name %> - Euro-Office</title>
+    <title><%- file.name %> - <%= appName %></title>
     <link rel="icon"
         href="images/<%- editor.documentType %>.ico"
         type="image/x-icon" />
@@ -95,7 +95,7 @@
 
         var onMetaChange = function (event) {  // the meta information of the document is changed via the meta command
             if (event.data.title !== undefined) {
-                document.title = event.data.title + " - Euro-Office";
+                document.title = event.data.title + " - <%= appName %>";
             }
 
             if (event.data.favorite !== undefined) {
diff --git a/web/documentserver-example/nodejs/views/forgotten.ejs b/web/documentserver-example/nodejs/views/forgotten.ejs
index 08b7b3718..e788e08ec 100644
--- a/web/documentserver-example/nodejs/views/forgotten.ejs
+++ b/web/documentserver-example/nodejs/views/forgotten.ejs
@@ -22,7 +22,7 @@
     * limitations under the License.
     *
     -->
-    <title>Euro-Office Document editors</title>
+    <title><%= appName %> Document editors</title>
     <link href="images/favicon_eo.svg" rel="shortcut icon" type="image/x-icon" />
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" />
@@ -45,7 +45,7 @@
             </li>
             <li>
                 <a href="./">
-                    <img src ="images/mobile-logo.svg" alt="ONLYOFFICE" />
+                    <img src ="images/mobile-logo_eo.svg" alt="<%= appName %>" />
                 </a>
             </li>
         </menu>
diff --git a/web/documentserver-example/nodejs/views/index.ejs b/web/documentserver-example/nodejs/views/index.ejs
index 12ae14b7b..cffd87bef 100755
--- a/web/documentserver-example/nodejs/views/index.ejs
+++ b/web/documentserver-example/nodejs/views/index.ejs
@@ -23,7 +23,7 @@
     * limitations under the License.
     *
     -->
-    <title>Euro-Office Document editors</title>
+    <title><%= appName %> Document editors</title>
     <link href="images/favicon_eo.svg" rel="shortcut icon" type="image/x-icon" />
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" />
@@ -45,7 +45,7 @@
             </li>
             <li>
                 <a href="./">
-                    <img src ="images/mobile-logo.svg" alt="ONLYOFFICE" />
+                    <img src ="images/mobile-logo_eo.svg" alt="<%= appName %>" />
                 </a>
             </li>
         </menu>
@@ -142,8 +142,8 @@
                                 <% } %>
                             </menu>
                             <div id="portal-info" style="display: <%= storedFiles.length > 0 ? "none" : "table-cell" %>">
-                                <span class="portal-name">Welcome to Euro-Office Docs!</span>
-                                <span class="portal-descr">Get started with a live demo of Euro-Office Docs, a powerful open-source office suite for your browser.</span>
+                                <span class="portal-name">Welcome to <%= appName %> Docs!</span>
+                                <span class="portal-descr">Get started with a live demo of <%= appName %> Docs, a powerful open-source office suite for your browser.</span>
                                 <span class="portal-descr">
                                     You can test editing features in real-time and explore multi-user collaboration:
                                     <ul>
diff --git a/web/documentserver-example/nodejs/views/wopiAction.ejs b/web/documentserver-example/nodejs/views/wopiAction.ejs
index 2c9689e2b..976aa76f5 100644
--- a/web/documentserver-example/nodejs/views/wopiAction.ejs
+++ b/web/documentserver-example/nodejs/views/wopiAction.ejs
@@ -22,7 +22,7 @@
     * limitations under the License.
     *
     -->
-    <title>Euro-Office Document editors</title>
+    <title><%= appName %> Document editors</title>
     <link href="<%= favIconUrl %>" rel="shortcut icon" type="image/x-icon" />
 
     <style type="text/css">
diff --git a/web/documentserver-example/nodejs/views/wopiIndex.ejs b/web/documentserver-example/nodejs/views/wopiIndex.ejs
index a2bd661e0..6684006f3 100755
--- a/web/documentserver-example/nodejs/views/wopiIndex.ejs
+++ b/web/documentserver-example/nodejs/views/wopiIndex.ejs
@@ -23,7 +23,7 @@
     * limitations under the License.
     *
     -->
-    <title>Euro-Office Document editors</title>
+    <title><%= appName %> Document editors</title>
     <link href="images/favicon_eo.svg" rel="shortcut icon" type="image/x-icon" />
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" />
@@ -47,7 +47,7 @@
             </li>
             <li>
                 <a href="./">
-                    <img src ="images/mobile-logo.svg" alt="ONLYOFFICE" />
+                    <img src ="images/mobile-logo_eo.svg" alt="<%= appName %>" />
                 </a>
             </li>
         </menu>
@@ -128,16 +128,16 @@
                             <div id="portal-info" style="display: <%= storedFiles.length > 0 ? "none" : "table-cell" %>">
                             <% if (!wopiEnable)
                                { %>
-                                <span class="portal-name">Welcome to Euro-Office Docs!</span>
+                                <span class="portal-name">Welcome to <%= appName %> Docs!</span>
                                 <span class="portal-descr"></span>
                                 <span class="portal-descr">Before launching the demo, make sure the WOPI protocol is enabled.</span>
-                                <span class="portal-descr">To do this, set the <code>wopi.enable</code> parameter to <code>true</code> in the Euro-Office Docs configuration file and restart the Document Server.</span>
-                                <span class="portal-descr">⚠️ The WOPI protocol is required for communication between Euro-Office Docs and third-party platforms that support WOPI.</span>
+                                <span class="portal-descr">To do this, set the <code>wopi.enable</code> parameter to <code>true</code> in the <%= appName %> Docs configuration file and restart the Document Server.</span>
+                                <span class="portal-descr">⚠️ The WOPI protocol is required for communication between <%= appName %> Docs and third-party platforms that support WOPI.</span>
                             <% }
                                else
                                { %>
-                                <span class="portal-name">Welcome to Euro-Office Docs!</span>
-                                <span class="portal-descr">Get started with a live demo of Euro-Office Docs, a powerful open-source office suite for your browser.</span>
+                                <span class="portal-name">Welcome to <%= appName %> Docs!</span>
+                                <span class="portal-descr">Get started with a live demo of <%= appName %> Docs, a powerful open-source office suite for your browser.</span>
                                 <span class="portal-descr">
                                     You can test editing features in real-time and explore multi-user collaboration:
                                     <ul>
diff --git a/web/documentserver-example/php-laravel/public/css/app.css b/web/documentserver-example/php-laravel/public/css/app.css
index b6707f501..164009378 100644
--- a/web/documentserver-example/php-laravel/public/css/app.css
+++ b/web/documentserver-example/php-laravel/public/css/app.css
@@ -103,7 +103,7 @@ header img {
 }
 
 .portal-name {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 24px;
     font-weight: bold;
     line-height: 133%;
@@ -198,8 +198,8 @@ label .checkbox {
 }
 
 .button.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
@@ -210,7 +210,7 @@ label .checkbox {
 }
 
 .button.orange:not(.disable):hover{
-    background: #ff7a4b;
+    background: #00a5fd;
 }
 
 .button.gray {
@@ -225,8 +225,8 @@ label .checkbox {
 }
 
 .button.gray:not(.disable):hover {
-    border: 1px solid #FF6F3D;
-    color: #FF6F3D;
+    border: 1px solid #0082C9;
+    color: #0082C9;
 }
 
 .button.converting {
@@ -255,14 +255,14 @@ label .checkbox {
 }
 
 .button.hoar:not(.disable):hover {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
 .button.hoar.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
     cursor: default;
 }
@@ -361,11 +361,11 @@ label .checkbox {
 }
 
 .links li.active {
-    border-bottom: 2px solid #FF6F3D;
+    border-bottom: 2px solid #0082C9;
 }
 
 .links li.active a {
-    color: #FF6F3D;
+    color: #0082C9;
 }
 
 .links li.active a img {
@@ -481,7 +481,7 @@ label .checkbox {
 }
 
 .convertPercent {
-    color: #FF6F3D;
+    color: #0082C9;
     font-weight: 700;
     display: inline;
 }
@@ -544,7 +544,7 @@ footer table td {
 footer a,
 footer a:hover,
 footer a:visited {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 14px;
     line-height: 120%;
 }
diff --git a/web/documentserver-example/php/assets/css/stylesheet.css b/web/documentserver-example/php/assets/css/stylesheet.css
index 820ef78f1..caa612cf1 100644
--- a/web/documentserver-example/php/assets/css/stylesheet.css
+++ b/web/documentserver-example/php/assets/css/stylesheet.css
@@ -111,7 +111,7 @@ header img {
 }
 
 .portal-name {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 24px;
     font-weight: bold;
     line-height: 133%;
@@ -206,8 +206,8 @@ label .checkbox {
 }
 
 .button.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
@@ -218,7 +218,7 @@ label .checkbox {
 }
 
 .button.orange:not(.disable):hover{
-    background: #ff7a4b;
+    background: #00a5fd;
 }
 
 .button.gray {
@@ -233,8 +233,8 @@ label .checkbox {
 }
 
 .button.gray:not(.disable):hover {
-    border: 1px solid #FF6F3D;
-    color: #FF6F3D;
+    border: 1px solid #0082C9;
+    color: #0082C9;
 }
 
 .button.converting {
@@ -263,14 +263,14 @@ label .checkbox {
 }
 
 .button.hoar:not(.disable):hover {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
 .button.hoar.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
     cursor: default;
 }
@@ -369,11 +369,11 @@ label .checkbox {
 }
 
 .links li.active {
-    border-bottom: 2px solid #FF6F3D;
+    border-bottom: 2px solid #0082C9;
 }
 
 .links li.active a {
-    color: #FF6F3D;
+    color: #0082C9;
 }
 
 .links li.active a img {
@@ -489,7 +489,7 @@ label .checkbox {
 }
 
 .convertPercent {
-    color: #FF6F3D;
+    color: #0082C9;
     font-weight: 700;
     display: inline;
 }
@@ -552,7 +552,7 @@ footer table td {
 footer a,
 footer a:hover,
 footer a:visited {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 14px;
     line-height: 120%;
 }
diff --git a/web/documentserver-example/python/static/css/stylesheet.css b/web/documentserver-example/python/static/css/stylesheet.css
index 5f9fe4f3b..ae0bc3481 100644
--- a/web/documentserver-example/python/static/css/stylesheet.css
+++ b/web/documentserver-example/python/static/css/stylesheet.css
@@ -112,7 +112,7 @@ header img {
 }
 
 .portal-name {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 24px;
     font-weight: bold;
     line-height: 133%;
@@ -207,8 +207,8 @@ label .checkbox {
 }
 
 .button.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
@@ -219,7 +219,7 @@ label .checkbox {
 }
 
 .button.orange:not(.disable):hover {
-    background: #ff7a4b;
+    background: #00a5fd;
 }
 
 .button.gray {
@@ -234,8 +234,8 @@ label .checkbox {
 }
 
 .button.gray:not(.disable):hover {
-    border: 1px solid #FF6F3D;
-    color: #FF6F3D;
+    border: 1px solid #0082C9;
+    color: #0082C9;
 }
 
 .button.converting {
@@ -264,14 +264,14 @@ label .checkbox {
 }
 
 .button.hoar:not(.disable):hover {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
 .button.hoar.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
     cursor: default;
 }
@@ -370,11 +370,11 @@ label .checkbox {
 }
 
 .links li.active {
-    border-bottom: 2px solid #FF6F3D;
+    border-bottom: 2px solid #0082C9;
 }
 
 .links li.active a {
-    color: #FF6F3D;
+    color: #0082C9;
 }
 
 .links li.active a img {
@@ -490,7 +490,7 @@ label .checkbox {
 }
 
 .convertPercent {
-    color: #FF6F3D;
+    color: #0082C9;
     font-weight: 700;
     display: inline;
 }
@@ -553,7 +553,7 @@ footer table td {
 footer a, 
 footer a:hover, 
 footer a:visited {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 14px;
     line-height: 120%; 
 }
diff --git a/web/documentserver-example/ruby/app/assets/stylesheets/stylesheet.scss b/web/documentserver-example/ruby/app/assets/stylesheets/stylesheet.scss
index 9de4530d4..2dc03d635 100644
--- a/web/documentserver-example/ruby/app/assets/stylesheets/stylesheet.scss
+++ b/web/documentserver-example/ruby/app/assets/stylesheets/stylesheet.scss
@@ -113,7 +113,7 @@ header img {
 }
 
 .portal-name {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 24px;
     font-weight: bold;
     line-height: 133%;
@@ -208,8 +208,8 @@ label .checkbox {
 }
 
 .button.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
@@ -220,7 +220,7 @@ label .checkbox {
 }
 
 .button.orange:not(.disable):hover {
-    background: #ff7a4b;
+    background: #00a5fd;
 }
 
 .button.gray {
@@ -235,8 +235,8 @@ label .checkbox {
 }
 
 .button.gray:not(.disable):hover {
-    border: 1px solid #FF6F3D;
-    color: #FF6F3D;
+    border: 1px solid #0082C9;
+    color: #0082C9;
 }
 
 .button.converting {
@@ -265,14 +265,14 @@ label .checkbox {
 }
 
 .button.hoar:not(.disable):hover {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
 }
 
 .button.hoar.orange {
-    background: #FF6F3D;
-    border: 1px solid #FF6F3D;
+    background: #0082C9;
+    border: 1px solid #0082C9;
     color: #FFFFFF;
     cursor: default;
 }
@@ -371,11 +371,11 @@ label .checkbox {
 }
 
 .links li.active {
-    border-bottom: 2px solid #FF6F3D;
+    border-bottom: 2px solid #0082C9;
 }
 
 .links li.active a {
-    color: #FF6F3D;
+    color: #0082C9;
 }
 
 .links li.active a img {
@@ -491,7 +491,7 @@ label .checkbox {
 }
 
 .convertPercent {
-    color: #FF6F3D;
+    color: #0082C9;
     font-weight: 700;
     display: inline;
 }
@@ -554,7 +554,7 @@ footer table td {
 footer a, 
 footer a:hover, 
 footer a:visited {
-    color: #FF6F3D;
+    color: #0082C9;
     font-size: 14px;
     line-height: 120%; 
 }