diff --git a/docs/ModConf.md b/docs/ModConf.md
deleted file mode 100644
index b428877c..00000000
--- a/docs/ModConf.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# Module Configure (ModConf)
-
-- TODO
-
-## Available libaries
-
-See [`libs.ts`](https://github.com/DerGoogler/MMRL/blob/master/Website/src/components/ConfigureView/libs.ts) to see all usable modules
-
-## Diff. between `require` and `import`
-
-With `require` you only can import predefined libaries, you can't includes files with this method anymore.
-
-```js
-const React = require("react");
-// or
-import React from "react";
-```
-
-old way to import files
-
-```js
-const { Component } = require("!conf/Component.jsx");
-// or
-import { Component } from "!conf/Component.jsx";
-```
-
-> Please do not use this, use `include` instead.
-
----
-
-Using `include` way more stable and supports more including types like
-
-- `*.js`
-- `*.jsx`
-- `*.json`
-- `*.yaml`
-- `*.yml`
-- `*.ini`
-- `*.prop`
-- `*.properties`
-
-```js
-const { Component } = include("Component.jsx");
-
-// to ignore cwd restrictions
-const properties = include(`/data/adb/modules/${modid}/module.prop`, {
-  isolate: false,
-});
-
-const { id, name, author } = properties;
-```
-
-## Defaut functions and variables
-
-There are some default functions and variables that makes the development easier..
-
-> These functions make also usage of the ModConf services.
-
-### `modid`
-
-Types
-
-```ts
-declare const modid: string;
-```
-
-Usage
-
-```js
-log.i(modid);
-```
-
-### `modpath`
-
-Types
-
-```ts
-declare function modpath(path: string): string;
-```
-
-Usage
-
-```js
-const properties = include(modpath("module.prop"), { isolate: false });
-
-const { id, name, author } = properties;
-```
-
-Will print
-
-```
-/data/adb/modules/<ID>/module.prop
-```
-
-> Depends how ModConf is configured
-
-### `confpath`
-
-Types
-
-```ts
-declare function confpath(path: string): string;
-```
-
-Usage
-
-```js
-const properties = include(confpath("Component.jsx"), { isolate: false });
-
-const { id, name, author } = properties;
-```
-
-Will print
-
-```
-/data/adb/modules/<ID>/system/share/mmrl/config/<ID>/Component.jsx
-```
-
-# Setup a page
-
-Small sample to setup a page
-
-```jsx
-import React from "react";
-
-import { Page, Toolbar } from "@mmrl/ui";
-import { useActivity } from "@mmrl/hooks";
-
-import { Stack } from "@mui/material";
-import {
-  Timeline,
-  TimelineItem,
-  TimelineSeparator,
-  TimelineConnector,
-  TimelineContent,
-  TimelineDot,
-} from "@mui/lab";
-
-const Config = () => {
-  const { context } = useActivity();
-
-  const renderToolbar = () => {
-    return (
-      <Toolbar modifier="noshadow">
-        <Toolbar.Left>
-          {/* Pressing this here will close the editor */}
-          <Toolbar.BackButton onClick={context.popPage} />
-        </Toolbar.Left>
-        <Toolbar.Center>My config</Toolbar.Center>
-      </Toolbar>
-    );
-  };
-
-  return (
-    <Page renderToolbar={renderToolbar}>
-      <Stack
-        direction="column"
-        justifyContent="center"
-        alignItems="center"
-        spacing={1}
-        sx={{ height: "100%" }}
-      >
-        <Timeline position="alternate" sx={{ flexGrow: "unset" }}>
-          <TimelineItem>
-            <TimelineSeparator>
-              <TimelineDot />
-              <TimelineConnector />
-            </TimelineSeparator>
-            <TimelineContent>Eat</TimelineContent>
-          </TimelineItem>
-          <TimelineItem>
-            <TimelineSeparator>
-              <TimelineDot />
-              <TimelineConnector />
-            </TimelineSeparator>
-            <TimelineContent>Code</TimelineContent>
-          </TimelineItem>
-          <TimelineItem>
-            <TimelineSeparator>
-              <TimelineDot />
-              <TimelineConnector />
-            </TimelineSeparator>
-            <TimelineContent>Sleep</TimelineContent>
-          </TimelineItem>
-          <TimelineItem>
-            <TimelineSeparator>
-              <TimelineDot />
-            </TimelineSeparator>
-            <TimelineContent>Repeat</TimelineContent>
-          </TimelineItem>
-        </Timeline>
-      </Stack>
-    </Page>
-  );
-};
-
-export default Config;
-```
diff --git a/docs/ModConf/components/Image.md b/docs/ModConf/components/Image.md
new file mode 100644
index 00000000..4b43d921
--- /dev/null
+++ b/docs/ModConf/components/Image.md
@@ -0,0 +1,34 @@
+# Image API
+
+When you want to use images that stored on your device then you can use the `<Image />` component to access them
+
+## Setup
+
+```js
+import { Image } from "@mmrl/ui";
+```
+
+## Usage
+
+```js
+function App() {
+  // type is actually not required
+  return (
+    <Page>
+      <Image src="/sdcard/image.png" type="image/png" />
+    </Page>
+  );
+}
+```
+
+## API
+
+| Attr        | Required | Type      |
+| ----------- | -------- | --------- |
+| `src`       | Yes      | `string`  |
+| `type`      | No       | `string`  |
+| `shadow`    | No       | `number`  |
+| `title`     | No       | `string`  |
+| `noOpen`    | No       | `boolean` |
+| `modFSAdds` | No       | `object`  |
+| `sx`        | No       | `SxProps` |
diff --git a/docs/ModConf/hooks/useActivity.md b/docs/ModConf/hooks/useActivity.md
new file mode 100644
index 00000000..1d2cc734
--- /dev/null
+++ b/docs/ModConf/hooks/useActivity.md
@@ -0,0 +1,72 @@
+# Activity Managment
+
+TODO
+
+## Setup
+
+```js
+import { useActivity } from "@mmrl/hooks";
+```
+
+## Usage
+
+```js
+import React from "react";
+import { useActivity } from "@mmrl/hooks";
+import { Page, Toolbar } from "@mmrl/ui";
+import { Button } from "@mui/material";
+
+function App() {
+  const { context } = useActivtiy();
+
+  const handleOpen = () => {
+    context.pushPage({
+      component: NewPage,
+      // don't forget this!
+      key: "MyNewPage",
+      // if your page has props
+      props: {},
+      // push any object here
+      extra: {
+        title: "Hello",
+      },
+    });
+  };
+
+  return (
+    <Page>
+      <Button onClick={handleOpen}>Push</Button>
+    </Page>
+  );
+}
+
+const allowBack = false;
+
+function NewPage() {
+  // get here your extras
+  const { context, extra } = useActivtiy();
+
+  return (
+    <Page
+      // if you want override the back event
+      onDeviceBackButton={(e) => {
+        if (allowBack) {
+          e.callParentHandler();
+        }
+      }}
+      renderToolbar={() => {
+        return (
+          <Toolbar>
+            <Toolbar.Left>
+              <Toolbar.BackButton onClick={context.popPage} />
+            </Toolbar.Left>
+            <Toolbar.Center>{extra.title}</Toolbar.Center>
+          </Toolbar>
+        );
+      }}
+    >
+      Hello World
+    </Page>
+  );
+}
+```
diff --git a/docs/ModConf/index.md b/docs/ModConf/index.md
new file mode 100644
index 00000000..8c4d781d
--- /dev/null
+++ b/docs/ModConf/index.md
@@ -0,0 +1,117 @@
+# Module Configure (ModConf)
+
+- TODO
+
+## Available libaries
+
+See [`libs.ts`](https://github.com/DerGoogler/MMRL/blob/master/Website/src/components/ConfigureView/libs.ts) to see all usable modules
+
+## Diff. between `require` and `import`
+
+With `require` you only can import predefined libaries, you can't includes files with this method anymore.
+
+```js
+const React = require("react");
+// or
+import React from "react";
+```
+
+old way to import files
+
+```js
+const { Component } = require("!conf/Component.jsx");
+// or
+import { Component } from "!conf/Component.jsx";
+```
+
+> Please do not use this, use `include` instead.
+
+---
+
+Using `include` way more stable and supports more including types like
+
+- `*.js`
+- `*.jsx`
+- `*.json`
+- `*.yaml`
+- `*.yml`
+- `*.ini`
+- `*.prop`
+- `*.properties`
+
+```js
+const { Component } = include("Component.jsx");
+
+// to ignore cwd restrictions
+const properties = include(`/data/adb/modules/${modid}/module.prop`, {
+  isolate: false,
+});
+
+const { id, name, author } = properties;
+```
+
+## Defaut functions and variables
+
+There are some default functions and variables that makes the development easier..
+
+> These functions make also usage of the ModConf services.
+
+### `modid`
+
+Types
+
+```ts
+declare const modid: string;
+```
+
+Usage
+
+```js
+log.i(modid);
+```
+
+### `modpath`
+
+Types
+
+```ts
+// Depends how ModFS is configured
+declare function modpath(path: string): string;
+```
+
+Usage
+
+```js
+const properties = include(modpath("module.prop"), { isolate: false });
+
+const { id, name, author } = properties;
+```
+
+Will print
+
+```
+/data/adb/modules/<ID>/module.prop
+```
+
+### `confpath`
+
+Types
+
+```ts
+// Depends how ModFS is configured
+declare function confpath(path: string): string;
+```
+
+Usage
+
+```js
+const properties = include(confpath("Component.jsx"), { isolate: false });
+
+const { id, name, author } = properties;
+```
+
+Will print
+
+```
+/data/adb/modules/<ID>/system/share/mmrl/config/<ID>/Component.jsx
+```
\ No newline at end of file