diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..4c4403a
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,9 @@
+FROM nginx:stable-alpine
+
+COPY index.html /usr/share/nginx/html/index.html
+
+RUN chmod 644 /usr/share/nginx/html/index.html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..a243aa9
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,7 @@
+services:
+  punklorde-landing-page:
+    build: .
+    container_name: punklorde-landing-page
+    ports:
+      - "3010:80"
+    restart: always
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..82ee5a9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="vi"> <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Punklorde</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: system-ui, -apple-system, sans-serif;
+        }
+
+        body {
+            background-color: #0d0f12;
+            color: #e0e6ed;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        nav {
+            width: 100%;
+            padding: 1.5rem 3rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-bottom: 1px solid #1f2329;
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #bd93f9;
+            letter-spacing: 2px;
+        }
+
+        header {
+            text-align: center;
+            margin: 4rem 1rem 2rem;
+        }
+
+        .hero-image {
+            max-width: 150px; 
+            height: auto;
+            margin-bottom: 1rem;
+        }
+
+        header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            color: #ffffff;
+        }
+
+        header p {
+            color: #8b949e;
+        }
+
+        main {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 1.5rem;
+            width: 100%;
+            max-width: 1000px;
+            padding: 2rem;
+        }
+
+        .card {
+            background: #161b22;
+            border: 1px solid #30363d;
+            border-radius: 8px;
+            padding: 2rem;
+            text-decoration: none;
+            color: inherit;
+            transition: transform 0.2s ease, border-color 0.2s ease;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .card:hover:not(.disabled) {
+            transform: translateY(-5px);
+            border-color: #bd93f9;
+        }
+
+        .card h2 {
+            color: #58a6ff;
+            margin-bottom: 0.5rem;
+            font-size: 1.25rem;
+        }
+
+        .card p {
+            color: #8b949e;
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+
+        .card.disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            background: #0d1117;
+        }
+
+        .card.disabled h2 {
+            color: #8b949e;
+        }
+
+        .badge {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            background: #238636;
+            color: #ffffff;
+            padding: 0.2rem 0.6rem;
+            font-size: 0.7rem;
+            border-radius: 12px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+    </style>
+</head>
+<body>
+    <nav>
+        <div class="logo">Punklorde</div>
+    </nav>
+
+    <header>
+        <img src="https://cdn.punklorde.org/punklorde.jpg" alt="Punklorde Logo" class="hero-image">
+        <h1 data-i18n="welcome"></h1>
+        <p data-i18n="desc"></p>
+    </header>
+
+    <main>
+        <a href="https://sranalysis.punklorde.org" class="card">
+            <h2 data-i18n="sranalysis_title"></h2>
+            <p data-i18n="sranalysis_desc"></p>
+        </a>
+        
+        <a href="https://srtools.punklorde.org" class="card">
+            <h2 data-i18n="srtools_title"></h2>
+            <p data-i18n="srtools_desc"></p>
+        </a>
+
+        <div class="card disabled">
+            <h2 data-i18n="wiki_title"></h2>
+            <p data-i18n="wiki_desc"></p>
+            <span class="badge" data-i18n="coming_soon"></span>
+        </div>
+    </main>
+
+    <script>
+        const translations = {
+            vi: {
+                welcome: "Chào mừng đến với Punklorde",
+                desc: "Trung tâm dữ liệu và tiện ích toàn diện.",
+                sranalysis_title: "Firefly Analysis",
+                sranalysis_desc: "Hệ thống phân tích sát thương và tối ưu hóa chỉ số chuyên sâu.",
+                srtools_title: "Firefly SrTools",
+                srtools_desc: "Công cụ tính toán, theo dõi tài nguyên và quản lý dữ liệu.",
+                wiki_title: "Punklorde Wiki",
+                wiki_desc: "Cơ sở dữ liệu, bách khoa toàn thư và hướng dẫn chi tiết.",
+                coming_soon: "Sắp ra mắt"
+            },
+            en: {
+                welcome: "Welcome to Punklorde",
+                desc: "The comprehensive data and utility hub.",
+                sranalysis_title: "Firefly Analysis",
+                sranalysis_desc: "Advanced damage analysis and stat optimization system.",
+                srtools_title: "Firefly SrTools",
+                srtools_desc: "Calculators, resource trackers, and data management tools.",
+                wiki_title: "Punklorde Wiki",
+                wiki_desc: "Comprehensive database, encyclopedia, and detailed guides.",
+                coming_soon: "Coming Soon"
+            },
+            ja: {
+                welcome: "Punklordeへようこそ",
+                desc: "総合的なデータとユーティリティのハブ。",
+                sranalysis_title: "Firefly Analysis",
+                sranalysis_desc: "高度なダメージ分析とステータス最適化システム。",
+                srtools_title: "Firefly SrTools",
+                srtools_desc: "計算機、リソーストラッカー、データ管理ツール。",
+                wiki_title: "Punklorde Wiki",
+                wiki_desc: "包括的なデータベース、百科事典、詳細なガイド。",
+                coming_soon: "近日公開"
+            },
+            zh: {
+                welcome: "欢迎来到 Punklorde",
+                desc: "综合数据与实用工具中心。",
+                sranalysis_title: "Firefly Analysis",
+                sranalysis_desc: "高级伤害分析与面板属性优化系统。",
+                srtools_title: "Firefly SrTools",
+                srtools_desc: "计算器、资源追踪器与数据管理工具。",
+                wiki_title: "Punklorde Wiki",
+                wiki_desc: "综合数据库、百科全书与详细指南。",
+                coming_soon: "敬请期待"
+            },
+            ko: {
+                welcome: "Punklorde에 오신 것을 환영합니다",
+                desc: "종합적인 데이터 및 유틸리티 허브.",
+                sranalysis_title: "Firefly Analysis",
+                sranalysis_desc: "고급 데미지 분석 및 스탯 최적화 시스템.",
+                srtools_title: "Firefly SrTools",
+                srtools_desc: "계산기, 리소스 트래커 및 데이터 관리 도구.",
+                wiki_title: "Punklorde Wiki",
+                wiki_desc: "포괄적인 데이터베이스, 백과사전 및 상세 가이드.",
+                coming_soon: "출시 예정"
+            }
+        };
+
+        function getBrowserLanguage() {
+            const browserLang = navigator.language || navigator.userLanguage;
+            const shortLang = browserLang.split('-')[0].toLowerCase();
+            const supportedLangs = ['vi', 'en', 'ja', 'zh', 'ko'];
+            
+            return supportedLangs.includes(shortLang) ? shortLang : 'en';
+        }
+
+        function setLanguage(lang) {
+            document.documentElement.lang = lang;
+            const elements = document.querySelectorAll('[data-i18n]');
+            
+            elements.forEach(el => {
+                const key = el.getAttribute('data-i18n');
+                if (translations[lang] && translations[lang][key]) {
+                    el.textContent = translations[lang][key];
+                }
+            });
+        }
+
+        const detectedLanguage = getBrowserLanguage();
+        setLanguage(detectedLanguage);
+    </script>
+</body>
+</html>
\ No newline at end of file
