diff --git a/README.md b/README.md
index 45f6e9010..d395a54e0 100644
--- a/README.md
+++ b/README.md
@@ -42,13 +42,16 @@ $ yarn start
 
 ## Styleguide
 
-All reusable Components (for example avatar) should be done inside the styleguide directory.
+All reusable Components (for example avatar) should be done inside the [Nitro-Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) repository.
 
 ![Styleguide Screenshot](screenshot-styleguide.png)
 
 More information can be found here: https://github.com/Human-Connection/Nitro-Styleguide
 
 
+If you need to change something in the styleguide and want to see the effects on the frontend immediately, then we have you covered.
+You need to clone the styleguide to the parent directory `../Nitro-Styleguide` and run `yarn && yarn run dev`. After that you run `yarn run dev:styleguide` instead of `yarn run dev` and you will see your changes reflected inside the fronten!
+
 ## Internationalization (i18n)
 
 You can help translating the interface by joining us on [lokalise.co](https://lokalise.co/public/556252725c18dd752dd546.13222042/).
diff --git a/components/SearchInput.spec.js b/components/SearchInput.spec.js
index 5d6c3ed4c..4e2b08eb6 100644
--- a/components/SearchInput.spec.js
+++ b/components/SearchInput.spec.js
@@ -1,5 +1,8 @@
 import { shallowMount, mount } from '@vue/test-utils'
 import SearchInput from './SearchInput.vue'
+import Vue from 'vue'
+import Styleguide from '@human-connection/styleguide'
+Vue.use(Styleguide) 
 
 describe('SearchInput.vue', () => {
   let wrapper
@@ -28,10 +31,12 @@ describe('SearchInput.vue', () => {
   })
 
   it('changes searchValue as a user inputs a value', () => {
-    wrapper = shallowMount(SearchInput, { mocks })
-    let input = wrapper.find('#nav-search')
-    input.element.value = 'abc'
-    input.trigger('input')
-    expect(wrapper.vm.value).toBe('abc')
+    wrapper = mount(SearchInput, { mocks })
+    console.log(wrapper.html())
+    let input = wrapper.find('input#nav-search')
+    console.log(input)
+    input.trigger('focus')
+    input.setValue('abc')
+    expect(wrapper.vm.searchValue).toBe('abc')
   })
 })
diff --git a/cypress/integration/06.Search.feature b/cypress/integration/06.Search.feature
index 818afa288..e317a6a56 100644
--- a/cypress/integration/06.Search.feature
+++ b/cypress/integration/06.Search.feature
@@ -11,5 +11,5 @@ Feature: Search
 
   Scenario: Search for specific words
     Given I am logged in
-    When I search for a specific word
+    When I search for "Essays"
     Then I should see posts with that word included
diff --git a/cypress/integration/common/search.js b/cypress/integration/common/search.js
index 1415ebda3..222fe0f6b 100644
--- a/cypress/integration/common/search.js
+++ b/cypress/integration/common/search.js
@@ -1,9 +1,9 @@
 import { When, Then } from 'cypress-cucumber-preprocessor/steps'
 
-When('I search for a specific word', () => {
+When('I search for {string}', value => {
   cy.get('#nav-search')
     .focus()
-    .type('Essays')
+    .type(value)
 })
 
 Then('I should see posts with that word included', () => {
diff --git a/nuxt.config.js b/nuxt.config.js
index 3fab93c35..dfe6ceef8 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,7 +1,14 @@
 const pkg = require('./package')
 const envWhitelist = ['NODE_ENV', 'MAINTENANCE', 'MAPBOX_TOKEN']
 const dev = process.env.NODE_ENV !== 'production'
-const path = require('path')
+
+const styleguidePath = '../Nitro-Styleguide'
+const styleguideStyles = process.env.STYLEGUIDE_DEV
+  ? [
+      `${styleguidePath}/src/system/styles/main.scss`,
+      `${styleguidePath}/src/system/styles/shared.scss`
+    ]
+  : '@human-connection/styleguide/dist/shared.scss'
 
 module.exports = {
   mode: 'universal',
@@ -9,7 +16,7 @@ module.exports = {
   dev: dev,
   debug: dev ? 'nuxt:*,app' : null,
 
-  modern: 'server',
+  modern: !dev ? 'server' : false,
 
   transition: {
     name: 'slide-up',
@@ -66,11 +73,22 @@ module.exports = {
   ** Global CSS
   */
   css: ['~assets/styles/main.scss'],
+
+  /*
+  ** Global processed styles
+  */
+  styleResources: {
+    scss: styleguideStyles
+  },
+
   /*
   ** Plugins to load before mounting the App
   */
   plugins: [
-    { src: '~/plugins/styleguide.js', ssr: true },
+    {
+      src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`,
+      ssr: true
+    },
     { src: '~/plugins/i18n.js', ssr: true },
     { src: '~/plugins/axios.js', ssr: false },
     { src: '~/plugins/keep-alive.js', ssr: false },
@@ -102,10 +120,6 @@ module.exports = {
     'portal-vue/nuxt'
   ],
 
-  styleResources: {
-    scss: ['@human-connection/styleguide/dist/shared.scss']
-  },
-
   /*
   ** Axios module configuration
   */
@@ -180,6 +194,20 @@ module.exports = {
           exclude: /(node_modules)/
         })
       }
+      if (process.env.STYLEGUIDE_DEV) {
+        const path = require('path')
+        config.resolve.alias['@@'] = path.resolve(
+          __dirname,
+          `${styleguidePath}/src/system`
+        )
+        config.module.rules.push({
+          resourceQuery: /blockType=docs/,
+          loader: require.resolve(
+            `${styleguidePath}/src/loader/docs-trim-loader.js`
+          )
+        })
+      }
+
       const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
       svgRule.test = /\.(png|jpe?g|gif|webp)$/
       config.module.rules.push({
diff --git a/package.json b/package.json
index 796f56298..0fabf30fd 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,11 @@
   "private": true,
   "scripts": {
     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
+    "dev:styleguide": "cross-env STYLEGUIDE_DEV=true yarn dev",
     "build": "nuxt build",
     "start": "cross-env node server/index.js",
     "generate": "nuxt generate",
     "lint": "eslint --ext .js,.vue .",
-    "styleguide": "echo 'Command styleguide is Deprecated!'",
-    "styleguide:build": "echo 'Command styleguide:build is Deprecated!'",
     "test": "jest",
     "precommit": "yarn lint",
     "e2e:local": "cypress run --headed",
@@ -56,6 +55,9 @@
     "nuxt": "~2.4.5",
     "nuxt-env": "~0.1.0",
     "portal-vue": "~1.5.1",
+    "@human-connection/styleguide": "~0.5.2",
+    "v-tooltip": "~2.0.0-rc.33",
+    "vue-count-to": "~1.0.13",
     "string-hash": "^1.1.3",
     "tiptap": "^1.13.0",
     "tiptap-extensions": "^1.13.0",
diff --git a/plugins/styleguide-dev.js b/plugins/styleguide-dev.js
new file mode 100644
index 000000000..4cffe028f
--- /dev/null
+++ b/plugins/styleguide-dev.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Styleguide from '@@'
+
+Vue.use(Styleguide)
diff --git a/plugins/styleguide.js b/plugins/styleguide.js
index 788d5dcc7..b04724c37 100644
--- a/plugins/styleguide.js
+++ b/plugins/styleguide.js
@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Styleguide from '@human-connection/styleguide'
 import '@human-connection/styleguide/dist/system.css'
-// import '@human-connection/styleguide/dist/shared.scss'
 
 Vue.use(Styleguide)
diff --git a/yarn.lock b/yarn.lock
index 84439c187..2de0aa7d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -894,10 +894,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@human-connection/styleguide@~0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.0.tgz#14d5f696461996708b25126dc1e9e900c3a841cf"
-  integrity sha512-xR8iqGnjxGABoSI3AIq2R9YibZi4TTIe5R6/A9cEbWo3XqD/82+tNBjyKhv84Op4KJTgedR6IJtIIOh3H0aeOg==
+"@human-connection/styleguide@~0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.2.tgz#a7d05b612562cfbe4377032bdf32df4a8f0e3f45"
+  integrity sha512-8RSQDv6hRvdToQKtOGv+aNA/lfrNu+eNDy/JBaynJN7bB7veNgQ0XGt9Otq1KmdW2nthWrwsnZLTRaUaGqyAZw==
   dependencies:
     portal-vue "~1.5.1"
     vue "~2.6.7"