diff --git a/app/classes/component.php b/app/classes/component.php
index 7317381..88e78bf 100644
--- a/app/classes/component.php
+++ b/app/classes/component.php
@@ -9,7 +9,7 @@ class Component {
 
 
     // list of component events
-    public function jitsiComponents($jitsi_component, $component_id, $from_time, $until_time, $offset=0, $items_per_page='') {
+    public function jitsiComponents($jitsi_component, $component_id, $event_type, $from_time, $until_time, $offset=0, $items_per_page='') {
 
         // time period drill-down
         // FIXME make it similar to the bash version
@@ -31,7 +31,13 @@ FROM
 WHERE
     jitsi_component = %s
 AND
-    component_id = %s
+    component_id = %s";
+        if ($event_type != '' && $event_type != 'event_type') {
+            $sql .= "
+AND
+    event_type LIKE '%%%s%%'";
+        }
+        $sql .= "
 AND
     (time >= '%s 00:00:00' AND time <= '%s 23:59:59')
 ORDER BY
@@ -42,7 +48,14 @@ ORDER BY
             $sql .= ' LIMIT ' . $offset . ',' . $items_per_page;
         }
 
-        $sql = sprintf($sql, $jitsi_component, $component_id, $from_time, $until_time);
+        // FIXME this needs to be done with bound params instead of sprintf
+        if ($event_type != '' && $event_type != 'event_type') {
+            $sql = sprintf($sql, $jitsi_component, $component_id, $event_type, $from_time, $until_time);
+            $sql = str_replace("LIKE '%'", "LIKE '%", $sql);
+            $sql = str_replace("'%'\nAND", "%' AND", $sql);
+        } else {
+            $sql = sprintf($sql, $jitsi_component, $component_id, $from_time, $until_time);
+        }
 
         $query = $this->db->prepare($sql);
         $query->execute();
diff --git a/app/helpers/pagination.php b/app/helpers/pagination.php
index c48b3eb..7445ba5 100644
--- a/app/helpers/pagination.php
+++ b/app/helpers/pagination.php
@@ -3,14 +3,17 @@
                             <div class="pagination">
 <?php
     $param = '';
-    if (isset($_GET['id'])) {
-        $param .= '&id=' . $_GET['id'];
+    if (isset($_REQUEST['id'])) {
+        $param .= '&id=' . $_REQUEST['id'];
     }
-    if (isset($_GET['name'])) {
-        $param .= '&name=' . $_GET['name'];
+    if (isset($_REQUEST['name'])) {
+        $param .= '&name=' . $_REQUEST['name'];
     }
-    if (isset($_GET['ip'])) {
-        $param .= '&ip=' . $_GET['ip'];
+    if (isset($_REQUEST['ip'])) {
+        $param .= '&ip=' . $_REQUEST['ip'];
+    }
+    if (isset($_REQUEST['event'])) {
+        $param .= '&event=' . $_REQUEST['event'];
     }
     if ($browse_page > 1) {
         echo '<span><a href="' . $url . '&p=1">first</a></span>';
diff --git a/app/pages/components.php b/app/pages/components.php
index 848289a..5bddeb2 100644
--- a/app/pages/components.php
+++ b/app/pages/components.php
@@ -10,17 +10,10 @@ include '../app/helpers/time_range.php';
 
 // jitsi component events list
 // we use $_REQUEST, so that both links and forms work
-if (isset($_REQUEST['name']) && $_REQUEST['name'] != '') {
-    $jitsi_component = "'" . $_REQUEST['name'] . "'";
-    $component_id = 'component_id';
-} elseif (isset($_REQUEST['id']) && $_REQUEST['id'] != '') {
-    $component_id = "'" . $_REQUEST['id'] . "'";
-    $jitsi_component = 'jitsi_component';
-} else {
-    // we need the variables to use them later in sql for columnname = columnname
-    $jitsi_component = 'jitsi_component';
-    $component_id = 'component_id';
-}
+// if it's there, but empty, we make it same as the field name; otherwise assign the value
+$jitsi_component = !empty($_REQUEST['name']) ? "'" . $_REQUEST['name'] . "'" : 'jitsi_component';
+$component_id = !empty($_REQUEST['id']) ? "'" . $_REQUEST['id'] . "'" : 'component_id';
+$event_type = !empty($_REQUEST['event']) ? "'" . $_REQUEST['event'] . "'" : 'event_type';
 
 
 //
@@ -38,8 +31,8 @@ $browse_page = (int)$browse_page;
 $offset = ($browse_page -1) * $items_per_page;
 
 // prepare the result
-$search = $componentObject->jitsiComponents($jitsi_component, $component_id, $from_time, $until_time, $offset, $items_per_page);
-$search_all = $componentObject->jitsiComponents($jitsi_component, $component_id, $from_time, $until_time);
+$search = $componentObject->jitsiComponents($jitsi_component, $component_id, $event_type, $from_time, $until_time, $offset, $items_per_page);
+$search_all = $componentObject->jitsiComponents($jitsi_component, $component_id, $event_type, $from_time, $until_time);
 
 if (!empty($search)) {
     // we get total items and number of pages
@@ -68,8 +61,6 @@ if (!empty($search)) {
 // prepare the widget
 $widget['full'] = false;
 $widget['name'] = 'AllComponents';
-$widget['collapsible'] = false;
-$widget['collapsed'] = false;
 $widget['filter'] = true;
 $widget['pagination'] = true;
 
@@ -89,6 +80,6 @@ if (!empty($components['records'])) {
 }
 
 // display the widget
-include '../app/templates/widget.php';
+include '../app/templates/event-list-components.php';
 
 ?>
diff --git a/app/templates/event-list-components.php b/app/templates/event-list-components.php
new file mode 100644
index 0000000..6416189
--- /dev/null
+++ b/app/templates/event-list-components.php
@@ -0,0 +1,76 @@
+
+                <div class="row">
+                    <div class="card w-auto bg-light border-light card-body"  style="flex-direction: row;"><?= $widget['title'] ?></div>
+
+                    <!-- Results filter -->
+                    <div class="card w-auto bg-light border-light card-body text-right" style="text-align: right;">
+                        <form method="POST" id="filter_form" action="?platform=<?= $platform_id?>&page=<?= $page ?>">
+                            <label for="from_time">from</label>
+                            <input type="date" id="from_time" name="from_time"<?php if (isset($_REQUEST['from_time'])) echo " value=\"" . $_REQUEST['from_time'] . "\"" ?> />
+                            <label for="until_time">until</label>
+                            <input type="date" id="until_time" name="until_time"<?php if (isset($_REQUEST['until_time'])) echo " value=\"" . $_REQUEST['until_time'] . "\"" ?> />
+                            <input type="text" name="id" placeholder="component ID"<?php if (isset($_REQUEST['id'])) echo " value=\"" . $_REQUEST['id'] . "\"" ?> />
+                            <input type="text" name="name" placeholder="component name"<?php if (isset($_REQUEST['name'])) echo " value=\"" . $_REQUEST['name'] . "\"" ?> />
+                            <input type="text" name="event" placeholder="event name"<?php if (isset($_REQUEST['event'])) echo " value=\"" . $_REQUEST['event'] . "\"" ?> />
+                            <input type="button" onclick="clearFilter()" value="clear" />
+                            <input type="submit" value="search" />
+                        </form>
+                        <script>
+                            function clearFilter() {
+                                document.getElementById("filter_form").reset();
+                                const filterFields = document.querySelectorAll("#filter_form input");
+                                filterFields.forEach(input => {
+                                    if (input.type === 'text' ||input.type === 'date') {
+                                        input.value = '';
+                                    }
+                                });
+                            }
+                        </script>
+                    </div>
+                    <!-- /Results filter -->
+
+                </div>
+
+                <!-- widget "<?= $widget['name']; ?>" -->
+                <div class="collapse show" id="collapse<?= $widget['name'] ?>">
+<?php if ($time_range_specified) { ?>
+                    <p class="m-3">time period: <strong><?= $from_time ?> - <?= $until_time ?></strong></p>
+<?php } ?>
+                    <div class="mb-5">
+<?php if ($widget['full'] === true) { ?>
+                        <table class="table table-striped table-hover table-bordered">
+                            <thead class="thead-dark">
+                                <tr>
+<?php     foreach ($widget['table_headers'] as $header) { ?>
+                                    <th scope="col"><?= htmlspecialchars($header) ?></th>
+<?php     } ?>
+                                </tr>
+                            </thead>
+                            <tbody>
+<?php     foreach ($widget['table_records'] as $row) { ?>
+                                <tr>
+<?php        foreach ($row as $key => $column) { ?>
+<?php               if ($key === 'component ID') { ?>
+                                    <td><a href="<?= $app_root ?>?platform=<?= $platform_id?>&page=components&id=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
+<?php               } elseif ($key === 'component') { ?>
+                                    <td><a href="<?= $app_root ?>?platform=<?= $platform_id?>&page=components&name=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
+<?php               } else { ?>
+                                    <td><?= htmlspecialchars($column ?? '') ?></td>
+<?php               }
+                } ?>
+                                </tr>
+<?php     } ?>
+                            </tbody>
+                        </table>
+<?php
+if ($widget['pagination'] && $item_count > $items_per_page) {
+    $url = "$app_root?platform=$platform_id&page=$page";
+    include '../app/helpers/pagination.php';
+}
+?>
+<?php } else { ?>
+                    <p class="m-3">No matching records found.</p>
+<?php } ?>
+                    </div>
+                </div>
+                <!-- /widget "<?= $widget['name']; ?>" -->