diff --git a/src/translate-modal.js b/src/translate-modal.js
index 87b943c..120eddc 100644
--- a/src/translate-modal.js
+++ b/src/translate-modal.js
@@ -125,30 +125,50 @@ export function openTranslateModal() {
 	};
 	header.appendChild(closeButton);
 
-	// Translation mode tabs
-	const modeContainer = document.createElement("div");
-	modeContainer.style.cssText =
-		"display: flex; gap: 10px; margin-bottom: 20px;";
+	// Translation mode tabs using PicoCSS tab navigation
+	const tabNav = document.createElement("nav");
+	tabNav.style.marginBottom = "20px";
 
-	const pageTab = document.createElement("button");
-	pageTab.textContent = getUIText("translatePageTab");
-	pageTab.setAttribute("data-i18n", "translatePageTab");
-	pageTab.style.cssText =
-		"flex: 1; padding: 10px; border: 2px solid #4CAF50; border-radius: 6px; background: #4CAF50; color: white; cursor: pointer;";
+	const tabList = document.createElement("ul");
+	tabList.setAttribute("role", "tablist");
 
-	const customTab = document.createElement("button");
-	customTab.textContent = getUIText("customTextTab");
-	customTab.setAttribute("data-i18n", "customTextTab");
-	customTab.style.cssText =
-		"flex: 1; padding: 10px; border: 2px solid #4CAF50; border-radius: 6px; background: white; color: #4CAF50; cursor: pointer;";
+	// Page tab
+	const pageTabItem = document.createElement("li");
+	const pageTabLink = document.createElement("a");
+	pageTabLink.setAttribute("role", "tab");
+	pageTabLink.setAttribute("aria-selected", "true");
+	pageTabLink.setAttribute("aria-controls", "page-panel");
+	pageTabLink.href = "#page-panel";
+	pageTabLink.textContent = getUIText("translatePageTab");
+	pageTabLink.setAttribute("data-i18n", "translatePageTab");
+	pageTabItem.appendChild(pageTabLink);
 
-	modeContainer.appendChild(pageTab);
-	modeContainer.appendChild(customTab);
-	article.appendChild(modeContainer);
+	// Custom text tab
+	const customTabItem = document.createElement("li");
+	const customTabLink = document.createElement("a");
+	customTabLink.setAttribute("role", "tab");
+	customTabLink.setAttribute("aria-selected", "false");
+	customTabLink.setAttribute("aria-controls", "custom-panel");
+	customTabLink.href = "#custom-panel";
+	customTabLink.textContent = getUIText("customTextTab");
+	customTabLink.setAttribute("data-i18n", "customTextTab");
+	customTabItem.appendChild(customTabLink);
 
-	// Content areas
+	tabList.appendChild(pageTabItem);
+	tabList.appendChild(customTabItem);
+	tabNav.appendChild(tabList);
+	article.appendChild(tabNav);
+
+	// Content areas with proper IDs and attributes for tabs
 	const pageContent = document.createElement("div");
+	pageContent.id = "page-panel";
+	pageContent.setAttribute("role", "tabpanel");
+	pageContent.setAttribute("aria-labelledby", "page-tab");
+	
 	const customContent = document.createElement("div");
+	customContent.id = "custom-panel";
+	customContent.setAttribute("role", "tabpanel");
+	customContent.setAttribute("aria-labelledby", "custom-tab");
 	customContent.style.display = "none";
 
 	// Page translation content
@@ -245,29 +265,27 @@ export function openTranslateModal() {
 
 	article.appendChild(translateButton);
 
-	// Tab switching
+	// Tab switching using PicoCSS tab navigation
 	let isPageMode = true;
 
-	pageTab.onclick = () => {
+	pageTabLink.onclick = (e) => {
+		e.preventDefault();
 		if (!isPageMode) {
 			isPageMode = true;
-			pageTab.style.background = "#4CAF50";
-			pageTab.style.color = "white";
-			customTab.style.background = "white";
-			customTab.style.color = "#4CAF50";
+			pageTabLink.setAttribute("aria-selected", "true");
+			customTabLink.setAttribute("aria-selected", "false");
 			pageContent.style.display = "block";
 			customContent.style.display = "none";
 			translateButton.textContent = getUIText("translatePageButton");
 		}
 	};
 
-	customTab.onclick = () => {
+	customTabLink.onclick = (e) => {
+		e.preventDefault();
 		if (isPageMode) {
 			isPageMode = false;
-			customTab.style.background = "#4CAF50";
-			customTab.style.color = "white";
-			pageTab.style.background = "white";
-			pageTab.style.color = "#4CAF50";
+			customTabLink.setAttribute("aria-selected", "true");
+			pageTabLink.setAttribute("aria-selected", "false");
 			customContent.style.display = "block";
 			pageContent.style.display = "none";
 			translateButton.textContent = getUIText("translateTextButton");