diff --git a/app/views/layouts/_notification.html.erb b/app/views/layouts/_notification.html.erb
index 5c996ba..8abe7ca 100644
--- a/app/views/layouts/_notification.html.erb
+++ b/app/views/layouts/_notification.html.erb
@@ -1,44 +1,10 @@
 <h2>NOTIFICATION BAR</h2>
 
-<nav class='relative w-full'>
-  <% if alert.present? %>
-    <div class="absolute inset-x-0 top-10">
-      <div class="flex max-w-sm w-full bg-white shadow-md rounded-lg mx-auto">
-        <div class="w-2 bg-red-600">
-        </div>
-        <div class="w-full flex justify-between items-start px-2 py-2">
-          <div class="flex flex-col ml-2">
-            <label class="text-gray-800">Alert</label>
-            <p class="text-gray-500 "><%= alert %></p>
-          </div>
-          <a href="#">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  <% end %>
-
-  <% if notice.present? %>
-    <div class="absolute inset-x-0 top-50">
-      <div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto">
-        <div class="w-2 bg-green-600">
-        </div>
-        <div class="w-full flex justify-between items-start px-2 py-2">
-          <div class="flex flex-col ml-2">
-            <label class="text-gray-800">Notice</label>
-            <p class="text-gray-500 "><%= notice %></p>
-          </div>
-          <a href="#">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  <% end %>
-
-</nav>
+<% if flash %>
+  <script type="module">
+    import { Notyf } from 'notyf';
+    const notyf=new Notyf
+    notyf.success('<%=notice%>')
+    notyf.error('<%=alert%>')
+  </script>
+<%end%>
diff --git a/config/importmap.rb b/config/importmap.rb
index 52f774d..b607570 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -5,3 +5,5 @@ pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
 pin '@hotwired/stimulus', to: 'stimulus.min.js'
 pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
 pin_all_from 'app/javascript/controllers', under: 'controllers'
