diff --git a/assets/js/app.js b/assets/js/app.js
index 47e6593..a59dcf5 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -20,29 +20,9 @@ import "phoenix_html";
 // Establish Phoenix Socket and LiveView configuration.
 import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
+import topbar from "../vendor/topbar"
 import "../vendor/oms.min.js";
 
-// Load topbar library
-const topbarScript = document.createElement('script');
-topbarScript.src = '/assets/topbar.js';
-topbarScript.onload = function() {
-  // Show progress bar on live navigation and form submits
-  if (window.topbar) {
-    window.topbar.config({ 
-      barColors: { 
-        0: "hsl(var(--p))",  // DaisyUI primary color
-        0.5: "hsl(var(--s))", // DaisyUI secondary color
-        1: "hsl(var(--a))"    // DaisyUI accent color
-      }, 
-      shadowColor: "rgba(0, 0, 0, .3)",
-      barThickness: 3
-    });
-    window.addEventListener("phx:page-loading-start", (info) => window.topbar.show(200));
-    window.addEventListener("phx:page-loading-stop", (info) => window.topbar.hide());
-  }
-};
-document.head.appendChild(topbarScript);
-
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
 
 // Import minimal APRS map hook
@@ -198,6 +178,12 @@ let liveSocket = new LiveSocket("/live", Socket, {
   hooks: Hooks,
 });
 
+// Show progress bar on live navigation and form submits
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
+window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+
+
 // connect if there are any LiveViews on the page
 liveSocket.connect();
 
diff --git a/assets/js/topbar.js b/assets/js/topbar.js
new file mode 100644
index 0000000..96fd42e
--- /dev/null
+++ b/assets/js/topbar.js
@@ -0,0 +1,7 @@
+/**
+ * @license MIT
+ * topbar 3.0.0
+ * http://buunguyen.github.io/topbar
+ * Copyright (c) 2024 Buu Nguyen
+ */
+(function(window,document){"use strict";function repaint(){canvas.width=window.innerWidth,canvas.height=5*options.barThickness;var ctx=canvas.getContext("2d");ctx.shadowBlur=options.shadowBlur,ctx.shadowColor=options.shadowColor;var stop,lineGradient=ctx.createLinearGradient(0,0,canvas.width,0);for(stop in options.barColors)lineGradient.addColorStop(stop,options.barColors[stop]);ctx.lineWidth=options.barThickness,ctx.beginPath(),ctx.moveTo(0,options.barThickness/2),ctx.lineTo(Math.ceil(currentProgress*canvas.width),options.barThickness/2),ctx.strokeStyle=lineGradient,ctx.stroke()}var canvas,currentProgress,showing,progressTimerId=null,fadeTimerId=null,delayTimerId=null,options={autoRun:!0,barThickness:3,barColors:{0:"rgba(26,  188, 156, .9)",".25":"rgba(52,  152, 219, .9)",".50":"rgba(241, 196, 15,  .9)",".75":"rgba(230, 126, 34,  .9)","1.0":"rgba(211, 84,  0,   .9)"},shadowBlur:10,shadowColor:"rgba(0,   0,   0,   .6)",className:null},topbar={config:function(opts){for(var key in opts)options.hasOwnProperty(key)&&(options[key]=opts[key])},show:function(handler){var type,elem;showing||(handler?delayTimerId=delayTimerId||setTimeout(()=>topbar.show(),handler):(showing=!0,null!==fadeTimerId&&window.cancelAnimationFrame(fadeTimerId),canvas||((elem=(canvas=document.createElement("canvas")).style).position="fixed",elem.top=elem.left=elem.right=elem.margin=elem.padding=0,elem.zIndex=100001,elem.display="none",options.className&&canvas.classList.add(options.className),type="resize",handler=repaint,(elem=window).addEventListener?elem.addEventListener(type,handler,!1):elem.attachEvent?elem.attachEvent("on"+type,handler):elem["on"+type]=handler),canvas.parentElement||document.body.appendChild(canvas),canvas.style.opacity=1,canvas.style.display="block",topbar.progress(0),options.autoRun&&function loop(){progressTimerId=window.requestAnimationFrame(loop),topbar.progress("+"+.05*Math.pow(1-Math.sqrt(currentProgress),2))}()))},progress:function(to){return void 0===to||("string"==typeof to&&(to=(0<=to.indexOf("+")||0<=to.indexOf("-")?currentProgress:0)+parseFloat(to)),currentProgress=1<to?1:to,repaint()),currentProgress},hide:function(){clearTimeout(delayTimerId),delayTimerId=null,showing&&(showing=!1,null!=progressTimerId&&(window.cancelAnimationFrame(progressTimerId),progressTimerId=null),function loop(){return 1<=topbar.progress("+.1")&&(canvas.style.opacity-=.05,canvas.style.opacity<=.05)?(canvas.style.display="none",void(fadeTimerId=null)):void(fadeTimerId=window.requestAnimationFrame(loop))}())}};"object"==typeof module&&"object"==typeof module.exports?module.exports=topbar:"function"==typeof define&&define.amd?define(function(){return topbar}):this.topbar=topbar}).call(this,window,document);
\ No newline at end of file
diff --git a/config/dev.exs b/config/dev.exs
index 6e69950..75b3453 100644
--- a/config/dev.exs
+++ b/config/dev.exs
@@ -42,19 +42,16 @@ config :aprsme, AprsmeWeb.Endpoint,
 # Watch static and templates for browser reloading.
 config :aprsme, AprsmeWeb.Endpoint,
   live_reload: [
+    web_console_logger: true,
     patterns: [
-      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
+      ~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",
       ~r"priv/gettext/.*(po)$",
-      ~r"lib/aprsme_web/(live|views)/.*(ex)$",
-      ~r"lib/aprsme_web/templates/.*(eex)$",
-      ~r"assets/vendor/.*(js|css)$"
+      ~r"lib/temp_web/(?:controllers|live|components|router)/?.*\.(ex|heex)$"
     ]
   ]
 
 # Enable dev routes for dashboard and mailbox
 #
-#     mix phx.gen.cert
-#
 # Run `mix help phx.gen.cert` for more information.
 config :aprsme, dev_routes: true