diff --git a/apps/frontend/package-lock.json b/apps/frontend/package-lock.json
index e9ca5cb..a6a6df6 100644
--- a/apps/frontend/package-lock.json
+++ b/apps/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "ttglanding",
       "version": "0.0.1",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^7.3.1",
         "dompurify": "^3.4.12",
         "pinia": "^2.2.0",
         "tuicss": "^2.1.2",
@@ -544,6 +545,15 @@
         }
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.3.1.tgz",
+      "integrity": "sha512-wmglKKPDIkgV3aWlZzWECCPoGIkYCulzBwxG9+w7rc5BGapZ6cPMpoPOT8k36J0Ni7PPX6c/rsoMWfS4d1MUMg==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index e75a1f1..a79bd10 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -12,6 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.3.1",
     "dompurify": "^3.4.12",
     "pinia": "^2.2.0",
     "tuicss": "^2.1.2",
diff --git a/apps/frontend/src/i18n/locales/en.ts b/apps/frontend/src/i18n/locales/en.ts
index 2f8a7e2..f9c1865 100644
--- a/apps/frontend/src/i18n/locales/en.ts
+++ b/apps/frontend/src/i18n/locales/en.ts
@@ -133,9 +133,9 @@ export default {
     latestStable: 'Latest Stable',
     released: 'Released:',
     playNow: '▶ Play Now',
-    download: '💾 Download',
-    source: '📄 Source',
-    docs: '📖 Docs',
+    download: 'Download',
+    source: 'Source',
+    docs: 'Docs',
     allReleases: 'All Releases',
     version: 'Version',
     releaseDate: 'Release Date',
diff --git a/apps/frontend/src/i18n/locales/hu.ts b/apps/frontend/src/i18n/locales/hu.ts
index 6356e3e..881c67e 100644
--- a/apps/frontend/src/i18n/locales/hu.ts
+++ b/apps/frontend/src/i18n/locales/hu.ts
@@ -133,9 +133,9 @@ export default {
     latestStable: 'Legújabb stabil',
     released: 'Kiadva:',
     playNow: '▶ Játék most',
-    download: '💾 Letöltés',
-    source: '📄 Forráskód',
-    docs: '📖 Dokumentáció',
+    download: 'Letöltés',
+    source: 'Forráskód',
+    docs: 'Dokumentáció',
     allReleases: 'Összes kiadás',
     version: 'Verzió',
     releaseDate: 'Kiadás dátuma',
diff --git a/apps/frontend/src/layout/AppLayout.vue b/apps/frontend/src/layout/AppLayout.vue
index f1bf598..d84415b 100644
--- a/apps/frontend/src/layout/AppLayout.vue
+++ b/apps/frontend/src/layout/AppLayout.vue
@@ -37,7 +37,7 @@
         <RouterLink to="/code" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">{{ t('nav.code') }}</RouterLink>
         <RouterLink to="/team" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">{{ t('nav.team') }}</RouterLink>
         <RouterLink to="/contact" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">{{ t('nav.contact') }}</RouterLink>
-        <a v-if="isAdmin" href="/admin" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">🔧 Admin</a>
+        <a v-if="isAdmin" href="/admin" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200"><i class="fa-solid fa-wrench"></i> Admin</a>
         <div class="flex items-center gap-2 pt-2 border-t border-gray-700 w-full justify-center text-sm font-bold">
           <button :class="locale === 'en' ? 'text-white' : 'text-gray-400'" class="transition-colors px-2 py-1" @click="switchLocale('en')">EN</button>
           <span class="text-gray-600">|</span>
@@ -53,19 +53,19 @@
     <div class="retro-toggle-bar">
       <div class="flex items-center justify-center gap-4">
         <button class="retro-toggle-btn" @click="toggleRetroMode">
-          🖥 {{ isRetroMode ? t('nav.exitRetro') : t('nav.retro') }}
+          <i class="fa-solid fa-desktop"></i> {{ isRetroMode ? t('nav.exitRetro') : t('nav.retro') }}
         </button>
         <div class="flex items-center gap-2 text-xs text-gray-400">
           <a href="/api/rss/blog" target="_blank" class="hover:text-orange-400 transition-colors" title="Blog RSS">
-            📡 Blog
+            <i class="fa-solid fa-rss"></i> Blog
           </a>
           <span class="text-gray-600">|</span>
           <a href="/api/rss/releases" target="_blank" class="hover:text-orange-400 transition-colors" title="Releases RSS">
-            📡 Releases
+            <i class="fa-solid fa-rss"></i> Releases
           </a>
           <span class="text-gray-600">|</span>
           <a href="/api/rss/howtos" target="_blank" class="hover:text-orange-400 transition-colors" title="HowTos RSS">
-            📡 HowTos
+            <i class="fa-solid fa-rss"></i> HowTos
           </a>
         </div>
       </div>
diff --git a/apps/frontend/src/main.ts b/apps/frontend/src/main.ts
index d1d4079..1083e09 100644
--- a/apps/frontend/src/main.ts
+++ b/apps/frontend/src/main.ts
@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
 import { router } from './router/index.router'
 import { i18n } from './i18n'
 import App from './App.vue'
+import '@fortawesome/fontawesome-free/css/all.min.css'
 import 'tuicss/dist/tuicss.min.css'
 import './styles/global.css'
 import './styles/retro.css'
diff --git a/apps/frontend/src/page/blog/BlogIndexPage.vue b/apps/frontend/src/page/blog/BlogIndexPage.vue
index 08b9712..f1fb3b6 100644
--- a/apps/frontend/src/page/blog/BlogIndexPage.vue
+++ b/apps/frontend/src/page/blog/BlogIndexPage.vue
@@ -17,7 +17,7 @@
 
     <main class="blog-main">
       <div v-if="error" class="error-banner" role="alert">
-        <span class="text-2xl">⚠️</span>
+        <i class="fa-solid fa-triangle-exclamation text-2xl text-yellow-500"></i>
         <div>
           <h3 class="error-banner-title">{{ t('blog.errorTitle') }}</h3>
           <p class="error-banner-desc">{{ error }}</p>
@@ -25,7 +25,7 @@
       </div>
 
       <div v-else-if="!loading && blogPages.length === 0" class="empty-state">
-        <div class="empty-state-icon">📭</div>
+        <div class="empty-state-icon"><i class="fa-solid fa-inbox"></i></div>
         <h2 class="empty-state-title">{{ t('blog.noPostsTitle') }}</h2>
         <p class="empty-state-desc">{{ t('blog.noPostsDesc') }}</p>
       </div>
diff --git a/apps/frontend/src/page/blog/BlogShowPage.vue b/apps/frontend/src/page/blog/BlogShowPage.vue
index c80f8b3..787572b 100644
--- a/apps/frontend/src/page/blog/BlogShowPage.vue
+++ b/apps/frontend/src/page/blog/BlogShowPage.vue
@@ -18,7 +18,7 @@
 
     <main class="blog-main">
       <div v-if="error" class="error-banner" role="alert">
-        <span class="text-2xl">⚠️</span>
+        <i class="fa-solid fa-triangle-exclamation text-2xl text-yellow-500"></i>
         <div>
           <h3 class="error-banner-title">Error</h3>
           <p class="error-banner-desc">{{ error }}</p>
diff --git a/apps/frontend/src/page/code/CodeIndexPage.vue b/apps/frontend/src/page/code/CodeIndexPage.vue
index e9d9589..5f43f3f 100644
--- a/apps/frontend/src/page/code/CodeIndexPage.vue
+++ b/apps/frontend/src/page/code/CodeIndexPage.vue
@@ -38,7 +38,7 @@
 
     <div class="commits-list">
       <div v-for="commit in recentCommits" :key="commit.sha" class="commit-item">
-        <div class="commit-icon">🚀</div>
+        <div class="commit-icon"><i class="fa-solid fa-rocket"></i></div>
         <div class="commit-content">
           <p class="commit-message">
             <a :href="commit.repo.html_url" target="_blank" class="commit-repo-link">
diff --git a/apps/frontend/src/page/contact/ContactPage.vue b/apps/frontend/src/page/contact/ContactPage.vue
index e6bc525..400d2da 100644
--- a/apps/frontend/src/page/contact/ContactPage.vue
+++ b/apps/frontend/src/page/contact/ContactPage.vue
@@ -16,7 +16,7 @@
     <div class="contact-grid">
       <div class="contact-card">
         <h2 class="contact-card-title">
-          <span class="text-3xl">📧</span> {{ t('contact.emailUs') }}
+          <i class="fa-solid fa-envelope text-3xl text-indigo-500"></i> {{ t('contact.emailUs') }}
         </h2>
         <p class="contact-card-desc">{{ t('contact.emailDesc') }}</p>
         <div class="email-link cursor-pointer" @click="openEmail">
@@ -26,7 +26,7 @@
 
       <div class="contact-card">
         <h2 class="contact-card-title">
-          <span class="text-3xl">💬</span> {{ t('contact.community') }}
+          <i class="fa-solid fa-comments text-3xl text-indigo-500"></i> {{ t('contact.community') }}
         </h2>
         <p class="contact-card-desc">{{ t('contact.communityDesc') }}</p>
 
@@ -61,7 +61,7 @@
 
       <div class="contact-card">
         <h2 class="contact-card-title">
-          <span class="text-3xl">📱</span> {{ t('contact.social') }}
+          <i class="fa-solid fa-share-nodes text-3xl text-indigo-500"></i> {{ t('contact.social') }}
         </h2>
         <p class="contact-card-desc">{{ t('contact.socialDesc') }}</p>
 
diff --git a/apps/frontend/src/page/home/HomePage.vue b/apps/frontend/src/page/home/HomePage.vue
index fb4faa6..cdb24ed 100644
--- a/apps/frontend/src/page/home/HomePage.vue
+++ b/apps/frontend/src/page/home/HomePage.vue
@@ -90,7 +90,7 @@
                   <div class="w-10 h-10 border-4 border-white/5 border-t-indigo-500 rounded-full animate-spin"></div>
                 </div>
                 <div v-else-if="ytState === 'error'" class="state-overlay absolute inset-0 flex items-center justify-center bg-slate-950 flex-col gap-2">
-                  <div class="text-xl">⚠️</div>
+                  <div class="text-xl text-yellow-500"><i class="fa-solid fa-triangle-exclamation"></i></div>
                   <div class="text-[11px] text-slate-500 text-center px-4 font-bold uppercase tracking-tighter">{{ ytError }}</div>
                 </div>
                 <div v-else-if="ytState === 'no-config'" class="state-overlay absolute inset-0 flex items-center justify-center bg-slate-950">
@@ -111,8 +111,8 @@
                 <span class="yt-new-tag">{{ t('home.newRelease') }}</span>
                 <h3 class="yt-video-title">{{ ytTitle }}</h3>
                 <div class="yt-stats-row">
-                  <span v-if="ytPublishDate">📅 {{ ytPublishDate }}</span>
-                  <span v-if="ytViewCount">👁 {{ ytViewCount }}</span>
+                  <span v-if="ytPublishDate"><i class="fa-solid fa-calendar-days"></i> {{ ytPublishDate }}</span>
+                  <span v-if="ytViewCount"><i class="fa-solid fa-eye"></i> {{ ytViewCount }}</span>
                 </div>
               </div>
 
@@ -165,7 +165,7 @@
       <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         <div class="nav-card group card-interactive">
           <div class="nav-card-icon bg-purple-50 group-hover:bg-purple-100">
-            <span class="text-3xl">🎮</span>
+            <i class="fa-solid fa-gamepad text-3xl text-purple-600"></i>
           </div>
           <h2 class="nav-card-title">{{ t('home.catalog.title') }}</h2>
           <p class="nav-card-desc">{{ t('home.catalog.desc') }}</p>
@@ -176,7 +176,7 @@
 
         <div class="nav-card group card-interactive">
           <div class="nav-card-icon bg-green-50 group-hover:bg-green-100">
-            <span class="text-3xl">📚</span>
+            <i class="fa-solid fa-book text-3xl text-green-600"></i>
           </div>
           <h2 class="nav-card-title">{{ t('home.wiki.title') }}</h2>
           <p class="nav-card-desc">{{ t('home.wiki.desc') }}</p>
@@ -187,7 +187,7 @@
 
         <div class="nav-card group card-interactive">
           <div class="nav-card-icon bg-slate-50 group-hover:bg-slate-100">
-            <span class="text-3xl">💻</span>
+            <i class="fa-solid fa-laptop-code text-3xl text-slate-700"></i>
           </div>
           <h2 class="nav-card-title">{{ t('home.git.title') }}</h2>
           <p class="nav-card-desc">{{ t('home.git.desc') }}</p>
@@ -198,7 +198,7 @@
 
         <div class="nav-card group card-interactive">
           <div class="nav-card-icon bg-red-50 group-hover:bg-red-100">
-            <span class="text-3xl">📺</span>
+            <i class="fa-solid fa-tv text-3xl text-red-600"></i>
           </div>
           <h2 class="nav-card-title">{{ t('home.youtube.title') }}</h2>
           <p class="nav-card-desc">{{ t('home.youtube.desc') }}</p>
@@ -210,7 +210,7 @@
 
       <!-- AI Content Notice -->
       <div class="mb-12 mt-12 bg-white rounded-2xl border border-indigo-100 p-6 shadow-sm flex items-center gap-4">
-        <div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center text-2xl flex-shrink-0">🤖</div>
+        <div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center text-2xl flex-shrink-0"><i class="fa-solid fa-robot text-indigo-500"></i></div>
         <div class="flex-grow text-slate-600 text-sm md:text-base italic">
           <strong>Note:</strong> {{ t('home.note') }}
         </div>
diff --git a/apps/frontend/src/page/howtos/HowtosIndexPage.vue b/apps/frontend/src/page/howtos/HowtosIndexPage.vue
index 52d0174..a26d71f 100644
--- a/apps/frontend/src/page/howtos/HowtosIndexPage.vue
+++ b/apps/frontend/src/page/howtos/HowtosIndexPage.vue
@@ -20,7 +20,7 @@
 
     <main class="main-container">
       <div v-if="error" class="error-banner" role="alert">
-        <span class="text-2xl">⚠️</span>
+        <i class="fa-solid fa-triangle-exclamation text-2xl text-yellow-500"></i>
         <div>
           <h3 class="error-banner-title">{{ t('howtos.errorTitle') }}</h3>
           <p class="error-banner-desc">{{ error }}</p>
@@ -28,7 +28,7 @@
       </div>
 
       <div v-else-if="!loading && recentPages.length === 0" class="empty-state">
-        <div class="empty-state-icon">📭</div>
+        <div class="empty-state-icon"><i class="fa-solid fa-inbox"></i></div>
         <h2 class="empty-state-title">{{ t('howtos.noPagesTitle') }}</h2>
         <p class="empty-state-desc">{{ t('howtos.noPagesDesc') }}</p>
       </div>