diff --git a/components/src/02-elements/cookie-message/CookieMessage.html b/components/src/02-elements/cookie-message/CookieMessage.html
deleted file mode 100644
index c8cd2baa7..000000000
--- a/components/src/02-elements/cookie-message/CookieMessage.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<div
-  :class="['cookie-message', isOpen && 'cookie-message--open']"
-  :data-type="dataType"
-  :aria-label="ariaLabel"
-  tabindex="0"
->
-  <div class="cookie-message__container">
-    <span
-      class="cookie-message__text"
-      v-html="text"
-    />
-    <a-button
-      :aria-label="closeAriaLabel"
-      class="cookie-message__close"
-      @click.native="closeBar()"
-    >
-      {{ closeButton }}
-      <a-icon
-        :icon="closeIcon"
-        class="cookie-message__close-icon"
-      />
-     </a-button>
-  </div>
-</div>
diff --git a/components/src/02-elements/cookie-message/CookieMessage.stories.js b/components/src/02-elements/cookie-message/CookieMessage.stories.js
deleted file mode 100644
index 9a6f74839..000000000
--- a/components/src/02-elements/cookie-message/CookieMessage.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-
-import ACookieMessage from './CookieMessage.vue'
-
-storiesOf('Elements/CookieMessage', module)
-  // @vue/component
-  .add('Default', () => ({
-    components: { ACookieMessage },
-    template: `
-      <a-cookie-message
-        text="<a href='#' class='cookie-message__link'>Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings."
-        closeIcon="close"
-        dataType="cookie"
-        closeButton="Close"
-      />
-    `
-  }))
diff --git a/components/src/03-modules/footer/Footer.js b/components/src/03-modules/footer/Footer.js
index 6a8b1086a..2d855f1a7 100644
--- a/components/src/03-modules/footer/Footer.js
+++ b/components/src/03-modules/footer/Footer.js
@@ -3,7 +3,7 @@ import ALink from '../../atoms/link/Link.vue'
 import AButton from '../../atoms/button/Button.vue'
 import AList from '../../atoms/list/List.vue'
 import AListItem from '../../atoms/list-item/ListItem.vue'
-import ACookieMessage from '../../02-elements/cookie-message/CookieMessage.vue'
+import ACookieMessage from '../../molecules/cookie-message/CookieMessage.vue'
 import ADropdownList from '../../molecules/collapse/Collapse.vue'
 import ANewsletter from '../../03-modules/newsletter/Newsletter.vue'
 
diff --git a/components/src/molecules/cookie-message/CookieMessage.html b/components/src/molecules/cookie-message/CookieMessage.html
new file mode 100644
index 000000000..db6b15377
--- /dev/null
+++ b/components/src/molecules/cookie-message/CookieMessage.html
@@ -0,0 +1,29 @@
+<div
+  class="a-cookie-message"
+  :aria-label="ariaLabel"
+  tabindex="0"
+>
+  <div class="a-cookie-message__container">
+    <div class="a-cookie-message__text">
+      <!-- @slot Content slot -->
+      <slot />
+    </div>
+    <!-- @slot Close button (Scoped slot) -->
+    <slot
+      name="button"
+      :close-bar="closeBar"
+    >
+      <a-button
+        :aria-label="closeAriaLabel"
+        class="a-cookie-message__close"
+        @click.native="closeBar"
+      >
+        {{ closeButton }}
+        <a-icon
+          icon="close"
+          class="a-cookie-message__close-icon"
+        />
+      </a-button>
+    </slot>
+  </div>
+</div>
diff --git a/components/src/02-elements/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
similarity index 59%
rename from components/src/02-elements/cookie-message/CookieMessage.js
rename to components/src/molecules/cookie-message/CookieMessage.js
index 886b61d1a..44f049946 100644
--- a/components/src/02-elements/cookie-message/CookieMessage.js
+++ b/components/src/molecules/cookie-message/CookieMessage.js
@@ -8,52 +8,43 @@ export default {
     AButton
   },
   props: {
-    text: {
-      type: String,
-      required: true
-    },
-    dataType: {
-      type: String,
-      required: true
-    },
-    closeIcon: {
-      type: String,
-      default: null
-    },
+    /**
+     * Text for close button
+     */
     closeButton: {
       type: String,
       default: null
     },
+    /**
+     * Aria label for container
+     */
     ariaLabel: {
       type: String,
-      default: 'Cookie policy message'
+      default: null
     },
+    /**
+     * Aria label for close button
+     */
     closeAriaLabel: {
       type: String,
-      default: 'Close cookie message'
-    }
-  },
-  data: () => {
-    return {
-      isOpen: false
-    }
-  },
-  mounted () {
-    if (localStorage.getItem(this.dataType) !== 'closed') {
-      this.isOpen = true
+      default: null
     }
   },
   methods: {
     closeBar () {
-      const focusable = document.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]')
+      const focusable = this.$el.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]')
 