+
+pin 'notyf' # @3.10.0
diff --git a/vendor/javascript/notyf.js b/vendor/javascript/notyf.js
new file mode 100644
index 0000000..2c6545c
--- /dev/null
+++ b/vendor/javascript/notyf.js
@@ -0,0 +1,13 @@
+var __assign=function(){__assign=Object.assign||function __assign(t){for(var i,e=1,n=arguments.length;e<n;e++){i=arguments[e];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o])}return t};return __assign.apply(this,arguments)};var t=function(){function NotyfNotification(t){this.options=t;this.listeners={}}NotyfNotification.prototype.on=function(t,i){var e=this.listeners[t]||[];this.listeners[t]=e.concat([i])};NotyfNotification.prototype.triggerEvent=function(t,i){var e=this;var n=this.listeners[t]||[];n.forEach((function(t){return t({target:e,event:i})}))};return NotyfNotification}();var i;(function(t){t[t.Add=0]="Add";t[t.Remove=1]="Remove"})(i||(i={}));var e=function(){function NotyfArray(){this.notifications=[]}NotyfArray.prototype.push=function(t){this.notifications.push(t);this.updateFn(t,i.Add,this.notifications)};NotyfArray.prototype.splice=function(t,e){var n=this.notifications.splice(t,e)[0];this.updateFn(n,i.Remove,this.notifications);return n};NotyfArray.prototype.indexOf=function(t){return this.notifications.indexOf(t)};NotyfArray.prototype.onUpdate=function(t){this.updateFn=t};return NotyfArray}();var n;(function(t){t.Dismiss="dismiss";t.Click="click"})(n||(n={}));var o={types:[{type:"success",className:"notyf__toast--success",backgroundColor:"#3dc763",icon:{className:"notyf__icon--success",tagName:"i"}},{type:"error",className:"notyf__toast--error",backgroundColor:"#ed3d3d",icon:{className:"notyf__icon--error",tagName:"i"}}],duration:2e3,ripple:true,position:{x:"right",y:"bottom"},dismissible:false};var a=function(){function NotyfView(){this.notifications=[];this.events={};this.X_POSITION_FLEX_MAP={left:"flex-start",center:"center",right:"flex-end"};this.Y_POSITION_FLEX_MAP={top:"flex-start",center:"center",bottom:"flex-end"};var t=document.createDocumentFragment();var i=this._createHTMLElement({tagName:"div",className:"notyf"});t.appendChild(i);document.body.appendChild(t);this.container=i;this.animationEndEventName=this._getAnimationEndEventName();this._createA11yContainer()}NotyfView.prototype.on=function(t,i){var e;this.events=__assign(__assign({},this.events),(e={},e[t]=i,e))};NotyfView.prototype.update=function(t,e){e===i.Add?this.addNotification(t):e===i.Remove&&this.removeNotification(t)};NotyfView.prototype.removeNotification=function(t){var i=this;var e=this._popRenderedNotification(t);var n;if(e){n=e.node;n.classList.add("notyf__toast--disappear");var o;n.addEventListener(this.animationEndEventName,o=function(t){if(t.target===n){n.removeEventListener(i.animationEndEventName,o);i.container.removeChild(n)}})}};NotyfView.prototype.addNotification=function(t){var i=this._renderNotification(t);this.notifications.push({notification:t,node:i});this._announce(t.options.message||"Notification")};NotyfView.prototype._renderNotification=function(t){var i;var e=this._buildNotificationCard(t);var n=t.options.className;n&&(i=e.classList).add.apply(i,n.split(" "));this.container.appendChild(e);return e};NotyfView.prototype._popRenderedNotification=function(t){var i=-1;for(var e=0;e<this.notifications.length&&i<0;e++)this.notifications[e].notification===t&&(i=e);if(-1!==i)return this.notifications.splice(i,1)[0]};NotyfView.prototype.getXPosition=function(t){var i;return(null===(i=null===t||void 0===t?void 0:t.position)||void 0===i?void 0:i.x)||"right"};NotyfView.prototype.getYPosition=function(t){var i;return(null===(i=null===t||void 0===t?void 0:t.position)||void 0===i?void 0:i.y)||"bottom"};NotyfView.prototype.adjustContainerAlignment=function(t){var i=this.X_POSITION_FLEX_MAP[this.getXPosition(t)];var e=this.Y_POSITION_FLEX_MAP[this.getYPosition(t)];var n=this.container.style;n.setProperty("justify-content",e);n.setProperty("align-items",i)};NotyfView.prototype._buildNotificationCard=function(t){var i=this;var e=t.options;var o=e.icon;this.adjustContainerAlignment(e);var a=this._createHTMLElement({tagName:"div",className:"notyf__toast"});var s=this._createHTMLElement({tagName:"div",className:"notyf__ripple"});var r=this._createHTMLElement({tagName:"div",className:"notyf__wrapper"});var c=this._createHTMLElement({tagName:"div",className:"notyf__message"});c.innerHTML=e.message||"";var f=e.background||e.backgroundColor;if(o){var p=this._createHTMLElement({tagName:"div",className:"notyf__icon"});("string"===typeof o||o instanceof String)&&(p.innerHTML=new String(o).valueOf());if("object"===typeof o){var d=o.tagName,l=void 0===d?"i":d,u=o.className,v=o.text,y=o.color,h=void 0===y?f:y;var m=this._createHTMLElement({tagName:l,className:u,text:v});h&&(m.style.color=h);p.appendChild(m)}r.appendChild(p)}r.appendChild(c);a.appendChild(r);if(f)if(e.ripple){s.style.background=f;a.appendChild(s)}else a.style.background=f;if(e.dismissible){var N=this._createHTMLElement({tagName:"div",className:"notyf__dismiss"});var _=this._createHTMLElement({tagName:"button",className:"notyf__dismiss-btn"});N.appendChild(_);r.appendChild(N);a.classList.add("notyf__toast--dismissible");_.addEventListener("click",(function(e){var o,a;null===(a=(o=i.events)[n.Dismiss])||void 0===a?void 0:a.call(o,{target:t,event:e});e.stopPropagation()}))}a.addEventListener("click",(function(e){var o,a;return null===(a=(o=i.events)[n.Click])||void 0===a?void 0:a.call(o,{target:t,event:e})}));var g="top"===this.getYPosition(e)?"upper":"lower";a.classList.add("notyf__toast--"+g);return a};NotyfView.prototype._createHTMLElement=function(t){var i=t.tagName,e=t.className,n=t.text;var o=document.createElement(i);e&&(o.className=e);o.textContent=n||null;return o};NotyfView.prototype._createA11yContainer=function(){var t=this._createHTMLElement({tagName:"div",className:"notyf-announcer"});t.setAttribute("aria-atomic","true");t.setAttribute("aria-live","polite");t.style.border="0";t.style.clip="rect(0 0 0 0)";t.style.height="1px";t.style.margin="-1px";t.style.overflow="hidden";t.style.padding="0";t.style.position="absolute";t.style.width="1px";t.style.outline="0";document.body.appendChild(t);this.a11yContainer=t};NotyfView.prototype._announce=function(t){var i=this;this.a11yContainer.textContent="";setTimeout((function(){i.a11yContainer.textContent=t}),100)};NotyfView.prototype._getAnimationEndEventName=function(){var t=document.createElement("_fake");var i={MozTransition:"animationend",OTransition:"oAnimationEnd",WebkitTransition:"webkitAnimationEnd",transition:"animationend"};var e;for(e in i)if(void 0!==t.style[e])return i[e];return"animationend"};return NotyfView}();var s=function(){function Notyf(t){var i=this;this.dismiss=this._removeNotification;this.notifications=new e;this.view=new a;var s=this.registerTypes(t);this.options=__assign(__assign({},o),t);this.options.types=s;this.notifications.onUpdate((function(t,e){return i.view.update(t,e)}));this.view.on(n.Dismiss,(function(t){var e=t.target,o=t.event;i._removeNotification(e);e.triggerEvent(n.Dismiss,o)}));this.view.on(n.Click,(function(t){var i=t.target,e=t.event;return i.triggerEvent(n.Click,e)}))}Notyf.prototype.error=function(t){var i=this.normalizeOptions("error",t);return this.open(i)};Notyf.prototype.success=function(t){var i=this.normalizeOptions("success",t);return this.open(i)};Notyf.prototype.open=function(i){var e=this.options.types.find((function(t){var e=t.type;return e===i.type}))||{};var n=__assign(__assign({},e),i);this.assignProps(["ripple","position","dismissible"],n);var o=new t(n);this._pushNotification(o);return o};Notyf.prototype.dismissAll=function(){while(this.notifications.splice(0,1));};
+/**
+     * Assigns properties to a config object based on two rules:
+     * 1. If the config object already sets that prop, leave it as so
+     * 2. Otherwise, use the default prop from the global options
+     *
+     * It's intended to build the final config object to open a notification. e.g. if
+     * 'dismissible' is not set, then use the value from the global config.
+     *
+     * @param props - properties to be assigned to the config object
+     * @param config - object whose properties need to be set
+     */Notyf.prototype.assignProps=function(t,i){var e=this;t.forEach((function(t){i[t]=null==i[t]?e.options[t]:i[t]}))};Notyf.prototype._pushNotification=function(t){var i=this;this.notifications.push(t);var e=void 0!==t.options.duration?t.options.duration:this.options.duration;e&&setTimeout((function(){return i._removeNotification(t)}),e)};Notyf.prototype._removeNotification=function(t){var i=this.notifications.indexOf(t);-1!==i&&this.notifications.splice(i,1)};Notyf.prototype.normalizeOptions=function(t,i){var e={type:t};"string"===typeof i?e.message=i:"object"===typeof i&&(e=__assign(__assign({},e),i));return e};Notyf.prototype.registerTypes=function(t){var i=(t&&t.types||[]).slice();var e=o.types.map((function(t){var e=-1;i.forEach((function(i,n){i.type===t.type&&(e=n)}));var n=-1!==e?i.splice(e,1)[0]:{};return __assign(__assign({},t),n)}));return e.concat(i)};return Notyf}();export{o as DEFAULT_OPTIONS,s as Notyf,e as NotyfArray,i as NotyfArrayEvent,n as NotyfEvent,t as NotyfNotification,a as NotyfView};
+