diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 26c4c3c..e3ee9e9 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -34,7 +34,6 @@ import Settings from '@/components/Settings.vue'
 import SeasonedButton from '@/components/ui/SeasonedButton.vue'
 
 import { getEmoji } from '@/api.js'
-// import CreatedLists from './CreatedLists.vue'
 
 export default {
   components: { MoviesList, Settings, SeasonedButton },
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 32bc51b..19899f6 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -1,41 +1,18 @@
 <template>
-  <section class="profile">
-    <div class="profile__content">
-      <h2 class='settings__header'>Register new user</h2>
+  <section>
+    <h1>Register new user</h1>
 
-      <form class="form">
-        <seasoned-input text="username" icon="Email"
-                        @inputValue="setValue('username', $event)"></seasoned-input>
-        <seasoned-input text="password" icon="Keyhole" type="password"
-                        @inputValue="setValue('password', $event)"></seasoned-input>
-        <seasoned-input text="repeat password" icon="Keyhole" type="password"
-                        @inputValue="setValue('passwordRepeat', $event)"></seasoned-input>
+    <seasoned-input text="username" icon="Email" type="username"
+                    @inputValue="setValue('username', $event)" />
+    <seasoned-input text="password" icon="Keyhole" type="password"
+                    @inputValue="setValue('password', $event)" @enter="requestNewUser"/>
+    <seasoned-input text="repeat password" icon="Keyhole" type="password"
+                    @inputValue="setValue('password', $event)" @enter="requestNewUser"/>
 
-        <transition name="message-fade">
-          <div class="message" :class="messageClass" v-if="showMessage">
-            <span class="message-text">{{ messageText }}</span>
-            <span class="message-dismiss" v-on:click="dismissMessage">X</span>
-          </div>
-        </transition>
+    <seasoned-button @click="requestNewUser">Register</seasoned-button>
 
-        <div class="form__group">
-          <seasoned-button @click="requestNewUser">Register</seasoned-button>
-        </div>
-      </form>
-      
-      <div class="form__group">
-        <router-link class="form__group-link" :to="{name: 'signin'}" exact title="Sign in here">
-          <span class="form__group-signin">Sign in here</span>
-        </router-link>
-      </div>
-
-    </div>
-    <section class="not-found" v-if="userLoggedIn === false">
-      <div class="not-found__content">
-        <h2 class="not-found__title">Authentication Request Failed</h2>
-        <button class="not-found__button button">Log In</button>
-      </div>
-    </section>
+    <router-link class="link" to="/signin">Have a user? Sign in here</router-link>
+    <seasoned-messages :messages.sync="messages"></seasoned-messages>
   </section>
 </template>
 
@@ -44,18 +21,16 @@ import axios from 'axios'
 import storage from '@/storage.js'
 import SeasonedButton from '@/components/ui/SeasonedButton.vue'
 import SeasonedInput from '@/components/ui/SeasonedInput.vue'
+import SeasonedMessages from '@/components/ui/SeasonedMessages.vue'
 
 export default {
-  components: { SeasonedButton, SeasonedInput },
+  components: { SeasonedButton, SeasonedInput, SeasonedMessages },
   data(){
     return{
-      userLoggedIn: '',
+      messages: [],
       username: undefined,
       password: undefined,
-      passwordRepeat: undefined,
-      showMessage: false,
-      messageClass: 'message-success',
-      messageText: 'hello world'
+      passwordRepeat: undefined
     }
   },
   methods: {
@@ -71,10 +46,9 @@ export default {
           username: username,
           password: password
         })
-        .then(function(resp) {
+        .then(resp => {
           let data = resp.data;
           if (data.success){
-            this.msg(data.message, 'success');
             localStorage.setItem('token', data.token);
             localStorage.setItem('username', username);
             localStorage.setItem('admin', data.admin)
@@ -82,13 +56,13 @@ export default {
             eventHub.$emit('setUserStatus');
             this.$router.push({ name: 'profile' })
           }
-        }.bind(this))
-        .catch(function(error){
-          this.msg(error.response.data.error, 'warning')
-        }.bind(this));
+        })
+        .catch(error => {
+          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.response.data.error })
+        });
       } 
       else {
-        this.msg(verifyCredentials.reason, 'warning');
+        this.messages.push({ type: 'warning', title: 'Parse error', message: verifyCredentials.reason })
       }
     },
     checkCredentials(username, password, password_re) {
@@ -111,20 +85,6 @@ export default {
         }
       }
     },