-      this.isOpen = false
-      localStorage.setItem(this.dataType, 'closed')
       // after closing message box move focus on first focusable element on the page
       if (focusable.length) {
         let firstFocusable = [...focusable].find(el => el.offsetParent !== null)
         firstFocusable.focus()
       }
+
+      /**
+       * Triggered close button
+       * @type {Event}
+       */
+      this.$emit('close')
     }
   }
 }
diff --git a/components/src/02-elements/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
similarity index 73%
rename from components/src/02-elements/cookie-message/CookieMessage.scss
rename to components/src/molecules/cookie-message/CookieMessage.scss
index 00d7dfe58..20c41bc00 100644
--- a/components/src/02-elements/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -4,23 +4,27 @@ $cookie-message__width                 : 100% !default;
 $cookie-message__background-color      : $gray-lightest !default;
 $cookie-message__font-size             : $font-size-small !default;
 $cookie-message__font-family           : $font-family-base !default;
-$cookie-message__text-color            : $gray !default;
+$cookie-message__container-min-width  : 100% !default;
+$cookie-message__text-color            : $gray-dark !default;
 $cookie-message__text-padding          : $spacer--medium $spacer--medium 0 $spacer--medium !default;
 $cookie-message__text-padding--small   : $spacer--medium $spacer $spacer--medium $spacer--medium !default;
+$cookie-message__text-line-height      : 1.5 !default;
+$cookie-message__text-line-height      : 1.5 !default;
 $cookie-message__link-color            : $blue !default;
-$cookie-message__close-color           : $cookie-message__text-color !default;
 $cookie-message__close-size            : 48px !default;
+$cookie-message__close-color           : $cookie-message__text-color !default;
+$cookie-message__close-background      : none !default;
+$cookie-message__close-border          : none !default;
 $cookie-message__close-font-weight     : $font-weight-bold !default;
 $cookie-message__close-padding         : 0 $spacer--medium 0 0 !default;
 $cookie-message__close-padding--small  : 0 $spacer--medium 0 $spacer !default;
 $cookie-message__text-padding--small   : $spacer--medium $spacer $spacer--medium $spacer--medium !default;
 $cookie-message__close-icon-size       : 14px !default;
 $cookie-message__close-icon-margin-left: $spacer !default;
+$cookie-message__close-icon-fill       : $color-primary !default;
 $cookie-message__close-icon-transition : $transition-base !default;
 
