From bb57de19b51e747138f769da2f0875fd0c5c6e39 Mon Sep 17 00:00:00 2001
From: HaryTien <zeentien.123@gmail.com>
Date: Sun, 19 Oct 2025 14:29:03 +0700
Subject: [PATCH] Add dark theme and Vietnamese translation.

---
 index.html         | 134 ++++++-------
 js/i18n.js         | 484 +++++++++++++++++++++++++++++++++++++++++++++
 js/theoryLoader.js |  31 ++-
 js/uiHandler.js    | 145 ++++++++------
 js/vlsmLogic.js    |  50 ++---
 style.css          | 341 +++++++++++++++++++++++++++++++-
 6 files changed, 1025 insertions(+), 160 deletions(-)
 create mode 100644 js/i18n.js

diff --git a/index.html b/index.html
index d1c2002..5eee655 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
       <div class="container">
         <a class="navbar-brand fw-bold" href="#">
           <i class="fas fa-network-wired me-2"></i>
-          Network Tools Suite
+          <span data-i18n="nav_title">Network Tools Suite</span>
         </a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
           <span class="navbar-toggler-icon"></span>
@@ -25,31 +25,31 @@
             <li class="nav-item">
               <a class="nav-link active" href="#vlsm-tool" data-tool="vlsm">
                 <i class="fas fa-project-diagram me-1"></i>
-                Subnetting (VLSM)
+                <span data-i18n="nav_vlsm">Subnetting (VLSM)</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#ip-checker-tool" data-tool="ip-checker">
                 <i class="fas fa-check-circle me-1"></i>
-                IP Checker
+                <span data-i18n="nav_ip_checker">IP Checker</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#ip-aggregator-tool" data-tool="ip-aggregator">
                 <i class="fas fa-layer-group me-1"></i>
-                IP Summary
+                <span data-i18n="nav_ip_aggregator">IP Summary</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#number-converter-tool" data-tool="number-converter">
                 <i class="fas fa-exchange-alt me-1"></i>
-                Number Converter
+                <span data-i18n="nav_number_converter">Number Converter</span>
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#theory-tool" data-tool="theory">
                 <i class="fas fa-book me-1"></i>
-                Theory
+                <span data-i18n="nav_theory">Theory</span>
               </a>
             </li>
           </ul>
@@ -72,56 +72,56 @@
               <div class="card-header bg-info text-white">
                 <h4 class="mb-0">
                   <i class="fas fa-project-diagram me-2"></i>
-                  VLSM Subnetting
+                  <span data-i18n="vlsm_title">VLSM Subnetting</span>
                 </h4>
-                <p class="mb-0 mt-2 opacity-80">Calculate Variable Length Subnet Masks for efficient IP allocation</p>
+                <p class="mb-0 mt-2 opacity-80" data-i18n="vlsm_description">Calculate Variable Length Subnet Masks for efficient IP allocation</p>
               </div>
               <div class="card-body">
                 <form id="vlsm-form">
                   <div class="row mb-4">
                     <div class="col-md-6">
-                      <label for="base-network" class="form-label fw-semibold"
-                        >Base Network (CIDR)
-                        <div class="form-text">Enter the base network in CIDR notation</div>
+                      <label for="base-network" class="form-label fw-semibold">
+                        <span data-i18n="vlsm_base_network">Base Network (CIDR)</span>
+                        <div class="form-text" data-i18n="vlsm_base_network_help">Enter the base network in CIDR notation</div>
                       </label>
                       <input type="text" class="form-control form-control-lg" id="base-network" placeholder="192.168.10.0/24" />
                     </div>
                     <div class="col-md-6">
                       <label for="subdivision-strategy" class="form-label fw-semibold">
-                        Subnet Allocation Strategy
-                        <div class="form-text">Choose how to allocate subnets during subdivision</div>
+                        <span data-i18n="vlsm_strategy">Subnet Allocation Strategy</span>
+                        <div class="form-text" data-i18n="vlsm_strategy_help">Choose how to allocate subnets during subdivision</div>
                       </label>
                       <select class="form-select form-select-lg" id="subdivision-strategy">
-                        <option value="first">Take the first subnet to assign - Traditional Method</option>
-                        <option value="last">Take the last subnet to assign - Alternative Method</option>
+                        <option value="first" data-i18n="vlsm_strategy_first">Take the first subnet to assign - Traditional Method</option>
+                        <option value="last" data-i18n="vlsm_strategy_last">Take the last subnet to assign - Alternative Method</option>
                       </select>
                     </div>
                   </div>
 
                   <div class="row mb-4">
                     <div class="col-12">
-                      <h5 class="text-primary mb-3">Host Requirements per Subnet</h5>
+                      <h5 class="text-primary mb-3" data-i18n="vlsm_host_requirements">Host Requirements per Subnet</h5>
                       <div class="row" id="subnet-inputs">
                         <div class="col-md-3 mb-3">
-                          <label class="form-label">Network 1</label>
+                          <label class="form-label"><span data-i18n="vlsm_network">Network</span> 1</label>
                           <input type="number" class="form-control subnet-hosts" placeholder="1" min="1" max="65534" />
                         </div>
                       </div>
-                      <button type="button" class="btn btn-outline-primary btn-sm" id="add-subnet"><i class="fas fa-plus me-1"></i>Add Another Subnet</button>
+                      <button type="button" class="btn btn-outline-primary btn-sm" id="add-subnet"><i class="fas fa-plus me-1"></i><span data-i18n="vlsm_add_subnet">Add Another Subnet</span></button>
                     </div>
                   </div>
 
-                  <button type="submit" class="btn btn-info text-white btn-lg"><i class="fas fa-calculator me-2"></i>Calculate</button>
+                  <button type="submit" class="btn btn-info text-white btn-lg"><i class="fas fa-calculator me-2"></i><span data-i18n="vlsm_calculate">Calculate</span></button>
                 </form>
 
                 <div id="vlsm-results" class="mt-4" style="display: none;">
                   <div class="d-flex justify-content-between align-items-center mb-3">
-                    <h5 class="text-primary mb-0"><i class="fas fa-check-circle me-2"></i>Subnetting Results</h5>
+                    <h5 class="text-primary mb-0"><i class="fas fa-check-circle me-2"></i><span data-i18n="vlsm_results">Subnetting Results</span></h5>
                     <div class="btn-group" role="group">
                       <input type="radio" class="btn-check" name="viewMode" id="table-view" value="table" checked />
-                      <label class="btn btn-outline-primary btn-sm" for="table-view"> <i class="fas fa-table me-1"></i>Table View </label>
+                      <label class="btn btn-outline-primary btn-sm" for="table-view"> <i class="fas fa-table me-1"></i><span data-i18n="vlsm_table_view">Table View</span> </label>
                       <input type="radio" class="btn-check" name="viewMode" id="detailed-view" value="detailed" />
-                      <label class="btn btn-outline-primary btn-sm" for="detailed-view"> <i class="fas fa-list-alt me-1"></i>Detailed Analysis </label>
+                      <label class="btn btn-outline-primary btn-sm" for="detailed-view"> <i class="fas fa-list-alt me-1"></i><span data-i18n="vlsm_detailed_view">Detailed Analysis</span> </label>
                     </div>
                   </div>
 
@@ -131,14 +131,14 @@ <h5 class="text-primary mb-0"><i class="fas fa-check-circle me-2"></i>Subnetting
                       <table class="table table-hover">
                         <thead class="table-primary">
                           <tr>
-                            <th>Network</th>
-                            <th>IP Network</th>
-                            <th>First IP</th>
-                            <th>Last IP</th>
-                            <th>Broadcast</th>
-                            <th>Subnet Mask</th>
-                            <th>Wildcard Mask</th>
-                            <th>Usable Hosts</th>
+                            <th data-i18n="vlsm_network">Network</th>
+                            <th data-i18n="vlsm_ip_network">IP Network</th>
+                            <th data-i18n="vlsm_first_ip">First IP</th>
+                            <th data-i18n="vlsm_last_ip">Last IP</th>
+                            <th data-i18n="vlsm_broadcast">Broadcast</th>
+                            <th data-i18n="vlsm_subnet_mask">Subnet Mask</th>
+                            <th data-i18n="vlsm_wildcard_mask">Wildcard Mask</th>
+                            <th data-i18n="vlsm_usable_hosts">Usable Hosts</th>
                           </tr>
                         </thead>
                         <tbody id="vlsm-table-body"></tbody>
@@ -165,23 +165,23 @@ <h5 class="text-primary mb-0"><i class="fas fa-check-circle me-2"></i>Subnetting
               <div class="card-header bg-info text-white">
                 <h4 class="mb-0">
                   <i class="fas fa-check-circle me-2"></i>
-                  IP Checker
+                  <span data-i18n="ip_checker_title">IP Checker</span>
                 </h4>
-                <p class="mb-0 mt-2 opacity-80">Check if an IP address is assignable within a subnet</p>
+                <p class="mb-0 mt-2 opacity-80" data-i18n="ip_checker_description">Check if an IP address is assignable within a subnet</p>
               </div>
               <div class="card-body">
                 <form id="ip-checker-form">
                   <div class="row mb-4">
                     <div class="col-md-8">
-                      <label for="ip-cidr-input" class="form-label fw-semibold"
-                        >IP Address with CIDR
-                        <div class="form-text">Enter the IP address with CIDR notation (e.g., 192.168.10.50/24)</div>
+                      <label for="ip-cidr-input" class="form-label fw-semibold">
+                        <span data-i18n="ip_checker_input">IP Address with CIDR</span>
+                        <div class="form-text" data-i18n="ip_checker_input_help">Enter the IP address with CIDR notation (e.g., 192.168.10.50/24)</div>
                       </label>
                       <input type="text" class="form-control form-control-lg" id="ip-cidr-input" placeholder="192.168.10.50/24" />
                     </div>
                   </div>
 
-                  <button type="submit" class="btn btn-info text-white btn-lg"><i class="fas fa-search me-2"></i>Check</button>
+                  <button type="submit" class="btn btn-info text-white btn-lg"><i class="fas fa-search me-2"></i><span data-i18n="ip_checker_check">Check</span></button>
                 </form>
 
                 <div id="ip-checker-results" class="mt-4" style="display: none;"></div>
@@ -199,17 +199,17 @@ <h4 class="mb-0">
               <div class="card-header bg-info text-white">
                 <h4 class="mb-0">
                   <i class="fas fa-layer-group me-2"></i>
-                  IP Summary Tool
+                  <span data-i18n="ip_aggregator_title">IP Summary Tool</span>
                 </h4>
-                <p class="mb-0 mt-2 opacity-80">Find the common supernet for multiple IP addresses</p>
+                <p class="mb-0 mt-2 opacity-80" data-i18n="ip_aggregator_description">Find the common supernet for multiple IP addresses</p>
               </div>
               <div class="card-body">
                 <form id="ip-aggregator-form">
                   <div class="row mb-4">
                     <div class="col-12">
