diff --git a/Extension/manifest.json b/Extension/manifest.json
index 7320c8f..23da09d 100644
--- a/Extension/manifest.json
+++ b/Extension/manifest.json
@@ -28,6 +28,7 @@
   ],
 
   "action": {
+    "default_popup": "public/popup.html",
     "default_icon": {
       "16": "images/toolbar_16px.png",
       "19": "images/toolbar_19px.png",
diff --git a/Extension/public/popup.html b/Extension/public/popup.html
new file mode 100644
index 0000000..9c880e4
--- /dev/null
+++ b/Extension/public/popup.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="../dist/settings.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+    />
+    <link rel="stylesheet" href="../dist/popup/popup.css" />
+  </head>
+  <body>
+    <main id="root"></main>
+  </body>
+</html>
diff --git a/Extension/public/settings.html b/Extension/public/settings.html
index 5e5dce5..19c4f4b 100644
--- a/Extension/public/settings.html
+++ b/Extension/public/settings.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
     />
-    <link rel="stylesheet" href="../dist/entry.css" />
+    <link rel="stylesheet" href="../dist/settings/settings.css" />
   </head>
   <body>
     <main id="root"></main>
diff --git a/Extension/scripts/build.js b/Extension/scripts/build.js
index edb2ea8..567bea2 100644
--- a/Extension/scripts/build.js
+++ b/Extension/scripts/build.js
@@ -29,6 +29,18 @@ async function main() {
     outfile: './dist/background.js'
   });
 
+  const popupJob = build({
+    ...commonConfig,
+    entryPoints: ['./src/popup/popup.ts'],
+    outdir: './dist',
+    mainFields: ['svelte', 'module', 'main', 'browser'],
+    plugins: [
+      sveltePlugin({
+        preprocess: sveltePreprocess()
+      })
+    ]
+  });
+
   const settingsJob = build({
     ...commonConfig,
     entryPoints: ['./src/settings/settings.ts'],
@@ -41,7 +53,7 @@ async function main() {
     ]
   });
 
-  return Promise.all([contentJob, backgroundJob, settingsJob]).then(() =>
-    console.log('⚡ Compiled')
+  return Promise.all([contentJob, backgroundJob, popupJob, settingsJob]).then(
+    () => console.log('⚡ Compiled')
   );
 }
diff --git a/Extension/src/popup/popup.svelte b/Extension/src/popup/popup.svelte
new file mode 100644
index 0000000..4c25aa5
--- /dev/null
+++ b/Extension/src/popup/popup.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { loop_guard } from 'svelte/internal';
+
+  console.loop_guard('hello from the popup!');
+</script>
+
+<h1>My New Web Extension</h1>
+
+<style>
+  h1 {
+    color: blue;
+  }
+</style>
diff --git a/Extension/src/popup/popup.ts b/Extension/src/popup/popup.ts
new file mode 100644
index 0000000..664d699
--- /dev/null
+++ b/Extension/src/popup/popup.ts
@@ -0,0 +1,2 @@
+import App from './popup.svelte';
+new App({ target: document.getElementById('root') as HTMLDivElement });
diff --git a/Extension/src/settings/settings.ts b/Extension/src/settings/settings.ts
index 902e58a..d873aad 100644
--- a/Extension/src/settings/settings.ts
+++ b/Extension/src/settings/settings.ts
@@ -1,2 +1,2 @@
 import App from './settings.svelte';
-new App({ target: document.body });
+new App({ target: document.getElementById('root') as HTMLDivElement });
diff --git a/Safari/REPLACEME.xcodeproj/project.xcworkspace/xcuserdata/kylenazario.xcuserdatad/UserInterfaceState.xcuserstate b/Safari/REPLACEME.xcodeproj/project.xcworkspace/xcuserdata/kylenazario.xcuserdatad/UserInterfaceState.xcuserstate
index 4ebbfaff80f17f024e9fe5053bdd5688fd285246..e50a95300d71a56093baa2440b12526d255c24f7 100644
GIT binary patch
delta 33
ncmZ2{jcM^UrVVq=*wjoS%6gt}UTn5j3B)eFI&pJY<k>&~_ahF8

delta 33
mcmZ2{jcM^UrVVq=*i`rLJur=X^J25LN?^8G`{uC7vw;8!7Y~5|