diff --git a/static/.DS_Store b/static/.DS_Store
new file mode 100644
index 0000000..623572f
Binary files /dev/null and b/static/.DS_Store differ
diff --git a/static/css/style.css b/static/css/style.css
index 2db54c9..9fc9b03 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,128 +1,125 @@
-/* Variables */
+/* Color Definitions */
 :root {
-  --font: 'Roboto', sans-serif;
-  --bg: #1c1c1e;
-  --text: #ececec;
-  --bold-text: #2ebd52;
-  --accent: #007BFF;
-  --border-color: #19191b;
-  --light: #D3D3D3;
+  --sigma-blue: #00bbe6;
+  --sigma-dark: #12141c;
 }
 
-/* Font Import for Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
+::selection {
+  color: white;
+  background: var(--sigma-blue);
+}
+
+.text-sigma-blue {
+  color: var(--sigma-blue);
+}
 
-/* New Styles */
-body, html {
-  scroll-behavior: smooth;
-  scroll-padding-top: 1rem;
-  font-kerning: normal;
-  -webkit-text-size-adjust: 100%;
-  font-size: 18px;
-  background-color: var(--bg);
-  color: var(--text);
+.bg-sigma-blue {
+  background-color: var(--sigma-blue);
 }
 
-a {
-  text-decoration: none;
-  color: inherit;
+.border-sigma-blue {
+  border-color: var(--sigma-blue);
+}
+
+.text-sigma-dark {
+  color: var(--sigma-dark);
+}
+
+.bg-sigma-dark {
+  background-color: var(--sigma-dark);
+}
+
+.border-sigma-dark {
+  border-color: var(--sigma-dark);
+}
+
+/* Code Area CSS */
+pre:has(> #rule-code),
+pre:has(> #query-code) {
+  min-height: 200px;
+  cursor: text;
 }
 
-/* Updated existing styles */
-.dark-mode {
-  background-color: var(--bg);
-  color: var(--text);
+pre:has(> #rule-code:empty)::after {
+  content: "start writing your sigma rule...";
+  color: #c5c8c6;
+  width: 20px;
 }
 
-/* Lighter background for code display */
 div[class*="language-"],
 code[class*="language-"],
 code[class*="language-"] *,
 pre[class*="language-"] {
-  background-color: #2d2d2f;  /* Lighter than the previous */
   word-break: break-word !important;
-  white-space: pre-wrap !important;
+  white-space: pre-line !important;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background-color: var(--sigma-dark) !important;
 }
 
 div[class*="language-"]::selection,
 div[class*="language-"] span::selection,
 code[class*="language-"]::selection,
 code[class*="language-"] span::selection {
-  background: hsl(320, 80%, 25%);
-  color: hsla(0, 0%, 100%, .8);
+  background: var(--sigma-blue);
+  color: var(--sigma-dark);
 }
 
-.font-size-10 {
-  font-size: 1.0rem !important;
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.property,
+.token.keyword,
+.token.string {
+  color: var(--sigma-blue) !important;
 }
 
-.row {
-  padding-left: 3% !important;
-  padding-right: 3% !important;
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+  color: white !important;
 }
 
-.dark-mode .ui.selection.dropdown,
-.dark-mode .ui.selection.dropdown:hover,
-.dark-mode .ui.selection.active.dropdown .menu,
-.dark-mode .ui.selection.active.dropdown:hover .menu,
-.dark-mode .ui.selection.active.visible.dropdown,
-.dark-mode .ui.selection.active.visible.dropdown:hover {
-  border-color: var(--light);
+/* tom-select css override */
+.select-sigma > .ts-control,
+.select-sigma > .ts-control input {
+  color: white;
+  background-color: var(--sigma-dark) !important;
+  border-color: var(--sigma-blue) !important;
 }
 
-.dark-mode .ui.selection.dropdown, .dark-mode .ui.selection.active.dropdown > div.text {
-  color: var(--text);
-  background-color: rgba(255,255,255,.05);
-  border-color: var(--border-color);
+.select-sigma > .ts-dropdown [data-selectable].option {
+  color: var(--sigma-blue);
+  background-color: var(--sigma-dark);
 }
 
-.dark-mode .ui.selection.active.dropdown div.item {
-  color: var(--text);
-  background-color: #1d1f21;
-  border-color: var(--border-color);
+.select-sigma > .ts-dropdown [data-selectable].option.active {
+  color: white;
+  background-color: var(--sigma-blue);
 }
 
-.dark-mode .ui.form .field>label {
-  color: var(--text);
+.select-sigma input[type="checkbox"] {
+  background-color: var(--sigma-dark);
 }
 
-pre[class*=language-] {
-  min-height: 49px;
-  cursor: text;
+.select-sigma input[type="checkbox"]:checked {
+  background-color: var(--sigma-blue);
+  border-color: var(--sigma-dark);
 }
 
-.notification-box {
-  position: fixed !important;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
-  display: none;
-}
-
-.dark-mode .ui.modal>.header,
-.dark-mode .ui.modal>.content {
+.select-sigma.ts-wrapper.multi .ts-control > div {
   color: white;
-  background-color: var(--bg);
-}
-
-@media only screen and (max-width: 768px) {
-  .ui.selection.dropdown {
-    width: 100% !important;
-  }
+  background-color: var(--sigma-dark);
+  border: 1px solid var(--sigma-blue);
+  border-radius: 2px;
 }
 
-/* Increase contrast for text boxes */
-.ui.selection.dropdown, .ui.selection.active.dropdown > div.text {
-  color: #ffffff;
-  background-color: #1c1c1e;
-  border-color: #2ebd52;
-}
-
-/* Add a minimum width to the cli-code box to prevent clashing */
-#cli-code {
-  min-width: 300px;
-}
-/* Add a minimum width to the dropdowns to prevent clashing */
-.field .ui.selection.dropdown {
-  min-width: 200px;
+.select-sigma > .ts-dropdown,
+.select-sigma.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
+  border-color: var(--sigma-blue);
 }
diff --git a/static/fav.png b/static/fav.png
deleted file mode 100644
index c3435a1..0000000
Binary files a/static/fav.png and /dev/null differ
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..86f4645
Binary files /dev/null and b/static/favicon.ico differ
diff --git a/static/js/index.js b/static/js/index.js
index 8531033..2c9c827 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,103 +1,176 @@
-function copy() {
-
-  let resultCode = document.getElementById('result-code');
-  navigator.clipboard.writeText(resultCode.value);
-
-  // alert("successfully copied")
-  $('.notification-box').transition('fade in'); // display the notification
-
-  setTimeout(function(){
-      $('.notification-box').transition('fade out'); // hide the notification after 2 seconds
-  }, 2000);
+// initialize select dropdowns
+new TomSelect("#select-backend", {
+  controlInput: null,
+  valueField: "value",
+  labelField: "label"
+});
+new TomSelect("#select-format", {
+  controlInput: null,
+  valueField: "value",
+  labelField: "label"
+});
+new TomSelect("#select-pipeline", {
+  allowEmptyOption: true,
+  plugins: ["remove_button", "checkbox_options"],
+  persist: false,
+  hidePlaceholder: true,
+  searchField: "value",
+  valueField: "value",
+  labelField: "label"
+});
+
+// inital stuff todo when page is loaded
+window.onload = function () {
+  // select splunk backend by default
+  let backendSelect = document.getElementById("select-backend");
+  backendSelect.tomselect.addItem("splunk");
+  // init filtering of dropdowns on page load
+  filterFormatOptions();
+  filterPipelineOptions();
+  // load cli command
+  generateCli();
+  // inital conversion of example rule
+  convert(sigmaJar.toString());
+};
+
+// define onchange handler for select dropdowns
+document.getElementById("select-backend").onchange = function () {
+  filterFormatOptions();
+  filterPipelineOptions();
+  generateCli();
+  convert(sigmaJar.toString());
+};
+
+document.getElementById("select-format").onchange = function () {
+  generateCli();
+  convert(sigmaJar.toString());
+};
+
+document.getElementById("select-pipeline").onchange = function () {
+  generateCli();
+  convert(sigmaJar.toString());
+};
+
+// define onclick handler for buttons
+document.getElementById("query-copy-btn").onclick = function () {
+  copyQuery();
+};
+
+function copyQuery() {
+  let queryCode = document.getElementById("query-code");
+  navigator.clipboard.writeText(queryCode.value);
+
+  var queryCopyBtn = document.getElementById("query-copy-btn");
+  queryCopyBtn.classList.toggle("text-sigma-blue");
+  queryCopyBtn.classList.toggle("text-green-400");
+
+  setTimeout(function () {
+    queryCopyBtn.classList.toggle("text-sigma-blue");
+    queryCopyBtn.classList.toggle("text-green-400");
+  }, 1200);
 }
 
-function info() {
-  $('.ui.modal').modal('show');
-  $('.ui.modal').addClass('inverted');
+function focusSelect(elementId) {
+  document.getElementById(elementId).focus();
 }
 
-const showFormats = () => {
-  let backend = $('#target-select').dropdown('get value');
-
-  let options = $('#format-select').find("option[backend$=" + backend + "]")
-
-	values = []
-	options = [...options]
-	options.forEach(option => {
-		values.push({"value": option.value, "name": option.innerHTML})
-	});
-  $('#format-select').dropdown('change values', values);
-  $('#format-select').dropdown('set selected', values[0].value);
-
+function getSelectValue(elementId) {
+  let select = document.getElementById(elementId);
+  let tomSelect = select.tomselect;
+  return tomSelect.getValue();
 }
 
-const showPipelines = () => {
-  let backend = $('#target-select').dropdown('get value');
-
-  let options = $('#pipeline-select').find("option[backend$=" + backend + "], option[backend$=all]")
+function generateCli() {
+  let cliCode = document.getElementById("cli-code");
+  let backend = getSelectValue("select-backend");
+  let format = getSelectValue("select-format");
+  let pipelines = getSelectValue("select-pipeline");
 
-	values = []
-	options = [...options]
-	options.forEach(option => {
-		values.push({"value": option.value, "name": option.innerHTML})
-	});
-  $('#pipeline-select').dropdown('change values', values);
-}
+  cliCommand = "sigma convert";
+  if (pipelines.length === 0) {
+    cliCommand = cliCommand + " --without-pipeline ";
+  }
+  pipelines.forEach((e) => {
+    cliCommand = cliCommand + " -p " + e;
+  });
 
-const cli = () => {
-	
-  let cliCode = document.getElementById('cli-code');
-  let pipeline = $('#pipeline-select').dropdown('get value');
-  let target = $('#target-select').dropdown('get value');
-  let format = $('#format-select').dropdown('get value');
-
-	cliCommand = "sigma convert"
-	if(pipeline.length === 0){
-		cliCommand = cliCommand + " --without-pipeline "
-	}
-	pipeline.forEach(e => {
-		cliCommand = cliCommand + " -p " + e
-	});
-
-	cliCommand = cliCommand + " -t " + target + " -f " + format + " rule.yml";
+  cliCommand = cliCommand + " -t " + backend + " -f " + format + " rule.yml";
   cliCode.innerHTML = cliCommand;
   Prism.highlightElement(cliCode); // rerun code highlighting
 }
 
-const convert = () => {
-  let resultCode = document.getElementById('result-code');
+function convert(sigmaRule) {
+  let queryCode = document.getElementById("query-code");
 
-  // get form values
-  let sigma = jar.toString()
-  let pipeline = $('#pipeline-select').dropdown('get value');
-  let target = $('#target-select').dropdown('get value');
-  let format = $('#format-select').dropdown('get value');
+  let backend = getSelectValue("select-backend");
+  let format = getSelectValue("select-format");
+  let pipelines = getSelectValue("select-pipeline");
 
   // create json object
   const params = {
-    rule: btoa(sigma),
-    pipeline: pipeline,
-    target: target,
+    rule: btoa(sigmaRule),
+    pipeline: pipelines,
+    target: backend,
     format: format
   };
 
-
   // send post request
   const xhr = new XMLHttpRequest();
-  xhr.onreadystatechange = function(e) {
-    if(xhr.readyState === 4){
-      if(xhr.status === 200 ){
-        // write converted querie to output
-        resultCode.innerHTML = xhr.response
-        resultCode.value = xhr.response
-        Prism.highlightElement(resultCode); // rerun code highlighting
-      }
-      else if(xhr.status === 500){
-        resultCode.innerHTML = "Error: Something went wrong"
+  xhr.onreadystatechange = function (e) {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        // write converted query to output code area
+        queryCode.innerHTML = xhr.response;
+        queryCode.value = xhr.response;
+        Prism.highlightElement(queryCode); // rerun code highlighting
+      } else if (xhr.status === 500) {
+        queryCode.innerHTML = "Error: Something went wrong";
       }
     }
-  }
-  xhr.open("post", window.location.origin + "/sigma", true)
-  xhr.setRequestHeader('Content-Type', 'application/json');
+  };
+  xhr.open("post", window.location.origin + "/sigma", true);
+  xhr.setRequestHeader("Content-Type", "application/json");
   xhr.send(JSON.stringify(params));
 }
+
+function filterFormatOptions() {
+  // clear all elemeents from select
+  let select = document.getElementById("select-format");
+  let tomSelect = select.tomselect;
+  tomSelect.clear();
+  tomSelect.clearOptions();
+
+  // only add the formats which match the selected backend
+  let backend = getSelectValue("select-backend");
+  var options = select.querySelectorAll('option[backend$="' + backend + '"]');
+  options = [...options];
+  options.forEach((option) => {
+    tomSelect.addOption({
+      label: option.label,
+      value: option.value
+    });
+  });
+  // select the first element
+  tomSelect.addItem(options[0].value);
+}
+
+function filterPipelineOptions() {
+  // clear all elemeents from select
+  let select = document.getElementById("select-pipeline");
+  let tomSelect = select.tomselect;
+  tomSelect.clear();
+  tomSelect.clearOptions();
+
+  // only add the pipeplines which match the selected backend or have backend=="all"
+  let backend = getSelectValue("select-backend");
+  var options = select.querySelectorAll(
+    'option[backend$="' + backend + '"], option[backend$=all]'
+  );
+  options = [...options];
+  options.forEach((option) => {
+    tomSelect.addOption({
+      label: option.label,
+      value: option.value
+    });
+  });
+}
diff --git a/templates/index.html b/templates/index.html
index f2369a1..2e96f39 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,27 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <!-- Meta tags -->
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
-  <meta name="viewport" content="width=device-width" />
-
-  <!-- Favicon and title -->
-  <link rel="icon" href="{{ url_for('static', filename='fav.png') }}">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>sigconverter.io - sigma rule converter</title>
-  <!-- Add Font Awesome CSS -->
+  <!-- Tailwind UI -->
+  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
+  <!-- FontAwesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-  <!-- Semantic UI-->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.css" integrity="sha512-KXol4x3sVoO+8ZsWPFI/r5KBVB/ssCGB5tsv2nVOKwLg33wTFP3fmnXa47FdSVIshVTgsYk/1734xSk9aFIa4A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-	<!-- Prism CSS -->
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-atom-dark.min.css" integrity="sha512-GZPS1oCebjx8g/ZkrTTvWirW+4wDkzIsilUQPXcZzuDpDzoH5brM2AojiFjo6ObIWeM68ZDostvdjaS9MNYCTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/line-numbers/prism-line-numbers.min.css" integrity="sha512-cbQXwDFK7lj2Fqfkuxbo5iD1dSbLlJGXGpfTDqbggqjHJeyzx88I3rfwjS38WJag/ihH7lzuGlGHpDBymLirZQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-	<!-- sigconverter.io css -->
-	<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-
+  <!-- tom-select -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.2.2/css/tom-select.min.css" integrity="sha512-BrNXB6PRnf32ZqstFiYQT/L7aVZ45FGojXbBx8nybK/NBhxFQPHsr36jH11I2YoUaA5UFqTRF14xt3VVMWfCOg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <!-- PrismJS -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-atom-dark.min.css" integrity="sha512-GZPS1oCebjx8g/ZkrTTvWirW+4wDkzIsilUQPXcZzuDpDzoH5brM2AojiFjo6ObIWeM68ZDostvdjaS9MNYCTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <!-- custom sigconverter.io css -->
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PR1SJ2WGE6"></script>
+  <!-- favicon -->
+  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
@@ -29,93 +25,67 @@
 
     gtag('config', 'G-PR1SJ2WGE6');
   </script>
-
-
 </head>
-<body onload="showFormats(); showPipelines(); cli()" class="dark-mode">
 
-  <nav style="padding: 20px 3% 30px 3%;">
-    <div class="ui grid bottom aligned">
-      <div class="ten wide computer only tablet only column">
-        <h1>
-          <img src="{{ url_for('static', filename='images/lookatme.jpg') }}" alt="Logo" style="height:50px; width:50px; vertical-align:middle;">
-          <a href="/">sigconverter.io</a> - sigma rule converter
-        </h1>
-      </div>
-      <div class="ten wide mobile only column">
-        <h1>
-          <img src="{{ url_for('static', filename='images/lookatme.jpg') }}" alt="Logo" style="height:50px; width:50px; vertical-align:middle;">
-          <a href="/">sigconverter.io</a>
-        </h1>
-      </div>
-      
-      <div class="six wide column right aligned">
-        <h3>
-          <a href="https://github.com/magicsword-io/sigconverter.io" style="color: white;">
-            <i class="fab fa-github" style="font-size: 48px;"></i>
-          </a>
-        </h3>
+<body class="bg-sigma-dark">
+  <nav class="p-6">
+    <div class="flex justify-between">
+      <div class="self-center">
+        <p class="text-sigma-blue text-3xl font-bold">sigconverter.io</p>
+        <p class="text-white text-xl font-bold">sigma rule converter</p>
       </div>
+      <a href="https://github.com/magicsword-io/sigconverter.io" class="text-white self-center mr-4">
+        <i class="fab fa-github text-5xl"></i>
+      </a>
     </div>
+    <hr class="mt-6 h-px border-0 bg-sigma-blue" />
   </nav>
 
-  <div class="ui inverted two column grid vertically divided stackable">
-    <!-- Forms -->
-    <div class="row">
-      <div class="column">
-        <div class="ui form large">
-          <div class="ui stackable grid">
-          <div class="three fields">
-            <!-- Target Select -->
-            <div class="field">
-              <label>Select target:</label>
-              <select id="target-select" onchange="showFormats(); showPipelines(); convert(); cli()" class="ui selection dropdown">
-                {% for name, backend in backends.items() %}
+  <div class="bg-sigma-dark">
+    <div id="form-section" class="mx-10 py-2">
+      <div class="grid lg:grid-cols-2 gap-4">
+        <div class="lg:col-span-1 self-center">
+          <div class="grid md:grid-cols-1 lg:grid-cols-3 gap-4 sm:p-4">
+            <div class="lg:px-1">
+              <label for="select-backend" class="text-sigma-blue">Backend:</label>
+              <select id="select-backend" class="select-sigma" autocomplete="off">
+                {%- for name, backend in backends.items() -%}
                 <option value="{{ name }}">{{ name }}</option>
-                {% endfor %}
+                {%- endfor -%}
               </select>
             </div>
-            <!-- Output Format Select -->
-            <div class="field">
-              <label>Select output format:</label>
-              <select id="format-select" onchange="convert(); cli()" class="ui selection dropdown">
-                {% for format in formats %}
+            <div class="lg:px-1">
+              <label for="select-format" class="text-sigma-blue">Format:</label>
+              <select id="select-format" class="select-sigma" autocomplete="off">
+                {%- for format in formats -%}
                 <option hidden backend="{{ format.backend }}" value="{{ format.name }}">{{ format.name }}</option>
-                {% endfor %}
+                {%- endfor -%}
               </select>
             </div>
-            <!-- Pipeline Select -->
-            <div class="field">
-              <label>Select pipeline(s): </label>
-              <select id="pipeline-select" onchange="convert(); cli()" multiple="" class="ui selection dropdown">
-                <option value></option>
-                <option value=""></option>
-                {% for name, pipeline in pipelines %}
+            <div class="lg:px-1">
+              <label for="select-pipeline" class="text-sigma-blue">Pipeline:</label>
+              <select id="select-pipeline" class="select-sigma" name="pipeline[]" placeholder="select pipelines..." multiple autocomplete="off">
+                {%- for name, pipeline in pipelines -%}
                 <option hidden value="{{ name }}" backend="{{ pipeline.backends }}">{{ name }}</option>
-                {% endfor %}
+                {%- endfor -%}
               </select>
             </div>
           </div>
         </div>
+        <div class="lg:col-span-1 lg:px-2">
+          <label for="cli-code" class="text-sigma-blue">CLI:</label>
+          <pre class="border border-sigma-blue"><code id="cli-code" class="language-bash text-sm">run this cli command for the same result</code></pre>
         </div>
       </div>
-      <div class="column">
-        <div class="ui grid padded stackable">
-          <div class="ten wide column">
-             <pre style="margin: 0; margin-top: 5px;"><code id="cli-code" class="language-bash"></code></pre>
-          </div>
-          <div class="four wide column left floated">
-            <div style="margin-top: 10px;" class="ui buttons">
-              <button id="copy-button" onclick="copy()" class="ui button">Copy</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>   
-    <!-- Code Input and Output -->
-    <div class="row">
-      <div class="column">
-        <pre><div id="input-textarea" class="line-numbers language-yml fill overflow-y-hidden">title: Suspicious SYSTEM User Process Creation
+    </div>
+
+    <div id="content-section" class="mx-10 mt-5">
+      <div class="grid lg:grid-cols-2 gap-4">
+        <div class="lg:col-span-1 self-start lg:px-2">
+          <p class="text-lg text-white font-bold">
+            <span class="px-3 py-2 border-x border-t rounded border-sigma-blue">rule.yml</span>
+          </p>
+          <pre onclick="focusSelect('rule-code')" class="border border-sigma-blue"><code id="rule-code" class="language-yaml text-sm">title: Suspicious SYSTEM User Process Creation
 id: 2617e7ed-adb7-40ba-b0f3-8f9945fe6c09
 status: test
 description: Detects a suspicious process creation as SYSTEM user (suspicious program or command line parameter)
@@ -188,69 +158,47 @@ <h3>
     - Administrative activity
     - Scripts and administrative tools used in the monitored environment
     - Monitoring activity
-level: high</div></pre>
-      </div>
-      <div class="column">
-         <pre><code id="result-code" class="line-numbers language-splunk-spl overflow-y-hidden fill">Output will be displayed here</code></pre>
+level: high</code></pre>
+        </div>
+        <div class="lg:col-span-1 self-start lg:px-2">
+          <p class="text-lg text-white font-bold">
+            <span class="px-3 py-2 border-x border-t rounded border-sigma-blue">
+              <i id="query-copy-btn" class="fas fa-copy px-1 py-0 my-0 text-sm text-sigma-blue cursor-pointer"></i>
+              query
+            </span>
+          </p>
+          <pre class="border border-sigma-blue">
+            <code id="query-code" class="language-splunk-spl text-sm">the generated query should be displayed here :)</code></pre>
+        </div>
       </div>
     </div>
-  </div>
-
-  <div class="ui compact message green notification-box hidden">
-      <i class="close icon"></i>
-      <div class="header">
-          Success!
-      </div>
-      <p>Check your clipboard ;)</p>
-  </div>
 
-  <div class="ui inverted black modal">
-    <i class="close icon"></i>
-    <div class="header">
-        requirements.txt
-    </div>
-    <div class="content">
-        <!-- {{ requirements }} -->
-        {% for line in requirements.split('\n') if line %}
-            <p>{{ line }}</p>
-        {% endfor %}
-    </div>
   </div>
- 
 
-	<!-- Semantic UI -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.js" integrity="sha512-Xo0Jh8MsOn72LGV8kU5LsclG7SUzJsWGhXbWcYs2MAmChkQzwiW/yTQwdJ8w6UA9C6EVG18GHb/TrYpYCjyAQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-	<!-- PrismJS -->
+  <!-- tom-select -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.2.2/js/tom-select.complete.js" integrity="sha512-KfTOBVJv8qnV1b+2tsbTLepS7+RAgmVV0Odk6cj1eHxbR8WFX99gwIWOutwFAUlsve3FaGG3VxoPWWLRnehX1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <!-- PrismJS -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js" integrity="sha512-RDQSW3KoqJMiX0L/UBgwBmH1EmRYp8LBOiLaA8rBHIy+7OGP/7Gxg8vbt8wG4ZYd29P0Fnoq6+LOytCqx3cyoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-yaml.min.js" integrity="sha512-6O/PZimM3TD1NN3yrazePA4AbZrPcwt1QCGJrVY7WoHDJROZFc9TlBvIKMe+QfqgcslW4lQeBzNJEJvIMC8WhA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-splunk-spl.min.js" integrity="sha512-RLhcqVEXOdbZPCJ8YG5fZDRIK3nXiS6erMtnzLyaKzS17H7mRi/9a1o+s2TM2XlWk4Nk7E579LyL63R7nUlrgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-bash.min.js" integrity="sha512-ZqfG//sXQwAA7DOArFJyMmZQ3knKe+0ft3tPQZPvDPJR04IatmhVO5pTazVV+fLVDYSy28PhoBeUj5wxGRiGAA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-	<!-- sigconverter.io js -->
+  <!-- sigconverter.io custom js -->
   <script src="{{ url_for('static', filename='js/index.js') }}"></script>
+  <!-- CodeJar init -->
   <script type="module">
-  import {CodeJar} from 'https://medv.io/codejar/codejar.js'
-  import {withLineNumbers} from 'https://medv.io/codejar/linenumbers.js'
-  window.jar = CodeJar(document.querySelector('#input-textarea'), el => Prism.highlightElement(el))
-  jar.onUpdate(code => {
-    if(code.length > 0) {
-      convert()
-    }
-  })
-  </script>
-  <script>
-    $(document)
-      .ready(function() {
-        $('.ui.selection.dropdown').dropdown();
-        $('.ui.menu .ui.dropdown').dropdown({
-          on: 'hover'
-        });
-      $('#target-select').dropdown('set selected', "splunk");
-      })
-    ;
-    $('.message .close, .ui.modal .close').on('click', function() {
-        $(this).closest('.message, .ui.modal').transition('fade');
-    });
+    import {
+      CodeJar
+    } from 'https://medv.io/codejar/codejar.js'
+    import {
+      withLineNumbers
+    } from 'https://medv.io/codejar/linenumbers.js'
+    window.sigmaJar = CodeJar(document.querySelector('#rule-code'), el => Prism.highlightElement(el))
+    sigmaJar.onUpdate(sigmaRule => {
+      if (sigmaRule.length > 0) {
+        convert(sigmaRule)
+      }
+    })
   </script>
+
 </body>
 </html>