diff --git a/go.mod b/go.mod
index 665bfd689..e575fdfdc 100644
--- a/go.mod
+++ b/go.mod
@@ -9,7 +9,7 @@ require (
 	github.com/rs/zerolog v1.19.0
 	github.com/stretchr/testify v1.7.0
 	github.com/uber/jaeger-client-go v2.25.0+incompatible
-	go.dedis.ch/dela v0.0.0-20220427080805-29069c746635
+	go.dedis.ch/dela v0.0.0-20220428080424-2348afb6228a
 	go.dedis.ch/dela-apps v0.0.0-20211019120455-a0db752a0ba0
 	go.dedis.ch/kyber/v3 v3.1.0-alpha
 	golang.org/x/net v0.0.0-20211015210444-4f30a5c0130f
diff --git a/go.sum b/go.sum
index d78dae4fa..0ee971518 100644
--- a/go.sum
+++ b/go.sum
@@ -244,8 +244,8 @@ github.com/yuin/goldmark v1.1.32/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9de
 github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.4.1/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=
 go.dedis.ch/dela v0.0.0-20211018150429-1fdbe35cd189/go.mod h1:GVQ2MumgCcAkor2MmfRCoqTBsFjaaqt7HfJpQLhMGok=
-go.dedis.ch/dela v0.0.0-20220427080805-29069c746635 h1:X2PICAgwLn1Sdo/I6KIoIdaNb+RZz0v+xH5T63X/0Ws=
-go.dedis.ch/dela v0.0.0-20220427080805-29069c746635/go.mod h1:IIIV0aR0f1c9z4jRB2HVYYeLK7XbQ6pfqv6RufaXmUg=
+go.dedis.ch/dela v0.0.0-20220428080424-2348afb6228a h1:Ahci1dtYYj9MIVOUjsA2kavD6oAEmnLZrwBctzHOYYA=
+go.dedis.ch/dela v0.0.0-20220428080424-2348afb6228a/go.mod h1:IIIV0aR0f1c9z4jRB2HVYYeLK7XbQ6pfqv6RufaXmUg=
 go.dedis.ch/dela-apps v0.0.0-20211019120455-a0db752a0ba0 h1:gPrJd+7QUuADpfToMKr80maGnjGPeB7ft7iNrkAtwGY=
 go.dedis.ch/dela-apps v0.0.0-20211019120455-a0db752a0ba0/go.mod h1:MoJSdm3LXkNtiKEK3eiBKgqFhory4v8sBr7ldFP/vFc=
 go.dedis.ch/fixbuf v1.0.3 h1:hGcV9Cd/znUxlusJ64eAlExS+5cJDIyTyEG+otu5wQs=
diff --git a/web/frontend/src/index.tsx b/web/frontend/src/index.tsx
index 442121471..3730970c7 100644
--- a/web/frontend/src/index.tsx
+++ b/web/frontend/src/index.tsx
@@ -5,7 +5,7 @@ import { ENDPOINT_PERSONAL_INFO } from 'components/utils/Endpoints';
 import 'index.css';
 import App from 'layout/App';
 import reportWebVitals from 'reportWebVitals';
-import Flash from 'layout/Flash';
+import ShortUniqueId from 'short-unique-id';
 
 const flashTimeout = 4000;
 
@@ -34,6 +34,7 @@ export interface AuthState {
 export interface FlashState {
   getMessages(): FlashMessage[];
   addMessage(msg: string, level: number): void;
+  hideMessage(index: string): void;
 }
 
 export const enum FlashLevel {
@@ -47,18 +48,22 @@ class FlashMessage {
   text: string;
 
   // Level defines the type of flash: info, warn, error
-  level: number;
+  level: FlashLevel;
 
-  constructor(text: string, level: number) {
+  // A uniq string identifier
+  id: string;
+
+  constructor(text: string, level: FlashLevel) {
     this.text = text;
     this.level = level;
+    this.id = new ShortUniqueId({ length: 8 })();
   }
 
   getText(): string {
     return this.text;
   }
 
-  getLevel(): number {
+  getLevel(): FlashLevel {
     return this.level;
   }
 }
@@ -111,16 +116,24 @@ const AppContainer = () => {
 
     // add a flash to the list and set a timeout on it
     addMessage: (message: string, level: number) => {
-      const newFlashes = [...flashes, new FlashMessage(message, level)];
+      const flash = new FlashMessage(message, level);
+      const newFlashes = [...flashes, flash];
       setFlashes(newFlashes);
 
       // remove the flash after some timeout
       setTimeout(() => {
-        const removedFlashes = [...flashesRef.current];
-        removedFlashes.shift();
+        let removedFlashes = [...flashesRef.current];
+        removedFlashes = removedFlashes.filter((f) => f.id !== flash.id);
         setFlashes(removedFlashes);
       }, flashTimeout);
     },
+
+    // Set the visibility of flashMessage to false
+    hideMessage: (id: string) => {
+      let removedFlashes = [...flashesRef.current];
+      removedFlashes = removedFlashes.filter((f) => f.id !== id);
+      setFlashes(removedFlashes);
+    },
   };
 
   useEffect(() => {
@@ -158,7 +171,6 @@ const AppContainer = () => {
 
   return (
     <FlashContext.Provider value={flashState}>
-      <Flash />
       <AuthContext.Provider value={auth}>{content}</AuthContext.Provider>
     </FlashContext.Provider>
   );
diff --git a/web/frontend/src/layout/App.tsx b/web/frontend/src/layout/App.tsx
index 029ac1698..9af2a99c7 100644
--- a/web/frontend/src/layout/App.tsx
+++ b/web/frontend/src/layout/App.tsx
@@ -27,6 +27,7 @@ import Footer from './Footer';
 import './App.css';
 import { AuthContext } from '..';
 import Logged from 'pages/session/Logged';
+import Flash from './Flash';
 
 const NotFound = () => <div>404 not found</div>;
 
@@ -89,6 +90,9 @@ const App = () => {
               <Route path="*" element={<NotFound />} />
             </Routes>
           </div>
+          <div>
+            <Flash />
+          </div>
           <div>
             <Footer />
           </div>
diff --git a/web/frontend/src/layout/Flash.module.css b/web/frontend/src/layout/Flash.module.css
new file mode 100644
index 000000000..c55a0f27d
--- /dev/null
+++ b/web/frontend/src/layout/Flash.module.css
@@ -0,0 +1,21 @@
+.progress {
+  position: absolute;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.4);
+  height: 5px;
+  left: 0;
+  right: 100%;
+
+  animation-name: progress;
+  animation-duration: 4s;
+  animation-timing-function: linear;
+}
+
+@keyframes progress {
+  from {
+    right: 100%;
+  }
+  to {
+    right: 0%;
+  }
+}
diff --git a/web/frontend/src/layout/Flash.tsx b/web/frontend/src/layout/Flash.tsx
index 6c9a54c94..288667fe4 100644
--- a/web/frontend/src/layout/Flash.tsx
+++ b/web/frontend/src/layout/Flash.tsx
@@ -1,31 +1,52 @@
 import { FlashContext, FlashLevel } from 'index';
 import { useContext } from 'react';
+import {
+  ExclamationCircleIcon,
+  ExclamationIcon,
+  InformationCircleIcon,
+  XIcon,
+} from '@heroicons/react/outline';
+import styles from './Flash.module.css';
 
 const Flash = () => {
   const fctx = useContext(FlashContext);
 
-  const flashContainer = (level: number) => {
-    switch (level) {
-      case FlashLevel.Info:
-        return 'flex items-center text-white text-sm font-bold px-4 py-3 bg-indigo-500';
-      case FlashLevel.Warning:
-        return 'flex items-center text-white text-sm font-bold px-4 py-3 bg-orange-500';
-      case FlashLevel.Error:
-        return 'flex items-center text-white text-sm font-bold px-4 py-3 bg-red-500';
-    }
-  };
-
   return (
-    <div>
-      {fctx.getMessages().map((msg, i) => (
-        <div key={i.toString()} className={flashContainer(msg.getLevel())} role="alert">
-          <svg
-            className="fill-current w-4 h-4 mr-2"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20">
-            <path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z" />
-          </svg>
-          <p>{msg.getText()}</p>
+    <div className="w-full z-50">
+      {fctx.getMessages().map((msg) => (
+        <div
+          key={msg.id}
+          className={`relative
+                      ${msg.getLevel() === FlashLevel.Info && 'bg-indigo-500'} 
+                      ${msg.getLevel() === FlashLevel.Warning && 'bg-orange-500'} 
+                      ${msg.getLevel() === FlashLevel.Error && 'bg-red-500'}`}>
+          <div
+            id={msg.id}
+            className={`flex items-center text-white text-sm font-bold px-4 py-3 max-w-7xl mx-auto px-2 md:px-6 lg:px-8`}
+            role="alert">
+            <div className="px-2">
+              {msg.getLevel() === FlashLevel.Info && <InformationCircleIcon className="h-6 w-6" />}
+              {msg.getLevel() === FlashLevel.Warning && <ExclamationIcon className="h-6 w-6" />}
+              {msg.getLevel() === FlashLevel.Error && <ExclamationCircleIcon className="h-6 w-6" />}
+            </div>
+            <p>{msg.getText()}</p>
+            <button
+              type="button"
+              className={`ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 
+                ${
+                  msg.getLevel() === FlashLevel.Info && 'focus:ring-indigo-400 hover:bg-indigo-600'
+                } 
+                ${
+                  msg.getLevel() === FlashLevel.Warning &&
+                  'focus:ring-orange-400 hover:bg-orange-600'
+                } 
+                ${msg.getLevel() === FlashLevel.Error && 'focus:ring-red-400 hover:bg-red-600'}`}
+              onClick={() => fctx.hideMessage(msg.id)}
+              aria-label="Close">
+              <XIcon />
+            </button>
+          </div>
+          <div className={styles.progress} />
         </div>
       ))}
     </div>
diff --git a/web/frontend/src/pages/Home.tsx b/web/frontend/src/pages/Home.tsx
index 10c8f9652..630e1e683 100644
--- a/web/frontend/src/pages/Home.tsx
+++ b/web/frontend/src/pages/Home.tsx
@@ -1,15 +1,43 @@
-import React, { FC } from 'react';
+import { FlashContext, FlashLevel } from 'index';
+import React, { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import './Home.css';
 
 const Home: FC = () => {
   const { t } = useTranslation();
+  const fctx = useContext(FlashContext);
 
   return (
     <div className="home">
       <h1>{t('homeTitle')}</h1>
       <div className="home-txt">{t('homeText')}</div>
+      <div className="flex">
+        <button
+          className="flex inline-flex my-2 ml-2 items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-500 hover:bg-indigo-600"
+          onClick={() => {
+            fctx.addMessage(
+              'Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!',
+              FlashLevel.Info
+            );
+          }}>
+          Add flash info
+        </button>
+        <button
+          className="flex inline-flex my-2 ml-2 items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-500 hover:bg-indigo-600"
+          onClick={() => {
+            fctx.addMessage('Hello world!', FlashLevel.Warning);
+          }}>
+          Add flash warning
+        </button>
+        <button
+          className="flex inline-flex my-2 ml-2 items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-500 hover:bg-indigo-600"
+          onClick={() => {
+            fctx.addMessage('Hello world!', FlashLevel.Error);
+          }}>
+          Add flash error
+        </button>
+      </div>
     </div>
   );
 };