diff --git a/index.html b/index.html
new file mode 100644
index 000000000..231ce7fdd
--- /dev/null
+++ b/index.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta viewport="width=device-width, initial-scale=1.0">
+    <title>Hunting Keywords</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/papaparse@latest"></script>
+    <style>
+        .handsontable .htCore .ht_master .wtHolder {
+            overflow-y: hidden !important;
+        }
+        .handsontable td {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            height: 23px !important;
+            line-height: 23px !important;
+        }
+        /* Dark theme overrides for Handsontable */
+        body, html {
+            background-color: #0d1b2a; /* Dark background for the page */
+        }
+        /* Ensures the container also has a dark background */
+        #example {
+            background-color: #0d1b2a; /* Dark background for the container */
+        }
+
+        .handsontable, .wtHolder {
+            color: ##53A757; /* Green text */
+            background-color: ##201F1F !important; /* Dark background for the table */
+        }
+
+        /* Specific overrides for table cells */
+        .handsontable .htCore td, .handsontable .htCore th {
+            background-color: #04151f !important; /* Dark background for cells */
+            color: #a7c957 !important; /* Green text */
+        }
+
+        /* Header cells */
+        .handsontable .htCore th {
+            background-color: #1b263b !important; /* Slightly lighter background for header cells */
+            color: #a7c957;
+        }
+
+        /* Override for current row & column highlight */
+        .ht__highlight {
+            background-color: #0d1b2a !important; /* Darker background for highlight */
+        }
+
+        /* Adjusting selection colors to fit the dark theme */
+        .ht_master .htBorders .current {
+            border-color: #4f772d !important; /* Green border for current selection */
+        }
+
+        .ht_master .htBorders .area {
+            border-color: #90a955 !important; /* Green border for selected area */
+        }
+
+        /* Customizing scrollbar for dark theme */
+        ::webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::webkit-scrollbar-track {
+            background: #003049;
+        }
+
+        ::webkit-scrollbar-thumb {
+            background: #555;
+        }
+
+        ::webkit-scrollbar-thumb:hover {
+            background: #444;
+        }
+        .ascii-art-container {
+		    white-space: nowrap; /* Prevents the content from wrapping */
+            text-align: center; /* Center the content horizontally */
+            width: 100%; /* Ensure the container spans the full width */
+			max-width: 100%; /* Ensures the container does not exceed the viewport width */
+            overflow: auto; /* In case the ASCII art is wider than the screen */
+			overflow-x: auto; /* Enables horizontal scrolling */
+
+        }
+        pre {
+            display: inline-block; /* Allows the <pre> block to be centered by text-align */
+            white-space: pre-wrap; /* Ensures that the ASCII art does not overflow the container */
+            word-wrap: break-word; /* Breaks the text to prevent overflow */
+        }
+        .ascii-art-container pre {
+		    white-space: pre; /* Maintains spacing and formatting of the ASCII art */
+		    overflow-x: auto; /* Allows horizontal scrolling if needed */
+            color: #32CD32; /* Light green color */
+			display: inline-block; /* Treats the pre element as a block while keeping it inline */
+        }
+		@keyframes spin {
+			0% { transform: rotate(0deg); }
+			100% { transform: rotate(360deg); }
+		}
+
+    </style>
+</head>
+
+<body>
+
+<div class="ascii-art-container">
+<pre>
+▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▌
+▐░▀█▀░█░█░█▀▄░█▀▀░█▀█░▀█▀░░░█░█░█░█░█▀█░▀█▀░▀█▀░█▀█░█▀▀░░░█░█░█▀▀░█░█░█░█░█▀█░█▀▄░█▀▄░█▀▀ ▌
+▐░░█░░█▀█░█▀▄░█▀▀░█▀█░░█░░░░█▀█░█░█░█░█░░█░░░█░░█░█░█░█░░░█▀▄░█▀▀░░█░░█▄█░█░█░█▀▄░█░█░▀▀█ ▌
+▐░░▀░░▀░▀░▀░▀░▀▀▀░▀░▀░░▀░░░░▀░▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░▀▀▀░░░▀░▀░▀▀▀░░▀░░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀ ▌
+▐▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▌
+</pre>
+</div>
+<div id="loadingIndicator" style="display:none; text-align:center; color: #0D5C2D;">
+    <div class="spinner" style="display:inline-block; margin-left:10px; border: 4px solid rgba(50,205,50,.3); border-radius: 50%; border-top-color: #fff; width: 24px; height: 24px; animation: spin 1s ease-in-out infinite;"></div>
+</div>
+
+
+<div id="example"></div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        loadCSV('threathunting-keywords.csv');
+    });
+
+    function loadCSV(filePath) {
+		// Show loading indicator
+		document.getElementById('loadingIndicator').style.display = 'block';
+
+        fetch(filePath)
+        .then(response => response.text())
+        .then(csvText => {
+            Papa.parse(csvText, {
+                header: true,
+                dynamicTyping: true,
+                skipEmptyLines: true,
+                complete: function(results) {
+                    var data = results.data;
+                    if (data.length === 0 || (data.length === 1 && !data[0])) {
+                        return;
+                    }
+
+                    // Original column headers from the data
+                    var originalColHeaders = Object.keys(data[0]);
+
+                    // Adjusted column headers for display
+                    var colHeaders = originalColHeaders.map(header =>
+                        header.startsWith('metadata_') ? header.substring(9) : header
+                    );
+
+                    // Map original data fields to adjusted column headers for Handsontable
+                    var columns = originalColHeaders.map(header => ({
+                        data: header,
+                        type: 'text',
+                        title: header.startsWith('metadata_') ? header.substring(9) : header
+                    }));
+
+                    createHandsontable(data, colHeaders, columns);
+					// Hide loading indicator once loading is complete
+					document.getElementById('loadingIndicator').style.display = 'none';
+                    }
+            });
+        })
+		.catch(error => {
+			console.error('Error loading the CSV file:', error);
+			// Hide loading indicator in case of error
+			document.getElementById('loadingIndicator').style.display = 'none';
+		});
+    }
+
+    function createHandsontable(data, colHeaders, columns) {
+        var container = document.getElementById('example');
+        if (window.hot) {
+            window.hot.destroy(); // Destroy existing Handsontable instance if exists
+        }
+        window.hot = new Handsontable(container, {
+            data: data,
+            colHeaders: colHeaders,
+            rowHeaders: true,
+            columns: columns.map(column => {
+                // Check if the column is the one that needs custom width
+                if (column.data === 'keyword') {
+                    return { ...column, width: 200 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_keyword_regex') {
+                    return { ...column, width: 200 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_keyword_type') {
+                    return { ...column, width: 140 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_description') {
+                    return { ...column, width: 200 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_malwares_name') {
+                    return { ...column, width: 50 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_tool_techniques') {
+                    return { ...column, width: 120 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_tool_tactics') {
+                    return { ...column, width: 120 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_groups_name') {
+                    return { ...column, width: 50 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_category') {
+                    return { ...column, width: 150 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_link') {
+                    return { ...column, width: 150 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_tool') {
+                    return { ...column, width: 170 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_comment') {
+                    return { ...column, width: 100 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_severity_score') {
+                    return { ...column, width: 130 }; // Custom width for this specific column
+                }
+                if (column.data === 'metadata_popularity_score') {
+                    return { ...column, width: 130 }; // Custom width for this specific column
+                }
+                return column; // Return other columns as is
+            }),
+            colWidths: 100, // Set fixed width for all columns
+            rowHeights: 23, // Set initial height for all rows
+            manualColumnResize: true, // Allow manual resizing of columns
+            manualRowResize: true, // Allow manual resizing of rows
+            filters: true,
+            dropdownMenu: true
+        });
+    }
+</script>
+
+</body>
+</html>
