diff --git a/common/ui/ItemWithRemove.jsx b/common/ui/ItemWithRemove.jsx
new file mode 100644
index 0000000..b0dc35f
--- /dev/null
+++ b/common/ui/ItemWithRemove.jsx
@@ -0,0 +1,39 @@
+import { TouchableOpacity, Text, Image, View } from "@vendetta/ui/components/General";
+import { createThemedStyleSheet } from "@vendetta/metro/common/stylesheet";
+import { semanticColors } from "@vendetta/ui";
+
+const stylesheet = createThemedStyleSheet({
+	container: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	image: {
+		marginLeft: 5,
+		marginRight: 5,
+		width: 25,
+		height: 25,
+		borderRadius: 100,
+	},
+	label: {
+		color: semanticColors.HEADER_PRIMARY,
+	},
+	labelRemove: {
+		color: semanticColors.TEXT_WARNING,
+	},
+});
+
+export default ({ imageSource, onImagePress, label, labelRemove = "REMOVE", onRemove }) => {
+	return (
+		<>
+			<View style={stylesheet.container}>
+				<TouchableOpacity onPress={onRemove}>
+					<Text style={stylesheet.labelRemove}>{labelRemove}</Text>
+				</TouchableOpacity>
+				<TouchableOpacity onPress={onImagePress}>
+					<Image style={[stylesheet.image]} source={imageSource} />
+				</TouchableOpacity>
+				<Text style={stylesheet.label}>{label}</Text>
+			</View>
+		</>
+	);
+};