diff --git a/src/components/LeftPanel/TypeListItem.tsx b/src/components/LeftPanel/TypeListItem.tsx
new file mode 100644
index 0000000..3c5d6a8
--- /dev/null
+++ b/src/components/LeftPanel/TypeListItem.tsx
@@ -0,0 +1,38 @@
+import { useTheme } from '../../context/ThemeContext';
+import type { QRTypeConfig } from '../../config/qrTypes';
+
+interface Props {
+  config: QRTypeConfig;
+  selected: boolean;
+  onClick: () => void;
+}
+
+export function TypeListItem({ config, selected, onClick }: Props) {
+  const { isDark } = useTheme();
+  const thumb = isDark ? config.thumbDark : config.thumb;
+
+  return (
+    <button
+      onClick={onClick}
+      className="w-full flex items-center gap-3 p-3 rounded-[14px] text-left transition-all duration-150 cursor-pointer"
+      style={{
+        border: selected ? '2px solid #7C6FE0' : '2px solid transparent',
+        background: selected ? 'var(--sel-bg)' : 'transparent',
+      }}
+      onMouseEnter={e => { if (!selected) (e.currentTarget as HTMLElement).style.background = 'var(--hover-bg)'; }}
+      onMouseLeave={e => { if (!selected) (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
+    >
+      <img
+        src={thumb}
+        alt={config.label}
+        className="w-[72px] h-12 rounded-[10px] object-cover flex-shrink-0"
+      />
+      <span
+        className="text-[15px] font-medium transition-colors"
+        style={{ color: selected ? 'var(--sel-text)' : 'var(--text-item)' }}
+      >
+        {config.label}
+      </span>
+    </button>
+  );
+}