diff --git a/taskoo-cli/src/commands/delete.rs b/taskoo-cli/src/commands/delete.rs
index 9fa6a49..6645a18 100644
--- a/taskoo-cli/src/commands/delete.rs
+++ b/taskoo-cli/src/commands/delete.rs
@@ -11,36 +11,7 @@ pub struct Delete;
 impl Delete {
     pub fn delete(delete_config: &Vec<String>) -> Result<String, CoreError> {
         info!("Process delete command!");
-        let mut task_ids: Vec<i64> = vec![];
-
-        if delete_config.len() == 1 {
-            if delete_config[0].contains("..") {
-                let ranged_selection = delete_config[0].split("..").collect::<Vec<&str>>();
-                if ranged_selection.len() != 2 {
-                    eprintln!("Invalid range provided {}", delete_config[0]);
-                }
-                let start = ranged_selection[0]
-                    .parse::<i64>()
-                    .expect("Can't find valid start from provided range");
-                let end = ranged_selection[1]
-                    .parse::<i64>()
-                    .expect("Can't find valid end from provided range");
-                task_ids = (start..=end).collect::<Vec<i64>>();
-            } else {
-                task_ids.push(delete_config[0].parse().expect("Invalid task id provided"));
-            }
-        } else {
-            for item in delete_config.iter() {
-                task_ids.push(item.parse().expect("Invalid task id provided"));
-            }
-        }
-
-        debug!("Running DeleteOperation with {:?}", task_ids);
-        let mut operation = DeleteOperation {
-            database_manager: None,
-            task_ids: task_ids,
-            result: None
-        };
+        let mut operation = DeleteOperation::new(delete_config)?;
 
         execute(&mut operation)?;
         Ok(String::new())
diff --git a/taskoo-cli/src/commands/info.rs b/taskoo-cli/src/commands/info.rs
index 2f92aac..133da01 100644
--- a/taskoo-cli/src/commands/info.rs
+++ b/taskoo-cli/src/commands/info.rs
@@ -5,6 +5,7 @@ use anyhow::Result;
 
 use taskoo_core::core::Operation;
 use taskoo_core::operation::{execute, Get as GetOp};
+use taskoo_core::command::{SimpleCommand, TagCommand};
 
 use crate::error::ClientError;
 
@@ -15,8 +16,18 @@ impl Info {
         Info
     }
 
-    pub fn run(&self, task_id: &u64, attribute: &Option<String>) -> Result<String, ClientError> {
+    pub fn run(
+        &self,
+        task_id: &Option<u64>,
+        attribute: &Option<String>,
+    ) -> Result<String, ClientError> {
         info!("Running info command");
+        if task_id.is_none() && attribute.is_none() {
+            return Err(ClientError::MissingAttrError {
+                attr: String::from("None of task_id or attribute is provided"),
+                backtrace: Backtrace::capture(),
+            });
+        }
         // let task_id = match matches.value_of("task_id") {
         //     Some(raw_task_id) => raw_task_id.parse::<i64>().map_err(|_error| {
         //         ClientError::ParseError(String::from(raw_task_id), String::from("i64"))
@@ -29,33 +40,49 @@ impl Info {
         //     }
         // };
 
-        let id: i64 = if *task_id > std::i64::MAX as u64 {
-            return Err(ClientError::MissingAttrError {
-                attr: String::from(""),
-                backtrace: Backtrace::capture(),
-            });
-        } else {
-            *task_id as i64
-        };
-        info!("Task id: {:?}", task_id);
-        let mut operation = GetOp::new();
-        operation.task_id = Some(id);
-        execute(&mut operation)?;
-
-        let tasks = &operation.get_result();
-        if tasks.is_empty() {
-            return Err(ClientError::UnexpectedFailure(
-                String::from(format!("Unable to find task with id : {}", task_id)),
-                Backtrace::capture(),
-            ));
-        }
+        if let Some(id) = task_id {
+            if *id > std::i64::MAX as u64 {
+                return Err(ClientError::MissingAttrError {
+                    attr: String::from("Provided task_id is greater than i64::MAX"),
+                    backtrace: Backtrace::capture(),
+                });
+            }
+
+            let real_id = *id as i64;
+            info!("Task id: {:?}", real_id);
+            let mut operation = GetOp::new();
+            operation.task_id = Some(real_id);
+            execute(&mut operation)?;
 
-        assert_eq!(tasks.len(), 1);
+            let tasks = &operation.get_result();
+            if tasks.is_empty() {
+                return Err(ClientError::UnexpectedFailure(
+                    String::from(format!("Unable to find task with id : {}", real_id)),
+                    Backtrace::capture(),
+                ));
+            }
+
+            assert_eq!(tasks.len(), 1);
+
+            if let Some(attr) = attribute {
+                println!("{}", tasks[0].get_property_value(attr)?);
+            } else {
+                println!("{:?}", tasks[0]);
+            }
+            return Ok(String::new());
+        }
 
         if let Some(attr) = attribute {
-            println!("{}", tasks[0].get_property_value(attr)?);
-        } else {
-            println!("{:?}", tasks[0]);
+            match attr.as_str() {
+                "tag" => {
+                    let mut tag_command = TagCommand::new()?;
+                    let tags = tag_command.get_all()?;
+                    println!("{:?}", tags);
+                }
+                _ => {
+                    // Should crash
+                }
+            }
         }
         Ok(String::new())
     }
diff --git a/taskoo-cli/src/main.rs b/taskoo-cli/src/main.rs
index 766dfe0..26e8855 100644
--- a/taskoo-cli/src/main.rs
+++ b/taskoo-cli/src/main.rs
@@ -54,6 +54,12 @@ fn handle_result(result: Result<String, anyhow::Error>) {
     }
 }
 
+#[derive(Debug)]
+struct InfoCommand {
+    task_id: Option<u64>,
+    attribute: Option<String>,
+}
+
 // Note: this requires the `derive` feature
 use clap::Parser;
 #[derive(Parser)]
@@ -104,14 +110,9 @@ enum Commands {
         end_day: Option<String>,
     },
     /// Show information about the given task
-    Info {
-        task_id: u64,
-        attribute: Option<String>,
-    },
+    Info { input: String },
     /// Clean context, tag or state
-    Clean {
-        provided_type: String
-    },
+    Clean { provided_type: String },
     /// Change the state of the given tasks to 'start'
     Start { task_ids: Vec<u64> },
     /// Change the state of the given tasks to 'complete'
@@ -159,18 +160,26 @@ fn main() -> Result<(), ClientError> {
                 .agenda(&start_day, &end_day)
                 .context("agenda command failed to operate"),
         ),
-        Commands::Info { task_id, attribute } => {
+        Commands::Info { input } => {
+            let mut info_command = InfoCommand {
+                task_id: None,
+                attribute: None,
+            };
+
+            // Try to parse the input as a task_id (u64), otherwise treat it as an attribute
+            if let Ok(task_id) = input.parse::<u64>() {
+                info_command.task_id = Some(task_id);
+            } else {
+                info_command.attribute = Some(input.clone());
+            }
             let info = Info::new();
             handle_result(
-                info.run(task_id, attribute)
+                info.run(&info_command.task_id, &info_command.attribute)
                     .context("info command failed to operate"),
             );
-        },
+        }
         Commands::Clean { provided_type } => {
-            handle_result(
-                Clean::run(provided_type)
-                    .context("clean command failed to operate"),
-            );
+            handle_result(Clean::run(provided_type).context("clean command failed to operate"));
         }
         Commands::Start { task_ids } => handle_result(
             StateChanger::to_started()
diff --git a/taskoo-core/src/command.rs b/taskoo-core/src/command.rs
index e826d40..83562a0 100644
--- a/taskoo-core/src/command.rs
+++ b/taskoo-core/src/command.rs
@@ -215,6 +215,7 @@ impl<'a> SimpleCommand<'a> for TagCommand<'a> {
     }
 
     fn delete(&mut self, names: Vec<String>) -> Result<(), CoreError> {
+        println!("got here with names {:?}", names);
         let tx = match self.db_manager.as_mut() {
             Some(manager) => manager.conn.transaction()?,
             None => match self.db_manager_for_test.as_mut() {
diff --git a/taskoo-core/src/operation/agenda.rs b/taskoo-core/src/operation/agenda.rs
index 485fc2c..95667c0 100644
--- a/taskoo-core/src/operation/agenda.rs
+++ b/taskoo-core/src/operation/agenda.rs
@@ -4,8 +4,8 @@ use crate::db::task_helper::Task;
 use crate::db::task_manager::TaskManager;
 use crate::error::*;
 
-/* Some of the view functionalities are overlap with list, however,
- * view should provide better API for clients */
+/* Some of the Agenda functionalities are overlap with list, however,
+ * Agenda should provide better API for clients */
 pub struct Agenda {
     pub start_day: String,
     pub end_day: Option<String>,
diff --git a/taskoo-core/src/operation/delete.rs b/taskoo-core/src/operation/delete.rs
index de64ff2..138a6ac 100644
--- a/taskoo-core/src/operation/delete.rs
+++ b/taskoo-core/src/operation/delete.rs
@@ -1,6 +1,7 @@
 use crate::core::{ConfigManager, Operation};
 use crate::db::task_helper::Task;
 use crate::db::task_manager::TaskManager;
+use crate::option_parser::parse_command_option;
 use crate::error::*;
 
 pub struct DeleteOperation {
@@ -9,6 +10,24 @@ pub struct DeleteOperation {
     pub result: Option<Vec<Task>>,
 }
 
+impl DeleteOperation {
+    pub fn new(input_str: &Vec<String>) -> Result<DeleteOperation, CoreError> {
+        let option = parse_command_option(
+            &input_str.iter().map(|s| &**s).collect(),
+            false,
+            false,
+            true,
+        )
+        .unwrap();
+
+        Ok(DeleteOperation {
+            task_ids: option.task_ids,
+            database_manager: None,
+            result: None,
+        })
+    }
+}
+
 impl Operation for DeleteOperation {
     fn init(&mut self) -> Result<(), InitialError> {
         self.database_manager = Some(TaskManager::new(
@@ -21,6 +40,7 @@ impl Operation for DeleteOperation {
     }
     fn set_result(&mut self, _result: Vec<Task>) {}
     fn get_result(&mut self) -> &Vec<Task> {
+        // TODO: Store the deleted task ids
         return &self.result.as_ref().unwrap();
     }
 }
diff --git a/taskoo-core/src/wasm/exports.rs b/taskoo-core/src/wasm/exports.rs
index ce606f0..1e7f88d 100644
--- a/taskoo-core/src/wasm/exports.rs
+++ b/taskoo-core/src/wasm/exports.rs
@@ -75,17 +75,25 @@ pub unsafe fn list(ptr: *mut u8, len: usize) -> *mut c_char {
     let data = read_data_from_js(ptr, len);
     let mut operations = operation::Get::new2(&data).expect("Failed to create the get operation");
 
-    let mut ret: Vec<(String, String)> = vec![];
+    let mut ret: Vec<(String, &Vec<Task>)> = vec![];
 
     for operation_tuple in operations.iter_mut() {
         let serded_string: String = match operation::execute(&mut operation_tuple.1) {
-            Ok(_) => serde_json::to_string(&operation_tuple.1.get_result()).unwrap(),
-            Err(e) => e.to_string(),
+            Ok(_) => {
+                println!("got ok here");
+                serde_json::to_string(&operation_tuple.1.get_result()).unwrap()
+            }
+            Err(e) => {
+                println!("got err here");
+                e.to_string()
+            }
         };
 
-        ret.push((operation_tuple.0.to_owned(), serded_string));
+        println!("serded_string {} ", serded_string);
+        ret.push((operation_tuple.0.to_owned(), operation_tuple.1.get_result()));
     }
     let serded_ret: String = serde_json::to_string(&ret).unwrap();
+    println!("serded_ret {} ", serded_ret);
     unsafe { LENGTH = serded_ret.len() }
     let s = CString::new(serded_ret).unwrap();
     return s.into_raw();
@@ -113,6 +121,7 @@ pub unsafe fn agenda(ptr: *mut u8, len: usize) -> *mut c_char {
         Err(e) => e.to_string(),
     };
 
+    println!("serded_ret for agenda {} ", serded_string);
     unsafe { LENGTH = serded_string.len() }
     let s = CString::new(serded_string).unwrap();
     return s.into_raw();
@@ -134,3 +143,23 @@ pub unsafe fn state_change(ptr: *mut u8, len: usize) -> *mut c_char {
     let s = CString::new(serded_string).unwrap();
     return s.into_raw();
 }
+
+// Delete Operation
+#[no_mangle]
+pub unsafe fn delete(ptr: *mut u8, len: usize) {
+    println!("delete in wasm");
+    let data = read_data_from_js(ptr, len);
+    let mut operation =
+        operation::DeleteOperation::new(&data).expect("Failed to create the DeleteOperation");
+    operation::execute(&mut operation).expect("Failed to execute the operation");
+
+    // The following doesn't work because taskoo-core doesn't store the delete task ids
+
+    // let deleted_tasks = &operation.get_result();
+    // let serded_ret: String = serde_json::to_string(&deleted_tasks).unwrap();
+    // println!("serded_ret {} for delete", serded_ret);
+    // unsafe { LENGTH = serded_ret.len() }
+    // let s = CString::new(serded_ret).unwrap();
+    // Return the delete tasks back to clients
+    // return s.into_raw();
+}
diff --git a/taskoo-web/server/index.mjs b/taskoo-web/server/index.mjs
index 59e5c99..6265853 100644
--- a/taskoo-web/server/index.mjs
+++ b/taskoo-web/server/index.mjs
@@ -103,6 +103,16 @@ export class Endpoints {
     instance.exports.add(allocated.ptr, allocated.bytes.length);
   }
 
+  static Delete(input) {
+    const allocated = allocateInput(input);
+    const offset = instance.exports.delete(allocated.ptr, allocated.bytes.length);
+    const len = instance.exports.get_shared_buffer_size();
+    const buffer = new Uint8Array(instance.exports.memory.buffer, offset, len);
+    const data = new TextDecoder().decode(buffer);
+    instance.exports.free_shared_buffer(offset);
+    return data;
+  }
+
   static StateChange(input) {
     const allocated = allocateInput(input);
 
diff --git a/taskoo-web/server/server.js b/taskoo-web/server/server.js
index f42fda7..892872b 100644
--- a/taskoo-web/server/server.js
+++ b/taskoo-web/server/server.js
@@ -8,6 +8,11 @@ const app = express();
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(cors());
+app.use((req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*'); // Allow from any origin
+  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+  next();
+});
 
 const ENDPOINTS = {};
 const server = app.listen(7001, () => {
@@ -20,12 +25,17 @@ app.get('/today', (req, res) => {
 });
 
 app.post('/list', (req, res) => {
+  console.log("Taskoo server: list endpoint");
   const data = Endpoints.List(req.body.data);
+  console.log("Taskoo server: list endpoint, got data");
+  console.log(data);
   let ret;
   try {
     ret = JSON.parse(data);
+    console.log("parsed success");
   } catch(e) {
     ret = {"error": data};
+    console.log("parsed failed");
   }
   res.send(ret);
 });
@@ -33,6 +43,7 @@ app.post('/list', (req, res) => {
 app.post('/agenda', (req, res) => {
   console.log("Taskoo server: agenda endpoint");
   const data = Endpoints.Agenda(req.body.data);
+  console.log(data);
   let ret;
   try {
     ret = JSON.parse(data);
@@ -61,3 +72,8 @@ app.post('/state_change', createPost, (req, res) => {
   console.log("state_change endpoint");
   Endpoints.StateChange(req.body.data);
 });
+
+app.post('/delete', createPost, (req, res) => {
+  console.log("delete endpoint");
+  Endpoints.Delete(req.body.data);
+});
diff --git a/taskoo-web/server/taskoo_core.wasm b/taskoo-web/server/taskoo_core.wasm
index 07f3144..21efadc 100755
Binary files a/taskoo-web/server/taskoo_core.wasm and b/taskoo-web/server/taskoo_core.wasm differ
diff --git a/taskoo-web/webpack-ver/dist/index.html b/taskoo-web/webpack-ver/dist/index.html
index 6b4f1cd..01ffd81 100644
--- a/taskoo-web/webpack-ver/dist/index.html
+++ b/taskoo-web/webpack-ver/dist/index.html
@@ -1,30 +1,60 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="dark">
   <head>
      <link href='https://fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>
-     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.5.5.min.css"/>
-     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.1/css/bulma.min.css" >
      <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
+     <link rel="icon" type="image/x-icon" href="images/favicon.png">
+     <title>Taskoo - Managing Todo List</title>
   </head>
   <body>
-      <div class="tabs is-centered">
-        <ul>
-          <li class="tab-saved"><a>Saved</a></li>
-          <li class="is-active tab-today"><a>Today's Tasks</a></li>
-          <li class="tab-inbox"><a>Inbox</a></li>
-        </ul>
+      <div id="error-notification" class="notification is-danger is-hidden">
+        <button id="remove-error-message" class="delete"></button>
+        <span id="error-message"></span>
       </div>
 
-      <main>
-      </main>
+      <div class="header">
+        <span class="title">Taskoo</span>
+        <div class="tabs is-centered is-normal is-toggle">
+          <ul>
+            <li id="today-tab" class="tab-today"><a>Today's Tasks</a></li>
+            <li id="inbox-tab" class="tab-inbox"><a>Inbox</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="container">
+        <div class="is-centered" style="display: flex; margin: auto; width: fit-content">
+          <div id="input-field" class="field">
+            <div class="control has-icons-left">
+              <input id="search-input" class="input my-input" type="search" placeholder="Search...">
+              <span class="icon is-small is-left">
+                <i class="fas fa-search"></i>
+              </span>
+            </div>
+          </div>
+          <button class="button is-primary" id="add-button">Add</button>
+        </div>
+
+        <!--<figure id="add-button" class="task-button image is-48x48">-->
+          <!--<img class="is-rounded" src="images/add-button.png">-->
+        <!--</figure>-->
+      </div>
+
+      <div id="context-switches"></div>
 
-      <div id="control-buttons">
-        <figure id="" class="task-button image is-48x48">
-          <img src="images/search-button.png">
-        </figure>
-        <figure id="add-button" class="task-button image is-48x48">
-          <img class="is-rounded" src="images/add-button.png">
-        </figure>
+      <div id="main" class="is-centered">
+        <table class="table is-centeredm" id="task-table">
+            <thead>
+                <tr>
+                    <th>Id</th>
+                    <th style="width: max-width">Body</th>
+                    <th></th> <!-- Controls -->
+                </tr>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
       </div>
 
       <template id="add-modal-template">
@@ -35,13 +65,24 @@ <h4 class="title is-4">Add New Task</h4>
         </dialog>
       </template>
 
-      <template id="card-tools">
-        <div class="card-tools-container">
+      <template id="list-modal-template">
+        <dialog id="list-dialog" style="margin:auto; padding: 5px;">
+          <h4 class="title is-4">List New Task</h4>
+          <input id="list-input-body" placeholder="Task Body" style="display:block; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;">
+          <button class="button is-primary" type="submit" id="list-submit-button">Submit</button>
+        </dialog>
+      </template>
+
+      <template id="card-tools-complete">
           <img class="card-tools-complete-button card-tools-button" src="images/check-mark.png">
-          <img class="card-tools-button" src="images/delete-button.png">
-        </div>
       </template>
+
+      <template id="card-tools-delete">
+          <img class="card-tools-delete-button card-tools-button" src="images/delete-button.png">
+      </template>
+
     <script src="main.js"></script>
+    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     <!--<a href="https://www.flaticon.com/free-icons/delete" title="delete icons">Delete icons created by Kiranshastry - Flaticon</a>-->
     <!--<a href="https://www.flaticon.com/free-icons/correct" title="correct icons">Correct icons created by Freepik - Flaticon</a>-->
   </body>
diff --git a/taskoo-web/webpack-ver/package-lock.json b/taskoo-web/webpack-ver/package-lock.json
index 7ec00c3..c2845df 100644
--- a/taskoo-web/webpack-ver/package-lock.json
+++ b/taskoo-web/webpack-ver/package-lock.json
@@ -9,11 +9,13 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "bulma": "^0.9.4",
+        "bulma": "^1.0.1",
         "lodash": "^4.17.21"
       },
       "devDependencies": {
         "css-loader": "^6.7.3",
+        "html-webpack-plugin": "^5.6.0",
+        "mini-css-extract-plugin": "^2.9.1",
         "style-loader": "^3.3.1",
         "webpack": "^5.75.0",
         "webpack-cli": "^5.0.1",
@@ -180,6 +182,12 @@
         "@types/range-parser": "*"
       }
     },
+    "node_modules/@types/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
+      "dev": true
+    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.9",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.9.tgz",
@@ -574,6 +582,15 @@
         "ansi-html": "bin/ansi-html"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -659,6 +676,12 @@
         "multicast-dns": "^7.2.5"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -716,9 +739,9 @@
       "dev": true
     },
     "node_modules/bulma": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
-      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.1.tgz",
+      "integrity": "sha512-+xv/BIAEQakHkR0QVz+s+RjNqfC53Mx9ZYexyaFNFo9wx5i76HXArNdwW7bccyJxa5mgV/T5DcVGqsAB19nBJQ=="
     },
     "node_modules/bytes": {
       "version": "3.0.0",
@@ -742,6 +765,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dev": true,
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001457",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001457.tgz",
@@ -794,6 +827,18 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/clean-css": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
+      }
+    },
     "node_modules/clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -953,6 +998,34 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1038,6 +1111,80 @@
         "node": ">=6"
       }
     },
+    "node_modules/dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "dev": true,
+      "dependencies": {
+        "utila": "~0.4"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -1072,6 +1219,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/envinfo": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
@@ -1255,6 +1411,12 @@
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
+    "node_modules/fast-uri": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.2.tgz",
+      "integrity": "sha512-GR6f0hD7XXyNJa25Tb9BuIdN0tdr+0BMi6/CJPH3wJO1JjNG3n/VsSw38AwRdKZABm8lGbPfakLRkYzx2V9row==",
+      "dev": true
+    },
     "node_modules/fastest-levenshtein": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
@@ -1498,6 +1660,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "bin": {
+        "he": "bin/he"
+      }
+    },
     "node_modules/hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -1546,6 +1717,87 @@
       "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
       "dev": true
     },
+    "node_modules/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+      "dev": true,
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.10.0"
+      },
+      "bin": {
+        "html-minifier-terser": "cli.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/html-minifier-terser/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/html-webpack-plugin": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
+      "integrity": "sha512-iwaY4wzbe48AfKLZ/Cc8k0L+FKG6oSNRaZ8x5A/T/IVDGyXcbHncM9TdDa93wn0FsSm82FhTKW7f3vS61thXAw==",
+      "dev": true,
+      "dependencies": {
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/html-webpack-plugin"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.20.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -1897,6 +2149,15 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -2006,6 +2267,79 @@
         "node": ">=6"
       }
     },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.1.tgz",
+      "integrity": "sha512-+Vyi+GCCOHnrJ2VPS+6aPoXN2k2jgUzDRhTFLjjTBn23qyXJXkjUWQgTL+mXpF5/A8ixLdCc6kWsoeOjKGejKQ==",
+      "dev": true,
+      "dependencies": {
+        "schema-utils": "^4.0.0",
+        "tapable": "^2.2.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -2070,6 +2404,16 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -2106,6 +2450,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -2232,6 +2588,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dev": true,
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -2241,6 +2607,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2412,6 +2788,16 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/pretty-error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.20",
+        "renderkid": "^3.0.0"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -2544,6 +2930,28 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/renderkid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+      "dev": true,
+      "dependencies": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^6.0.1"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -3007,6 +3415,18 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-final-newline": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
@@ -3147,6 +3567,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+      "dev": true
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -3210,6 +3636,12 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
+      "dev": true
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
diff --git a/taskoo-web/webpack-ver/package.json b/taskoo-web/webpack-ver/package.json
index c0dace0..ccbedd3 100644
--- a/taskoo-web/webpack-ver/package.json
+++ b/taskoo-web/webpack-ver/package.json
@@ -12,11 +12,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "bulma": "^0.9.4",
+    "bulma": "^1.0.1",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
     "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.9.1",
     "style-loader": "^3.3.1",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
diff --git a/taskoo-web/webpack-ver/src/consts.mjs b/taskoo-web/webpack-ver/src/consts.mjs
index 67da98c..3b33b8b 100644
--- a/taskoo-web/webpack-ver/src/consts.mjs
+++ b/taskoo-web/webpack-ver/src/consts.mjs
@@ -1,4 +1,8 @@
-const SERVER_ENDPOINT = "http://100.86.23.103:7001";
+let SERVER_ENDPOINT = "http://100.86.23.103:7001";
+
+if (window.location.hostname === "taskoo.seanfeng.dev") {
+  SERVER_ENDPOINT = "";
+}
 
 const SERVER_ENDPOINT_MAPPING = {
   agenda: SERVER_ENDPOINT + "/agenda",
@@ -6,7 +10,8 @@ const SERVER_ENDPOINT_MAPPING = {
   add: SERVER_ENDPOINT + "/add",
   run: SERVER_ENDPOINT + "/run",
   today: SERVER_ENDPOINT + "/today",
-  state_change: SERVER_ENDPOINT + "/state_change"
+  state_change: SERVER_ENDPOINT + "/state_change",
+  del: SERVER_ENDPOINT + "/delete"
 };
 
 export {
diff --git a/taskoo-web/webpack-ver/src/index.js b/taskoo-web/webpack-ver/src/index.js
index 235f777..5d88c49 100644
--- a/taskoo-web/webpack-ver/src/index.js
+++ b/taskoo-web/webpack-ver/src/index.js
@@ -3,6 +3,13 @@ import './style.css';
 import {handleOperation, createTaskCard, OPERATION_TYPES} from './task_helpers.js';
 import {SERVER_ENDPOINT_MAPPING} from './consts.mjs';
 
+function resetTabItems() {
+  const tabs = document.querySelector(".tabs");
+  const tab_items = tabs.querySelectorAll("li");
+  for (const tab_item of tab_items) {
+    tab_item.classList.remove("is-active");
+  }
+}
 
 // Initialize tabs
 function InitTabs() {
@@ -10,13 +17,7 @@ function InitTabs() {
   const tab_items = tabs.querySelectorAll("li");
   for (const tab_item of tab_items) {
     tab_item.addEventListener("click", function() {
-      for (const tab_item of tab_items) {
-        tab_item.classList.remove("is-active");
-      }
       const classList = tab_item.classList;
-      if (!classList.contains("is-active")) {
-        classList.add("is-active");
-      }
 
       SwtichTab(tab_item);
     });
@@ -24,7 +25,12 @@ function InitTabs() {
 }
 
 function SwtichTab(newTab) {
-  document.querySelector("main").replaceChildren();
+  window.location.hash = `#${newTab.id}`;
+
+  resetTabItems();
+  if (!newTab.classList.contains("is-active")) {
+    newTab.classList.add("is-active");
+  }
 
   if (newTab.classList.contains("tab-today")) {
     const endpoint = SERVER_ENDPOINT_MAPPING["agenda"];
@@ -54,18 +60,34 @@ function SwtichTab(newTab) {
 
     result.then(function(data) {
       data.json().then(function(r) {
-        const inbox_data = [r[0][0], JSON.parse(r[0][1])];
-        const parsed_data = [inbox_data];
-        console.log(parsed_data);
-        handleOperation(OPERATION_TYPES.AGENDA, parsed_data);
+        handleOperation(OPERATION_TYPES.AGENDA, r);
       });
     });
   }
 }
 
+function Init() {
+  const removeErrorButton = document.getElementById("remove-error-message");
+  removeErrorButton.addEventListener("click", function() {
+    const notification = document.getElementById('error-notification');
+    notification.style.display = 'none';
+  });
+}
+
 window.onload = function() {
   InitTabs();
-  SwtichTab(document.querySelector(".tab-today"));
+  Init();
+
+  const currentHash = window.location.hash.replace('#', '');
+  console.log(currentHash);
+  if (currentHash === "today-tab" || !currentHash) {
+    console.log("switch to today tab");
+    SwtichTab(document.getElementById("today-tab"));
+  } else {
+    console.log("switch to inbox tab");
+    SwtichTab(document.getElementById("inbox-tab"));
+  }
+
 
   // Give functionalities to each button
   document.querySelector("#add-button").addEventListener("click", function() {
@@ -93,4 +115,31 @@ window.onload = function() {
       }
     })
   });
+
+  const searchInput = document.getElementById("search-input");
+  searchInput.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault(); // Prevent the default form submission behavior
+      console.log('Enter key pressed, perform search');
+      resetTabItems();
+
+      const body = searchInput.value;
+      const endpoint = SERVER_ENDPOINT_MAPPING["list"];
+      let result = fetch(endpoint, {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ "data": searchInput.value })
+      });
+
+      result.then(function(data) {
+        data.json().then(function(r) {
+          handleOperation(OPERATION_TYPES.LIST, r);
+        });
+      });
+
+      // TODO: should the result of the operation
+    }
+  });
 }
diff --git a/taskoo-web/webpack-ver/src/style.css b/taskoo-web/webpack-ver/src/style.css
index 04d5bfd..7603291 100644
--- a/taskoo-web/webpack-ver/src/style.css
+++ b/taskoo-web/webpack-ver/src/style.css
@@ -2,24 +2,30 @@ body {
     font-family: 'Noto Sans';font-size: 22px;
 }
 
-p {
-}
-
 body {
-    margin-left: 10%;
-    margin-right: 10%;
+    margin-left: 1%;
+    margin-right: 1%;
     width: auto;
 }
 
+.header {
+    width: fit-content;
+    font-size: 50px;
+}
+
 .card {
     margin-bottom: 5px;
     transition: all .2s ease-in-out;
+    display: inline;
 }
 
 .card:hover {
     transform: scale(1.05);
 }
 
+.card-content {
+    display:inherit;
+}
 .card-body {
     padding-top: 5px;
     padding-bottom: 5px;
@@ -48,10 +54,12 @@ body {
     margin-right: 0px;
     transition: all .2s ease-in-out;
     margin-right: 10px;
+    display: inline;
 }
+
 .card-tools-button:hover {
     cursor:pointer;
-    transform: scale(1.2);
+    transform: scale(2);
 }
 
 .image {
@@ -67,12 +75,58 @@ body {
     transition: all .2s ease-in-out;
     margin-right: 20px;
 }
+
 .task-button:hover {
     cursor: pointer;
     transform: scale(1.2);
 }
-@media only screen and (hover: none) and (pointer: coarse){
+
+.my-input {
+    width: 400px;
+}
+
+.my-tabs {
+    width: fit-content;
+}
+
+#task-table {
+    width: 100%;
+}
+
+.control-button {
+    margin-right: 20px;
+    cursor: pointer; /* Change the cursor to a pointer */
+}
+
+.control-button:hover {
+  transform: scale(1.5); /* Scale up the image */
+  opacity: 0.8;          /* Slightly reduce opacity */
+}
+
+.control-button:hover {
+}
+
+#error-notification {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 600px;
+    z-index: 1000;
+    display: block;
+}
+
+#input-field {
+    margin-bottom: 0px;
+}
+
+@media only screen and (max-width: 600px) {
     body {
-        margin: auto;
+        font-family: 'Noto Sans';font-size: 16px;
+    }
+    #input-field {
+        width: 300px;
+        margin-bottom: 0px;
     }
 }
diff --git a/taskoo-web/webpack-ver/src/task_helpers.js b/taskoo-web/webpack-ver/src/task_helpers.js
index 9283100..eec9e74 100644
--- a/taskoo-web/webpack-ver/src/task_helpers.js
+++ b/taskoo-web/webpack-ver/src/task_helpers.js
@@ -2,61 +2,44 @@ import {SERVER_ENDPOINT_MAPPING} from './consts.mjs';
 
 export const OPERATION_TYPES = { AGENDA : "AGENDA", LIST: "LIST" };
 
-export function createTaskCard(taskBody) {
-  const task = document.createElement("div");
-  task.classList.add("card");
-
-  const contentContainer = document.createElement("div");
-  contentContainer.classList.add("card-content");
-  contentContainer.classList.add("p-0");
-  contentContainer.classList.add("pl-4");
-  contentContainer.classList.add("pr-4");
-  task.appendChild(contentContainer);
-
-  const content = document.createElement("div");
-  content.classList.add("card-body");
-  content.classList.add("is-size-6");
-
-  content.innerHTML = taskBody;
-
-  contentContainer.appendChild(content);
-
-  const tools = document.getElementById("card-tools").content.cloneNode(true);
-  contentContainer.appendChild(tools);
-
-  // Add event handlers to those card-tools-button
-  contentContainer.querySelector(".card-tools-complete-button").addEventListener("click", function() {
-    const endpoint = SERVER_ENDPOINT_MAPPING["state_change"];
-    let result = fetch(endpoint, {
-      method: "POST",
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ "data": "316 @complete" })
-    });
-
-  });
-  task.appendChild(contentContainer);
-  return task;
+function showError(message) {
+    const notification = document.getElementById('error-notification');
+    const errorMessage = document.getElementById('error-message');
+    errorMessage.textContent = message;
+    notification.classList.remove("is-hidden");
 }
 
+function resetAllContextSwitches() {
+  const container = document.getElementById("context-switches");
+  const contextSwitches = container.querySelectorAll("li");
+  for (const context of contextSwitches) {
+    context.classList.remove("is-active");
+  }
+}
 function createContextNavBar(context) {
   const nav = document.createElement("nav");
   nav.classList.add("breadcrumb");
   nav.classList.add("is-centered");
-  nav.classList.add("has-bullet-separator");
   nav.classList.add("is-medium");
+  nav.classList.add("is-toggle");
+  nav.classList.add("is-large");
 
   const ul = document.createElement("ul");
 
   context.forEach((c) => {
     const li = document.createElement("li");
     const a = document.createElement("a");
-    a.innerHTML = c;
-    a.classList.add("pr-0");
+    a.innerHTML = `
+        <span class="icon is-small">
+          <i class="fas fa-book" aria-hidden="true"></i>
+        </span>
+        <span>${c}</span>
+    `;
+    a.classList.add("pr-10");
 
     a.addEventListener("click", function() {
-      handleContextSwitch(a.innerHTML);
+      resetAllContextSwitches();
+      handleContextSwitch(li, c);
     });
 
     li.appendChild(a);
@@ -68,7 +51,10 @@ function createContextNavBar(context) {
   return nav;
 }
 
-function handleContextSwitch(context) {
+function handleContextSwitch(listItem, context) {
+  if (listItem) {
+    listItem.classList.add("is-active");
+  }
   // Clear out existing tasks from the previous context
   let tasksContainer = document.getElementById("tasks");
   if (tasksContainer) {
@@ -81,20 +67,83 @@ function handleContextSwitch(context) {
   // let tasksForContext = JSON.parse(taskCache[context]);
   let tasksForContext = taskCache[context];
   console.log(tasksForContext);
+  const taskTable = document.getElementById("task-table").getElementsByTagName('tbody')[0];
+  taskTable.replaceChildren();
   for (let task of tasksForContext) {
     // Completed tasks are not displayed
     // TODO: Allow users to toggle this
     if (task.state != "completed") {
-      tasksContainer.appendChild(createTaskCard(task.body));
+      const row = taskTable.insertRow();
+      const idCell = row.insertCell(0);
+      const bodyCell = row.insertCell(1);
+      const controlCell = row.insertCell(2);
+
+      function createTags(tags) {
+        let ret = '';
+        for (const tag of tags) {
+          const tagHTML = `<span class="tag is-info is-medium">${tag}</span> `;
+          ret += tagHTML;
+        }
+        return ret;
+      }
+
+      idCell.textContent = task.id;
+      bodyCell.innerHTML = `
+        <div>${task.body}</div>
+        <span class="tag is-warning is-medium">${task.state}</span>
+        ${createTags(task.tags)}
+      `;
+
+      if (task.date_scheduled) {
+        bodyCell.innerHTML += `<span class="tag is-warning is-medium">sch: ${task.date_scheduled}</span> `;
+      }
+
+      if (task.date_due) {
+        bodyCell.innerHTML += `<span class="tag is-warning is-medium">due: ${task.date_due}</span>`;
+      }
+
+      if (task.repetition_due) {
+        bodyCell.innerHTML += `<span class="tag is-warning is-medium">rep_due: ${task.repetition_due}</span>`;
+      }
+
+      if (task.repetition_scheduled) {
+        bodyCell.innerHTML += `<span class="tag is-warning is-medium">rep_due: ${task.repetition_scheduled}</span>`;
+      }
+
+      // Controls
+      controlCell.innerHTML = `
+        <span class="icon is-small control-button" id="info-button">
+          <i class="fas fa-book" aria-hidden="true"></i>
+        </span>
+        <span class="icon is-small control-button" id="check-button">
+          <i class="fas fa-check" aria-hidden="true"></i>
+        </span>
+        <span class="icon is-small control-button" id="delete-button">
+          <i class="fas fa-trash" aria-hidden="true"></i>
+        </span>
+      `;
+
+      const deleteButton = controlCell.querySelector("#delete-button");
+      deleteButton.addEventListener("click", function() {
+        const endpoint = SERVER_ENDPOINT_MAPPING["del"];
+        let result = fetch(endpoint, {
+          method: "POST",
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ "data": task.id })
+        });
+
+        row.remove();
+      });
     }
   }
-
-  document.querySelector("main").appendChild(tasksContainer);
 }
 
 var taskCache = {};
 
 function handleTasks(tasksWithContext) {
+  console.log("handleTasks");
   taskCache = {};
 
   // Get the returned context
@@ -102,7 +151,7 @@ function handleTasks(tasksWithContext) {
   tasksWithContext.forEach(function(element) {
     const c = element[0];
     const tasksForContext = element[1];
-    if (element[0] !== "") {
+    if (element[0] !== "" && tasksForContext.length) {
       context.push(c);
       taskCache[c] = tasksForContext;
     }
@@ -110,10 +159,12 @@ function handleTasks(tasksWithContext) {
 
   // Add the breadcrumb bar
   const nav = createContextNavBar(context);
-  document.querySelector("main").prepend(nav);
+  const contextSwitches = document.getElementById("context-switches");
+  contextSwitches.replaceChildren();
+  contextSwitches.appendChild(nav);
 
   // Switch to the first context by default
-  handleContextSwitch(context[0]);
+  handleContextSwitch(undefined, context[0]);
 }
 
 /*
diff --git a/taskoo-web/webpack-ver/webpack.config.js b/taskoo-web/webpack-ver/webpack.config.js
index fa4c6b7..0ef7b23 100644
--- a/taskoo-web/webpack-ver/webpack.config.js
+++ b/taskoo-web/webpack-ver/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   mode: 'development',
@@ -10,6 +11,17 @@ module.exports = {
   devServer: {
     static: './dist',
     port: 4141,
+    allowedHosts: ['.seanfeng.dev'],
+    headers : {
+      'X-Forwarded-Proto': 'https'
+    },
+    proxy: {
+      '/api': {
+        target: 'http://100.86.23.103:4141',
+        changeOrigin: true, // If needed, change the origin of the host header
+        secure: false // If you're proxying to HTTP, ensure this is set to false
+      }
+    }
   },
   module: {
     rules: [