-                      <label for="ip-list" class="form-label fw-semibold"
-                        >IP Addresses (CIDR Notation)
-                        <div class="form-text">Enter each IP address with CIDR notation on a separate line (e.g., 192.168.10.0/28)</div>
+                      <label for="ip-list" class="form-label fw-semibold">
+                        <span data-i18n="ip_aggregator_input">IP Addresses (CIDR Notation)</span>
+                        <div class="form-text" data-i18n="ip_aggregator_input_help">Enter each IP address with CIDR notation on a separate line (e.g., 192.168.10.0/28)</div>
                       </label>
                       <textarea
                         class="form-control form-control-lg"
@@ -223,7 +223,7 @@ <h4 class="mb-0">
                     </div>
                   </div>
 
-                  <button type="submit" class="btn btn-info text-white btn-lg"><i class="fas fa-layer-group me-2"></i>Find</button>
+                  <button type="submit" class="btn btn-info text-white btn-lg"><i class="fas fa-layer-group me-2"></i><span data-i18n="ip_aggregator_find">Find</span></button>
                 </form>
 
                 <div id="ip-aggregator-results" class="mt-4" style="display: none;"></div>
@@ -241,31 +241,32 @@ <h4 class="mb-0">
               <div class="card-header bg-info text-white">
                 <h4 class="mb-0">
                   <i class="fas fa-exchange-alt me-2"></i>
-                  Number Base Converter
+                  <span data-i18n="number_converter_title">Number Base Converter</span>
                 </h4>
-                <p class="mb-0 mt-2 opacity-80">Convert numbers between Binary, Decimal, Hexadecimal, and Octal</p>
+                <p class="mb-0 mt-2 opacity-80" data-i18n="number_converter_description">Convert numbers between Binary, Decimal, Hexadecimal, and Octal</p>
               </div>
               <div class="card-body">
                 <div class="row">
                   <!-- Input Section -->
                   <div class="col-md-6">
                     <h5 class="mb-3">
-                      <i class="fas fa-keyboard me-2"></i>Input
+                      <i class="fas fa-keyboard me-2"></i><span data-i18n="number_converter_input">Input</span>
                     </h5>
                     
                     <div class="mb-3">
-                      <label for="input-base" class="form-label fw-semibold">From Base</label>
+                      <label for="input-base" class="form-label fw-semibold" data-i18n="number_converter_from_base">From Base</label>
                       <select class="form-select form-select-lg" id="input-base">
-                        <option value="10" selected>Decimal (Base 10)</option>
-                        <option value="2">Binary (Base 2)</option>
-                        <option value="16">Hexadecimal (Base 16)</option>
-                        <option value="8">Octal (Base 8)</option>
+                        <option value="10" selected data-i18n="number_converter_decimal">Decimal (Base 10)</option>
+                        <option value="2" data-i18n="number_converter_binary">Binary (Base 2)</option>
+                        <option value="16" data-i18n="number_converter_hex">Hexadecimal (Base 16)</option>
+                        <option value="8" data-i18n="number_converter_octal">Octal (Base 8)</option>
                       </select>
                     </div>
 
                     <div class="mb-3">
-                      <label for="input-number" class="form-label fw-semibold">Number to Convert
-                        <div class="form-text" id="input-help">Enter a decimal number (e.g., 255)</div>
+                      <label for="input-number" class="form-label fw-semibold">
+                        <span data-i18n="number_converter_number">Number to Convert</span>
+                        <div class="form-text" id="input-help" data-i18n="number_converter_number_help">Enter a decimal number (e.g., 255)</div>
                       </label>
                       <div class="position-relative">
                         <input 
@@ -277,7 +278,7 @@ <h5 class="mb-3">
                         />
                         <div class="position-absolute top-50 end-0 translate-middle-y me-3 d-none" id="converting-indicator">
                           <div class="spinner-border spinner-border-sm text-primary" role="status">
-                            <span class="visually-hidden">Converting...</span>
+                            <span class="visually-hidden" data-i18n="number_converter_converting">Converting...</span>
                           </div>
                         </div>
                       </div>
@@ -287,34 +288,34 @@ <h5 class="mb-3">
                   <!-- Output Section -->
                   <div class="col-md-6">
                     <h5 class="text-primary mb-3">
-                      <i class="fas fa-list me-2"></i>Results
+                      <i class="fas fa-list me-2"></i><span data-i18n="number_converter_results">Results</span>
                     </h5>
                     
                     <div id="conversion-results" class="d-none">
                       <div class="result-item mb-3">
                         <label class="form-label fw-semibold">
-                          <i class="fas fa-circle me-2 text-primary"></i>Decimal (Base 10)
+                          <i class="fas fa-circle me-2 text-primary"></i><span data-i18n="number_converter_decimal">Decimal (Base 10)</span>
                         </label>
                         <input type="text" class="form-control" id="result-decimal" readonly />
                       </div>
 
                       <div class="result-item mb-3">
                         <label class="form-label fw-semibold">
-                          <i class="fas fa-circle me-2 text-success"></i>Binary (Base 2)
+                          <i class="fas fa-circle me-2 text-success"></i><span data-i18n="number_converter_binary">Binary (Base 2)</span>
                         </label>
                         <input type="text" class="form-control" id="result-binary" readonly />
                       </div>
 
                       <div class="result-item mb-3">
                         <label class="form-label fw-semibold">
-                          <i class="fas fa-circle me-2 text-info"></i>Hexadecimal (Base 16)
+                          <i class="fas fa-circle me-2 text-info"></i><span data-i18n="number_converter_hex">Hexadecimal (Base 16)</span>
                         </label>
                         <input type="text" class="form-control" id="result-hex" readonly />
                       </div>
 
                       <div class="result-item mb-3">
                         <label class="form-label fw-semibold">
-                          <i class="fas fa-circle me-2 text-danger"></i>Octal (Base 8)
+                          <i class="fas fa-circle me-2 text-danger"></i><span data-i18n="number_converter_octal">Octal (Base 8)</span>
                         </label>
                         <input type="text" class="form-control" id="result-octal" readonly />
                       </div>
@@ -322,7 +323,7 @@ <h5 class="text-primary mb-3">
 
                     <div id="conversion-error" class="alert alert-danger d-none">
                       <h6 class="alert-heading">
-                        <i class="fas fa-exclamation-triangle me-2"></i>Error
+                        <i class="fas fa-exclamation-triangle me-2"></i><span data-i18n="number_converter_error">Error</span>
                       </h6>
                       <p class="mb-0" id="error-message">Invalid input</p>
                     </div>
@@ -333,7 +334,7 @@ <h6 class="alert-heading">
                 <div class="row mt-4">
                   <div class="col-12">
                     <h5 class="text-warning mb-3">
-                      <i class="fas fa-lightbulb me-2"></i>Quick Examples
+                      <i class="fas fa-lightbulb me-2"></i><span data-i18n="number_converter_examples">Quick Examples</span>
                     </h5>
                     <div class="d-flex flex-wrap gap-2">
                       <button class="btn btn-outline-secondary btn-sm example-btn" data-value="255" data-base="10">
@@ -365,18 +366,18 @@ <h5 class="text-warning mb-3">
           <div class="col-md-6">
             <h5 class="mb-1 text-white">
               <i class="fas fa-network-wired me-2"></i>
-              Network Tools Suite
+              <span data-i18n="footer_title">Network Tools Suite</span>
             </h5>
-            <p class="mb-0 text-light opacity-75">Professional network calculation tools for efficient IP management</p>
+            <p class="mb-0 text-light opacity-75" data-i18n="footer_description">Professional network calculation tools for efficient IP management</p>
             <p class="mb-0 text-light opacity-75">
-              &copy; 2025 Network Tools Suite. Built with
+              &copy; 2025 Network Tools Suite. <span data-i18n="footer_copyright">Built with</span>
               <i class="fas fa-heart text-danger mx-1"></i>
-              for AI and Glasspham.
+              <span data-i18n="footer_for">for AI and Glasspham.</span>
             </p>
           </div>
           <div class="col-md-6 text-md-end">
             <div class="d-flex justify-content-md-end justify-content-start align-items-center">
-              <span class="me-3 text-white">Developed by</span>
+              <span class="me-3 text-white" data-i18n="footer_developed_by">Developed by</span>
               <a href="https://github.com/Glasspham" target="_blank" class="btn btn-outline-light btn-sm">
                 <i class="fab fa-github me-2"></i>
                 Glasspham
@@ -385,7 +386,7 @@ <h5 class="mb-1 text-white">
             <div class="mt-2 small">
               <a href="https://github.com/Glasspham/Support-Network" target="_blank" class="text-light text-decoration-none opacity-75">
                 <i class="fas fa-code me-1"></i>
-                Open source networking tools
+                <span data-i18n="footer_open_source">Open source networking tools</span>
               </a>
             </div>
           </div>
@@ -396,6 +397,7 @@ <h5 class="mb-1 text-white">
 
     <!-- Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script type="module" src="js/i18n.js"></script>
     <script type="module" src="js/uiHandler.js"></script>
     <script type="module" src="js/theoryLoader.js"></script>
   </body>
