diff --git a/components/annotorious-annotator/line-parser.js b/components/annotorious-annotator/line-parser.js
index 8fca5500..2899df47 100644
--- a/components/annotorious-annotator/line-parser.js
+++ b/components/annotorious-annotator/line-parser.js
@@ -164,6 +164,10 @@ class AnnotoriousAnnotator extends HTMLElement {
           cursor: pointer;
           width: 100%;
           margin-top: 1em;
+          display: block;
+          text-align: center;
+          text-decoration: none;
+          border: none;
         }
         #saveBtn[disabled], #createColumnsBtn[disabled], #deleteAllBtn[disabled] {
           background-color: gray;
@@ -269,7 +273,7 @@ class AnnotoriousAnnotator extends HTMLElement {
            <input type="checkbox" id="seeTool" checked> 
           </label>
           <input id="deleteAllBtn" type="button" value="Delete All Annotations"/>
-          <input id="createColumnsBtn" type="button" value="Manage Columns"/>
+          <a id="createColumnsBtn" href="#">Manage Columns</a>
           <input id="saveBtn" type="button" value="Save Annotations"/>
         </div>
         <button id="autoParseBtn">Auto Parse</button>
diff --git a/components/classroom/groups/package-lock.json b/components/classroom/groups/package-lock.json
index c7e32ede..08928c53 100644
--- a/components/classroom/groups/package-lock.json
+++ b/components/classroom/groups/package-lock.json
@@ -4,6 +4,7 @@
   "requires": true,
   "packages": {
     "": {
+      "license": "Apache-2.0",
       "devDependencies": {
         "@babel/preset-env": "^7.25.7",
         "babel-jest": "^29.7.0",
diff --git a/components/copy-existing-project/index.js b/components/copy-existing-project/index.js
index 3ce06971..1fc50d22 100644
--- a/components/copy-existing-project/index.js
+++ b/components/copy-existing-project/index.js
@@ -142,12 +142,10 @@ class CopyExistingProject extends HTMLElement {
                     const projectTitle = document.createElement('span')
                     projectTitle.textContent = data.label
 
-                    const manageButton = document.createElement('button')
+                    const manageButton = document.createElement('a')
                     manageButton.className = 'manage-btn'
                     manageButton.textContent = 'Manage'
-                    manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                    }
+                    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                     projectInfo.appendChild(projectTitle)
                     projectInfo.appendChild(manageButton)
diff --git a/components/copy-project-with-customization/index.js b/components/copy-project-with-customization/index.js
index 5f18b36c..420457e0 100644
--- a/components/copy-project-with-customization/index.js
+++ b/components/copy-project-with-customization/index.js
@@ -477,12 +477,10 @@ class CopyExistingProjectWithCustomizations extends HTMLElement {
                 const projectTitle = document.createElement('span')
                 projectTitle.textContent = data.label
 
-                const manageButton = document.createElement('button')
+                const manageButton = document.createElement('a')
                 manageButton.className = 'manage-btn'
                 manageButton.textContent = 'Manage'
-                manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                }
+                manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                 projectInfo.appendChild(projectTitle)
                 projectInfo.appendChild(manageButton)
diff --git a/components/copy-project-with-group-member/index.js b/components/copy-project-with-group-member/index.js
index 9c518611..804f3811 100644
--- a/components/copy-project-with-group-member/index.js
+++ b/components/copy-project-with-group-member/index.js
@@ -143,12 +143,10 @@ class CopyProjectWithGroupMember extends HTMLElement {
                     const projectTitle = document.createElement('span')
                     projectTitle.textContent = data.label
 
-                    const manageButton = document.createElement('button')
+                    const manageButton = document.createElement('a')
                     manageButton.className = 'manage-btn'
                     manageButton.textContent = 'Manage'
-                    manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                    }
+                    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                     projectInfo.appendChild(projectTitle)
                     projectInfo.appendChild(manageButton)
diff --git a/components/copy-project-without-annotations/index.js b/components/copy-project-without-annotations/index.js
index 08f7e33f..6717e81c 100644
--- a/components/copy-project-without-annotations/index.js
+++ b/components/copy-project-without-annotations/index.js
@@ -142,12 +142,10 @@ class CopyExistingProjectWithoutAnnotations extends HTMLElement {
                     const projectTitle = document.createElement('span')
                     projectTitle.textContent = data.label
 
-                    const manageButton = document.createElement('button')
+                    const manageButton = document.createElement('a')
                     manageButton.className = 'manage-btn'
                     manageButton.textContent = 'Manage'
-                    manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                    }
+                    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                     projectInfo.appendChild(projectTitle)
                     projectInfo.appendChild(manageButton)
diff --git a/components/import-image/index.js b/components/import-image/index.js
index bb127c75..5bf6710c 100644
--- a/components/import-image/index.js
+++ b/components/import-image/index.js
@@ -182,12 +182,10 @@ class ImageImporter extends HTMLElement {
     const pageTitle = document.createElement('span')
     pageTitle.textContent = project.label || 'Untitled Page'
 
-    const manageButton = document.createElement('button')
+    const manageButton = document.createElement('a')
     manageButton.className = 'manage-btn'
     manageButton.textContent = 'Manage'
-    manageButton.onclick = () => {
-      window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
-    }
+    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
 
     pageInfo.appendChild(pageTitle)
     pageInfo.appendChild(manageButton)
diff --git a/components/import-project/index.js b/components/import-project/index.js
index 3a5b549a..575e532c 100644
--- a/components/import-project/index.js
+++ b/components/import-project/index.js
@@ -133,12 +133,10 @@ class ProjectImporter extends HTMLElement {
     const projectTitle = document.createElement('span')
     projectTitle.textContent = project.label
 
-    const manageButton = document.createElement('button')
+    const manageButton = document.createElement('a')
     manageButton.className = 'manage-btn'
     manageButton.textContent = 'Manage'
-    manageButton.onclick = () => {
-      window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
-    }
+    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
 
     projectInfo.appendChild(projectTitle)
     projectInfo.appendChild(manageButton)
diff --git a/components/user-profile/userStats.js b/components/user-profile/userStats.js
index 8253b295..070f6040 100644
--- a/components/user-profile/userStats.js
+++ b/components/user-profile/userStats.js
@@ -473,7 +473,9 @@ class UserStats extends HTMLElement {
                     <div class="collaborators">
                         ${collaborators.map(c => `
                             <div class="collaborator">
-                                <img src="${c.img}" alt="${c.name}" onclick="window.location.href='${TPEN.BASEURL}/public-profile?userId=${c._id}'">
+                                <a href="${TPEN.BASEURL}/public-profile?userId=${c._id}">
+                                    <img src="${c.img}" alt="${c.name}">
+                                </a>
                                 <div class="collaborator-name">${c.name}</div>
                             </div>
                         `).join('')}
diff --git a/interfaces/import-tpen28/index.html b/interfaces/import-tpen28/index.html
index 3824be97..4fccba19 100644
--- a/interfaces/import-tpen28/index.html
+++ b/interfaces/import-tpen28/index.html
@@ -27,7 +27,7 @@ <h1 class="header">Select a Project :</h1>
             <div id="message" class="message">Loading projects...</div>
         
             <div class="form-group">
-                <select id="projectSelect" class="dropdown">
+                <select id="projectSelect" title="projectSelect" class="dropdown">
                 <option value="">-- Choose a Project --</option>
                 </select>
                 <button id="importProjectBtn" class="btn primary-btn">Import</button>
@@ -38,10 +38,10 @@ <h2>Invite the Collaborators :</h2>
                 <div class="collaborator-list" id="collaboratorList"></div>
             </section>
         
-            <button id="openProject" class="btn secondary-btn hidden">
+            <a id="openProject" class="btn secondary-btn hidden" href="#" role="button">
                 Open the Project
-            </button>
+            </a>
             </div>
         </tpen-page>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/interfaces/import-tpen28/index.js b/interfaces/import-tpen28/index.js
index 3d775338..74bc7b89 100644
--- a/interfaces/import-tpen28/index.js
+++ b/interfaces/import-tpen28/index.js
@@ -124,4 +124,4 @@ async function openProject() {
     await importCollaborators(projectTPEN28Data, projectID)
 } 
  
-fetchProjects()
\ No newline at end of file
+fetchProjects()
diff --git a/interfaces/manage-project/index.html b/interfaces/manage-project/index.html
index 436168b1..52bd1505 100644
--- a/interfaces/manage-project/index.html
+++ b/interfaces/manage-project/index.html
@@ -23,39 +23,39 @@ <h2 slot="header">This Project</h2>
                 <tpen-project-details></tpen-project-details>
                 <div class="action-links">
                     <tpen-can tpen-view="*_SELECTOR_LINE"> 
-                        <a id="goParse" title="Go Parse Lines" class="left"><img src="../../assets/icons/parse-lines.svg"/>
+                        <a id="goParse" title="Go Parse Lines" class="left"><img src="../../assets/icons/parse-lines.svg" alt="icon"/>
                             <span>Parse Lines</span>
                         </a>
                     </tpen-can>
                     <tpen-can tpen-view="READ_TEXT_LINE"> 
                         <a id="goTranscribe" title="Go Transcribe" class="right">
                             <span>Transcribe Text</span>
-                            <img src="../../assets/icons/transcribe.png"/>
+                            <img src="../../assets/icons/transcribe.png" alt="icon"/>
                         </a>
                     </tpen-can>
                 </div>
             </div>
-            <button id="leave-project-btn" slot="footer" type="button">LEAVE PROJECT</button>
+            <a id="leave-project-btn" slot="footer" class="default-btn" href="#" role="button">LEAVE PROJECT</a>
         </tpen-card>
         <tpen-card tpen-scope="metadata">
             <h2 slot="header">Metadata</h2>
             <tpen-project-metadata slot="body"></tpen-project-metadata>
-            <button id="update-metadata-btn" slot="footer" type="button">EDIT METADATA</button>
+            <a id="update-metadata-btn" slot="footer" class="default-btn" href="#" role="button">EDIT METADATA</a>
         </tpen-card>
         <tpen-card tpen-entity="member">
             <h2 slot="header">Collaborators</h2>
             <project-collaborators slot="body"></project-collaborators>
-            <button id="manage-collaboration-btn" slot="footer" type="button">MANAGE COLLABORATORS</button>
+            <a id="manage-collaboration-btn" slot="footer" class="default-btn" href="#" role="button">MANAGE COLLABORATORS</a>
         </tpen-card>
         <tpen-card tpen-entity="layer">
             <h2 slot="header">Layers & Pages</h2>
             <tpen-project-layers slot="body"></tpen-project-layers>
-            <button id="manage-layers-btn" slot="footer" type="button">SEE DETAILS / MODIFY</button>
+            <a id="manage-layers-btn" slot="footer" class="default-btn" href="#" role="button">SEE DETAILS / MODIFY</a>
         </tpen-card>
         <tpen-card tpen-entity="role">
             <h2 slot="header">Project Roles</h2>
             <tpen-project-permissions slot="body"></tpen-project-permissions>
-            <button id="manage-custom-role-btn" slot="footer" type="button">MANAGE ROLE</button>
+            <a id="manage-custom-role-btn" slot="footer" class="default-btn" href="#" role="button">MANAGE ROLE</a>
         </tpen-card>
         <tpen-card tpen-scope="options">
             <h2 slot="header">Project Options</h2>
@@ -64,7 +64,7 @@ <h2 slot="header">Project Options</h2>
                     Default Transcription Interface: /transcribe
                 </div>
             </tpen-project-options>
-            <button id="manage-project-options-btn" slot="footer" type="button">SEE DETAILS</button>
+            <a id="manage-project-options-btn" slot="footer" class="default-btn" href="#" role="button">SEE DETAILS</a>
         </tpen-card>
         <tpen-card tpen-entity="tools">
             <h2 slot="header">Tools</h2>
diff --git a/interfaces/manage-project/index.js b/interfaces/manage-project/index.js
index 839f6d4f..13c52c36 100644
--- a/interfaces/manage-project/index.js
+++ b/interfaces/manage-project/index.js
@@ -13,17 +13,34 @@ TPEN.eventDispatcher.on('tpen-project-loaded', () => render())
 const container = document.body
 TPEN.attachAuthentication(container)
 
-document.getElementById('manage-collaboration-btn').addEventListener('click', () => {
-    const url = `/project/manage/collaborators?projectID=${TPEN.screen.projectInQuery}`
-    window.location.href = url
-})
-
-document.getElementById("update-metadata-btn").addEventListener('click', () => {  
-    window.location.href = `/project/metadata?projectID=${TPEN.screen.projectInQuery}`
-})
-
-document.getElementById('manage-layers-btn').addEventListener('click', () => {
-    window.location.href = `/components/manage-layers/index.html?projectID=${TPEN.screen.projectInQuery}`
+// Set href for navigation links once project ID is available
+TPEN.eventDispatcher.on('tpen-project-loaded', () => {
+    const projectID = TPEN.screen.projectInQuery
+    
+    const manageCollabBtn = document.getElementById('manage-collaboration-btn')
+    if (manageCollabBtn) {
+        manageCollabBtn.href = `/project/manage/collaborators?projectID=${projectID}`
+    }
+    
+    const updateMetadataBtn = document.getElementById("update-metadata-btn")
+    if (updateMetadataBtn) {
+        updateMetadataBtn.href = `/components/update-metadata/index.html?projectID=${projectID}`
+    }
+    
+    const manageLayersBtn = document.getElementById('manage-layers-btn')
+    if (manageLayersBtn) {
+        manageLayersBtn.href = `/components/manage-layers/index.html?projectID=${projectID}`
+    }
+    
+    const manageProjectOptionsBtn = document.getElementById('manage-project-options-btn')
+    if (manageProjectOptionsBtn) {
+        manageProjectOptionsBtn.href = `/project/options?projectID=${projectID}`
+    }
+    
+    const leaveProjectBtn = document.getElementById('leave-project-btn')
+    if (leaveProjectBtn) {
+        leaveProjectBtn.href = `/project/leave?projectID=${projectID}`
+    }
 })
 
 document.getElementById('export-project-btn').addEventListener('click', async () => {
@@ -43,14 +60,6 @@ document.getElementById('export-project-btn').addEventListener('click', async ()
     })
 })
 
-document.getElementById('manage-project-options-btn').addEventListener('click', () => {
-    window.location.href = `/project/options?projectID=${TPEN.screen.projectInQuery}`
-})
-
-document.getElementById('leave-project-btn').addEventListener('click', (e) => {
-    window.location.href = `/project/leave?projectID=${TPEN.screen.projectInQuery}`
-})
-
 async function render() {
     const isManageProjectPermission = await CheckPermissions.checkEditAccess('PROJECT')
     if(!isManageProjectPermission) {
@@ -58,7 +67,9 @@ async function render() {
         document.location.href = `/project?projectID=${TPEN.screen.projectInQuery}`
     }
     document.querySelector('tpen-project-details').setAttribute('tpen-project-id', TPEN.screen.projectInQuery)
-    document.getElementById("manage-custom-role-btn").addEventListener('click', async () => {
-        window.location.href = `/components/manage-role/index.html?projectID=${TPEN.screen.projectInQuery}`  
-    })
+    
+    const manageCustomRoleBtn = document.getElementById("manage-custom-role-btn")
+    if (manageCustomRoleBtn) {
+        manageCustomRoleBtn.href = `/components/manage-role/index.html?projectID=${TPEN.screen.projectInQuery}`
+    }
 }
diff --git a/interfaces/project/index.html b/interfaces/project/index.html
index c7ba232a..a4677f25 100644
--- a/interfaces/project/index.html
+++ b/interfaces/project/index.html
@@ -72,7 +72,7 @@ <h2 slot="header">Project Details</h2>
                         </tpen-can>
                     </div>
                 </div>
-                <button id="leaveProject" slot="footer" type="button">LEAVE PROJECT</button>
+                <a id="leaveProject" slot="footer" href="#">LEAVE PROJECT</a>
             </tpen-card>
         </div>
     </tpen-page>
@@ -83,9 +83,9 @@ <h2 slot="header">Project Details</h2>
         const goParse = document.getElementById("goParse")
         const goTranscribe = document.getElementById("goTranscribe")
         const leaveProject = document.getElementById("leaveProject")
-        leaveProject.addEventListener('click', (e) => {
-            window.location.href = `/project/leave?projectID=${ev.detail._id}`
-        })
+        if (leaveProject) {
+            leaveProject.href = `/project/leave?projectID=${ev.detail._id}`
+        }
         if(goParse) goParse.setAttribute("href", `/annotator?projectID=${ev.detail._id}`)
         if(goTranscribe) goTranscribe.setAttribute("href", `/transcribe?projectID=${ev.detail._id}`)
     })
diff --git a/interfaces/project/quick-guide.html b/interfaces/project/quick-guide.html
index 29dcb9fb..14b3291a 100644
--- a/interfaces/project/quick-guide.html
+++ b/interfaces/project/quick-guide.html
@@ -78,7 +78,7 @@ <h2>Save and Start Transcribing :</h2>
                 </div>
             </div>
             <div class="bottom-panel">
-                <button class="get-started-button" onclick="window.location.href='/components/quick-guide/'">Get Started</button>
+                <a class="get-started-button" href="/components/quick-guide/">Get Started</a>
             </div>
         </section>
     </tpen-page>
diff --git a/manage/collaboration.html b/manage/collaboration.html
index cd56df59..0a8169f1 100644
--- a/manage/collaboration.html
+++ b/manage/collaboration.html
@@ -5,10 +5,10 @@
        <span class="text">Share Publicly</span>
        <span class="btn-icon share"></span>
      </button> 
-      <button class="default-btn" id="modify-team-btn" >
+      <a class="default-btn" id="modify-team-btn" href="#">
        <span class="text">Modify Project Team</span>
        <span class="btn-icon team"></span>
-     </button> 
+     </a> 
 
  <div class="project-owner" id="project-owner">
   <p>
diff --git a/manage/index.js b/manage/index.js
index 9a4a4ee8..67d8d68e 100644
--- a/manage/index.js
+++ b/manage/index.js
@@ -47,12 +47,9 @@ function loadManageInterface(){
         const modifyTeamBtn = document.getElementById("modify-team-btn")
 
         if (modifyTeamBtn) {
-          modifyTeamBtn.addEventListener("click", () => {
-            const URLParams = new URLSearchParams(window.location.search)
-            const projectID = URLParams.get("projectID")
-            const url = `/project/manage/collaborators?projectID=${projectID}`
-            window.location.href = url
-          })
+          const URLParams = new URLSearchParams(window.location.search)
+          const projectID = URLParams.get("projectID")
+          modifyTeamBtn.href = `/project/manage/collaborators?projectID=${projectID}`
         } 
         const { projectData } = await getActiveProject()
         console.log(projectData)