diff --git a/auth-notes.org b/auth-notes.org
index 1891f38..a1512f9 100644
--- a/auth-notes.org
+++ b/auth-notes.org
@@ -22,9 +22,36 @@ with js code from the example
 *** DONE in template range over enabled providers to create buttons for each
 *** DONE make dialog show on click of some element
 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
-** TODO i guess i would also like to send htmx event for reloading the page
+** DONE i guess i would also like to send htmx event for reloading the page
 on successful auth?
+now, why would logout work, and login not work?
+
+eh, let's go back on body doing the hx-get on event?
+
+maybe this is because of open dialog
+*** wait, maybe then returning from other auth middlewares will work
+no.
+for some reason
+#+begin_src go
+e.HttpContext.Response().Header().Add("HX-Trigger", "auth-change-event")
+#+end_src
+
+this header when returned with response to request triggered by js, doesn't result in event being triggered,
+ok, i guess
+*** so yeah, uglier that i wanted
+wanted to have hx-get="/" hx-trigger="auth-change-event"
+and send these events from all auth middleware methods
+
+https://htmx.org/docs/#response-headers
+
+but on auth success, even though header is present in the response, no event is triggered
+( checked with event listener in console )
+so, yup. coupling between js code of oauth, middlewares and body tag. this seems like too much.
+
+but it somewhat works
+
 ** TODO add one more page that checks auth
+and let's use existing middleware from framework documentation
 ** TODO add tailwind styling
 ** TODO package static into single binary
 ** TODO write nix build
diff --git a/middleware/auth.go b/middleware/auth.go
index ea9f3b0..90061da 100644
--- a/middleware/auth.go
+++ b/middleware/auth.go
@@ -119,6 +119,7 @@ func getLogoutRoute(app *pocketbase.PocketBase)  func(*core.ServeEvent) error {
 				Path: "/",
 				MaxAge: -1,
 			})
+			c.Response().Header().Add("HX-Trigger", "auth-change-event")
 			return c.JSON(http.StatusOK, map[string]string{"message": "session cookie removed"})
 		})
 		return nil
diff --git a/pages/templates/index.gohtml b/pages/templates/index.gohtml
index 1ffbddc..0ef2d01 100644
--- a/pages/templates/index.gohtml
+++ b/pages/templates/index.gohtml
@@ -13,10 +13,7 @@
       defer
       src="https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@master/dist/pocketbase.umd.js"
     ></script>
-    <script
-      defer
-      src="/static/static/public/htmx.min.js"
-    ></script>
+    <script defer src="/static/static/public/htmx.min.js"></script>
     <script defer type="text/javascript">
       async function callOauth(providerName) {
         const pb = new PocketBase("http://127.0.0.1:8090");
@@ -38,29 +35,13 @@
 
         // "logout" the last authenticated model
         pb.authStore.clear();
+        document.body.dispatchEvent(new Event("auth-change-event"))
       }
     </script>
-    <script defer type="text/javascript">
-      function initAuthDialog() {
-        const dialog = document.querySelector("#authDialog");
-        const showButton = document.querySelector("#openAuth");
-        const closeButton = document.querySelector("#closeAuth");
-        console.log("setting up script for buttons");
-
-        // "Show the dialog" button opens the dialog modally
-        showButton.addEventListener("click", () => {
-          dialog.showModal();
-        });
-
-        // "Close" button closes the dialog
-        closeButton.addEventListener("click", () => {
-          dialog.close();
-        });
-      }
-      document.addEventListener("DOMContentLoaded", initAuthDialog);
-    </script>
   </head>
-  <body>
+  <body
+    hx-get="/" hx-trigger="auth-change-event"
+    >
     <!--[if lt IE 8]>
       <p class="browserupgrade">
         You are using an <strong>outdated</strong> browser. Please
@@ -87,9 +68,40 @@
         <p>Please configure at least one oauth provider</p>
         {{ end }}
       </dialog>
+      <script defer type="text/javascript">
+        function initAuthDialog() {
+          const dialog = document.querySelector("#authDialog");
+          const showButton = document.querySelector("#openAuth");
+          // const closeButton = document.querySelector("#closeAuth");
+          // Select all buttons that are direct children of the dialog
+          var buttons = authDialog.querySelectorAll("button");
+
+          if (!dialog || !showButton) {
+            console.log("some auth elements are not present");
+            return;
+          }
+          console.log("setting up script for buttons");
+
+          // "Show the dialog" button opens the dialog modally
+          showButton.addEventListener("click", () => {
+            dialog.showModal();
+          });
+
+          buttons.forEach(function (button) {
+            button.addEventListener("click", function () {
+              authDialog.close();
+            });
+          });
+        }
+        initAuthDialog();
+        // "DOMContentLoaded" doesn't work with htmx replacing body
+        // maybe i could use htmx related event, but ok to just do asap, i guess
+        // also - i bet hyperscript would work here
+        // document.addEventListener("DOMContentLoaded", initAuthDialog);
+      </script>
       {{ else }}
       <p>{{ .Username }}</p>
-      <a href="/logout">Logout</a>
+      <button hx-get="/logout">Logout</button>
       {{ end }}
     </nav>
     <main>
