diff --git a/ui/.gitignore b/ui/.gitignore
index 15487fc..573f6a4 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -1,4 +1,3 @@
-/node_modules/
 /public/build/
 /public/vendor/
 
diff --git a/ui/.yarnrc.yml b/ui/.yarnrc.yml
index 47dc0f4..e59ff12 100644
--- a/ui/.yarnrc.yml
+++ b/ui/.yarnrc.yml
@@ -1,3 +1 @@
-nodeLinker: node-modules 
-
 yarnPath: .yarn/releases/yarn-3.1.0.cjs
diff --git a/ui/package.json b/ui/package.json
index ccb6d7d..b0fce95 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -16,6 +16,8 @@
     "@tsconfig/svelte": "^2.0.0",
     "@types/history": "^4.7.9",
     "@types/lru-cache": "^5.1.1",
+    "@yarnpkg/fslib": "^2.6.0",
+    "@yarnpkg/libzip": "^2.2.2",
     "postcss": "^8.3.11",
     "rollup": "^2.59.0",
     "rollup-plugin-copy": "^3.4.0",
@@ -41,7 +43,7 @@
     "sirv-cli": "^1.0.0",
     "sswr": "^1.3.1",
     "svelte-navigator": "^3.1.5",
-    "upend": "file:../tools/upend_js"
+    "upend": "../tools/upend_js"
   },
   "packageManager": "yarn@3.1.0"
 }
diff --git a/ui/rollup.config.js b/ui/rollup.config.js
index 418fe78..005cf96 100644
--- a/ui/rollup.config.js
+++ b/ui/rollup.config.js
@@ -11,6 +11,10 @@ import typescript from "@rollup/plugin-typescript";
 import css from "rollup-plugin-css-only";
 import dev from "rollup-plugin-dev";
 
+import pnpapi from "pnpapi";
+import { PosixFS, ZipOpenFS } from "@yarnpkg/fslib";
+import libzip from "@yarnpkg/libzip";
+
 const production = !process.env.ROLLUP_WATCH;
 
 export default {
@@ -26,9 +30,20 @@ export default {
     replace({
       "process.env.NODE_ENV": JSON.stringify("production"),
     }),
-    
     svelte({
-      preprocess: sveltePreprocess({ sourceMap: !production }),
+      preprocess: sveltePreprocess({
+        sourceMap: !production,
+        // https://github.com/sveltejs/svelte-preprocess/issues/283#issuecomment-748480431
+        scss: {
+          importer: (url, prev, done) => {
+            const zipOpenFs = new ZipOpenFS({ libzip: libzip.getLibzipSync() });
+            const crossFs = new PosixFS(zipOpenFs);
+            const res = pnpapi.resolveRequest(url, __dirname + "/");
+            const file = crossFs.readFileSync(res);
+            done({ contents: file.toString() });
+          },
+        },
+      }),
       compilerOptions: {
         // enable run-time checks when not in production
         dev: !production,
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 2640f5b..e61cd66 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -28,9 +28,9 @@
 </Router>
 
 <style global lang="scss">
-  @use "../node_modules/normalize.css/normalize.css";
-  @use "../node_modules/@shoelace-style/shoelace/dist/themes/light.css";
-  @use "../node_modules/@shoelace-style/shoelace/dist/themes/dark.css";
+  @use "normalize.css/normalize.css";
+  @use "@shoelace-style/shoelace/dist/themes/light.css";
+  @use "@shoelace-style/shoelace/dist/themes/dark.css";
   @import url("/assets/fonts/inter.css");
 
   html {
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 9f17116..88ec9e0 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -280,6 +280,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/emscripten@npm:^1.38.0":
+  version: 1.39.5
+  resolution: "@types/emscripten@npm:1.39.5"
+  checksum: cb92a991485164fa919f78f104253511f62c8e8ad0b2b9816a0660a092ec2df8606243beb84f380fef2058c764b4bc47c28d99b5fb9da5dc163b8d903f686cc9
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:*":
   version: 0.0.50
   resolution: "@types/estree@npm:0.0.50"
@@ -380,6 +387,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@yarnpkg/fslib@npm:^2.6.0":
+  version: 2.6.0
+  resolution: "@yarnpkg/fslib@npm:2.6.0"
+  dependencies:
+    "@yarnpkg/libzip": ^2.2.2
+    tslib: ^1.13.0
+  checksum: 4affa8fbd48a91236708ea486bee78ec208cdcdca867fccdb55ead1a0791adb1405b798dc4c16a6accf71c83effaecfb06c7e869972dd900eb063d8660766709
+  languageName: node
+  linkType: hard
+
+"@yarnpkg/libzip@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "@yarnpkg/libzip@npm:2.2.2"
+  dependencies:
+    "@types/emscripten": ^1.38.0
+    tslib: ^1.13.0
+  checksum: 7c09b13fdea1aa35959f3d8a17341ea3abc7b9708b731cff126c361582148a97555cda865bf0aaaefafae22bfeb95df218bd20ad1565ced68cc95402e554659f
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:1":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
@@ -2997,6 +3024,8 @@ __metadata:
     "@tsconfig/svelte": ^2.0.0
     "@types/history": ^4.7.9
     "@types/lru-cache": ^5.1.1
+    "@yarnpkg/fslib": ^2.6.0
+    "@yarnpkg/libzip": ^2.2.2
     date-fns: ^2.25.0
     filesize: ^8.0.6
     history: ^5.1.0
@@ -3019,7 +3048,7 @@ __metadata:
     svelte-preprocess: ^4.0.0
     tslib: ^2.0.0
     typescript: ^4.0.0
-    upend: "file:../tools/upend_js"
+    upend: ../tools/upend_js
   languageName: unknown
   linkType: soft
 
@@ -3204,6 +3233,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^1.13.0":
+  version: 1.14.1
+  resolution: "tslib@npm:1.14.1"
+  checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^2.0.0, tslib@npm:^2.0.3":
   version: 2.3.1
   resolution: "tslib@npm:2.3.1"
@@ -3265,8 +3301,8 @@ __metadata:
 
 "upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
   version: 0.0.1
-  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=d29794&locator=svelte-app%40workspace%3A."
-  checksum: 814cdc510cf23c3943470ab953f1dd8491c8c989086e67580abad1151493dbf0f4f63f4a7cbec52bbf39925fa6028ce1f2d2beb0c0cb4544514d8a5b7bd195d8
+  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=be37a5&locator=svelte-app%40workspace%3A."
+  checksum: 9c82ef4a75d51feb2c7d345fdbc941d0205ea5f4deaf1ee1dc49378a860a47d42b63ae4602e0f12e1a6cf482c8fb4da495941b45a7e396f840264403c4a1977d
   languageName: node
   linkType: hard