diff --git a/sandbox/ListItems.qml b/sandbox/ListItems.qml
new file mode 100644
index 00000000..be94da08
--- /dev/null
+++ b/sandbox/ListItems.qml
@@ -0,0 +1,129 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusListItem {
+        title: "Title"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+    }
+
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusButton {
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+        }]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusSwitch {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusRadioButton {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusCheckBox {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+            StatusButton {
+                text: "Button"
+                size: StatusBaseButton.Size.Small
+            }
+        ]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [StatusSwitch {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+          StatusRadioButton {}
+        ]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [StatusCheckBox {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+            StatusBadge {
+                value: 1
+            },
+            StatusIcon {
+                icon: "info"
+                color: Theme.palette.baseColor1
+                width: 20
+                height: 20
+            }
+        ]
+    }
+}
diff --git a/sandbox/main.qml b/sandbox/main.qml
index fe2fd26f..d758ad76 100644
--- a/sandbox/main.qml
+++ b/sandbox/main.qml
@@ -46,6 +46,11 @@ StatusWindow {
             checkable: true
             text: "Controls"
         }
+        Button {
+            id: listItemsTab
+            checkable: true
+            text: "List Items"
+        }
         Button {
             id: layoutTab
             checkable: true
@@ -96,6 +101,8 @@ StatusWindow {
                         return iconsComponent;
                     case controlsTab:
                         return controlsComponent;
+                    case listItemsTab:
+                        return listItemsComponent;
                     case layoutTab:
                         return layoutComponent;
                     case otherTab:
@@ -180,6 +187,13 @@ StatusWindow {
         }
     }
 
+    Component {
+        id: listItemsComponent
+        ListItems {
+            anchors.centerIn: parent
+        }
+    }
+
     Component {
         id: layoutComponent
         Layout {
diff --git a/src/StatusQ/Components/StatusListItem.qml b/src/StatusQ/Components/StatusListItem.qml
new file mode 100644
index 00000000..739e3753
--- /dev/null
+++ b/src/StatusQ/Components/StatusListItem.qml
@@ -0,0 +1,109 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusListItem
+
+    implicitWidth: 448
+    implicitHeight: 64
+
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
+    radius: 8
+
+    property string title: ""
+    property string subTitle: ""
+    property StatusIconSettings icon: StatusIconSettings {
+        height: 20
+        width: 20
+    }
+    property StatusImageSettings image: StatusImageSettings {}
+    property string label: ""
+
+    property list<Item> components
+
+    onComponentsChanged: {
+        if (components.length) {
+            for (let idx in components) {
+                components[idx].parent = statusListItemComponentsSlot
+            }
+        }
+    }
+
+    MouseArea {
+        id: sensor
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor 
+        hoverEnabled: true
+
+        Loader {
+            id: iconOrImage
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
+            active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
+        }
+
+        Component {
+            id: statusRoundedIcon
+            StatusRoundIcon {
+                icon: statusListItem.icon
+            }
+        }
+
+        Component {
+            id: statusRoundedImage
+            StatusRoundedImage {
+                image.source: statusListItem.image.source
+            }
+        }
+
+        Item {
+            anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
+            anchors.leftMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0)
+
+            StatusBaseText {
+                id: statusListItemTitle
+                text: statusListItem.title
+                font.pixelSize: 15
+                color: Theme.palette.directColor1
+            }
+
+            StatusBaseText {
+                id: statusListItemSubTitle
+                anchors.top: statusListItemTitle.bottom
+
+                text: statusListItem.subTitle
+                font.pixelSize: 15
+                color: Theme.palette.baseColor1
+                visible: !!statusListItem.subTitle
+            }
+        }
+
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: statusListItemComponentsSlot.left
+            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
+
+            text: statusListItem.label
+            font.pixelSize: 15
+            color: Theme.palette.baseColor1
+            visible: !!statusListItem.label
+        }
+
+
+        Row {
+            id: statusListItemComponentsSlot
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 10
+        }
+    }
+}
diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir
index e583d8cd..60654f54 100644
--- a/src/StatusQ/Components/qmldir
+++ b/src/StatusQ/Components/qmldir
@@ -2,6 +2,7 @@ module StatusQ.Components
 
 StatusBadge 0.1 StatusBadge.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
+StatusListItem 0.1 StatusListItem.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
diff --git a/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/src/StatusQ/Core/Theme/StatusDarkTheme.qml
index 0ec738af..083cc4ab 100644
--- a/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ b/src/StatusQ/Core/Theme/StatusDarkTheme.qml
@@ -121,6 +121,10 @@ ThemePalette {
         property color backgroundColor: baseColor5
     }
 
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor: baseColor3
     }
diff --git a/src/StatusQ/Core/Theme/StatusLightTheme.qml b/src/StatusQ/Core/Theme/StatusLightTheme.qml
index 9ece9d78..e994c718 100644
--- a/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ b/src/StatusQ/Core/Theme/StatusLightTheme.qml
@@ -121,6 +121,10 @@ ThemePalette {
         property color backgroundColor: baseColor4
     }
 
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor: white
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor: white
     }
diff --git a/src/StatusQ/Core/Theme/ThemePalette.qml b/src/StatusQ/Core/Theme/ThemePalette.qml
index 5c02d041..3f220a02 100644
--- a/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/src/StatusQ/Core/Theme/ThemePalette.qml
@@ -82,6 +82,10 @@ QtObject {
         property color backgroundColor
     }
 
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor
     }