diff --git a/CHANGELOG.md b/CHANGELOG.md
index b08c749b..da41817a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,8 @@
 ## unreleased
 
  - Fix small display issue on cards without a title.
+ - New component: [`tracking`](https://sql.ophir.dev/documentation.sql?component=tracking#component) for beautiful and compact status reports.
+ - New component: [`divider`](https://sql.ophir.dev/documentation.sql?component=divider#component) to add a horizontal line between other components.
 
 ## 0.17.1 (2023-12-10)
 
diff --git a/examples/official-site/sqlpage/migrations/28_tracking_component.sql b/examples/official-site/sqlpage/migrations/28_tracking_component.sql
new file mode 100644
index 00000000..d1088c56
--- /dev/null
+++ b/examples/official-site/sqlpage/migrations/28_tracking_component.sql
@@ -0,0 +1,119 @@
+INSERT INTO component (name, description, icon, introduced_in_version)
+VALUES (
+        'tracking',
+        'Component for visualising activity logs or other monitoring-related data.',
+        'timeline-event-text',
+        '0.18.0'
+    );
+
+INSERT INTO parameter (
+        component,
+        name,
+        description,
+        type,
+        top_level,
+        optional
+    )
+VALUES (
+        'tracking',
+        'title',
+        'Title of the tracking component.',
+        'TEXT',
+        TRUE,
+        FALSE
+    ),
+    (
+        'tracking',
+        'information',
+        'A short text displayed below the title.',
+        'TEXT',
+        TRUE,
+        TRUE
+    ),
+    (
+        'tracking',
+        'description',
+        'A short paragraph.',
+        'TEXT',
+        TRUE,
+        TRUE
+    ),
+    (
+        'tracking',
+        'description_md',
+        'A short paragraph formatted using markdown.',
+        'TEXT',
+        TRUE,
+        TRUE
+    ),
+    (
+        'tracking',
+        'width',
+        'Width of the component, between 1 and 12.',
+        'NUMBER',
+        TRUE,
+        TRUE
+    ),
+    (
+        'tracking',
+        'placement',
+        'Position of the tooltip (e.g. top, bottom, right, left)',
+        'TEXT',
+        TRUE,
+        TRUE
+    ),
+    (
+        'tracking',
+        'color',
+        'Color of the tracked item (e.g. success, warning, danger)',
+        'TEXT',
+        FALSE,
+        TRUE
+    ),
+    (
+        'tracking',
+        'title',
+        'Description of the state.',
+        'TEXT',
+        FALSE,
+        FALSE
+    );
+-- Insert example(s) for the component
+INSERT INTO example(component, description, properties)
+VALUES
+    (
+        'tracking', 
+        'A basic example of servers tracking component', 
+            JSON(
+                '[
+                {"component":"tracking","title":"Servers status"},
+                {"title":"No data"},
+                {"title":"No data"},
+                {"title":"No data"},
+                {"title":"No data"},
+                {"title":"No data"},
+                {"title":"No data"},
+                {"title":"No data"},
+                {"title":"No data"}
+                ]'
+            )
+    ),      
+    (
+        'tracking', 
+        'An example of servers tracking component', 
+            JSON(
+                '[
+                {"component":"tracking","title":"Servers status","information":"60% are running","description_md":"Status of all **currently running servers**","placement":"top","width":4},
+                {"color":"success","title":"operational"},
+                {"color":"success","title":"operational"},
+                {"color":"success","title":"operational"},
+                {"color":"danger","title":"Downtime"},
+                {"title":"No data"},
+                {"color":"success","title":"operational"},
+                {"color":"warning","title":"Big load"},
+                {"color":"success","title":"operational"}
+                ]'
+            )
+    );
+
+
diff --git a/examples/official-site/sqlpage/migrations/29_divider_component.sql b/examples/official-site/sqlpage/migrations/29_divider_component.sql
new file mode 100644
index 00000000..82402e6a
--- /dev/null
+++ b/examples/official-site/sqlpage/migrations/29_divider_component.sql
@@ -0,0 +1,93 @@
+INSERT INTO component (name, description, icon, introduced_in_version)
+VALUES (
+        'divider',
+        'Dividers help organize content and make the interface layout clear and uncluttered.',
+        'separator',
+        '0.18.0'
+    );
+
+INSERT INTO parameter (
+        component,
+        name,
+        description,
+        type,
+        top_level,
+        optional
+    )
+VALUES (
+        'divider',
+        'contents',
+        'A text in the divider.',
+        'TEXT',
+        TRUE,
+        TRUE
+    ),
+    (
+        'divider',
+        'position',
+        'Position of the text (e.g. left, right).',
+        'TEXT',
+        TRUE,
+        TRUE
+    ),
+    (
+        'divider',
+        'color',
+        'The name of a color for this span of text.',
+        'COLOR',
+        TRUE,
+        TRUE
+    );
+-- Insert example(s) for the component
+INSERT INTO example(component, description, properties)
+VALUES      
+    (
+        'divider', 
+        'A divider with centered text', 
+            JSON(
+                '[
+                    {
+                        "component":"divider",
+                        "contents":"Hello"
+                    }
+                ]'
+            )
+    ),
+    (
+        'divider', 
+        'An empty divider', 
+            JSON(
+                '[
+                    {
+                        "component":"divider"
+                    }
+                ]'
+            )
+    ),
+    (
+        'divider', 
+        'A divider with text at left', 
+            JSON(
+                '[
+                    {
+                        "component":"divider",
+                        "contents":"Hello",
+                        "position":"left"
+                    }
+                ]'
+            )
+    ),
+    (
+        'divider', 
+        'A divider with blue text at right', 
+            JSON(
+                '[
+                    {
+                        "component":"divider",
+                        "contents":"Hello",
+                        "position":"right",
+                        "color":"blue"
+                    }
+                ]'
+            )
+    );
\ No newline at end of file
diff --git a/sqlpage/templates/divider.handlebars b/sqlpage/templates/divider.handlebars
new file mode 100644
index 00000000..72383e74
--- /dev/null
+++ b/sqlpage/templates/divider.handlebars
@@ -0,0 +1,5 @@
+{{#if contents}}
+    <div class="hr-text {{#if position}}hr-text-{{position}}{{/if}} {{#if color}}text-{{color}}{{/if}}">{{contents}}</div>
+{{else}}
+    <hr />
+{{/if}}
\ No newline at end of file
diff --git a/sqlpage/templates/tracking.handlebars b/sqlpage/templates/tracking.handlebars
new file mode 100644
index 00000000..ca26866b
--- /dev/null
+++ b/sqlpage/templates/tracking.handlebars
@@ -0,0 +1,29 @@
+
+
+<div class="card my-2 col-md-{{default width 12}}">
+	<div class="card-body">
+		<div class="d-flex align-items-center">
+			<div class="subheader">{{title}}</div>
+		</div>
+		<div class="d-flex align-items-baseline remove-bottom-margin">
+			<div class="h1 mb-3 me-2">{{#if information}}{{information}}{{/if}}</div>
+		</div>
+		<div class="d-flex align-items-baseline">
+			<div class="mb-2 me-2 remove-bottom-margin">
+				{{#if description_md}}
+					{{{markdown description_md}}}
+				{{else}}
+					{{#if description}}{{description}}{{/if}}
+				{{/if}}
+			</div>
+		</div>
+		<div class="mt-2">
+			<div class="tracking">
+				{{#each_row}}
+					<div class="tracking-block{{#if color}} bg-{{color}}{{/if}}" data-bs-toggle="tooltip" data-bs-placement="{{default ../placement "top"}}" title="{{title}}"></div>
+				{{/each_row}}
+			</div>
+		</div>
+	</div>
+</div>
+