-    msg(text, status){
-      if (status === 'warning')
-        this.messageClass = 'message-warning';
-      else if (status === 'success')
-        this.messageClass = 'message-success';
-      else
-        this.messageClass = 'message-info';
-      this.messageText = text;
-      this.showMessage = true;
-      // setTimeout(() => this.showMessage = false, 3500);
-    },
-    dismissMessage(){
-      this.showMessage = false;
-    },
     setValue(l, t) {
       this[l] = t
     },
diff --git a/src/components/Signin.vue b/src/components/Signin.vue
index 9bcfabb..1be4afc 100644
--- a/src/components/Signin.vue
+++ b/src/components/Signin.vue
@@ -1,50 +1,34 @@
 <template>
-  <section class="profile">
-    <div class="profile__content">
-      <h2 class='settings__header'>Sign in</h2>
+  <section>
+    <h1>Sign in</h1>
 
-      <form class="form">
-        <div class="form__buffer"></div>
+    <seasoned-input text="username" icon="Email" type="username"
+                    @inputValue="setValue('username', $event)" />
+    <seasoned-input text="password" icon="Keyhole" type="password"
+                    @inputValue="setValue('password', $event)" @enter="signin"/>
 
-          <seasoned-input text="username" icon="Email" type="username"
-                          @inputValue="setValue('username', $event)" />
-          <seasoned-input text="username" icon="Keyhole" type="password"
-                          @inputValue="setValue('password', $event)" />
+    <seasoned-button @click="signin">sign in</seasoned-button>
 
-          <seasoned-button @click="signin">sign in</seasoned-button>
-          
-          <transition name="message-fade">
-              <div class="message" :class="messageClass" v-if="showMessage">
-                <span class="message-text">{{ messageText }}</span>
-                <span class="message-dismiss" @click="showMessage=false">X</span>
-              </div>
-            </transition>
-      </form>
-      
-      <div class="form__group">
-        <router-link class="form__group-link" :to="{name: 'register'}" exact title="Sign in here">
-          <span class="form__group-signin">Don't have a user? Register here</span>
-        </router-link>
-      </div>
+    <router-link class="link" to="/register">Don't have a user? Register here</router-link>
+    <seasoned-messages :messages.sync="messages"></seasoned-messages>
 
-    </div>
   </section>
 </template>
 
+
+
 <script>
 import axios from 'axios'
 import storage from '../storage.js'
 import SeasonedInput from '@/components/ui/SeasonedInput.vue'
 import SeasonedButton from '@/components/ui/SeasonedButton.vue'
+import SeasonedMessages from '@/components/ui/SeasonedMessages.vue'
 
 export default {
-  components: { SeasonedInput, SeasonedButton },
+  components: { SeasonedInput, SeasonedButton, SeasonedMessages },
   data(){
     return{
-      userLoggedIn: '',
-      showMessage: false,
-      messageClass: 'message-success',
-      messageText: 'hello world',
+      messages: [],
       username: undefined,
       password: undefined
     }
@@ -61,49 +45,30 @@ export default {
         username: username,
         password: password
       })
-      .then(function (resp){
+      .then(resp => {
         let data = resp.data;
         if (data.success){
           localStorage.setItem('token', data.token);
           localStorage.setItem('username', username);
           localStorage.setItem('admin', data.admin);
-          this.userLoggedIn = true;
           
           eventHub.$emit('setUserStatus');
           this.$router.push({ name: 'profile' })
         }
-      }.bind(this))
-      .catch(function (error){
-        if (error.message.endsWith('401'))
-          this.msg('Incorrect username or password ', 'warning')
-        else
-          this.msg(error.message, 'warning')
-      }.bind(this));
-    },
-    msg(text, status){
-      if (status === 'warning')
-        this.messageClass = 'message-warning';
-      else if (status === 'success')
-        this.messageClass = 'message-success';
-      else
-        this.messageClass = 'message-info';
-      this.messageText = text;
-      this.showMessage = true;
-      // setTimeout(() => this.showMessage = false, 3500);
-    },
-    toggleView(){
-      this.register = false;
-    },
+      })
+      .catch(error => {
+        if (error.message.endsWith('401')) {
+          this.messages.push({ type: 'warning', title: 'Access denied', message: 'Incorrect username or password' })
+        }
+        else {
+          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.message })
+        }
+      });
+    }
   },
   created(){
     document.title = 'Sign in' + storage.pageTitlePostfix;
     storage.backTitle = document.title;
-    if (this.userLoggedIn == true) {
-      this.$router.push({ name: 'profile' })
-    }
-  },
-  mounted(){
-    // this.$refs.email.focus();
   }
 }
 </script>
