diff --git a/packages/client/package.json b/packages/client/package.json
index 9a40bea639..c3d2c2f746 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -12,6 +12,7 @@
     "deep-equal": "^2.0.1",
     "mustache": "^4.0.1",
     "regexparam": "^1.3.0",
+    "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
   },
   "devDependencies": {
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 42946c809d..e25f67e69e 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -3,13 +3,13 @@
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
   import SDK from "../sdk"
-  import { createDataStore, initialise, screenStore, errorStore } from "../store"
+  import { createDataStore, initialise, screenStore, notificationStore } from "../store"
 
   // Provide contexts
   setContext("sdk", SDK)
   setContext("component", writable({}))
   setContext("data", createDataStore())
-  setContext("error", errorStore)
+  setContext("notification", notificationStore)
   setContext("screenslot", false)
 
   let loaded = false
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 0eb27e532b..5c796db7a9 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -1,5 +1,5 @@
 import * as API from "./api"
-import { authStore, errorStore, routeStore, screenStore, bindingStore } from "./store"
+import { authStore, notificationStore, routeStore, screenStore, bindingStore } from "./store"
 import { styleable } from "./utils/styleable"
 import { linkable } from "./utils/linkable"
 import DataProvider from "./components/DataProvider.svelte"
@@ -7,7 +7,7 @@ import DataProvider from "./components/DataProvider.svelte"
 export default {
   API,
   authStore,
-  errorStore,
+  notificationStore,
   routeStore,
   screenStore,
   styleable,
diff --git a/packages/client/src/store/error.js b/packages/client/src/store/error.js
deleted file mode 100644
index 01c819d2d2..0000000000
--- a/packages/client/src/store/error.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from "svelte/store"
-
-export const errorStore = writable('')
diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js
index a9265acb5c..324d8c23e8 100644
--- a/packages/client/src/store/index.js
+++ b/packages/client/src/store/index.js
@@ -1,5 +1,5 @@
 export { authStore } from "./auth"
-export { errorStore } from "./error"
+export { notificationStore } from "./notifier"
 export { routeStore } from "./routes"
 export { screenStore } from "./screens"
 export { builderStore } from "./builder"
diff --git a/packages/client/src/store/notifier.js b/packages/client/src/store/notifier.js
new file mode 100644
index 0000000000..85e708e92a
--- /dev/null
+++ b/packages/client/src/store/notifier.js
@@ -0,0 +1,23 @@
+import { writable } from "svelte/store"
+import { generate } from "shortid"
+
+export const notificationStore = writable({
+  notifications: [],
+})
+
+export function send(message, type = "default") {
+  notificationStore.update(state => {
+    state.notifications = [
+      ...state.notifications,
+      { id: generate(), type, message },
+    ]
+    return state
+  })
+}
+
+export const notifier = {
+  danger: msg => send(msg, "danger"),
+  warning: msg => send(msg, "warning"),
+  info: msg => send(msg, "info"),
+  success: msg => send(msg, "success"),
+}
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index e90defb427..6660faa3eb 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -1367,6 +1367,11 @@ mustache@^4.0.1:
   resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.0.1.tgz#d99beb031701ad433338e7ea65e0489416c854a2"
   integrity sha512-yL5VE97+OXn4+Er3THSmTdCFCtx5hHWzrolvH+JObZnUYwuaG7XV+Ch4fR2cIrcYI0tFHxS7iyFYl14bW8y2sA==
 
+nanoid@^2.1.0:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
+  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
+
 nwsapi@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
@@ -1808,6 +1813,13 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shortid@^2.2.15:
+  version "2.2.16"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.16.tgz#b742b8f0cb96406fd391c76bfc18a67a57fe5608"
+  integrity sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==
+  dependencies:
+    nanoid "^2.1.0"
+
 side-channel@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index d175bfd6b0..4b8838d43e 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -3,6 +3,9 @@
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
+  const notification = getContext("notification")
+
+  console.log($notification)
 
   export let icon = ""
   export let size = "fa-lg"