diff --git a/src/app/app.ts b/src/app/app.ts
index 8511d00b..df89aa36 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -364,12 +364,13 @@ Promise.all([
 
       const addGen = (output: HTMLElement) => (m: any) => {
         output.insertAdjacentHTML('beforeend', 
-          `<div class="generators-card${m.id === selected ? ' selected' : ''}">
+          `<a class="generators-card${m.id === selected ? ' selected' : ''}" href="${publicPath + m.id}">
             ${locale(m.name)}
             ${m.schema ? '' : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"></path></svg>'}
-          </div>`)
-          output.lastChild?.addEventListener('click', evt => {
+          </a>`)
+        output.lastChild?.addEventListener('click', evt => {
           reload(publicPath + m.id)
+          evt.preventDefault()
         })
       }
 
diff --git a/src/styles/global.css b/src/styles/global.css
index 50e794bf..57f0a9d1 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -368,6 +368,7 @@ body {
   padding: 8px 15px;
   cursor: pointer;
   user-select: none;
+  text-decoration: none;
   border-radius: 3px;
   background-color: var(--nav-faded);
   color: var(--text);