diff --git a/with-svelte/contents/plasmo-overlay.css b/with-svelte/contents/plasmo-overlay.css
index 47344ca0..2138705d 100644
--- a/with-svelte/contents/plasmo-overlay.css
+++ b/with-svelte/contents/plasmo-overlay.css
@@ -1,9 +1,3 @@
-.hw-top {
-  background: red;
-  color: white;
-  font-family: "Fascinate";
-}
-
 #plasmo-shadow-container {
   width: 200px;
   background-color: purple;
diff --git a/with-svelte/contents/plasmo-overlay.svelte b/with-svelte/contents/plasmo-overlay.svelte
index 773e22ac..9ec1065a 100644
--- a/with-svelte/contents/plasmo-overlay.svelte
+++ b/with-svelte/contents/plasmo-overlay.svelte
@@ -14,3 +14,13 @@
 </script>
 
 <span class="hw-top">Every living thing wants to survive</span>
+
+<style>
+  .hw-top {
+    background: red;
+    color: white;
+    font-family: "Fascinate";
+    width: 200px;
+    border: 8px solid aqua;
+  }
+</style>
diff --git a/with-svelte/package.json b/with-svelte/package.json
index bd40796e..d976378f 100644
--- a/with-svelte/package.json
+++ b/with-svelte/package.json
@@ -5,7 +5,8 @@
   "description": "A basic Plasmo extension.",
   "author": "Plasmo Corp. <foss@plasmo.com>",
   "contributors": [
-    "louisgv"
+    "louisgv",
+    "joacoesteban"
   ],
   "scripts": {
     "dev": "plasmo dev",
diff --git a/with-svelte/svelte.config.mjs b/with-svelte/svelte.config.mjs
index 4bd8cc68..3728874f 100644
--- a/with-svelte/svelte.config.mjs
+++ b/with-svelte/svelte.config.mjs
@@ -8,7 +8,10 @@ import preprocess from "svelte-preprocess"
 const config = {
   preprocess: preprocess({
     // ...svelte-preprocess options
-  })
+  }),
+  compilerOptions: {
+    css: 'injected', // this is the default mode
+  }
   // ...other svelte options
 }