diff --git a/packages/app/src/hooks/index.js b/packages/app/src/hooks/index.js
new file mode 100755
index 00000000..19de4fb9
--- /dev/null
+++ b/packages/app/src/hooks/index.js
@@ -0,0 +1,2 @@
+export { default as useHacks } from "./useHacks"
+export { default as useCenteredContainer } from "./useCenteredContainer"
\ No newline at end of file
diff --git a/packages/app/src/hooks/useCenteredContainer/index.js b/packages/app/src/hooks/useCenteredContainer/index.js
new file mode 100755
index 00000000..ef6d5e89
--- /dev/null
+++ b/packages/app/src/hooks/useCenteredContainer/index.js
@@ -0,0 +1,11 @@
+import React from "react"
+
+export default () => {
+    React.useEffect(() => {
+        app.layout.toogleCenteredContent(true)
+
+        return () => {
+            app.layout.toogleCenteredContent(false)
+        }
+    }, [])
+}
\ No newline at end of file
diff --git a/packages/app/src/hooks/useHacks/index.js b/packages/app/src/hooks/useHacks/index.js
new file mode 100755
index 00000000..a4f12831
--- /dev/null
+++ b/packages/app/src/hooks/useHacks/index.js
@@ -0,0 +1,29 @@
+import React from "react"
+
+export default (hacks, options = {}) => {
+    if (typeof options.namespace === "undefined") {
+        // if no namespace is provided, use the name of the calling function
+        const stack = new Error().stack
+        const caller = stack.split("\n")[2].trim()
+        const match = caller.match(/at ([^(]+) \(/)
+        if (match) {
+            options.namespace = match[1]
+        }
+    }
+
+    if (!options.namespace) {
+        throw new Error("No namespace provided for hacks")
+    }
+
+    React.useEffect(() => {
+        if (!window._hacks) {
+            window._hacks = {}
+        }
+
+        window._hacks[options.namespace] = hacks
+
+        return () => {
+            delete window._hacks[options.namespace]
+        }
+    }, [])
+}
\ No newline at end of file