diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 2021961f4..b4e0d27d5 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -1324,3 +1324,135 @@
     overflow-y: scroll;
   }
 }
+
+#alertsPopupWrapper {
+  padding: 0;
+  justify-content: end;
+  z-index: 99999999;
+  // padding: 2rem;
+  #alertsPopup {
+    background: var(--bg-color);
+    width: calc(350px + 2rem);
+    right: 0;
+    // height: calc(100vh - 4rem);
+    height: 100%;
+    top: 0;
+    padding: 2rem calc(1rem - 7px) 2rem 1rem; // -7px for the scrollbar
+    // padding: 1rem;
+    // border-radius: var(--roundness);
+    overflow: hidden;
+    margin-right: -25rem;
+    border-radius: var(--roundness) 0 0 var(--roundness);
+
+    .scrollWrapper {
+      padding: 0 1rem 0 1rem;
+      overflow-y: scroll;
+      display: grid;
+      gap: 3rem;
+      align-content: baseline;
+      height: 100%;
+    }
+    .accountAlerts > .title,
+    .notificationHistory > .title,
+    .psas > .title {
+      font-size: 1.25rem;
+      margin-bottom: 1rem;
+      color: var(--sub-color);
+      user-select: none;
+    }
+    .list {
+      display: grid;
+      gap: 1rem;
+      .nothing {
+        width: 100%;
+        color: var(--text-color);
+        font-size: 0.75rem;
+        text-align: center;
+        margin: 2rem 0;
+      }
+      .preloader {
+        width: 100%;
+        color: var(--text-color);
+        text-align: center;
+        margin: 2rem 0;
+      }
+      .item {
+        display: grid;
+        grid-template-areas: "indicator title buttons" "indicator body buttons";
+        grid-template-columns: 0.25rem auto 1rem;
+        gap: 0.25rem 0.5rem;
+        .indicator {
+          grid-area: indicator;
+          background-color: var(--sub-alt-color);
+          width: 0.25rem;
+          height: 100%;
+          border-radius: calc(var(--roundness) / 2);
+          &.main {
+            background-color: var(--main-color);
+          }
+          &.error {
+            background-color: var(--error-color);
+          }
+          &.sub {
+            background-color: var(--sub-color);
+          }
+        }
+        .title {
+          grid-area: title;
+          font-size: 1rem;
+          line-height: 1rem;
+          color: var(--text-color);
+        }
+        .body {
+          grid-area: body;
+          font-size: 0.75rem;
+          color: var(--text-color);
+          transition: 0.125s;
+          opacity: 0.5;
+        }
+        .buttons {
+          grid-area: buttons;
+          width: 100%;
+          display: grid;
+          grid-auto-flow: row;
+          gap: 0.5rem;
+          opacity: 0;
+          transition: 0.125s;
+          .button {
+            font-size: 0.75rem;
+            padding: 0.5em;
+            line-height: 1.25em;
+            height: 100%;
+            display: grid;
+          }
+        }
+        &:hover {
+          .buttons {
+            opacity: 1;
+          }
+          .body {
+            opacity: 1;
+          }
+        }
+      }
+    }
+    .psas .list .item {
+      grid-template-areas: "indicator body";
+      grid-template-columns: 0.25rem auto;
+      .body {
+        opacity: 1;
+      }
+    }
+    .notificationHistory .list .item {
+      grid-template-areas: "indicator title" "indicator body";
+      grid-template-columns: 0.25rem auto;
+      .title {
+        font-size: 0.75rem;
+        color: var(--sub-color);
+      }
+      .body {
+        opacity: 1;
+      }
+    }
+  }
+}
diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
new file mode 100644
index 000000000..db811b571
--- /dev/null
+++ b/frontend/src/ts/elements/alerts.ts
@@ -0,0 +1,127 @@
+export function hide(): void {
+  if (!$("#alertsPopupWrapper").hasClass("hidden")) {
+    $("#alertsPopup").animate(
+      {
+        marginRight: "-10rem",
+      },
+      100,
+      "easeInCubic"
+    );
+    $("#alertsPopupWrapper")
+      .stop(true, true)
+      .css("opacity", 1)
+      .animate(
+        {
+          opacity: 0,
+        },
+        100,
+        () => {
+          $("#alertsPopupWrapper").addClass("hidden");
+        }
+      );
+  }
+}
+
+export async function show(): Promise<void> {
+  if ($("#alertsPopupWrapper").hasClass("hidden")) {
+    $("#alertsPopup").css("marginRight", "-10rem").animate(
+      {
+        marginRight: 0,
+      },
+      100,
+      "easeOutCubic"
+    );
+    $("#alertsPopup .accountAlerts .list").html(`
+  <div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>`);
+    $("#alertsPopupWrapper")
+      .stop(true, true)
+      .css("opacity", 0)
+      .removeClass("hidden")
+      .animate(
+        {
+          opacity: 1,
+        },
+        100,
+        () => {
+          getAccountAlerts();
+        }
+      );
+  }
+}
+
+async function getAccountAlerts(): Promise<void> {
+  //
+}
+
+export function addPSA(message: string, level: number): void {
+  if ($("#alertsPopup .psas .list .nothing").length > 0) {
+    $("#alertsPopup .psas .list").empty();
+  }
+
+  let levelClass = "";
+  if (level === -1) {
+    levelClass = "error";
+  } else if (level === 1) {
+    levelClass = "main";
+  } else if (level === 0) {
+    levelClass = "sub";
+  }
+  $("#alertsPopup .psas .list").prepend(`
+    <div class="item">
+    <div class="indicator ${levelClass}"></div>
+    <div class="body">
+      ${message}
+    </div>
+  </div>
+  `);
+}
+
+export function addNotification(
+  message: string,
+  level: number,
+  customTitle?: string
+): void {
+  if ($("#alertsPopup .notificationHistory .list .nothing").length > 0) {
+    $("#alertsPopup .notificationHistory .list").empty();
+  }
+
+  let title = "Notice";
+  let levelClass = "sub";
+  if (level === -1) {
+    levelClass = "error";
+    title = "Error";
+  } else if (level === 1) {
+    levelClass = "main";
+    title = "Success";
+  }
+
+  if (customTitle) {
+    title = customTitle;
+  }
+
+  $("#alertsPopup .notificationHistory .list").prepend(`
+    <div class="item">
+    <div class="indicator ${levelClass}"></div>
+    <div class="title">${title}</div>
+    <div class="body">
+      ${message}
+    </div>
+  </div>
+  `);
+}
+
+export function init(): void {
+  $("#alertsPopup .list")
+    .empty()
+    .append(`<div class="nothing">Nothing to show</div>`);
+}
+
+$("#top #menu .showAlerts").on("click", () => {
+  show();
+});
+
+$("#alertsPopupWrapper").on("mousedown", (e) => {
+  if ($(e.target).attr("id") === "alertsPopupWrapper") {
+    hide();
+  }
+});
diff --git a/frontend/static/html/popups.html b/frontend/static/html/popups.html
index 0a0df0c7b..c4768a142 100644
--- a/frontend/static/html/popups.html
+++ b/frontend/static/html/popups.html
@@ -1,3 +1,31 @@
+<div id="alertsPopupWrapper" class="popupWrapper hidden">
+  <div id="alertsPopup">
+    <div class="scrollWrapper">
+      <div class="accountAlerts">
+        <div class="title">
+          <i class="fas fa-bell"></i>
+          Account alerts
+        </div>
+        <div class="list"></div>
+      </div>
+      <div class="psas">
+        <div class="title">
+          <i class="fas fa-bullhorn"></i>
+          PSA's
+        </div>
+        <div class="list"></div>
+      </div>
+      <div class="notificationHistory">
+        <div class="title">
+          <i class="fas fa-comment-alt"></i>
+          Notifications history
+        </div>
+        <div class="list"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div id="simplePopupWrapper" class="popupWrapper hidden">
   <div id="simplePopup" popupId=""></div>
 </div>
diff --git a/frontend/static/html/top.html b/frontend/static/html/top.html
index be5165660..e661a2b57 100644
--- a/frontend/static/html/top.html
+++ b/frontend/static/html/top.html
@@ -132,7 +132,13 @@
         <i class="far fa-fw fa-user"></i>
       </div>
     </a>
-    <a class="textButton" tabindex="2" href="" onclick="this.blur();" data-link>
+    <a
+      class="textButton showAlerts"
+      tabindex="2"
+      href=""
+      onclick="this.blur();"
+      data-link
+    >
       <div class="icon">
         <i class="fas fa-fw fa-bell"></i>
       </div>