diff --git a/webclient/src/scss/ui_components/_cards.scss b/webclient/src/scss/ui_components/_cards.scss
index d82500b..ef43c9d 100644
--- a/webclient/src/scss/ui_components/_cards.scss
+++ b/webclient/src/scss/ui_components/_cards.scss
@@ -26,4 +26,119 @@
 		padding: $space-2 $space-4;
 		padding-bottom: $space-4;
 	}
+
+	&.device-action {
+		max-width: 200px;
+
+		transition-duration: .2s;
+		transition-property: border-color;
+
+		.device-icon-container {
+			position: relative;
+
+			.device-online-status {
+				position: absolute;
+		    top: -15px;
+    		left: -5px;
+		
+				font-size: 24px;
+				color: $color-error;
+
+				&.status-online {
+					color: $color-success;
+				}
+			}
+
+			.device-icon {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+    		justify-content: center;
+				
+				font-size: 54px;
+				height: 80px;
+				width: 100%;
+
+				transition-duration: .2s;
+				transition-property: color;
+			}
+		}
+
+		.card-title {
+			display: flex;
+			width: 100%;
+			font-size: $font-size-md;
+			font-weight: $font-weight-bold;
+
+			transition-duration: .2s;
+			transition-property: background-color, color;
+		}
+
+		.device-name {
+			font-size: $font-size-md;
+			line-height: $line-height-normal;
+		}
+
+		&.card-success {
+			border-color: $color-success;
+
+			.card-title {
+				background: $color-success;
+			}
+
+			.device-icon {
+				color: $color-success;
+			}
+		}
+
+		&.card-warning {
+			border-color: $color-warning;
+
+			.card-title {
+				background: $color-warning;
+			}
+
+			.device-icon {
+				color: $color-warning;
+			}
+		}
+
+		&.card-info {
+			border-color: $color-info;
+
+			.card-title {
+				background: $color-info;
+				color: $color-text-light;
+			}
+
+			.device-icon {
+				color: $color-info;
+			}
+		}
+
+		&.card-secondary {
+			border-color: $color-secondary;
+
+			.card-title {
+				background: $color-secondary;
+				color: $color-text-light;
+			}
+
+			.device-icon {
+				color: $color-secondary;
+			}
+		}
+
+		&.card-danger, &.card-error {
+			border-color: $color-error;
+
+			.card-title {
+				background: $color-error;
+			}
+
+			.device-icon {
+				color: $color-error;
+			}
+		}
+	}
 }
diff --git a/webclient/ui_components/cards.php b/webclient/ui_components/cards.php
index 1e9c0ce..36b31ee 100644
--- a/webclient/ui_components/cards.php
+++ b/webclient/ui_components/cards.php
@@ -19,4 +19,98 @@
 			</div>
 		</div>
 	</div>
+
+	<div class="block mt-6">
+		<div class="row g-4">
+			<div class="card device-action card-success">
+				<span class="card-title">Device alias</span>
+
+				<div class="card-content">
+					<div class="device-icon-container">
+						<div class="device-online-status status-online">•</div>
+						<div class="device-icon">
+							<i class="ph ph-power"></i> ON
+						</div>
+					</div>
+
+					<p class="device-name">Device display name. Maby letters, many words</p>
+				</div>
+			</div>
+
+			<div class="card device-action card-primary">
+				<span class="card-title">Device alias</span>
+
+				<div class="card-content">
+					<div class="device-icon-container">
+						<div class="device-online-status status-online">•</div>
+						<div class="device-icon">
+							<i class="ph ph-power"></i>
+						</div>
+					</div>
+
+					<p class="device-name">Device display name. Maby letters, many words</p>
+				</div>
+			</div>
+
+			<div class="card device-action card-warning">
+				<span class="card-title">device_alias</span>
+
+				<div class="card-content">
+					<div class="device-icon-container">
+						<div class="device-online-status">•</div>
+						<div class="device-icon">
+							<i class="ph ph-power"></i> OFF
+						</div>
+					</div>
+
+					<p class="device-name">Device display name. Maby letters, many words</p>
+				</div>
+			</div>
+
+			<div class="card device-action card-error">
+				<span class="card-title">device_alias</span>
+
+				<div class="card-content">
+					<div class="device-icon-container">
+						<div class="device-online-status status-online">•</div>
+						<div class="device-icon">
+							<i class="ph ph-power"></i> OFF
+						</div>
+					</div>
+
+					<p class="device-name">Device display name. Maby letters, many words</p>
+				</div>
+			</div>
+
+			<div class="card device-action card-info">
+				<span class="card-title">device_alias</span>
+
+				<div class="card-content">
+					<div class="device-icon-container">
+						<div class="device-online-status status-online">•</div>
+						<div class="device-icon">
+							<i class="ph ph-power"></i> OFF
+						</div>
+					</div>
+
+					<p class="device-name">Device display name. Maby letters, many words</p>
+				</div>
+			</div>
+
+			<div class="card device-action card-secondary">
+				<span class="card-title">device_alias</span>
+
+				<div class="card-content">
+					<div class="device-icon-container">
+						<div class="device-online-status status-online">•</div>
+						<div class="device-icon">
+							<i class="ph ph-power"></i> OFF
+						</div>
+					</div>
+
+					<p class="device-name">Device display name. Maby letters, many words</p>
+				</div>
+			</div>
+		</div>
+	</div>
 </section>