diff --git a/js/i18n.js b/js/i18n.js
new file mode 100644
index 0000000..8523f90
--- /dev/null
+++ b/js/i18n.js
@@ -0,0 +1,484 @@
+/**
+ * Internationalization (i18n) Module
+ * Supports English and Vietnamese languages
+ */
+
+export const translations = {
+  en: {
+    // Navigation
+    nav_title: "Network Tools Suite",
+    nav_vlsm: "Subnetting (VLSM)",
+    nav_ip_checker: "IP Checker",
+    nav_ip_aggregator: "IP Summary",
+    nav_number_converter: "Number Converter",
+    nav_theory: "Theory",
+    
+    // VLSM Tool
+    vlsm_title: "VLSM Subnetting",
+    vlsm_description: "Calculate Variable Length Subnet Masks for efficient IP allocation",
+    vlsm_base_network: "Base Network (CIDR)",
+    vlsm_base_network_help: "Enter the base network in CIDR notation",
+    vlsm_strategy: "Subnet Allocation Strategy",
+    vlsm_strategy_help: "Choose how to allocate subnets during subdivision",
+    vlsm_strategy_first: "Take the first subnet to assign - Traditional Method",
+    vlsm_strategy_last: "Take the last subnet to assign - Alternative Method",
+    vlsm_host_requirements: "Host Requirements per Subnet",
+    vlsm_network: "Network",
+    vlsm_add_subnet: "Add Another Subnet",
+    vlsm_calculate: "Calculate",
+    vlsm_results: "Subnetting Results",
+    vlsm_table_view: "Table View",
+    vlsm_detailed_view: "Detailed Analysis",
+    vlsm_ip_network: "IP Network",
+    vlsm_first_ip: "First IP",
+    vlsm_last_ip: "Last IP",
+    vlsm_broadcast: "Broadcast",
+    vlsm_subnet_mask: "Subnet Mask",
+    vlsm_wildcard_mask: "Wildcard Mask",
+    vlsm_usable_hosts: "Usable Hosts",
+    
+    // IP Checker Tool
+    ip_checker_title: "IP Checker",
+    ip_checker_description: "Check if an IP address is assignable within a subnet",
+    ip_checker_input: "IP Address with CIDR",
+    ip_checker_input_help: "Enter the IP address with CIDR notation (e.g., 192.168.10.50/24)",
+    ip_checker_check: "Check",
+    ip_checker_status: "IP Status",
+    ip_checker_assignable: "Assignable",
+    ip_checker_not_assignable: "Not Assignable",
+    ip_checker_ip_info: "IP Information",
+    ip_checker_subnet_details: "Subnet Details",
+    ip_checker_ip_address: "IP Address",
+    ip_checker_subnet: "Subnet",
+    ip_checker_network_address: "Network Address",
+    ip_checker_broadcast_address: "Broadcast Address",
+    ip_checker_usable_range: "Usable Range",
+    
+    // IP Aggregator Tool
+    ip_aggregator_title: "IP Summary Tool",
+    ip_aggregator_description: "Find the common supernet for multiple IP addresses",
+    ip_aggregator_input: "IP Addresses (CIDR Notation)",
+    ip_aggregator_input_help: "Enter each IP address with CIDR notation on a separate line (e.g., 192.168.10.0/28)",
+    ip_aggregator_find: "Find",
+    ip_aggregator_result: "Aggregation Result",
+    ip_aggregator_aggregated_network: "Aggregated Network",
+    ip_aggregator_common_prefix: "Common Prefix",
+    ip_aggregator_efficiency: "Efficiency Analysis",
+    ip_aggregator_original_networks: "Original Networks",
+    ip_aggregator_original_total_hosts: "Original Total Hosts",
+    ip_aggregator_efficiency_label: "Efficiency",
+    ip_aggregator_wasted_addresses: "Wasted Addresses",
+    ip_aggregator_input_networks: "Input Networks Analysis",
+    ip_aggregator_original_input: "Original Input",
+    ip_aggregator_network_address: "Network Address",
+    ip_aggregator_binary: "Binary Representation",
+    ip_aggregator_common_prefix_label: "Common Prefix",
+    
+    // Number Converter Tool
+    number_converter_title: "Number Base Converter",
+    number_converter_description: "Convert numbers between Binary, Decimal, Hexadecimal, and Octal",
+    number_converter_input: "Input",
+    number_converter_from_base: "From Base",
+    number_converter_decimal: "Decimal (Base 10)",
+    number_converter_binary: "Binary (Base 2)",
+    number_converter_hex: "Hexadecimal (Base 16)",
+    number_converter_octal: "Octal (Base 8)",
+    number_converter_number: "Number to Convert",
+    number_converter_number_help: "Enter a decimal number (e.g., 255)",
+    number_converter_results: "Results",
+    number_converter_error: "Error",
+    number_converter_examples: "Quick Examples",
+    number_converter_converting: "Converting...",
+    
+    // Footer
+    footer_title: "Network Tools Suite",
+    footer_description: "Professional network calculation tools for efficient IP management",
+    footer_copyright: "Built with",
+    footer_for: "for AI and Glasspham.",
+    footer_developed_by: "Developed by",
+    footer_open_source: "Open source networking tools",
+    
+    // Common
+    calculating: "Calculating...",
+    checking: "Checking...",
+    aggregating: "Aggregating...",
+    error: "Error",
+    hosts: "hosts",
+    remove: "Remove",
+    
+    // VLSM Detailed Analysis
+    vlsm_problem: "VLSM Problem",
+    vlsm_using_network: "Using network",
+    vlsm_design_vlsm: "design VLSM for the following networks",
+    vlsm_net: "Net",
+    vlsm_find_addresses: "Find the first address, last address and broadcast address for each subnet?",
+    vlsm_solution: "Solution",
+    vlsm_borrowed_bits_note: "Let n be the number of additional borrowed bits from parent network, m be the number of remaining host bits.",
+    vlsm_calculation: "Calculation",
+    vlsm_find_m: "Find m",
+    vlsm_borrowed_bits: "Borrowed bits",
+    vlsm_block_size: "Block Size",
+    vlsm_number_subnets: "Number of Subnets",
+    vlsm_direct_assignment: "Direct assignment (no subdivision needed)",
+    vlsm_take_and_divide: "Take",
+    vlsm_and_divide_into: "and divide into",
+    vlsm_subnets: "subnets",
+    vlsm_assigned_to: "assigned to",
+    vlsm_first_ip_label: "First IP",
+    vlsm_last_ip_label: "Last IP",
+    vlsm_broadcast_label: "Broadcast",
+    vlsm_subnet_mask_label: "Subnet Mask",
+    vlsm_wildcard_mask_label: "Wildcard Mask",
+    vlsm_strategy_first_subnet: "using First Subnet strategy",
+    vlsm_strategy_last_subnet: "using Last Subnet strategy",
+    vlsm_disabled_analysis: "Detailed Analysis Disabled",
+    vlsm_disabled_reason: "Detailed analysis is disabled for networks larger than /16 to prevent performance issues.",
+    vlsm_suggestion: "Suggestion",
+    vlsm_suggestion_text: "Use a smaller base network (CIDR ≥ /20) or reduce the number of required hosts per subnet to enable detailed analysis.",
+    
+    // Error Messages
+    error_invalid_base_network: "Invalid base network format. Please use CIDR notation (e.g., 192.168.1.0/24)",
+    error_invalid_cidr: "Invalid CIDR value. CIDR must be a number between 1 and 32.",
+    error_no_host_requirements: "Please specify at least one host requirement",
+    error_host_too_large: "Host requirement too large",
+    error_max_hosts: "Maximum supported is 16,777,214 hosts.",
+    error_ip_cidr_required: "Please enter an IP address with CIDR notation",
+    error_ip_cidr_format: "Please enter IP address in CIDR format (e.g., 192.168.10.50/24)",
+    error_invalid_ip: "Invalid IP address format",
+    error_invalid_cidr_range: "Invalid CIDR notation. Must be between 1 and 32",
+    error_at_least_one_ip: "Please enter at least one IP address",
+    error_at_least_one_valid_ip: "Please enter at least one valid IP address",
+    error_invalid_number: "Invalid input",
+    
+    // Validation Warnings
+    warning_large_network: "⚠️ Networks larger than (smaller than /8) will take quite a while to process for performance reasons.",
+    warning_cidr_range: "⚠️ CIDR must be between 1 and 32. Please enter a valid CIDR notation.",
+    warning_large_network_limited: "⚠️ Large networks (smaller than /16) will have disabled detailed analysis for performance reasons.",
+    warning_large_network_may_limit: "⚠️ Large networks (smaller than /20) may have limited detailed analysis.",
+  },
+  
+  vi: {
+    // Navigation
+    nav_title: "Bộ Công Cụ Mạng",
+    nav_vlsm: "Chia Mạng Con (VLSM)",
+    nav_ip_checker: "Kiểm Tra IP",
+    nav_ip_aggregator: "Tổng Hợp IP",
+    nav_number_converter: "Chuyển Đổi Số",
+    nav_theory: "Lý Thuyết",
+    
+    // VLSM Tool
+    vlsm_title: "Chia Mạng Con VLSM",
+    vlsm_description: "Tính toán Subnet Mask có độ dài thay đổi để phân bổ IP hiệu quả",
+    vlsm_base_network: "Mạng Gốc (CIDR)",
+    vlsm_base_network_help: "Nhập mạng gốc theo ký hiệu CIDR",
+    vlsm_strategy: "Chiến Lược Phân Bổ Mạng Con",
+    vlsm_strategy_help: "Chọn cách phân bổ mạng con trong quá trình chia",
+    vlsm_strategy_first: "Lấy mạng con đầu tiên để gán - Phương pháp Truyền thống",
+    vlsm_strategy_last: "Lấy mạng con cuối cùng để gán - Phương pháp Thay thế",
+    vlsm_host_requirements: "Yêu Cầu Số Host Cho Mỗi Mạng Con",
+    vlsm_network: "Mạng",
+    vlsm_add_subnet: "Thêm Mạng Con",
+    vlsm_calculate: "Tính Toán",
+    vlsm_results: "Kết Quả Chia Mạng Con",
+    vlsm_table_view: "Xem Bảng",
+    vlsm_detailed_view: "Phân Tích Chi Tiết",
+    vlsm_ip_network: "Mạng IP",
+    vlsm_first_ip: "IP Đầu",
+    vlsm_last_ip: "IP Cuối",
+    vlsm_broadcast: "Broadcast",
+    vlsm_subnet_mask: "Subnet Mask",
+    vlsm_wildcard_mask: "Wildcard Mask",
+    vlsm_usable_hosts: "Số Host Khả Dụng",
+    
+    // IP Checker Tool
+    ip_checker_title: "Kiểm Tra IP",
+    ip_checker_description: "Kiểm tra xem địa chỉ IP có thể gán được trong mạng con hay không",
+    ip_checker_input: "Địa Chỉ IP với CIDR",
+    ip_checker_input_help: "Nhập địa chỉ IP với ký hiệu CIDR (ví dụ: 192.168.10.50/24)",
+    ip_checker_check: "Kiểm Tra",
+    ip_checker_status: "Trạng Thái IP",
+    ip_checker_assignable: "Có Thể Gán",
+    ip_checker_not_assignable: "Không Thể Gán",
+    ip_checker_ip_info: "Thông Tin IP",
+    ip_checker_subnet_details: "Chi Tiết Mạng Con",
+    ip_checker_ip_address: "Địa Chỉ IP",
+    ip_checker_subnet: "Mạng Con",
+    ip_checker_network_address: "Địa Chỉ Mạng",
+    ip_checker_broadcast_address: "Địa Chỉ Broadcast",
+    ip_checker_usable_range: "Dải IP Khả Dụng",
+    
+    // IP Aggregator Tool
+    ip_aggregator_title: "Công Cụ Tổng Hợp IP",
+    ip_aggregator_description: "Tìm mạng cha chung cho nhiều địa chỉ IP",
+    ip_aggregator_input: "Địa Chỉ IP (Ký Hiệu CIDR)",
+    ip_aggregator_input_help: "Nhập mỗi địa chỉ IP với ký hiệu CIDR trên một dòng riêng (ví dụ: 192.168.10.0/28)",
+    ip_aggregator_find: "Tìm",
+    ip_aggregator_result: "Kết Quả Tổng Hợp",
+    ip_aggregator_aggregated_network: "Mạng Tổng Hợp",
+    ip_aggregator_common_prefix: "Tiền Tố Chung",
+    ip_aggregator_efficiency: "Phân Tích Hiệu Quả",
+    ip_aggregator_original_networks: "Số Mạng Gốc",
+    ip_aggregator_original_total_hosts: "Tổng Số Host Gốc",
+    ip_aggregator_efficiency_label: "Hiệu Quả",
+    ip_aggregator_wasted_addresses: "Địa Chỉ Lãng Phí",
+    ip_aggregator_input_networks: "Phân Tích Các Mạng Đầu Vào",
+    ip_aggregator_original_input: "Đầu Vào Gốc",
+    ip_aggregator_network_address: "Địa Chỉ Mạng",
+    ip_aggregator_binary: "Biểu Diễn Nhị Phân",
+    ip_aggregator_common_prefix_label: "Tiền Tố Chung",
+    
+    // Number Converter Tool
+    number_converter_title: "Chuyển Đổi Hệ Cơ Số",
+    number_converter_description: "Chuyển đổi số giữa Nhị phân, Thập phân, Thập lục phân và Bát phân",
+    number_converter_input: "Đầu Vào",
+    number_converter_from_base: "Từ Hệ Cơ Số",
+    number_converter_decimal: "Thập phân (Cơ số 10)",
+    number_converter_binary: "Nhị phân (Cơ số 2)",
+    number_converter_hex: "Thập lục phân (Cơ số 16)",
+    number_converter_octal: "Bát phân (Cơ số 8)",
+    number_converter_number: "Số Cần Chuyển Đổi",
+    number_converter_number_help: "Nhập một số thập phân (ví dụ: 255)",
+    number_converter_results: "Kết Quả",
+    number_converter_error: "Lỗi",
+    number_converter_examples: "Ví Dụ Nhanh",
+    number_converter_converting: "Đang chuyển đổi...",
+    
+    // Footer
+    footer_title: "Bộ Công Cụ Mạng",
+    footer_description: "Công cụ tính toán mạng chuyên nghiệp cho quản lý IP hiệu quả",
+    footer_copyright: "Xây dựng với",
+    footer_for: "cho AI và Glasspham.",
+    footer_developed_by: "Phát triển bởi",
+    footer_open_source: "Công cụ mạng mã nguồn mở",
+    
+    // Common
+    calculating: "Đang tính toán...",
+    checking: "Đang kiểm tra...",
+    aggregating: "Đang tổng hợp...",
+    error: "Lỗi",
+    hosts: "host",
+    remove: "Xóa",
+    
+    // VLSM Detailed Analysis
+    vlsm_problem: "Bài Toán VLSM",
+    vlsm_using_network: "Sử dụng mạng",
+    vlsm_design_vlsm: "thiết kế VLSM cho các mạng sau",
+    vlsm_net: "Mạng",
+    vlsm_find_addresses: "Tìm địa chỉ đầu tiên, địa chỉ cuối cùng và địa chỉ broadcast cho mỗi mạng con?",
+    vlsm_solution: "Lời Giải",
+    vlsm_borrowed_bits_note: "Gọi n là số bit mượn thêm từ mạng cha, m là số bit host còn lại.",
+    vlsm_calculation: "Tính Toán",
+    vlsm_find_m: "Tìm m",
+    vlsm_borrowed_bits: "Số bit mượn",
+    vlsm_block_size: "Kích Thước Khối",
+    vlsm_number_subnets: "Số Mạng Con",
+    vlsm_direct_assignment: "Gán trực tiếp (không cần chia nhỏ)",
+    vlsm_take_and_divide: "Lấy",
+    vlsm_and_divide_into: "và chia thành",
+    vlsm_subnets: "mạng con",
+    vlsm_assigned_to: "gán cho",
+    vlsm_first_ip_label: "IP Đầu",
+    vlsm_last_ip_label: "IP Cuối",
+    vlsm_broadcast_label: "Broadcast",
+    vlsm_subnet_mask_label: "Subnet Mask",
+    vlsm_wildcard_mask_label: "Wildcard Mask",
+    vlsm_strategy_first_subnet: "sử dụng chiến lược Mạng con Đầu tiên",
+    vlsm_strategy_last_subnet: "sử dụng chiến lược Mạng con Cuối cùng",
+    vlsm_disabled_analysis: "Phân Tích Chi Tiết Bị Tắt",
+    vlsm_disabled_reason: "Phân tích chi tiết bị tắt đối với các mạng lớn hơn /16 để tránh vấn đề về hiệu suất.",
+    vlsm_suggestion: "Gợi Ý",
+    vlsm_suggestion_text: "Sử dụng mạng gốc nhỏ hơn (CIDR ≥ /20) hoặc giảm số lượng host yêu cầu cho mỗi mạng con để bật phân tích chi tiết.",
+    
+    // Error Messages
+    error_invalid_base_network: "Định dạng mạng gốc không hợp lệ. Vui lòng sử dụng ký hiệu CIDR (ví dụ: 192.168.1.0/24)",
+    error_invalid_cidr: "Giá trị CIDR không hợp lệ. CIDR phải là một số từ 1 đến 32.",
+    error_no_host_requirements: "Vui lòng chỉ định ít nhất một yêu cầu host",
+    error_host_too_large: "Yêu cầu host quá lớn",
+    error_max_hosts: "Tối đa hỗ trợ là 16.777.214 host.",
+    error_ip_cidr_required: "Vui lòng nhập địa chỉ IP với ký hiệu CIDR",
+    error_ip_cidr_format: "Vui lòng nhập địa chỉ IP theo định dạng CIDR (ví dụ: 192.168.10.50/24)",
+    error_invalid_ip: "Định dạng địa chỉ IP không hợp lệ",
+    error_invalid_cidr_range: "Ký hiệu CIDR không hợp lệ. Phải từ 1 đến 32",
+    error_at_least_one_ip: "Vui lòng nhập ít nhất một địa chỉ IP",
+    error_at_least_one_valid_ip: "Vui lòng nhập ít nhất một địa chỉ IP hợp lệ",
+    error_invalid_number: "Đầu vào không hợp lệ",
+    
+    // Validation Warnings
+    warning_large_network: "⚠️ Các mạng lớn hơn (nhỏ hơn /8) sẽ mất khá nhiều thời gian để xử lý vì lý do hiệu suất.",
+    warning_cidr_range: "⚠️ CIDR phải từ 1 đến 32. Vui lòng nhập ký hiệu CIDR hợp lệ.",
+    warning_large_network_limited: "⚠️ Các mạng lớn (nhỏ hơn /16) sẽ bị tắt phân tích chi tiết vì lý do hiệu suất.",
+    warning_large_network_may_limit: "⚠️ Các mạng lớn (nhỏ hơn /20) có thể có phân tích chi tiết bị giới hạn.",
+  }
+};
+
+let currentLanguage = localStorage.getItem('language') || 'en';
+let currentTheme = localStorage.getItem('theme') || 'light';
+
+/**
+ * Get translation for a key
+ * @param {string} key - Translation key
+ * @returns {string} - Translated text
+ */
+export function t(key) {
+  return translations[currentLanguage][key] || key;
+}
+
+/**
+ * Get current language
+ * @returns {string} - Current language code
+ */
+export function getCurrentLanguage() {
+  return currentLanguage;
+}
+
+/**
+ * Set current language
+ * @param {string} lang - Language code ('en' or 'vi')
+ */
+export function setLanguage(lang) {
+  if (translations[lang]) {
+    currentLanguage = lang;
+    localStorage.setItem('language', lang);
+    updatePageTranslations();
+  }
+}
+
+/**
+ * Update all translations on the page
+ */
+export function updatePageTranslations() {
+  // Update all elements with data-i18n attribute
+  document.querySelectorAll('[data-i18n]').forEach(element => {
+    const key = element.getAttribute('data-i18n');
+    const translation = t(key);
+    
+    if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+      element.placeholder = translation;
+    } else {
+      // Preserve HTML structure while updating text
+      const icon = element.querySelector('i');
+      const badge = element.querySelector('.badge');
+      
+      if (icon && badge) {
+        element.innerHTML = '';
+        element.appendChild(icon);
+        element.appendChild(document.createTextNode(' ' + translation + ' '));
+        element.appendChild(badge);
+      } else if (icon) {
+        element.innerHTML = '';
+        element.appendChild(icon);
+        element.appendChild(document.createTextNode(' ' + translation));
+      } else if (badge) {
+        element.textContent = translation + ' ';
+        element.appendChild(badge);
+      } else {
+        element.textContent = translation;
+      }
+    }
+  });
+  
+  // Update elements with data-i18n-title attribute
+  document.querySelectorAll('[data-i18n-title]').forEach(element => {
+    const key = element.getAttribute('data-i18n-title');
+    element.title = t(key);
+  });
+  
+  // Update elements with data-i18n-html attribute (for form-text and help text)
+  document.querySelectorAll('[data-i18n-html]').forEach(element => {
+    const key = element.getAttribute('data-i18n-html');
+    element.innerHTML = t(key);
+  });
+  
+  // Dispatch event for custom handlers
+  document.dispatchEvent(new CustomEvent('languageChanged', { detail: { language: currentLanguage } }));
+}
+
+/**
+ * Get current theme
+ * @returns {string} - Current theme ('light' or 'dark')
+ */
+export function getCurrentTheme() {
+  return currentTheme;
+}
+
+/**
+ * Set current theme
+ * @param {string} theme - Theme name ('light' or 'dark')
+ */
+export function setTheme(theme) {
+  currentTheme = theme;
+  localStorage.setItem('theme', theme);
+  applyTheme(theme);
+  
+  // Dispatch event for custom handlers
+  document.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: currentTheme } }));
+}
+
+/**
+ * Apply theme to document
+ * @param {string} theme - Theme name ('light' or 'dark')
+ */
+function applyTheme(theme) {
+  const body = document.body;
+  
+  if (theme === 'dark') {
+    body.classList.add('dark-theme');
+    body.classList.remove('light-theme');
+  } else {
+    body.classList.add('light-theme');
+    body.classList.remove('dark-theme');
+  }
+}
+
+/**
+ * Initialize i18n system
+ */
+export function initI18n() {
+  // Set initial language and theme
+  updatePageTranslations();
+  applyTheme(currentTheme);
+  
+  // Create language and theme toggle buttons
+  const navbarNav = document.querySelector('.navbar-nav');
+  if (navbarNav) {
+    // Language toggle button
+    const langItem = document.createElement('li');
+    langItem.className = 'nav-item ms-2';
+    langItem.innerHTML = `
+      <button class="btn btn-outline-light btn-sm" id="language-toggle">
+        <i class="fas fa-globe me-1"></i>
+        <span id="current-lang-text">${currentLanguage.toUpperCase()}</span>
+      </button>
+    `;
+    navbarNav.appendChild(langItem);
+    
+    // Theme toggle button
+    const themeItem = document.createElement('li');
+    themeItem.className = 'nav-item ms-2';
+    const themeIcon = currentTheme === 'dark' ? 'fa-sun' : 'fa-moon';
+    themeItem.innerHTML = `
+      <button class="btn btn-outline-light btn-sm" id="theme-toggle" title="Toggle theme">
+        <i class="fas ${themeIcon}" id="theme-icon"></i>
+      </button>
+    `;
+    navbarNav.appendChild(themeItem);
+    
+    // Add language click handler
+    document.getElementById('language-toggle').addEventListener('click', () => {
+      const newLang = currentLanguage === 'en' ? 'vi' : 'en';
+      setLanguage(newLang);
+      document.getElementById('current-lang-text').textContent = newLang.toUpperCase();
+    });
+    
+    // Add theme click handler
+    document.getElementById('theme-toggle').addEventListener('click', () => {
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+      setTheme(newTheme);
+      
+      // Update icon
+      const themeIcon = document.getElementById('theme-icon');
+      themeIcon.className = newTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+    });
+  }
+}
+
diff --git a/js/theoryLoader.js b/js/theoryLoader.js
index 67d0898..58c8cf9 100644
--- a/js/theoryLoader.js
+++ b/js/theoryLoader.js
@@ -1,7 +1,24 @@
+import { getCurrentLanguage, t } from "./i18n.js";
+
 document.addEventListener("DOMContentLoaded", function () {
   const theoryToolSection = document.getElementById("theory-tool");
+  
+  // Listen for language changes
+  document.addEventListener('languageChanged', () => {
+    loadTheoryContent();
+  });
+  
+  loadTheoryContent();
+});
+
+function loadTheoryContent() {
+  const theoryToolSection = document.getElementById("theory-tool");
+  const currentLang = getCurrentLanguage();
 
   if (theoryToolSection) {
+    const prefixTableTitle = currentLang === 'vi' ? 'Bảng thông tin Prefix-length' : 'Prefix-length Information Table';
+    const ipTableTitle = currentLang === 'vi' ? 'Bảng phân chia địa chỉ IP' : 'IP Address Division Table';
+    
     theoryToolSection.innerHTML = `
     <div class="row">
       <div class="col-12">
@@ -10,14 +27,14 @@ document.addEventListener("DOMContentLoaded", function () {
             <section id="tables" class="mt-4">
               <!-- Bảng thông tin Prefix-length -->
               <div class="table-responsive mb-4">
-                <h3>Bảng thông tin Prefix-length</h3>
+                <h3>${prefixTableTitle}</h3>
                 <div id="prefix-grid-container" class="prefix-grid">
                   <!-- Grid content will be generated by JavaScript -->
                 </div>
               </div>
               <!-- Bảng phân chia địa chỉ IP -->
               <div class="table-responsive mb-4">
-                <h3>Bảng phân chia địa chỉ IP</h3>
+                <h3>${ipTableTitle}</h3>
                 <div id="ip-grid-container" class="ip-grid">
                   <!-- IP grid content will be generated by JavaScript -->
                 </div>
@@ -31,7 +48,13 @@ document.addEventListener("DOMContentLoaded", function () {
 
     const prefixData = {
       headers: ["Prefix-length", "/24", "/25", "/26", "/27", "/28", "/29", "/30"],
-      rows: [
+      rows: currentLang === 'vi' ? [
+        { label: "Số lượng IP", values: ["256 - 2", "128 - 2", "64 - 2", "32 - 2", "16 - 2", "8 - 2", "4 - 2"] },
+        { label: "Số mạng con", values: ["1", "2", "4", "8", "16", "32", "64"] },
+        { label: "Số host", values: ["127 > 254", "63 > 126", "31 > 62", "15 > 30", "7 > 14", "3 > 6", "1 > 2"], class: "text-danger" },
+        { label: "Subnet mask", values: ["255.255.255.0", "255.255.255.128", "255.255.255.192", "255.255.255.224", "255.255.255.240", "255.255.255.248", "255.255.255.252"], class: "text-primary" },
+        { label: "Wildcard mask", values: ["0.0.0.255", "0.0.0.127", "0.0.0.63", "0.0.0.31", "0.0.0.15", "0.0.0.7", "0.0.0.3"], class: "text-success" },
+      ] : [
         { label: "Number of IP", values: ["256 - 2", "128 - 2", "64 - 2", "32 - 2", "16 - 2", "8 - 2", "4 - 2"] },
         { label: "Number of Subnet", values: ["1", "2", "4", "8", "16", "32", "64"] },
         { label: "Number of Host", values: ["127 > 254", "63 > 126", "31 > 62", "15 > 30", "7 > 14", "3 > 6", "1 > 2"], class: "text-danger" },
@@ -97,4 +120,4 @@ document.addEventListener("DOMContentLoaded", function () {
       ipGridContainer.innerHTML = ipGridHTML;
     }
   }
-});
+}
diff --git a/js/uiHandler.js b/js/uiHandler.js
index 9e2e94e..c46f154 100644
--- a/js/uiHandler.js
+++ b/js/uiHandler.js
@@ -6,6 +6,7 @@ import { calculateVLSM, validateCIDR, generateDetailedAnalysis } from "./vlsmLog
 import { checkIPAssignability, validateIP } from "./ipChecker.js";
 import { aggregateIPs, analyzeAggregation } from "./ipAggregator.js";
 import { convertToAllBases, getInputHelp, validateNumber } from "./numberConverter.js";
+import { initI18n, t, updatePageTranslations } from "./i18n.js";
 
 class UIHandler {
   constructor() {
@@ -15,6 +16,9 @@ class UIHandler {
   }
 
   init() {
+    // Initialize i18n first
+    initI18n();
+    
     this.setupNavigation();
     this.setupVLSMForm();
     this.setupIPCheckerForm();
@@ -23,6 +27,11 @@ class UIHandler {
     this.setupViewModeToggle();
     this.setupNumberConverter();
     this.switchTool(this.currentTool);
+    
+    // Listen for language changes
+    document.addEventListener('languageChanged', () => {
+      this.onLanguageChanged();
+    });
   }
 
   setupNavigation() {
@@ -111,10 +120,10 @@ class UIHandler {
     const div = document.createElement("div");
     div.className = "col-md-3 mb-3";
     div.innerHTML = `
-            <label class="form-label">Network ${this.subnetCount}</label>
+            <label class="form-label"><span data-i18n="vlsm_network">${t('vlsm_network')}</span> ${this.subnetCount}</label>
             <div class="input-group">
                 <input type="number" class="form-control subnet-hosts" placeholder="${this.subnetCount}" min="1" max="65534">
-                <button type="button" class="btn btn-outline-danger btn-sm remove-subnet" title="Remove">
+                <button type="button" class="btn btn-outline-danger btn-sm remove-subnet" title="${t('remove')}">
                     <i class="fas fa-times"></i>
                 </button>
             </div>
@@ -127,6 +136,18 @@ class UIHandler {
       div.remove();
     });
   }
