diff --git a/package-lock.json b/package-lock.json
index d09be53..6c52c3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,12 @@
       "version": "0.0.1",
       "license": "GPL-2.0-or-later",
       "dependencies": {
-        "decky-frontend-lib": "file:../decky-frontend-lib",
+        "decky-frontend-lib": "^0.0.2",
         "react-icons": "^4.3.1"
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^21.1.0",
+        "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^13.2.1",
         "@rollup/plugin-replace": "^4.0.0",
         "@rollup/plugin-typescript": "^8.3.2",
@@ -26,17 +27,18 @@
       }
     },
     "../decky-frontend-lib": {
-      "version": "0.0.1",
+      "version": "0.0.2",
+      "extraneous": true,
       "license": "GPL-2.0-or-later",
-      "dependencies": {
-        "moduleraid": "^6.0.0"
-      },
       "devDependencies": {
+        "@types/jest": "^27.4.1",
         "@types/react": "16.14.0",
         "import-sort-style-module": "^6.0.0",
+        "jest": "^27.5.1",
         "prettier-plugin-import-sort": "^0.0.7",
-        "react": "16.14.0",
+        "react": "^16.14.0",
         "shx": "^0.3.4",
+        "ts-jest": "^27.1.4",
         "typescript": "^4.6.3"
       },
       "peerDependencies": {
@@ -64,6 +66,18 @@
         "rollup": "^2.38.3"
       }
     },
+    "node_modules/@rollup/plugin-json": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
+      "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.0.8"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0 || ^2.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-node-resolve": {
       "version": "13.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.2.1.tgz",
@@ -535,8 +549,12 @@
       "dev": true
     },
     "node_modules/decky-frontend-lib": {
-      "resolved": "../decky-frontend-lib",
-      "link": true
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/decky-frontend-lib/-/decky-frontend-lib-0.0.2.tgz",
+      "integrity": "sha512-XyxSLrkvEjA0oDsPnV30cyMgzqSOKMp3riAkk1e0iEItvt26m4w4iGPD7JO1rtXquWpSEvYB9SCmhlrX/3COXA==",
+      "peerDependencies": {
+        "react": "16.14.0"
+      }
     },
     "node_modules/deepmerge": {
       "version": "4.2.2",
@@ -1409,6 +1427,15 @@
         "resolve": "^1.17.0"
       }
     },
+    "@rollup/plugin-json": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
+      "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.8"
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "13.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.2.1.tgz",
@@ -1810,16 +1837,10 @@
       "dev": true
     },
     "decky-frontend-lib": {
-      "version": "file:../decky-frontend-lib",
-      "requires": {
-        "@types/react": "16.14.0",
-        "import-sort-style-module": "^6.0.0",
-        "moduleraid": "^6.0.0",
-        "prettier-plugin-import-sort": "^0.0.7",
-        "react": "16.14.0",
-        "shx": "^0.3.4",
-        "typescript": "^4.6.3"
-      }
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/decky-frontend-lib/-/decky-frontend-lib-0.0.2.tgz",
+      "integrity": "sha512-XyxSLrkvEjA0oDsPnV30cyMgzqSOKMp3riAkk1e0iEItvt26m4w4iGPD7JO1rtXquWpSEvYB9SCmhlrX/3COXA==",
+      "requires": {}
     },
     "deepmerge": {
       "version": "4.2.2",
diff --git a/package.json b/package.json
index bc8cdab..9013924 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   "homepage": "https://github.com/SteamDeckHomebrew/decky-plugin-template#readme",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-typescript": "^8.3.2",
@@ -37,7 +38,7 @@
     "shx": "^0.3.4"
   },
   "dependencies": {
-    "decky-frontend-lib": "file:../decky-frontend-lib",
+    "decky-frontend-lib": "^0.0.2",
     "react-icons": "^4.3.1"
   }
 }
diff --git a/plugin.json b/plugin.json
index 491d812..60ec4fb 100644
--- a/plugin.json
+++ b/plugin.json
@@ -2,5 +2,5 @@
   "name": "Example Plugin",
   "author": "John Doe",
   "frontend_bundle": "dist/example-plugin.js",
-  "flags": ["hot_reload", "_root"]
+  "flags": ["debug", "_root"]
 }
diff --git a/rollup.config.js b/rollup.config.js
index 52abadb..6e8c396 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,4 +1,5 @@
 import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import typescript from '@rollup/plugin-typescript';
@@ -10,6 +11,7 @@ export default defineConfig({
     commonjs(),
     nodeResolve(),
     typescript(),
+    json(),
     replace({
       preventAssignment: false,
       'process.env.NODE_ENV': JSON.stringify('production'),
diff --git a/src/index.tsx b/src/index.tsx
index 56301a7..f10ca4f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,50 +1,59 @@
 import {
   Button,
   definePlugin,
-  PanelSection,
-  PanelSectionRow,
+  Menu,
+  MenuItem,
   ServerAPI,
-  TabTitle,
+  showModal,
+  staticClasses,
 } from "decky-frontend-lib";
-import { useState, VFC } from "react";
+import { VFC } from "react";
 import { FaShip } from "react-icons/fa";
 
-interface AddMethodArgs {
-  left: number;
-  right: number;
-}
+// interface AddMethodArgs {
+//   left: number;
+//   right: number;
+// }
 
-const Content: VFC<{ serverAPI: ServerAPI }> = ({ serverAPI }) => {
-  const [result, setResult] = useState<number | undefined>();
+const Content: VFC<{ serverAPI: ServerAPI }> = ({}) => {
+  // const [result, setResult] = useState<number | undefined>();
 
-  const onClick = async () => {
-    const result = await serverAPI.callPluginMethod<AddMethodArgs, number>(
-      "add",
-      {
-        left: 2,
-        right: 2,
-      }
-    );
-    if (result.success) {
-      setResult(result.result);
-    }
-  };
+  // const onClick = async () => {
+  //   const result = await serverAPI.callPluginMethod<AddMethodArgs, number>(
+  //     "add",
+  //     {
+  //       left: 2,
+  //       right: 2,
+  //     }
+  //   );
+  //   if (result.success) {
+  //     setResult(result.result);
+  //   }
+  // };
 
   return (
-    <PanelSection>
-      <PanelSectionRow>
-        <Button layout="below" bottomSeparator={false} onClick={onClick}>
-          What is 2+2?
-        </Button>
-        <div>Server says: {result}</div>
-      </PanelSectionRow>
-    </PanelSection>
+    <div>
+      <Button
+        onClick={(e) =>
+          showModal(
+            <Menu label="Menu" cancelText="CAAAANCEL" onCancel={() => {}}>
+              <MenuItem onSelected={() => {}}>Item #1</MenuItem>
+              <MenuItem onSelected={() => {}}>Item #2</MenuItem>
+              <MenuItem onSelected={() => {}}>Item #3</MenuItem>
+            </Menu>,
+            e.currentTarget ?? window
+          )
+        }
+      >
+        Server says yolo
+      </Button>
+    </div>
   );
 };
 
 export default definePlugin((serverApi) => {
   return {
-    title: <TabTitle>Example Plugin</TabTitle>,
+    title: <div className={staticClasses.Title}>Example Plugin</div>,
     content: <Content serverAPI={serverApi} />,
     icon: <FaShip />,
   };