diff --git a/apps/server/src/app.ts b/apps/server/src/app.ts
index 98a90b0e6..1264fcc94 100644
--- a/apps/server/src/app.ts
+++ b/apps/server/src/app.ts
@@ -8,7 +8,14 @@ import cors from 'cors';
 
 // import utils
 import { join, resolve } from 'path';
-import { currentDirectory, environment, externalsStartDirectory, isProduction, resolvedPath } from './setup.js';
+import {
+  currentDirectory,
+  environment,
+  isProduction,
+  resolveExternalsDirectory,
+  resolveStylesDirectory,
+  resolvedPath,
+} from './setup.js';
 import { ONTIME_VERSION } from './ONTIME_VERSION.js';
 
 // Import Routes
@@ -35,6 +42,7 @@ import { eventStore, getInitialPayload } from './stores/EventStore.js';
 import { PlaybackService } from './services/PlaybackService.js';
 import { RestorePoint, restoreService } from './services/RestoreService.js';
 import { messageService } from './services/message-service/MessageService.js';
+import { populateDemo } from './modules/loadDemo.js';
 
 console.log(`Starting Ontime version ${ONTIME_VERSION}`);
 
@@ -64,7 +72,8 @@ app.use('/ontime', ontimeRouter);
 app.use('/playback', playbackRouter);
 
 // serve static - css
-app.use('/external', express.static(externalsStartDirectory));
+app.use('/external/styles', express.static(resolveStylesDirectory));
+app.use('/external/', express.static(resolveExternalsDirectory));
 app.use('/external', (req, res) => {
   res.status(404).send(`${req.originalUrl} not found`);
 });
@@ -129,6 +138,7 @@ export const initAssets = async () => {
   checkStart(OntimeStartOrder.InitAssets);
   await dbLoadingProcess;
   populateStyles();
+  populateDemo();
 };
 
 /**
diff --git a/apps/server/src/config/config.js b/apps/server/src/config/config.js
index f11da3cdc..ac79ed456 100644
--- a/apps/server/src/config/config.js
+++ b/apps/server/src/config/config.js
@@ -8,5 +8,9 @@ export const config = {
     directory: 'styles',
     filename: 'override.css',
   },
+  demo: {
+    directory: 'demo',
+    filename: ['app.js', 'index.html', 'styles.css'],
+  },
   restoreFile: 'ontime.restore',
 };
diff --git a/apps/server/src/modules/loadDemo.ts b/apps/server/src/modules/loadDemo.ts
new file mode 100644
index 000000000..84d4361bf
--- /dev/null
+++ b/apps/server/src/modules/loadDemo.ts
@@ -0,0 +1,21 @@
+import { copyFile } from 'fs/promises';
+import { pathToStartDemo, resolveDemoDirectory, resolveDemoPath } from '../setup.js';
+import { ensureDirectory } from '../utils/fileManagement.js';
+
+/**
+ * @description ensures directories exist and populates demo folder
+ */
+export const populateDemo = () => {
+  ensureDirectory(resolveDemoDirectory);
+  // even if demo exist we want to use startup demo
+  try {
+    Promise.all(
+      resolveDemoPath.map((to, index) => {
+        const from = pathToStartDemo[index];
+        copyFile(from, to);
+      }),
+    );
+  } catch (_) {
+    /* we do not handle this */
+  }
+};
diff --git a/apps/server/src/modules/loadStyles.ts b/apps/server/src/modules/loadStyles.ts
index 7bf6bf817..f68f716e1 100644
--- a/apps/server/src/modules/loadStyles.ts
+++ b/apps/server/src/modules/loadStyles.ts
@@ -4,20 +4,15 @@ import { ensureDirectory } from '../utils/fileManagement.js';
 
 /**
  * @description ensures directories exist and populates stylesheet
- * @return {string} - path to stylesheet file
  */
 export const populateStyles = () => {
-  const stylesInDisk = resolveStylesPath;
   ensureDirectory(resolveStylesDirectory);
-
-  // if stylesInDisk doesn't exist we want to use startup stylesheet
-  if (!existsSync(stylesInDisk)) {
+  // if styles doesn't exist we want to use startup stylesheet
+  if (!existsSync(resolveStylesPath)) {
     try {
-      copyFileSync(pathToStartStyles, stylesInDisk);
+      copyFileSync(pathToStartStyles, resolveStylesPath);
     } catch (_) {
       /* we do not handle this */
     }
   }
-
-  return stylesInDisk;
 };
diff --git a/apps/server/src/setup.ts b/apps/server/src/setup.ts
index efd83524e..ce9c58176 100644
--- a/apps/server/src/setup.ts
+++ b/apps/server/src/setup.ts
@@ -68,7 +68,8 @@ export const currentDirectory = dirname(__dirname);
 
 const testDbStartDirectory = isTest ? '../' : getAppDataPath();
 export const externalsStartDirectory = isProduction ? getAppDataPath() : join(currentDirectory, 'external');
-
+//TODO: we only need one when they are all in the same folder
+export const resolveExternalsDirectory = join(isProduction ? getAppDataPath() : currentDirectory, 'external');
 // path to public db
 export const resolveDbDirectory = join(
   testDbStartDirectory,
@@ -80,11 +81,26 @@ export const pathToStartDb = isTest
   ? join(currentDirectory, '../', config.database.testdb, config.database.filename)
   : join(currentDirectory, '/preloaded-db/', config.database.filename);
 
+//TODO: move all static files to the external directory
 // path to public styles
 export const resolveStylesDirectory = join(externalsStartDirectory, config.styles.directory);
 export const resolveStylesPath = join(resolveStylesDirectory, config.styles.filename);
 
 export const pathToStartStyles = join(currentDirectory, '/external/styles/', config.styles.filename);
 
+// path to public demo
+export const resolveDemoDirectory = join(
+  externalsStartDirectory,
+  isProduction ? '/external/' : '', //move to external folde in production
+  config.demo.directory,
+);
+export const resolveDemoPath = config.demo.filename.map((file) => {
+  return join(resolveDemoDirectory, file);
+});
+
+export const pathToStartDemo = config.demo.filename.map((file) => {
+  return join(currentDirectory, '/external/demo/', file);
+});
+
 // path to restore file
 export const resolveRestoreFile = join(getAppDataPath(), config.restoreFile);