diff --git a/astro.config.mjs b/astro.config.mjs
index 6fd0e0d..3e83de0 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -16,6 +16,7 @@ const config = [
     'Variables',
     'Services',
     'Utils',
+    'App',
     'Custom Service',
     'Subclassing GTK Widgets',
     'Examples',
diff --git a/src/content/docs/config/app.md b/src/content/docs/config/app.md
new file mode 100644
index 0000000..9b960ef
--- /dev/null
+++ b/src/content/docs/config/app.md
@@ -0,0 +1,57 @@
+---
+title: App
+description: The Gtk.Application Instance
+---
+
+This is the main `Gtk.Application` instance that is running.
+
+## signals
+
+* `window-toggled`: `(windowName: string, visible: boolean)`
+* `config-parsed`: emitted on startup
+
+## properties
+
+* `windows`: `Gtk.Window[]`
+* `configDir`: `string` path to the config directory
+
+## methods
+
+* `addWindow`: `(window: Gtk.Window) => void`
+* `removeWindow`: `(window: Gtk.Window) => void`
+* `getWindow`: `(name: string) => Gtk.Window`
+* `closeWindow`: `(name: string) => void`
+* `openWindow`: `(name: string) => void`
+* `toggleWindow`: `(name: string) => void`
+* `quit`: `() => void`
+* `resetCss`: `() => void`
+* `applyCss`: `(path: string) => void`
+
+## Window toggled signal
+
+```js
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+
+// this is only signaled for windows exported in config.js
+// or added with App.addWindow
+const label = Widget.Label()
+    .hook(App, (self, windowName, visible) => {
+        self.label = `${windowName} is ${visible ? 'visible' : 'not visible'}`;
+    }, 'window-toggled')
+});
+```
+
+## Applying CSS
+
+If you want to change the style sheet on runtime
+
+```js
+import App from 'resource:///com/github/Aylur/ags/app.js';
+
+// if you apply multiple, they are all going to apply on top of each other
+App.applyCss('path-to-file');
+
+// to reset applied stylesheets
+App.resetCss();
+```