diff --git a/src/components/ui/SeasonedMessages.vue b/src/components/ui/SeasonedMessages.vue
new file mode 100644
index 0000000..b68c415
--- /dev/null
+++ b/src/components/ui/SeasonedMessages.vue
@@ -0,0 +1,159 @@
+<template>
+  <transition-group name="fade">
+    <div class="message" v-for="message in messages" :class="message.type || 'warning'" :key="message">
+      <span class="pinstripe"></span>
+      <div>
+        <h2>{{ message.title || defaultTitles[message.type] }}</h2>
+        <span>{{ message.message }}</span>
+      </div>
+
+      <button class="dismiss" @click="clicked(message)">X</button>
+    </div>
+  </transition-group>
+</template>
+
+<script>
+
+export default {
+  props: {
+    messages: {
+      required: true,
+      type: Array
+    }
+  },
+  data() {
+    return {
+      defaultTitles: {
+        error: 'Unexpected error',
+        warning: 'Something went wrong',
+        undefined: 'Something went wrong'
+      },
+      localMessages: [...this.messages]
+    }
+  },
+  methods: {
+    clicked(e) {
+      const removedMessage = [...this.messages].filter(mes => mes !== e)
+      this.$emit('update:messages', removedMessage)
+    }
+  },
+  // watch: {
+  //   messages(propState, oldState) {
+  //     const newMessage = propState.filter(msg => !this.localMessages.includes(msg))
+  //     console.log('newMessage', newMessage)
+  //     this.localMessages = this.localMessages.concat(newMessage)
+  //   }
+  // }
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+.fade-enter-active {
+  transition: opacity .4s;
+}
+.fade-leave-active {
+  transition: opacitiy .1s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.message {
+  width: 100%;
+  max-width: 35rem;
+  height: 80px;
+
+  display: flex;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  // padding-bottom: 1rem;
+  // background-color: red;
+
+  &:first-of-type {
+    background-color: navajowhite;
+  }
+  
+
+  > div {
+    margin: 8px 24px;
+    width: 100%;
+
+  }
+
+  h2 {
+    font-weight: 300;
+    margin: 0;
+  }
+  span {
+    font-weight: 300;
+  }
+
+  .pinstripe {
+    height: 100%;
+    width: 0.5rem;
+    // background-color: $color-error-highlight;
+  }
+
+  .dismiss {
+    position: relative;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-color: transparent;
+    border: unset;
+    font-size: 18px;
+    cursor: pointer;
+
+    top: 0;
+    float: right;
+    height: 1.5rem;
+    width: 1.5rem;
+    padding: 0;
+    margin-top: 0.5rem;
+    margin-right: 0.5rem;
+    transition: color .5s ease;
+    color: $white-80;
+
+    &:hover {
+      color: $white;
+    }
+  }
+
+  &.success {
+    color: $color-error-text;
+    background-color: $color-success;
+
+    .pinstripe {
+      background-color: $color-success-highlight;
+    }
+  }
+  
+  &.error {
+    color: $color-error-text;
+    background-color: $color-error;
+
+    .pinstripe {
+      background-color: $color-error-highlight;
+    }
+  }
+
+  &.warning {
+    color: $black;
+    background-color: $color-warning;
+
+    .dismiss {
+      color: $black-80;
+
+      &:hover {
+        color: $black;
+      }
+    }
+    
+    .pinstripe {
+      background-color: $color-warning-light;
+    }
+  }
+}
+
+</style>
\ No newline at end of file