+  
+  onLanguageChanged() {
+    // Update select options
+    const selectOptions = document.querySelectorAll('select option[data-i18n]');
+    selectOptions.forEach(option => {
+      const key = option.getAttribute('data-i18n');
+      option.textContent = t(key);
+    });
+    
+    // Re-render any visible results with new language
+    // This ensures dynamically generated content is updated
+  }
 
   // Performance check for detailed analysis
   shouldGenerateDetailedAnalysis(baseNetwork, hostRequirements) {
@@ -185,16 +206,16 @@ class UIHandler {
         let feedbackClass = "";
 
         if (baseCIDRNum < 1 || baseCIDRNum > 32) {
-          feedbackMessage = "⚠️ CIDR must be between 1 and 32. Please enter a valid CIDR notation.";
+          feedbackMessage = t('warning_cidr_range');
           feedbackClass = "is-invalid";
         } else if (baseCIDRNum < 8) {
-          feedbackMessage = "⚠️ Networks larger than (smaller than /8) will take quite a while to process for performance reasons.";
+          feedbackMessage = t('warning_large_network');
           feedbackClass = "is-invalid";
         } else if (baseCIDRNum < 16) {
-          feedbackMessage = "⚠️ Large networks (smaller than /16) will have disabled detailed analysis for performance reasons.";
+          feedbackMessage = t('warning_large_network_limited');
           feedbackClass = "is-warning";
         } else if (baseCIDRNum < 20) {
-          feedbackMessage = "⚠️ Large networks (smaller than /20) may have limited detailed analysis.";
+          feedbackMessage = t('warning_large_network_may_limit');
           feedbackClass = "is-warning";
         }
 
@@ -231,13 +252,13 @@ class UIHandler {
       let originalText = "";
       if (submitBtn) {
         originalText = submitBtn.innerHTML;
-        submitBtn.innerHTML = '<span class="loading"></span> Calculating...';
+        submitBtn.innerHTML = `<span class="loading"></span> ${t('calculating')}`;
         submitBtn.disabled = true;
       }
 
       // Validate base network
       if (!validateCIDR(baseNetwork)) {
-        throw new Error("Invalid base network format. Please use CIDR notation (e.g., 192.168.1.0/24)");
+        throw new Error(t('error_invalid_base_network'));
       }
 
       // Additional validation for CIDR range
@@ -245,7 +266,7 @@ class UIHandler {
       const baseCIDRNum = parseInt(baseCIDR);
 
       if (isNaN(baseCIDRNum) || baseCIDRNum < 1 || baseCIDRNum > 32) {
-        throw new Error("Invalid CIDR value. CIDR must be a number between 1 and 32.");
+        throw new Error(t('error_invalid_cidr'));
       }
 
       // Collect host requirements
@@ -258,14 +279,14 @@ class UIHandler {
       });
 
       if (hostRequirements.length === 0) {
-        throw new Error("Please specify at least one host requirement");
+        throw new Error(t('error_no_host_requirements'));
       }
 
       // Check for host requirements that are too large
       const maxHosts = Math.max(...hostRequirements);
       if (maxHosts > 16777214) {
         // Maximum hosts for /8 network
-        throw new Error(`Host requirement too large: ${maxHosts}. Maximum supported is 16,777,214 hosts.`);
+        throw new Error(`${t('error_host_too_large')}: ${maxHosts}. ${t('error_max_hosts')}`);
       }
 
       // Warn about performance for very large host requirements
@@ -305,13 +326,13 @@ class UIHandler {
     // Recreate the entire results structure to ensure it's clean
     resultsDiv.innerHTML = `
       <div class="d-flex justify-content-between align-items-center mb-3">
-        <h5 class="text-primary mb-0"><i class="fas fa-check-circle me-2"></i>Subnetting Results</h5>
+        <h5 class="text-primary mb-0"><i class="fas fa-check-circle me-2"></i>${t('vlsm_results')}</h5>
         <div class="btn-group" role="group">
           <input type="radio" class="btn-check" name="viewMode" id="table-view" value="table" checked />
-          <label class="btn btn-outline-primary btn-sm" for="table-view"> <i class="fas fa-table me-1"></i>Table View </label>
+          <label class="btn btn-outline-primary btn-sm" for="table-view"> <i class="fas fa-table me-1"></i>${t('vlsm_table_view')} </label>
           <input type="radio" class="btn-check" name="viewMode" id="detailed-view" value="detailed" ${!detailedAnalysisCheck.generate ? "disabled" : ""} />
           <label class="btn btn-outline-primary btn-sm ${!detailedAnalysisCheck.generate ? "disabled" : ""}" for="detailed-view"> 
-            <i class="fas fa-list-alt me-1"></i>Detailed Analysis ${!detailedAnalysisCheck.generate ? "(Disabled)" : ""}
+            <i class="fas fa-list-alt me-1"></i>${t('vlsm_detailed_view')} ${!detailedAnalysisCheck.generate ? "(Disabled)" : ""}
           </label>
         </div>
       </div>
@@ -322,14 +343,14 @@ class UIHandler {
           <table class="table table-hover">
             <thead class="table-primary">
               <tr>
-                <th>Network</th>
-                <th>IP Network</th>
-                <th>First IP</th>
-                <th>Last IP</th>
-                <th>Broadcast</th>
-                <th>Subnet Mask</th>
-                <th>Wildcard Mask</th>
-                <th>Usable Hosts</th>
+                <th>${t('vlsm_network')}</th>
+                <th>${t('vlsm_ip_network')}</th>
+                <th>${t('vlsm_first_ip')}</th>
+                <th>${t('vlsm_last_ip')}</th>
+                <th>${t('vlsm_broadcast')}</th>
+                <th>${t('vlsm_subnet_mask')}</th>
+                <th>${t('vlsm_wildcard_mask')}</th>
+                <th>${t('vlsm_usable_hosts')}</th>
               </tr>
             </thead>
             <tbody id="vlsm-table-body"></tbody>
@@ -353,7 +374,7 @@ class UIHandler {
 
       row.innerHTML = `
                 <td>
-                  <strong class="text-primary">Network ${subnet.networkNumber}</strong>
+                  <strong class="text-primary">${t('vlsm_network')} ${subnet.networkNumber}</strong>
                   <span class="badge bg-info">${subnet.requiredHosts}</span>
                 </td>
                 <td><strong>${subnet.network}</strong></td>
@@ -383,12 +404,12 @@ class UIHandler {
           <div class="alert alert-warning">
             <h6 class="alert-heading">
               <i class="fas fa-exclamation-triangle me-2"></i>
-              Detailed Analysis Disabled
+              ${t('vlsm_disabled_analysis')}
             </h6>
-            <p class="mb-0">${detailedAnalysisCheck.reason}</p>
+            <p class="mb-0">${t('vlsm_disabled_reason')}</p>
             <hr>
             <p class="mb-0 small">
-              <strong>Suggestion:</strong> Use a smaller base network (CIDR ≥ /20) or reduce the number of required hosts per subnet to enable detailed analysis.
+              <strong>${t('vlsm_suggestion')}:</strong> ${t('vlsm_suggestion_text')}
             </p>
           </div>
         `;
@@ -413,30 +434,30 @@ class UIHandler {
       // Show loading state
       const submitBtn = document.querySelector('#ip-checker-form button[type="submit"]');
       const originalText = submitBtn.innerHTML;
-      submitBtn.innerHTML = '<span class="loading"></span> Checking...';
+      submitBtn.innerHTML = `<span class="loading"></span> ${t('checking')}`;
       submitBtn.disabled = true;
 
       // Validate input
       if (!ipCidrInput) {
-        throw new Error("Please enter an IP address with CIDR notation");
+        throw new Error(t('error_ip_cidr_required'));
       }
 
       // Parse IP and CIDR
       const parts = ipCidrInput.split("/");
       if (parts.length !== 2) {
-        throw new Error("Please enter IP address in CIDR format (e.g., 192.168.10.50/24)");
+        throw new Error(t('error_ip_cidr_format'));
       }
 
       const ipAddress = parts[0].trim();
       const cidr = parts[1].trim();
 
       if (!validateIP(ipAddress)) {
-        throw new Error("Invalid IP address format");
+        throw new Error(t('error_invalid_ip'));
       }
 
       const cidrNum = parseInt(cidr);
       if (isNaN(cidrNum) || cidrNum < 1 || cidrNum > 32) {
-        throw new Error("Invalid CIDR notation. Must be between 1 and 32");
+        throw new Error(t('error_invalid_cidr_range'));
       }
 
       // Check IP assignability using CIDR
@@ -469,37 +490,37 @@ class UIHandler {
     const isAssignable = result.isAssignable;
     const alertClass = isAssignable ? "alert-info" : "alert-danger";
     const iconClass = isAssignable ? "fa-check-circle" : "fa-times-circle";
-    const statusText = isAssignable ? "Assignable" : "Not Assignable";
+    const statusText = isAssignable ? t('ip_checker_assignable') : t('ip_checker_not_assignable');
 
     resultsDiv.innerHTML = `
             <div class="alert ${alertClass} fade-in">
                 <h5 class="alert-heading">
                     <i class="fas ${iconClass} me-2"></i>
-                    IP Status: ${statusText}
+                    ${t('ip_checker_status')}: ${statusText}
                 </h5>
                 <p class="mb-3">${result.message}</p>
                 
                 <div class="row">
                     <div class="col-md-6">
                         <div class="result-item ${isAssignable ? "ip-result-success" : "ip-result-error"}">
-                            <h6><i class="fas fa-info-circle me-2"></i>IP Information</h6>
+                            <h6><i class="fas fa-info-circle me-2"></i>${t('ip_checker_ip_info')}</h6>
                             <ul class="list-unstyled mb-0">
-                                <li><strong>IP Address:</strong> ${result.ipAddress}</li>
-                                <li><strong>Subnet:</strong> ${result.networkAddress}/${result.cidr}</li>
-                                <li><strong>Subnet Mask:</strong> ${result.subnetInput.startsWith("/") || !isNaN(result.subnetInput) ? this.cidrToMask(result.cidr) : result.subnetInput}</li>
-                                <li><strong>Wildcard Mask:</strong> ${result.wildcardMask}</li>
+                                <li><strong>${t('ip_checker_ip_address')}:</strong> ${result.ipAddress}</li>
+                                <li><strong>${t('ip_checker_subnet')}:</strong> ${result.networkAddress}/${result.cidr}</li>
+                                <li><strong>${t('vlsm_subnet_mask')}:</strong> ${result.subnetInput.startsWith("/") || !isNaN(result.subnetInput) ? this.cidrToMask(result.cidr) : result.subnetInput}</li>
+                                <li><strong>${t('vlsm_wildcard_mask')}:</strong> ${result.wildcardMask}</li>
                             </ul>
                         </div>
                     </div>
                     
                     <div class="col-md-6">
                         <div class="result-item">
-                            <h6><i class="fas fa-network-wired me-2"></i>Subnet Details</h6>
+                            <h6><i class="fas fa-network-wired me-2"></i>${t('ip_checker_subnet_details')}</h6>
                             <ul class="list-unstyled mb-0">
-                                <li><strong>Network Address:</strong> ${result.networkAddress}</li>
-                                <li><strong>Broadcast Address:</strong> ${result.broadcastAddress}</li>
-                                <li><strong>Usable Range:</strong> ${result.firstUsableIP || "N/A"} - ${result.lastUsableIP || "N/A"}</li>
-                                <li><strong>Usable Hosts:</strong> <span class="badge bg-info">${result.usableHosts}</span></li>
+                                <li><strong>${t('ip_checker_network_address')}:</strong> ${result.networkAddress}</li>
+                                <li><strong>${t('ip_checker_broadcast_address')}:</strong> ${result.broadcastAddress}</li>
+                                <li><strong>${t('ip_checker_usable_range')}:</strong> ${result.firstUsableIP || "N/A"} - ${result.lastUsableIP || "N/A"}</li>
+                                <li><strong>${t('vlsm_usable_hosts')}:</strong> <span class="badge bg-info">${result.usableHosts}</span></li>
                             </ul>
                         </div>
                     </div>
@@ -524,13 +545,13 @@ class UIHandler {
       let originalText = "";
       if (submitBtn) {
         originalText = submitBtn.innerHTML;
-        submitBtn.innerHTML = '<span class="loading"></span> Aggregating...';
+        submitBtn.innerHTML = `<span class="loading"></span> ${t('aggregating')}`;
         submitBtn.disabled = true;
       }
 
       // Parse IP list
       if (!ipListText) {
-        throw new Error("Please enter at least one IP address");
+        throw new Error(t('error_at_least_one_ip'));
       }
 
       const ipList = ipListText
@@ -539,7 +560,7 @@ class UIHandler {
         .filter((line) => line.length > 0);
 
       if (ipList.length === 0) {
-        throw new Error("Please enter at least one valid IP address");
+        throw new Error(t('error_at_least_one_valid_ip'));
       }
 
       // Perform aggregation analysis
@@ -582,31 +603,31 @@ class UIHandler {
             <div class="alert ${efficiencyClass} fade-in">
                 <h5 class="alert-heading">
                     <i class="fas fa-layer-group me-2"></i>
-                    Aggregation Result
+                    ${t('ip_aggregator_result')}
                 </h5>
                 <div class="row mb-3">
                     <div class="col-md-6">
-                        <h6><i class="fas fa-network-wired me-2"></i>Aggregated Network</h6>
+                        <h6><i class="fas fa-network-wired me-2"></i>${t('ip_aggregator_aggregated_network')}</h6>
                         <div class="result-item ip-result-success">
                             <div class="h4 mb-2">${result.aggregatedNetwork}</div>
                             <ul class="list-unstyled mb-0">
-                                <li><strong>Subnet Mask:</strong> ${result.subnetMask}</li>
-                                <li><strong>Wildcard Mask:</strong> ${result.wildcardMask}</li>
-                                <li><strong>Common Prefix:</strong> /${result.commonPrefixLength}</li>
+                                <li><strong>${t('vlsm_subnet_mask')}:</strong> ${result.subnetMask}</li>
+                                <li><strong>${t('vlsm_wildcard_mask')}:</strong> ${result.wildcardMask}</li>
+                                <li><strong>${t('ip_aggregator_common_prefix')}:</strong> /${result.commonPrefixLength}</li>
                             </ul>
                         </div>
                     </div>
                     
                     <div class="col-md-6">
-                        <h6><i class="fas ${efficiencyIcon} me-2"></i>Efficiency Analysis</h6>
+                        <h6><i class="fas ${efficiencyIcon} me-2"></i>${t('ip_aggregator_efficiency')}</h6>
                         <div class="result-item">
                             <ul class="list-unstyled mb-0">
-                                <li><strong>Original Networks:</strong> ${analysis.originalNetworks}</li>
-                                <li><strong>Original Total Hosts:</strong> ${analysis.originalTotalHosts.toLocaleString()}</li>
-                                <li><strong>Efficiency:</strong> 
+                                <li><strong>${t('ip_aggregator_original_networks')}:</strong> ${analysis.originalNetworks}</li>
+                                <li><strong>${t('ip_aggregator_original_total_hosts')}:</strong> ${analysis.originalTotalHosts.toLocaleString()}</li>
+                                <li><strong>${t('ip_aggregator_efficiency_label')}:</strong> 
                                     <span class="badge ${isEfficient ? "bg-info" : "bg-warning"}">${Math.round(analysis.efficiency * 100)}%</span>
                                 </li>
-                                <li><strong>Wasted Addresses:</strong> 
+                                <li><strong>${t('ip_aggregator_wasted_addresses')}:</strong> 
                                     <span class="badge ${analysis.wastedAddresses === 0 ? "bg-info" : "bg-secondary"}">${analysis.wastedAddresses.toLocaleString()}</span>
                                 </li>
                             </ul>
@@ -617,16 +638,16 @@ class UIHandler {
             
             <div class="mt-4">
                 <h5 class="text-primary mb-3">
-                    <i class="fas fa-list me-2"></i>Input Networks Analysis
+                    <i class="fas fa-list me-2"></i>${t('ip_aggregator_input_networks')}
                 </h5>
                 <div class="table-responsive">
                     <table class="table table-hover">
                         <thead class="table-info">
                             <tr>
-                                <th>Original Input</th>
-                                <th>Network Address</th>
-                                <th>Binary Representation</th>
-                                <th>Common Prefix</th>
+                                <th>${t('ip_aggregator_original_input')}</th>
+                                <th>${t('ip_aggregator_network_address')}</th>
+                                <th>${t('ip_aggregator_binary')}</th>
+                                <th>${t('ip_aggregator_common_prefix_label')}</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -672,7 +693,7 @@ class UIHandler {
             <div class="alert alert-danger fade-in">
                 <h5 class="alert-heading">
                     <i class="fas fa-exclamation-triangle me-2"></i>
-                    Error
+                    ${t('error')}
                 </h5>
                 <p class="mb-0">${message}</p>
             </div>
diff --git a/js/vlsmLogic.js b/js/vlsmLogic.js
index f52c77c..eebd7cb 100644
--- a/js/vlsmLogic.js
+++ b/js/vlsmLogic.js
@@ -3,6 +3,7 @@
  */
 
 import { cidrToSubnetMask, getUsableHosts, cidrToWildcardMask } from "./binaryMap.js";
+import { t } from "./i18n.js";
 
 /**
  * Parse IP address string to array of integers
@@ -344,31 +345,32 @@ export function generateDetailedAnalysis(baseNetwork, hostRequirements, results,
   const baseCIDRNum = parseInt(baseCIDR);
 
   let analysis = `<div class="detailed-vlsm">`;
-  analysis += `<h6 class="text-primary mb-3"><strong>VLSM Problem:</strong></h6>`;
-  analysis += `<p><strong>Using network:</strong> ${baseNetwork} design VLSM for the following networks:</p>`;
+  analysis += `<h6 class="text-primary mb-3"><strong>${t('vlsm_problem')}:</strong></h6>`;
+  analysis += `<p><strong>${t('vlsm_using_network')}:</strong> ${baseNetwork} ${t('vlsm_design_vlsm')}:</p>`;
   analysis += `<ul class="list-unstyled ms-3">`;
 
   // List all requirements
   hostRequirements.forEach((req, index) => {
     if (req && req > 0) {
-      analysis += `<li><strong>Net ${index + 1}:</strong> ${req} hosts</li>`;
+      analysis += `<li><strong>${t('vlsm_net')} ${index + 1}:</strong> ${req} ${t('hosts')}</li>`;
     }
   });
 
   analysis += `</ul>`;
-  analysis += `<p><strong>Find the first address, last address and broadcast address for each subnet?</strong></p>`;
+  analysis += `<p><strong>${t('vlsm_find_addresses')}</strong></p>`;
 
   // Add strategy information
-  const strategyName = strategy === "last" ? "Last Subnet" : "First Subnet";
+  const strategyName = strategy === "last" ? t('vlsm_strategy_last_subnet').split(' ')[2] + " " + t('vlsm_strategy_last_subnet').split(' ')[3] : t('vlsm_strategy_first_subnet').split(' ')[2] + " " + t('vlsm_strategy_first_subnet').split(' ')[3];
+  const strategyNameFull = strategy === "last" ? "Last Subnet" : "First Subnet";
   const strategyDescription = strategy === "last" ? "This method takes the last subnet from each subdivision, leaving the lower-numbered subnets available for future use." : "This method takes the first subnet from each subdivision, which is the traditional approach in VLSM.";
 
   analysis += `<div class="alert alert-info mb-3">`;
-  analysis += `<h6 class="mb-2"><i class="fas fa-info-circle me-2"></i>Allocation Strategy: ${strategyName}</h6>`;
+  analysis += `<h6 class="mb-2"><i class="fas fa-info-circle me-2"></i>Allocation Strategy: ${strategyNameFull}</h6>`;
   analysis += `<p class="mb-0">${strategyDescription}</p>`;
   analysis += `</div>`;
 
-  analysis += `<hr><h6 class="text-success"><strong>Solution:</strong></h6>`;
-  analysis += `<p><em>Let n be the number of additional borrowed bits from parent network, m be the number of remaining host bits.</em></p>`;
+  analysis += `<hr><h6 class="text-success"><strong>${t('vlsm_solution')}:</strong></h6>`;
+  analysis += `<p><em>${t('vlsm_borrowed_bits_note')}</em></p>`;
 
   // Prepare requirements in the same way as calculateVLSM
   const validRequirements = [];
@@ -401,30 +403,30 @@ export function generateDetailedAnalysis(baseNetwork, hostRequirements, results,
       const hostBits = 32 - targetCIDR;
 
       analysis += `<div class="mb-4 p-3 border rounded bg-white">`;
-      analysis += `<h6 class="text-info"><strong>Net ${networkNum}: ${requiredHosts} hosts</strong></h6>`;
+      analysis += `<h6 class="text-info"><strong>${t('vlsm_net')} ${networkNum}: ${requiredHosts} ${t('hosts')}</strong></h6>`;
 
       // Calculate borrowed bits from this parent
       const borrowedBits = targetCIDR - parentCIDR;
       const blockSize = Math.pow(2, hostBits);
       const numSubnets = Math.pow(2, borrowedBits);
 
-      analysis += `<p class="mb-2"><strong>Calculation:</strong></p>`;
+      analysis += `<p class="mb-2"><strong>${t('vlsm_calculation')}:</strong></p>`;
       analysis += `<div class="ms-3 mb-2">`;
-      analysis += `<p class="mb-1">Find m: 2<sup>m</sup> - 2 ≥ ${requiredHosts} ⇒ m = ${hostBits}</p>`;
-      analysis += `<p class="mb-1">Borrowed bits: n = ${parentCIDR} → ${targetCIDR} = ${borrowedBits}</p>`;
-      analysis += `<p class="mb-1">Block Size = 2<sup>${hostBits}</sup> = ${blockSize}</p>`;
-      analysis += `<p class="mb-1">Number of Subnets = 2<sup>${borrowedBits}</sup> = ${numSubnets}</p>`;
+      analysis += `<p class="mb-1">${t('vlsm_find_m')}: 2<sup>m</sup> - 2 ≥ ${requiredHosts} ⇒ m = ${hostBits}</p>`;
+      analysis += `<p class="mb-1">${t('vlsm_borrowed_bits')}: n = ${parentCIDR} → ${targetCIDR} = ${borrowedBits}</p>`;
+      analysis += `<p class="mb-1">${t('vlsm_block_size')} = 2<sup>${hostBits}</sup> = ${blockSize}</p>`;
+      analysis += `<p class="mb-1">${t('vlsm_number_subnets')} = 2<sup>${borrowedBits}</sup> = ${numSubnets}</p>`;
       analysis += `</div>`;
 
       // Special case: if borrowedBits is 0, it means direct assignment without subdivision
       if (borrowedBits === 0) {
-        analysis += `<p class="mb-2"><strong>Direct assignment (no subdivision needed):</strong></p>`;
+        analysis += `<p class="mb-2"><strong>${t('vlsm_direct_assignment')}:</strong></p>`;
         analysis += `<div class="ms-3 mb-2">`;
-        analysis += `<p class="mb-1"><strong>1) ${step.allSubnets[0].network} (assigned to Net ${networkNum})</strong></p>`;
+        analysis += `<p class="mb-1"><strong>1) ${step.allSubnets[0].network} (${t('vlsm_assigned_to')} ${t('vlsm_net')} ${networkNum})</strong></p>`;
         analysis += `</div>`;
       } else {
-        const strategyText = strategy === "last" ? " (using Last Subnet strategy)" : " (using First Subnet strategy)";
-        analysis += `<p class="mb-2"><strong>Take ${parentNetwork} and divide into ${numSubnets} subnets (/${targetCIDR})${strategyText}:</strong></p>`;
+        const strategyText = strategy === "last" ? ` (${t('vlsm_strategy_last_subnet')})` : ` (${t('vlsm_strategy_first_subnet')})`;
+        analysis += `<p class="mb-2"><strong>${t('vlsm_take_and_divide')} ${parentNetwork} ${t('vlsm_and_divide_into')} ${numSubnets} ${t('vlsm_subnets')} (/${targetCIDR})${strategyText}:</strong></p>`;
 
         // Use the subnets from the allocation step
         const allSubnets = step.allSubnets;
@@ -435,16 +437,16 @@ export function generateDetailedAnalysis(baseNetwork, hostRequirements, results,
           const isAssigned = subIndex === assignedSubnetIndex;
           const assignmentStyle = isAssigned ? ' style="background-color: #e8f5e8; border-left: 4px solid #28a745;"' : "";
           analysis += `<div class="ms-3 mb-2"${assignmentStyle}>`;
-          analysis += `<p class="mb-1"><strong>${subIndex + 1}) ${subnet.network}${isAssigned ? ` (✓ assigned to Net ${networkNum})` : ""}</strong></p>`;
+          analysis += `<p class="mb-1"><strong>${subIndex + 1}) ${subnet.network}${isAssigned ? ` (✓ ${t('vlsm_assigned_to')} ${t('vlsm_net')} ${networkNum})` : ""}</strong></p>`;
 
           if (subnet.firstIP) {
             // Only show details if available
             analysis += `<div class="ms-3">`;
-            analysis += `<p class="mb-1">+ First IP: ${subnet.firstIP}</p>`;
-            analysis += `<p class="mb-1">+ Last IP: ${subnet.lastIP}</p>`;
-            analysis += `<p class="mb-1">+ Broadcast: ${subnet.broadcast}</p>`;
-            analysis += `<p class="mb-1">+ Subnet Mask: ${subnet.subnetMask}</p>`;
-            analysis += `<p class="mb-1">+ Wildcard Mask: ${subnet.wildcardMask}</p>`;
+            analysis += `<p class="mb-1">+ ${t('vlsm_first_ip_label')}: ${subnet.firstIP}</p>`;
+            analysis += `<p class="mb-1">+ ${t('vlsm_last_ip_label')}: ${subnet.lastIP}</p>`;
+            analysis += `<p class="mb-1">+ ${t('vlsm_broadcast_label')}: ${subnet.broadcast}</p>`;
+            analysis += `<p class="mb-1">+ ${t('vlsm_subnet_mask_label')}: ${subnet.subnetMask}</p>`;
+            analysis += `<p class="mb-1">+ ${t('vlsm_wildcard_mask_label')}: ${subnet.wildcardMask}</p>`;
             analysis += `</div>`;
           }
           analysis += `</div>`;
diff --git a/style.css b/style.css
index 5dca37d..e29bb50 100644
--- a/style.css
+++ b/style.css
@@ -9,8 +9,11 @@
   --danger-color: #dc3545;
   --light-color: #f8f9fa;
   --dark-color: #212529;
+}
 
-  /* Light mode colors */
+/* Light theme colors */
+body.light-theme,
+body:not(.dark-theme) {
   --bg-body: #f8f9fa;
   --bg-gradient-start: #f5f7fa;
   --bg-gradient-end: #c3cfe2;
@@ -19,6 +22,28 @@
   --text-secondary: #6c757d;
   --border-color: #dee2e6;
   --shadow-color: rgba(0, 0, 0, 0.1);
+  --table-hover-bg: rgba(13, 110, 253, 0.05);
+  --input-bg: #ffffff;
+  --input-border: #e9ecef;
+  --navbar-bg: #0d6efd;
+  --footer-bg: #212529;
+}
+
+/* Dark theme colors */
+body.dark-theme {
+  --bg-body: #1a1d23;
+  --bg-gradient-start: #1a1d23;
+  --bg-gradient-end: #2d3238;
+  --bg-card: #2d3238;
+  --text-primary: #e9ecef;
+  --text-secondary: #adb5bd;
+  --border-color: #495057;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+  --table-hover-bg: rgba(13, 110, 253, 0.15);
+  --input-bg: #343a40;
+  --input-border: #495057;
+  --navbar-bg: #1a1d23;
+  --footer-bg: #0d1117;
 }
 
 body {
@@ -114,6 +139,31 @@ body {
   font-weight: 600;
 }
 
+/* Language Toggle Button */
+#language-toggle {
+  border-color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.9);
+  transition: all 0.3s ease;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+}
+
+#language-toggle:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 1);
+  color: #ffffff;
+  transform: translateY(-1px);
+}
+
+#language-toggle:active {
+  transform: translateY(0);
+}
+
+#current-lang-text {
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
 .card {
   border-radius: 1rem;
   overflow: hidden;
@@ -136,7 +186,9 @@ body {
 
 .form-control {
   border-radius: 0.5rem;
-  border: 2px solid #e9ecef;
+  border: 2px solid var(--input-border);
+  background-color: var(--input-bg);
+  color: var(--text-primary);
   transition: all 0.3s ease;
 }
 
@@ -185,13 +237,14 @@ body {
 
 .table tbody td {
   padding: 1rem;
-  border-color: #f8f9fa;
+  border-color: var(--border-color);
   font-family: "Courier New", monospace;
   font-size: 0.9rem;
+  color: var(--text-primary);
 }
 
 .table-hover tbody tr:hover {
-  background-color: rgba(13, 110, 253, 0.05);
+  background-color: var(--table-hover-bg);
   transform: scale(1.005);
   transition: all 0.2s ease;
 }
@@ -412,3 +465,283 @@ body {
 .prefix-grid-cell {
   font-size: 0.9em;
 }
+
+/* Dark Theme Specific Styles */
+body.dark-theme .navbar {
+  background-color: var(--navbar-bg) !important;
+  border-bottom: 1px solid var(--border-color);
+}
+
+body.dark-theme .card {
+  background-color: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+body.dark-theme .card-header {
+  background-color: #343a40 !important;
+  border-bottom: 1px solid var(--border-color);
+}
+
+body.dark-theme .table {
+  color: var(--text-primary);
+  background-color: transparent;
+}
+
+body.dark-theme .table thead th {
+  background-color: #343a40 !important;
+  color: #e9ecef !important;
+}
+
+body.dark-theme .table tbody tr {
+  background-color: var(--bg-card);
+  color: var(--text-primary);
+}
+
+body.dark-theme .table tbody td {
+  background-color: transparent;
+  color: var(--text-primary) !important;
+}
+
+body.dark-theme .table-primary thead th {
+  background-color: #2d5aa6 !important;
+  color: #ffffff !important;
+}
+
+body.dark-theme .table-info thead th {
+  background-color: #0a6980 !important;
+  color: #ffffff !important;
+}
+
+body.dark-theme .table-hover tbody tr:hover {
+  background-color: var(--table-hover-bg) !important;
+}
+
+body.dark-theme .table-hover tbody tr:hover td {
+  color: var(--text-primary) !important;
+}
+
+body.dark-theme .table strong {
+  color: var(--text-primary) !important;
+}
+
+body.dark-theme .table .badge {
+  color: #ffffff !important;
+}
+
+body.dark-theme .table .text-primary {
+  color: #6ea8fe !important;
+}
+
+body.dark-theme .form-text {
+  color: var(--text-secondary);
+}
+
+body.dark-theme .form-select {
+  background-color: var(--input-bg);
+  color: var(--text-primary);
+  border-color: var(--input-border);
+}
+
+body.dark-theme .form-select option {
+  background-color: var(--input-bg);
+  color: var(--text-primary);
+}
+
+body.dark-theme .form-control::placeholder,
+body.dark-theme input::placeholder,
+body.dark-theme textarea::placeholder {
+  color: #6c757d;
+  opacity: 0.8;
+}
+
+body.dark-theme .form-control::-webkit-input-placeholder {
+  color: #6c757d;
+  opacity: 0.8;
+}
+
+body.dark-theme .form-control::-moz-placeholder {
+  color: #6c757d;
+  opacity: 0.8;
+}
+
+body.dark-theme .form-control:-ms-input-placeholder {
+  color: #6c757d;
+  opacity: 0.8;
+}
+
+body.dark-theme .result-item {
+  background-color: #343a40;
+  border-left-color: var(--primary-color);
+}
+
+body.dark-theme .ip-result-success {
+  background: linear-gradient(135deg, #1a3a2a 0%, #2d4238 100%);
+}
+
+body.dark-theme .ip-result-error {
+  background: linear-gradient(135deg, #3a1a1a 0%, #422d2d 100%);
+}
+
+body.dark-theme .alert {
+  color: var(--text-primary);
+}
+
+body.dark-theme .alert-info {
+  background: linear-gradient(135deg, #0a3d4a 0%, #0d5168 100%);
+  color: #d1ecf1;
+}
+
+body.dark-theme .alert-warning {
+  background: linear-gradient(135deg, #4a3d0a 0%, #68510d 100%);
+  color: #fff3cd;
+}
+
+body.dark-theme .alert-danger {
+  background: linear-gradient(135deg, #4a0a0a 0%, #680d0d 100%);
+  color: #f8d7da;
+}
+
+body.dark-theme .alert-success {
+  background: linear-gradient(135deg, #0a4a0a 0%, #0d680d 100%);
+  color: #d1e7dd;
+}
+
+body.dark-theme .footer-fixed {
+  background-color: var(--footer-bg) !important;
+  border-top-color: var(--border-color) !important;
+}
+
+body.dark-theme .detailed-vlsm {
+  color: var(--text-primary);
+}
+
+body.dark-theme .detailed-vlsm .bg-white {
+  background-color: #343a40 !important;
+}
+
+body.dark-theme .prefix-grid,
+body.dark-theme .ip-grid {
+  border-color: var(--border-color);
+}
+
+body.dark-theme .prefix-grid-header,
+body.dark-theme .ip-grid-header {
+  background-color: #343a40;
+  color: var(--text-primary);
+  border-color: var(--border-color);
+}
+
+body.dark-theme .prefix-grid-cell,
+body.dark-theme .ip-grid-cell {
+  border-color: var(--border-color);
+  color: var(--text-primary);
+}
+
+body.dark-theme .bg-light {
+  background-color: #343a40 !important;
+}
+
+body.dark-theme .text-muted {
+  color: var(--text-secondary) !important;
+}
+
+body.dark-theme label,
+body.dark-theme .form-label {
+  color: var(--text-primary);
+}
+
+body.dark-theme h1, 
+body.dark-theme h2, 
+body.dark-theme h3, 
+body.dark-theme h4, 
+body.dark-theme h5, 
+body.dark-theme h6 {
+  color: var(--text-primary);
+}
+
+body.dark-theme p {
+  color: var(--text-primary);
+}
+
+body.dark-theme textarea.form-control {
+  color: var(--text-primary);
+}
+
+body.dark-theme input[type="number"].form-control {
+  color: var(--text-primary);
+}
+
+body.dark-theme input[type="text"].form-control {
+  color: var(--text-primary);
+}
+
+body.dark-theme .form-control:focus {
+  background-color: var(--input-bg);
+  color: var(--text-primary);
+  border-color: var(--primary-color);
+}
+
+body.dark-theme .form-select:focus {
+  background-color: var(--input-bg);
+  color: var(--text-primary);
+  border-color: var(--primary-color);
+}
+
+body.dark-theme input:focus,
+body.dark-theme textarea:focus {
+  background-color: var(--input-bg) !important;
+  color: var(--text-primary) !important;
+}
+
+body.dark-theme .opacity-80 {
+  opacity: 0.9 !important;
+}
+
+body.dark-theme .invalid-feedback,
+body.dark-theme .warning-feedback,
+body.dark-theme .validation-feedback {
+  color: #ffc107 !important;
+}
+
+body.dark-theme .is-invalid ~ .invalid-feedback {
+  color: #f8d7da !important;
+}
+
+body.dark-theme .is-warning ~ .warning-feedback {
+  color: #fff3cd !important;
+}
+
+/* Theme toggle button styles */
+#theme-toggle {
+  border-color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.9);
+  transition: all 0.3s ease;
+  font-weight: 500;
+  padding: 0.5rem 0.75rem;
+}
+
+#theme-toggle:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 1);
+  color: #ffffff;
+  transform: translateY(-1px);
+}
+
+#theme-toggle:active {
+  transform: translateY(0);
+}
+
+#theme-icon {
+  font-size: 1rem;
+}
+
+/* Smooth theme transition */
+body,
+.card,
+.form-control,
+.table,
+.alert,
+.result-item {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}