diff --git a/app/javascript/packs/application.ts b/app/javascript/packs/application.ts
index 75ec820e..d1bb4dd6 100644
--- a/app/javascript/packs/application.ts
+++ b/app/javascript/packs/application.ts
@@ -1,6 +1,7 @@
 require('sweetalert/dist/sweetalert.css');
 
 import start from 'retrospring/common';
+import initAnnouncements from 'retrospring/features/announcement/index';
 import initAnswerbox from 'retrospring/features/answerbox/index';
 import initInbox from 'retrospring/features/inbox/index';
 import initUser from 'retrospring/features/user';
@@ -18,4 +19,5 @@ document.addEventListener('turbolinks:load', initSettings);
 document.addEventListener('DOMContentLoaded', initLists);
 document.addEventListener('DOMContentLoaded', initQuestionbox);
 document.addEventListener('DOMContentLoaded', initQuestion);
-document.addEventListener('DOMContentLoaded', initModeration);
\ No newline at end of file
+document.addEventListener('DOMContentLoaded', initModeration);
+document.addEventListener('turbolinks:load', initAnnouncements)
\ No newline at end of file
diff --git a/app/javascript/packs/legacy.coffee b/app/javascript/packs/legacy.coffee
index b465dd66..f1fabcd4 100644
--- a/app/javascript/packs/legacy.coffee
+++ b/app/javascript/packs/legacy.coffee
@@ -51,17 +51,6 @@ _ready = ->
       lineColor: bodyColor
       density: 23000
 
-  $(".announcement").each ->
-    aId = $(this)[0].dataset.announcementId
-    unless (window.localStorage.getItem("announcement#{aId}"))
-      $(this).toggleClass("d-none")
-
-  $(document).on "click", ".announcement button.close", (evt) ->
-    announcement = event.target.closest(".announcement")
-    aId = announcement.dataset.announcementId
-    window.localStorage.setItem("announcement#{aId}", true)
-
-
 $(document).ready _ready
 $(document).on 'turbolinks:load', _ready
 
diff --git a/app/javascript/retrospring/features/announcement/close.ts b/app/javascript/retrospring/features/announcement/close.ts
new file mode 100644
index 00000000..35504d16
--- /dev/null
+++ b/app/javascript/retrospring/features/announcement/close.ts
@@ -0,0 +1,5 @@
+export default function (event: Event): void {
+  const announcement = (event.target as HTMLElement).closest(".announcement") as HTMLDivElement;
+  const aId = announcement.dataset.announcementId;
+  window.localStorage.setItem(`announcement${aId}`, 'true');
+}
\ No newline at end of file
diff --git a/app/javascript/retrospring/features/announcement/index.ts b/app/javascript/retrospring/features/announcement/index.ts
new file mode 100644
index 00000000..e86a9b17
--- /dev/null
+++ b/app/javascript/retrospring/features/announcement/index.ts
@@ -0,0 +1,14 @@
+import registerEvents from 'utilities/registerEvents';
+import closeAnnouncementHandler from './close';
+
+export default (): void => {
+  registerEvents([
+    { type: 'click', target: '.announcement button.close', handler: closeAnnouncementHandler, global: true },
+  ]);
+
+  document.querySelectorAll('.announcement').forEach(function (el: HTMLDivElement) {
+    if (!window.localStorage.getItem(el.dataset.announcementId)) {
+      el.classList.remove('d-none');
+    }
+  });
+}