diff --git a/app/Http/Livewire/Notification/Browser.php b/app/Http/Livewire/Notification/Browser.php
new file mode 100644
index 000000000..08b52af0d
--- /dev/null
+++ b/app/Http/Livewire/Notification/Browser.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Livewire\Notification;
+
+use Cookie;
+use Illuminate\Contracts\View\View;
+use Illuminate\Support\Str;
+use Livewire\Component;
+
+class Browser extends Component
+{
+    public $status = false;
+
+    public function render(): View
+    {
+        $user_agent = request()->header('User-Agent');
+
+        $view = 'livewire.notification.browser.firefox';
+
+        if ($this->status || ! empty($_COOKIE['firefox-icon-notification-confirm'])) {
+            $this->status = true;
+        } else {
+            $this->status = false;
+        }
+
+        if (Str::contains($user_agent, 'Firefox')) {
+            $view = 'livewire.notification.browser.firefox';
+
+            if ($this->status || ! empty($_COOKIE['firefox-icon-notification-confirm'])) {
+                $this->status = true;
+            } else {
+                $this->status = false;
+            }
+        } elseif (Str::contains($user_agent, 'Edg')) {
+            // $view = 'livewire.notification.browser.chrome';
+        } elseif (Str::contains($user_agent, 'Safari')) {
+            // $view = 'livewire.notification.browser.edge';
+        } elseif (Str::contains($user_agent, 'Chrome')) {
+            // $view = 'livewire.notification.browser.safari';
+        } elseif (Str::contains($user_agent, 'Opera')) {
+            // $view = 'livewire.notification.browser.opera';
+        }
+
+        return view($view);
+    }
+
+    public function firefoxConfirm()
+    {
+        $expire = time() + (86400 * 30 * 30 * 30);
+
+        setcookie('firefox-icon-notification-confirm', true, $expire, '/');
+
+        $this->status = true;
+    }
+}
diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 7df7421b3..6923e9ed2 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -353,49 +353,6 @@ document.querySelectorAll('[data-link-loading]').forEach((href) => {
 });
 //Loading scenario for href links
 
