diff --git a/assets/css/app.css b/assets/css/app.css
new file mode 100644
index 0000000..205cd21
--- /dev/null
+++ b/assets/css/app.css
@@ -0,0 +1,20 @@
+body {
+    background-color: #121212;
+    color: #ffffff;
+}
+.container {
+    background-color: #1e1e1e;
+    padding: 20px;
+    border-radius: 8px;
+}
+.form-label, .form-select, .btn-primary {
+    background-color: #1e1e1e;
+    color: #ffffff;
+}
+.btn-primary {
+    border-color: #007bff;
+}
+.btn-primary:hover {
+    background-color: #007bff;
+    color: #ffffff;
+}
\ No newline at end of file
diff --git a/assets/js/app.js b/assets/js/app.js
new file mode 100644
index 0000000..4cb31d3
--- /dev/null
+++ b/assets/js/app.js
@@ -0,0 +1,69 @@
+function updateCountriesAndLabel() {
+    const patternType = document.getElementById('patternType').value;
+    const label = document.getElementById('secondSelectLabel');
+    const countrySelect = document.getElementById('country');
+
+    if (patternType === 'commonPatterns') {
+        label.textContent = 'Select Dates, Currency or CreditCards:';
+    } else {
+        label.textContent = 'Select Country:';
+    }
+
+    if (patternType) {
+        fetch('patterns.json')
+            .then(response => response.json())
+            .then(data => {
+                let options = '<option value="">Please select</option>';
+                const patterns = data.patterns[patternType];
+                const items = Object.keys(patterns);
+                items.forEach(item => {
+                    options += `<option value="${item}">${item}</option>`;
+                });
+                countrySelect.innerHTML = options;
+            })
+            .catch(error => {
+                console.error('Error fetching patterns:', error);
+                countrySelect.innerHTML = '<option value="">Error loading options</option>';
+            });
+    } else {
+        countrySelect.innerHTML = '<option value="">Please select pattern type first</option>';
+    }
+}
+
+function showPattern() {
+    const patternType = document.getElementById('patternType').value;
+    const country = document.getElementById('country').value;
+    const language = document.getElementById('programmingLanguage').value;
+    if (!patternType || !country || !language) {
+        document.getElementById('regexDisplay').textContent = 'Please select all fields.';
+        document.getElementById('codeExampleDisplay').innerHTML = 'Please select all fields.';
+        return;
+    }
+
+    fetch('patterns.json')
+        .then(response => response.json())
+        .then(data => {
+            const regex = data.patterns[patternType][country] || 'No pattern available for this selection.';
+            document.getElementById('regexDisplay').textContent = `Regex Pattern: ${regex}`;
+            displayCodeExample(regex, language);
+        })
+        .catch(error => {
+            document.getElementById('regexDisplay').textContent = 'Failed to load patterns.';
+            console.error('Error loading the patterns:', error);
+        });
+}
+
+function displayCodeExample(regex, language) {
+    const codeExamples = {
+        'PHP': `if (preg_match('/${regex}/', $input)) { echo 'Valid'; } else { echo 'Invalid'; }`,
+        'JavaScript': `if (/${regex}/.test(input)) { console.log('Valid'); } else { console.log('Invalid'); }`,
+        'Python': `import re\nif re.match(r'${regex}', input): print('Valid') else: print('Invalid')`,
+        'C#': `using System.Text.RegularExpressions;\nif (Regex.IsMatch(input, @"${regex}")) { Console.WriteLine("Valid"); } else { Console.WriteLine("Invalid"); }`,
+        'Java': `import java.util.regex.*;\nPattern pattern = Pattern.compile("${regex}");\nMatcher matcher = pattern.matcher(input);\nif (matcher.find()) { System.out.println("Valid"); } else { System.out.println("Invalid"); }`,
+        'Ruby': `if /${regex}/.match(input) then puts 'Valid' else puts 'Invalid' end`,
+        'Go': `import "regexp"\nmatched, _ := regexp.MatchString("${regex}", input)\nif matched { fmt.Println("Valid") } else { fmt.Println("Invalid") }`,
+        'Swift': `import Foundation\nlet regex = try! NSRegularExpression(pattern: "${regex}")\nlet range = NSRange(location: 0, length: input.utf16.count)\nif regex.firstMatch(in: input, options: [], range: range) != nil { print("Valid") } else { print("Invalid") }`,
+        'Perl': `if ($input =~ /${regex}/) { print "Valid"; } else { print "Invalid"; }`
+    };
+    document.getElementById('codeExampleDisplay').innerHTML = `<strong>Code Example in ${language}:</strong> ${codeExamples[language]}`;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ce8f898
--- /dev/null
+++ b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Regex Viewer</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/app.css">
+</head>
+<body>
+    <div class="container py-5">
+        <h1 class="mb-3">Regex Pattern Viewer</h1>
+        <form>
+            <div class="mb-3">
+                <label for="patternType" class="form-label">Select Pattern Type:</label>
+                <select id="patternType" class="form-select" onchange="updateCountriesAndLabel()">
+                    <option value="">Please select</option>
+                    <option value="phoneNumbers">Phone Numbers</option>
+                    <option value="postalCodes">Postal Codes</option>
+                    <option value="VATNumbers">VAT Numbers</option>
+                    <option value="commonPatterns">Common Patterns</option>
+                </select>
+            </div>
+            <div class="mb-3">
+                <label id="secondSelectLabel" for="country" class="form-label">Select Country:</label>
+                <select id="country" class="form-select">
+                    <option value="">Please select</option>
+                </select>
+            </div>
+            <div class="mb-3">
+                <label for="programmingLanguage" class="form-label">Select Programming Language:</label>
+                <select id="programmingLanguage" class="form-select">
+                    <option value="">Please select</option>
+                    <option value="PHP">PHP</option>
+                    <option value="JavaScript">JavaScript</option>
+                    <option value="Python">Python</option>
+                    <option value="C#">C#</option>
+                    <option value="Java">Java</option>
+                    <option value="Ruby">Ruby</option>
+                    <option value="Go">Go</option>
+                    <option value="Swift">Swift</option>
+                    <option value="Perl">Perl</option>
+                </select>
+            </div>
+            <button type="button" onclick="showPattern()" class="btn btn-primary">Show Pattern and Code</button>
+        </form>
+        <div id="regexDisplay" class="alert alert-success mt-3">Regex pattern will be displayed here.</div>
+        <div id="codeExampleDisplay" class="alert alert-info mt-3">Code example will be displayed here.</div>
+    </div>
+    <script src="assets/js/app.js"></script>
+</body>
+</html>
diff --git a/patterns.json b/patterns.json
new file mode 100644
index 0000000..6f9a419
--- /dev/null
+++ b/patterns.json
@@ -0,0 +1,49 @@
+{
+    "patterns": {
+      "phoneNumbers": {
+        "Andorra": "^\\+376[0-9]{6}$",
+        "Austria": "^\\+43[1-9][0-9]{3,12}$",
+        "Belgium": "^\\+32[1-9][0-9]{7,8}$",
+        "Bosnia and Herzegovina": "^\\+387[6][0-9]{7}$",
+        "Bulgaria": "^\\+359[1-9][0-9]{7,8}$",
+        "Croatia": "^\\+385[1-9][0-9]{7,8}$",
+        "Cyprus": "^\\+357[2-9][0-9]{6,7}$",
+        "Czech Republic": "^\\+420[1-9][0-9]{8}$",
+        "Germany": "^\\+49[1-9][0-9]{1,14}$",
+        "France": "^\\+33[1-9][0-9]{8}$",
+        "Italy": "^\\+39[0-9]{6,12}$"
+      },
+      "postalCodes": {
+        "Andorra": "^AD\\d{3}$",
+        "Austria": "^\\d{4}$",
+        "Belgium": "^\\d{4}$",
+        "Bosnia and Herzegovina": "^\\d{5}$",
+        "Bulgaria": "^\\d{4}$",
+        "Croatia": "^\\d{5}$",
+        "Cyprus": "^\\d{4}$",
+        "Czech Republic": "^\\d{3}\\s?\\d{2}$",
+        "Germany": "^\\d{5}$",
+        "France": "^\\d{5}$",
+        "Italy": "^\\d{5}$"
+      },
+      "VATNumbers": {
+        "Andorra": "Not applicable as Andorra does not have a standard VAT number system like EU countries.",
+        "Austria": "^ATU\\d{8}$",
+        "Belgium": "^BE0\\d{9}$",
+        "Bosnia and Herzegovina": "Bosnia and Herzegovina does not have a VAT number system similar to that of the European Union. For business and tax purposes, companies use a national ID number system. It's essential to consult local regulations or authorities for accurate and specific requirements regarding tax identification and reporting in Bosnia and Herzegovina.",
+        "Bulgaria": "BG\\d{9,10}$",
+        "Croatia": "^HR\\d{11}$",
+        "Cyprus": "^CY\\d{8}L$",
+        "Czech Republic": "^CZ\\d{8,10}$",
+        "Germany": "^DE[0-9]{9}$",
+        "France": "^FR[A-HJ-NP-Z0-9]{2}[0-9]{9}$",
+        "Italy": "^IT[0-9]{11}$"
+      },
+      "commonPatterns": {
+        "Dates": "^(0?[1-9]|[12][0-9]|3[01])[- /.](0?[1-9]|1[012])[- /.]\\d{4}$",
+        "Currency": "^€\\s?\\d{1,3}(,\\d{3})*(\\.\\d{2})?$",
+        "CreditCards": "^4[0-9]{12}(?:[0-9]{3})?$"
+      }
+    }
+  }
+  
\ No newline at end of file