diff --git a/src/__tests__/AppsMenu.spec.ts b/src/__tests__/AppsMenu.spec.ts
index 9bd7908..9e99724 100644
--- a/src/__tests__/AppsMenu.spec.ts
+++ b/src/__tests__/AppsMenu.spec.ts
@@ -69,13 +69,12 @@ describe('AppsMenu.vue', () => {
 
 		// Check first app item
 		const firstApp = appItems.at(0)
-		const firstAppLink = firstApp.find('.ncwappsmenu__app-icon')
 
-		expect(firstAppLink.attributes('href')).toBe(mockApps[0].href)
-		expect(firstAppLink.attributes('title')).toBe(mockApps[0].name)
-		expect(firstAppLink.attributes('aria-current')).toBeUndefined()
-		expect(firstAppLink.attributes('target')).toBeUndefined()
-		expect(firstAppLink.attributes('rel')).toBeUndefined()
+		expect(firstApp.attributes('href')).toBe(mockApps[0].href)
+		expect(firstApp.attributes('title')).toBe(mockApps[0].name)
+		expect(firstApp.attributes('aria-current')).toBeUndefined()
+		expect(firstApp.attributes('target')).toBeUndefined()
+		expect(firstApp.attributes('rel')).toBeUndefined()
 
 		const firstAppImage = firstApp.find('.ncwappsmenu__app-image')
 		expect(firstAppImage.attributes('src')).toBe(mockApps[0].icon)
@@ -90,9 +89,8 @@ describe('AppsMenu.vue', () => {
 
 		const appItems = wrapper.findAll('.ncwappsmenu__app-item')
 		const activeApp = appItems.at(1) // calendar app is active
-		const activeAppLink = activeApp.find('.ncwappsmenu__app-icon')
 
-		expect(activeAppLink.attributes('aria-current')).toBe('page')
+		expect(activeApp.attributes('aria-current')).toBe('page')
 	})
 
 	it('handles external apps with target="_blank" correctly', () => {
@@ -100,10 +98,9 @@ describe('AppsMenu.vue', () => {
 
 		const appItems = wrapper.findAll('.ncwappsmenu__app-item')
 		const externalApp = appItems.at(2) // external site app
-		const externalAppLink = externalApp.find('.ncwappsmenu__app-icon')
 
-		expect(externalAppLink.attributes('target')).toBe('_blank')
-		expect(externalAppLink.attributes('rel')).toBe('noopener noreferrer')
+		expect(externalApp.attributes('target')).toBe('_blank')
+		expect(externalApp.attributes('rel')).toBe('noopener noreferrer')
 	})
 
 	it('subscribes to event bus on mount', () => {
diff --git a/src/lib/view/AppsMenu.vue b/src/lib/view/AppsMenu.vue
index d902eb8..562d295 100644
--- a/src/lib/view/AppsMenu.vue
+++ b/src/lib/view/AppsMenu.vue
@@ -13,22 +13,22 @@
 		</template>
 		<div class="ncwappsmenu__menu">
 			<div class="ncwappsmenu__grid">
-				<div v-for="app in appsList"
+				<a v-for="app in appsList"
 					:key="app.id"
-					class="ncwappsmenu__app-item">
-					<a class="ncwappsmenu__app-icon"
-						:href="app.href"
-						:title="app.name"
-						:aria-current="app.active ? 'page' : false"
-						:target="app.target ? '_blank' : undefined"
-						:rel="app.target ? 'noopener noreferrer' : undefined">
+					class="ncwappsmenu__app-item"
+					:href="app.href"
+					:title="app.name"
+					:aria-current="app.active ? 'page' : false"
+					:target="app.target ? '_blank' : undefined"
+					:rel="app.target ? 'noopener noreferrer' : undefined">
+					<div class="ncwappsmenu__app-icon">
 						<img :src="app.icon"
 							:alt="app.name"
 							:title="app.name"
 							class="ncwappsmenu__app-image">
-					</a>
+					</div>
 					<span class="ncwappsmenu__app-name">{{ app.name }}</span>
-				</div>
+				</a>
 			</div>
 		</div>
 	</NcHeaderMenu>
@@ -143,14 +143,15 @@ $grid-image-size: 35px;
 		text-decoration: none;
 		height: $app-icon-size;
 		width: $app-icon-size;
+		color: inherit;
 
 		&:hover {
 			background-color: var(--ion-context-menu-item-background-hover);
 		}
 
 		&:focus {
-			outline: 2px solid var(--color-primary-element);
-			outline-offset: 2px;
+			outline: 1px solid var(--color-primary-element);
+			outline-offset: 1px;
 		}
 	}
 
@@ -161,6 +162,7 @@ $grid-image-size: 35px;
 		align-items: center;
 		justify-content: center;
 		margin-bottom: 6px;
+		pointer-events: none;
 	}
 
 	&__app-image {