diff --git a/src/api/settings/components/card/card.jsx b/src/api/settings/components/card/card.jsx
new file mode 100644
index 0000000..6ad5b44
--- /dev/null
+++ b/src/api/settings/components/card/card.jsx
@@ -0,0 +1,83 @@
+// @flow
+/*import { make, join } from '@modules/styles';
+import SettingsAPI from '@modules/apis/Settings';
+import Manager, { modules } from '@modules/manager';
+
+const styles = make('pluginCard');
+const Settings = SettingsAPI.create('modules');
+
+const { Filters } = Webpack;
+
+const [
+  SwitchItem,
+  { Heading },
+  SettingsIcon,
+] = Webpack.bulk(
+  Filters.byDisplayName('SwitchItem'),
+  Filters.byProps('Heading'),
+  Filters.byDisplayName('Gear'),
+);*/
+
+import common from "../../../common";
+import webpack from "../../../webpack";
+const React = common.React;
+
+const SwitchItem = webpack.findByDisplayName("SwitchItem");
+const { Heading } = webpack.findByProps("Heading");
+const SettingsIcon = webpack.findByDisplayName("Gear");
+
+function useDidUpdateEffect(effect, deps?) {
+    const didMountRef = React.useRef(false);
+
+    React.useEffect(() => {
+        if (didMountRef.current) return effect();
+
+        // else set didMount to true
+        didMountRef.current = true;
+    }, deps);
+}
+
+export default (module: {
+    file: string,
+    name: string,
+    version: string,
+    description: string,
+    setPage: React.Dispatch<React.SetStateAction<string>>
+}) => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.headerContainer}>
+                <div className={styles.textContainer}>
+                    <Heading
+                        level={2}
+                        lineClamp={1}
+                        className={styles.text}
+                        variant="heading-lg/medium"
+                    >
+                        {module.name}
+                    </Heading>
+                    <div className={styles.version}>{module.version}</div>
+                </div>
+                <SwitchItem
+                    hideBorder
+                    value={enabled}
+                    onChange={setEnabled}
+                    className={styles.switch}
+                />
+                <div
+                    className={join(
+                        styles.settings,
+                        !enabled || !settings ? styles.settingsDisabled : false
+                    )}
+                >
+                    <SettingsIcon
+                        onClick={() =>
+                            enabled && settings && setPage(module.file)
+                        }
+                    />
+                </div>
+            </div>
+            <div className={styles.description}>{module.description}</div>
+        </div>
+    );
+};
diff --git a/src/api/settings/settingsInj.js b/src/api/settings/settingsInj.js
index ff3373c..e33bd9c 100644
--- a/src/api/settings/settingsInj.js
+++ b/src/api/settings/settingsInj.js
@@ -2,10 +2,13 @@
 
 import webpack from "../webpack.js";
 import common from "../common.js";
+
 const React = common.React;
 
 const settingsSym = Symbol("__settings");
 
+window.demonSettings = {};
+
 // super secret value that shouldnt be exposed, used internally to avoid section conflicts and the like
 const ovrwrtSctnSym: symbol = Symbol("__overwriteSection");
 