-
-.cookie-message {
-  display: none;
+.a-cookie-message {
   align-items: stretch;
   box-sizing: border-box;
   width: $cookie-message__width;
@@ -33,8 +37,7 @@ $cookie-message__close-icon-transition : $transition-base !default;
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
-    min-width: 100%;
-    text-align: center;
+    min-width: $cookie-message__container-min-width;
 
     @include mq($screen-s) {
       flex-wrap: nowrap;
@@ -46,8 +49,7 @@ $cookie-message__close-icon-transition : $transition-base !default;
     flex-basis: 100%;
     padding: $cookie-message__text-padding;
     color: $cookie-message__text-color;
-    font-size: inherit;
-    font-family: inherit;
+    line-height: $cookie-message__text-line-height;
     text-align: justify;
 
     @include mq($screen-s) {
@@ -55,10 +57,10 @@ $cookie-message__close-icon-transition : $transition-base !default;
       padding: $cookie-message__text-padding--small;
       text-align: left;
     }
-  }
 
-  &__link {
-    color: $cookie-message__link-color;
+    & > a {
+      color: $cookie-message__link-color;
+    }
   }
 
   &__close {
@@ -71,16 +73,19 @@ $cookie-message__close-icon-transition : $transition-base !default;
     padding: $cookie-message__close-padding;
     color: $cookie-message__close-color;
     font-weight: $cookie-message__close-font-weight;
-    font-size: inherit;
-    font-family: inherit;
-    background: none;
-    border: none;
+    background: $cookie-message__close-background;
+    border: $cookie-message__close-border;
     cursor: pointer;
 
     &:active,
-    &:hover {
+    &:hover,
+    &:focus {
       color: $cookie-message__close-color;
-      background: none;
+      background: $cookie-message__close-background;
+
+      .a-cookie-message__close-icon {
+        fill: $cookie-message__close-icon-fill;
+      }
     }
 
     @include mq($screen-s) {
@@ -92,20 +97,12 @@ $cookie-message__close-icon-transition : $transition-base !default;
     width: $cookie-message__close-icon-size;
     height: $cookie-message__close-icon-size;
     margin-left: $cookie-message__close-icon-margin-left;
+    transition: $cookie-message__close-icon-transition;
     fill: $cookie-message__close-color;
 
     &:hover,
     &:focus {
-      transition: $cookie-message__close-icon-transition;
-      fill: $color-primary;
+      fill: $cookie-message__close-icon-fill;
     }
   }
-
-  &--open {
-    display: flex;
-  }
-}
-
-.cookie-message__text > a {
-  @extend .cookie-message__link;
 }
diff --git a/components/src/molecules/cookie-message/CookieMessage.spec.js b/components/src/molecules/cookie-message/CookieMessage.spec.js
new file mode 100644
index 000000000..881c5f754
--- /dev/null
+++ b/components/src/molecules/cookie-message/CookieMessage.spec.js
@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils'
+import ACookieMessage from './CookieMessage.vue'
+
+describe('Cookie message', () => {
+  it('has default structure', () => {
+    const wrapper = mount(ACookieMessage)
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('a-cookie-message')
+  })
+
+  it('renders slots content when passed', () => {
+    const wrapper = mount(ACookieMessage, {
+      slots: {
+        default: `<span>Sample content</span>`,
+        button: `<button>Sample button</button>`
+      }
+    })
+
+    const span = wrapper.find('.a-cookie-message span')
+    expect(span.exists()).toBe(true)
+    expect(span.text()).toEqual('Sample content')
+    expect(wrapper.find('button').text()).toBe('Sample button')
+  })
+})
diff --git a/components/src/molecules/cookie-message/CookieMessage.stories.js b/components/src/molecules/cookie-message/CookieMessage.stories.js
new file mode 100644
index 000000000..3ed83b6bd
--- /dev/null
+++ b/components/src/molecules/cookie-message/CookieMessage.stories.js
@@ -0,0 +1,68 @@
+import { storiesOf } from '@storybook/vue'
+import { text } from '@storybook/addon-knobs'
+
+import ALink from '../../atoms/link/Link.vue'
+import ACookieMessage from './CookieMessage.vue'
+
+const data = {
+  props: {
+    textKnobs: {
+      default: text('Button text', 'Button text')
+    },
+    linkText: {
+      default: text('Link text', 'Example link')
+    },
+    infoText: {
+      default: text('Info text', 'Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.')
+    }
+  },
+  data: () => ({
+    isOpen: true
+  }),
+  methods: {
+    close () {
+      this.isOpen = false
+    }
+  }
+}
+storiesOf('Molecules/CookieMessage', module)
+  .addParameters({ info: true })
+  .add('Default', () => ({
+    components: { ACookieMessage, ALink },
+    ...data,
+    template: `
+      <a-cookie-message
+        v-if="isOpen"
+        :close-button="textKnobs"
+        aria-label="Cookie policy message"
+        close-aria-label="Close cookie message"
+        @close="close"
+      >
+        <a-link href='#'>
+          {{ linkText }}
+        </a-link> 
+        {{ infoText }}
+      </a-cookie-message>
+    `
+  }))
+  .add('With slots', () => ({
+    components: { ACookieMessage, ALink },
+    ...data,
+    template: `
+      <a-cookie-message
+        v-if="isOpen"
+        aria-label="Cookie policy message"
+        close-aria-label="Close cookie message"
+      >
+        <a-link href='#'>
+          {{ linkText }}
+        </a-link> 
+        {{ infoText }}
+        <template #button="{ closeBar }">
+          <button @click="() => { closeBar(); close(); }">
+            {{ textKnobs }}
+          </button>
+        </template>
+      </a-cookie-message>
+    `
+  }))
diff --git a/components/src/02-elements/cookie-message/CookieMessage.vue b/components/src/molecules/cookie-message/CookieMessage.vue
similarity index 100%
rename from components/src/02-elements/cookie-message/CookieMessage.vue
rename to components/src/molecules/cookie-message/CookieMessage.vue
diff --git a/cookbook/src/app/App.vue b/cookbook/src/app/App.vue
index 4b34ea4fb..e9a1cccea 100644
--- a/cookbook/src/app/App.vue
+++ b/cookbook/src/app/App.vue
@@ -1,3 +1,5 @@
 <template src="./App.html" />
+
 <script src="./App.js" />
+
 <style lang="scss" src="./App.scss" />