-//Firefox show modal for icon set
-if (navigator.userAgent.search("Firefox") >= 0) {
-    let firefoxCookie = document.createElement('DIV'),
-    body = document.body;
-
-    firefoxCookie.innerHTML =
-    '<div tabindex="-1" role="dialog" data-cookie-modal class=" modal w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade justify-center items-start show flex flex-wrap modal-background">' +
-    '   <div class="w-full my-10 m-auto flex flex-col max-w-2xl">' +
-    '       <div class="modal-content">' +
-    '           <div class="p-5 bg-body rounded-tl-lg rounded-tr-lg">' +
-    '               <div class="flex items-center justify-between border-b pb-5">' +
-    '                   Firefox Icon Configuration' +
-    '               </div>' +
-    '           </div>' +
-    '           <div class="py-1 px-5 bg-body">' +
-    '               <span class="font-medium"> If your icons not appear please; </span> <br />' +
-    '               <span class="font-medium"> Please Allow pages to choose their own fonts, instead of your selections above <br/><br/> </span>' +
-    '               <span class="font-bold"> Settings (Preferences) > Fonts > Advanced </span> ' +
-    '           </div>' +
-    '           <div class="p-5 bg-body rounded-bl-lg rounded-br-lg border-gray-300">' +
-    '               <div class="flex items-center justify-end">' +
-    '                   <button type="button" onClick="delete_cookie()" class="relative px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg disabled:bg-green-100">' +
-    '                       <span class="">OK</span>' +
-    '                   </button>' +
-    '               </div>' +
-    '           </div>' +
-    '       </div>' +
-    '   </div>' +
-    '</div>' +
-
-    body.appendChild(firefoxCookie);
-
-    function delete_cookie() {
-        document.cookie = 'firefoxCookieModal=true; expires=Thu, 1 Jan 2023 00:00:01 GMT;';
-        document.querySelector('[data-cookie-modal]').remove();
-    }
-
-    if (document.cookie.indexOf('firefoxCookieModal=true') !== -1) {
-        document.querySelector('[data-cookie-modal]').remove();
-    }
-}
-//Firefox show modal for icon set
-
 //margue animation for truncated text
 function marqueeAnimation(truncate) {
     if (truncate.closest('[disable-marquee]') !== null) {
diff --git a/resources/lang/en-GB/notifications.php b/resources/lang/en-GB/notifications.php
index 9cd046815..79cac3a8d 100644
--- a/resources/lang/en-GB/notifications.php
+++ b/resources/lang/en-GB/notifications.php
@@ -185,4 +185,16 @@ return [
         'mark_read_all'         => ':type is read all notifications!',
 
     ],
+
+    'browser' => [
+
+        'firefox' => [
+
+            'title' => 'Firefox Icon Configuration',
+            'description'  => '<span class="font-medium">If your icons not appear please;</span> <br /> <span class="font-medium">Please Allow pages to choose their own fonts, instead of your selections above</span> <br /><br /> <span class="font-bold"> Settings (Preferences) > Fonts > Advanced </span>',
+
+        ],
+
+    ],
+
 ];
diff --git a/resources/views/components/layouts/admin.blade.php b/resources/views/components/layouts/admin.blade.php
index 6eb3d2991..deed77681 100644
--- a/resources/views/components/layouts/admin.blade.php
+++ b/resources/views/components/layouts/admin.blade.php
@@ -80,6 +80,8 @@
                     </x-layouts.admin.header>
 
                     <x-layouts.admin.content>
+                        <livewire:notification.browser />
+
                         <x-layouts.admin.notifications />
 
                         {!! $content !!}
diff --git a/resources/views/components/layouts/modules.blade.php b/resources/views/components/layouts/modules.blade.php
index a0d552ac6..c777871fa 100644
--- a/resources/views/components/layouts/modules.blade.php
+++ b/resources/views/components/layouts/modules.blade.php
@@ -60,6 +60,8 @@
                     </x-layouts.admin.header>
 
                     <x-layouts.admin.content>
+                        <livewire:notification.browser />
+
                         <x-layouts.admin.notifications />
 
                         @if (! $content->attributes->has('withoutBar'))
diff --git a/resources/views/components/layouts/portal.blade.php b/resources/views/components/layouts/portal.blade.php
index 0a6cb40d5..598270883 100644
--- a/resources/views/components/layouts/portal.blade.php
+++ b/resources/views/components/layouts/portal.blade.php
@@ -72,6 +72,8 @@
                     </x-layouts.portal.header>
 
                     <x-layouts.portal.content>
+                        <notifications.browser />
+
                         {!! $content !!}
                     </x-layouts.portal.content>
 
diff --git a/resources/views/components/layouts/signed.blade.php b/resources/views/components/layouts/signed.blade.php
index 69cff0d24..70e3922c9 100644
--- a/resources/views/components/layouts/signed.blade.php
+++ b/resources/views/components/layouts/signed.blade.php
@@ -63,6 +63,8 @@
             </x-layouts.signed.header>
 
             <x-layouts.signed.content>
+                <livewire:notification.browser />
+
                 {!! $content !!}
             </x-layouts.signed.content>
 
diff --git a/resources/views/livewire/notification/browser/firefox.blade.php b/resources/views/livewire/notification/browser/firefox.blade.php
new file mode 100644
index 000000000..658b6916e
--- /dev/null
+++ b/resources/views/livewire/notification/browser/firefox.blade.php
@@ -0,0 +1,47 @@
+<div>
+    <div
+        data-modal-handle
+        @class([
+            'modal w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden fade justify-center items-start',
+            'show flex flex-wrap modal-background' => ! $status,
+            'hidden' => $status,
+        ])
+    >
+        <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-2xl">
+            <div class="modal-content">
+                <div class="p-5 bg-body rounded-tl-lg rounded-tr-lg">
+                    <div class="flex items-center justify-between border-b pb-5">
+                        <h4 class="text-base font-medium">
+                            {!! trans('notifications.browser.firefox.title') !!}
+                        </h4>
+                    </div>
+                </div>
+
+                <div class="pt-1 pb-5 px-5 bg-body">
+                    <div>
+                        {!! trans('notifications.browser.firefox.description') !!}
+                    </div>
+                </div>
+
+                <div class="p-5 bg-body rounded-bl-lg rounded-br-lg border-gray-300">
+                    <div class="flex items-center justify-end">
+                        <button wire:click="firefoxConfirm" class="relative px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg disabled:bg-green-100">
+                            {{ trans('general.confirm') }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@if ($status)
+<script>
+    let now = new Date();
+    now.setTime(now.getTime() + 1 * 3600 * 1000);
+
+    let expires = now.toUTCString();
+
+    Cookies.set('firefox_notification_confirm', true, expires);
+</script>
+@endif
\ No newline at end of file
diff --git a/resources/views/livewire/notification/browser/index.blade.php b/resources/views/livewire/notification/browser/index.blade.php
new file mode 100644
index 000000000..e69de29bb