@@ -26,11 +29,13 @@ type getPredicateSectionsEntry =
       };
 
 function patch(args: mixed, ret: getPredicateSectionsEntry[]) {
-    const processedEntries = window.demon[settingsSym].entries.map((e) => ({
-        section: (e[ovrwrtSctnSym] ?? "DEMON_SETTINGS_LOADER_") + e.name,
-        label: e.name,
-        element: e.component
-    }));
+    const processedEntries = window.demonSettings[settingsSym].entries.map(
+        (e) => ({
+            section: (e[ovrwrtSctnSym] ?? "DEMON_SETTINGS_LOADER_") + e.name,
+            label: e.name,
+            element: e.component
+        })
+    );
 
     processedEntries.map((e) => {
         console.log(e);
@@ -49,8 +54,9 @@ function patch(args: mixed, ret: getPredicateSectionsEntry[]) {
 }
 
 function init() {
-    window.demon[settingsSym] = {
-        patch: window.demon.patcher.after(
+    const patcher = window.demon.require("patcher");
+    window.demonSettings[settingsSym] = {
+        patch: patcher.after(
             "getPredicateSections",
             settingsView.default.prototype,
             patch
@@ -63,12 +69,12 @@ function init() {
 }
 
 function unInit() {
-    window.demon[settingsSym].patch();
-    delete window.demon[settingsSym];
+    window.demonSettings[settingsSym].patch();
+    delete window.demonSettings[settingsSym];
 }
 
 function unregisterSettingsEntry(name: string) {
-    let s = window.demon[settingsSym];
+    let s = window.demonSettings[settingsSym];
     s.entries = s.entries.filter((e) => (e[ovrwrtSctnSym] ?? e.name) !== name);
 }
 
@@ -81,7 +87,7 @@ function registerSettingsEntry(
     if (section) entry[ovrwrtSctnSym] = section;
     //entry.component.type = entry.component.type.default
     console.log(entry);
-    window.demon[settingsSym].entries.push(entry);
+    window.demonSettings[settingsSym].entries.push(entry);
     return () => unregisterSettingsEntry(name);
 }
 
diff --git a/src/api/webpack.js b/src/api/webpack.js
index 12bb39b..a53276f 100644
--- a/src/api/webpack.js
+++ b/src/api/webpack.js
@@ -38,7 +38,8 @@ type WebpackModules = {
     findAll: (filter: FilterFunc) => Object[],
     findByProps: (...props: string[]) => Object,
     findByPropsAll: (...props: string[]) => Object[],
-    findByDisplayName: (prop: string) => Object[]
+    findByDisplayName: (prop: string) => Object[],
+    reloadModules: () => void
 };
 
 let webpack: WebpackModules = {
@@ -58,6 +59,10 @@ let webpack: WebpackModules = {
     },
     findByDisplayName: (prop: string) => {
         return webpack.find((m) => m?.default?.displayName === prop);
+    },
+    reloadModules: () => {
+        //NOTE: i have no idea why this could even feasibly need to be used, but i'm adding it anyways
+        webpack.modules = getModules();
     }
 };
 
diff --git a/src/index.js b/src/index.js
index c35b76c..56f149e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,32 @@
+// @flow
 import init from "./init.js";
+import settingsInj from "./api/settings/settingsInj";
 
-if (window.demon) {
-    delete window.demon; // this is a very good idea
+const obj = {};
+
+init(obj);
+
+window.demon = {};
+
+function isAllowed(mod: String): boolean {
+    //TODO: permissions checking
+    return true;
 }
 
-init(window);
+window.demon.require = (mod: String): Object => {
+    if (!isAllowed(mod)) {
+        throw new Error("Not allowed!"); //TODO: make this not irrepairably error out
+    }
+    const mods = mod.split("/");
+    let res = obj.demon;
+    mods.forEach((m) => {
+        if (m in res) {
+            res = res[m];
+        } else {
+            throw new Error("Module does not exist!");
+        }
+    });
+    return res;
+};
+
+settingsInj.init();
diff --git a/src/init.js b/src/init.js
index 901025c..c136a48 100644
--- a/src/init.js
+++ b/src/init.js
@@ -4,7 +4,6 @@ import webpack from "./api/webpack";
 import common from "./api/common";
 import commands from "./api/commands";
 import plugins from "./api/plugins";
-import settingsInj from "./api/settings/settingsInj";
 import settings from "./api/settings/settings";
 import css from "./api/css";
 
@@ -44,9 +43,7 @@ async function init(obj: Object): Promise<void> {
         }
     };
     commands.init(obj);
-    settingsInj.init();
     plugins.init(obj);
-    settings.init();
     css.init(obj);
 }