diff --git a/public/app-config.template.json b/public/app-config.template.json
new file mode 100644
index 000000000..e44b110b2
--- /dev/null
+++ b/public/app-config.template.json
@@ -0,0 +1,20 @@
+{
+    "appKey": "metadata-synchronization",
+    "appearance": {
+        "showShareButton": false
+    },
+    "feedback": {
+        "repositories": {
+            "clickUp": {
+                "listId": "170646828",
+                "title": "[User feedback] {title}",
+                "body": "## dhis2\n\nUsername: {username}\n\n{body}"
+            }
+        },
+        "layoutOptions": {
+            "showContact": false,
+            "descriptionTemplate": "## Summary\n\n## Steps to reproduce\n\n## Actual results\n\n## Expected results\n\n"
+        }
+    },
+    "encryptionKey": ""
+}
diff --git a/scripts/run.ts b/scripts/run.ts
index 2b6f336b2..32cad24e6 100644
--- a/scripts/run.ts
+++ b/scripts/run.ts
@@ -138,6 +138,9 @@ function build(args: BuildArgs): void {
 
         run(`react-scripts build && cp -r i18n icon.png build`);
         run(`d2-manifest package.json build/manifest.webapp -t ${manifestType} -n '${variant.title}'`);
+        if (variant.file === "metadata-synchronization") {
+            updateManifestJsonFile(`build/manifest.json`, variant.title);
+        }
         updateManifestNamespace(`build/manifest.webapp`, variant.file);
         run(`rm -f ${fileName}`);
         run(`cd build && zip -r ../${fileName} *`);
@@ -153,6 +156,14 @@ function updateManifestNamespace(manifestPath: string, variantFile: string) {
     }
 }
 
+function updateManifestJsonFile(manifestJsonPath: string, variantTitle: string) {
+    if (fs.existsSync(manifestJsonPath)) {
+        const manifestJson = JSON.parse(fs.readFileSync(manifestJsonPath, "utf8"));
+        Object.assign(manifestJson, { name: variantTitle, short_name: variantTitle });
+        fs.writeFileSync(manifestJsonPath, JSON.stringify(manifestJson, null, 2));
+    }
+}
+
 /* Start server */
 
 type StartServerArgs = { variant: string; port: number; verbose: boolean };
diff --git a/src/app-config.template.ts b/src/app-config.template.ts
index 120a4f45a..05159355f 100644
--- a/src/app-config.template.ts
+++ b/src/app-config.template.ts
@@ -6,4 +6,5 @@ export interface AppConfig {
         showShareButton: boolean;
     };
     feedback: FeedbackOptions;
+    encryptionKey: string;
 }
diff --git a/src/app-config.ts b/src/app-config.ts
deleted file mode 100644
index 7bc3f2334..000000000
--- a/src/app-config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { AppConfig } from "./app-config.template";
-
-export const appConfig: AppConfig = {
-    appKey: "metadata-synchronization",
-    appearance: {
-        showShareButton: false,
-    },
-    feedback: {
-        repositories: {
-            clickUp: {
-                listId: "170646828",
-                title: "[User feedback] {title}",
-                body: "## dhis2\n\nUsername: {username}\n\n{body}",
-            },
-        },
-        layoutOptions: {
-            showContact: false,
-            descriptionTemplate: "## Summary\n\n## Steps to reproduce\n\n## Actual results\n\n## Expected results\n\n",
-        },
-    },
-};
diff --git a/src/presentation/webapp/WebApp.tsx b/src/presentation/webapp/WebApp.tsx
index f0f16d069..6df030d47 100644
--- a/src/presentation/webapp/WebApp.tsx
+++ b/src/presentation/webapp/WebApp.tsx
@@ -22,7 +22,8 @@ import { muiTheme } from "../react/core/themes/dhis2.theme";
 import Root from "./Root";
 import "./WebApp.css";
 import { Feedback } from "@eyeseetea/feedback-component";
-import { appConfig } from "../../app-config";
+import { AppConfig } from "../../app-config.template";
+import { Maybe } from "../../types/utils";
 
 const generateClassName = createGenerateClassName({
     productionPrefix: "c",
@@ -33,13 +34,17 @@ const App = () => {
     const [appContext, setAppContext] = useState<AppContextState | null>(null);
     const [username, setUsername] = useState("");
     const [showShareButton, setShowShareButton] = useState(false);
+    const [appConfig, setAppConfig] = useState<Maybe<AppConfig>>();
     const migrations = useMigrations(appContext);
 
     const appTitle = process.env.REACT_APP_PRESENTATION_TITLE;
 
     useEffect(() => {
         const run = async () => {
-            const encryptionKey = appConfig?.appKey;
+            const configFromJson = (await fetch("app-config.json", {
+                credentials: "same-origin",
+            }).then(res => res.json())) as AppConfig;
+            const encryptionKey = configFromJson.encryptionKey;
             if (!encryptionKey) throw new Error("You need to provide a valid encryption key");
             const d2 = await init({ baseUrl: `${baseUrl}/api` });
             const api = new D2Api({ baseUrl, backend: "fetch" });
@@ -50,7 +55,6 @@ const App = () => {
                 url: baseUrl,
                 version,
             });
-
             const compositionRoot = new CompositionRoot(instance, encryptionKey);
             await compositionRoot.app.initialize();
             const currentUser = await compositionRoot.user.current();
@@ -61,11 +65,12 @@ const App = () => {
             Object.assign(window, { d2, api });
             setShowShareButton(_(appConfig).get("appearance.showShareButton") || false);
             setUsername(currentUser.username);
+            setAppConfig(configFromJson);
             await initializeAppRoles(baseUrl);
         };
 
         run();
-    }, [baseUrl]);
+    }, [appConfig, baseUrl]);
 
     if (migrations.state.type === "pending") {
         return (
@@ -91,7 +96,7 @@ const App = () => {
                                 </div>
 
                                 <Share visible={showShareButton} />
-                                <Feedback options={appConfig?.feedback} username={username} />
+                                {appConfig && <Feedback options={appConfig.feedback} username={username} />}
                             </SnackbarProvider>
                         </LoadingProvider>
                     </OldMuiThemeProvider>