diff --git a/src/components/LeftPanel/LeftPanel.tsx b/src/components/LeftPanel/LeftPanel.tsx
new file mode 100644
index 0000000..bed2b8b
--- /dev/null
+++ b/src/components/LeftPanel/LeftPanel.tsx
@@ -0,0 +1,32 @@
+import { useQR } from '../../context/QRContext';
+import { QR_TYPES } from '../../config/qrTypes';
+import { TypeListItem } from './TypeListItem';
+
+export function LeftPanel() {
+  const { state, dispatch } = useQR();
+
+  return (
+    <div
+      className="flex-shrink-0 flex flex-col h-full overflow-y-auto"
+      style={{
+        width: 'var(--left-w)',
+        background: 'var(--bg-panel)',
+        borderRight: '1px solid var(--border)',
+      }}
+    >
+      <div className="p-4 xl:p-6 pb-3">
+        <h2 className="text-[16px] xl:text-[19px] font-bold" style={{ color: 'var(--text-primary)' }}>Select QR type</h2>
+      </div>
+      <div className="flex flex-col gap-1 px-2 xl:px-3 pb-6">
+        {QR_TYPES.map((config) => (
+          <TypeListItem
+            key={config.key}
+            config={config}
+            selected={state.selectedType === config.key}
+            onClick={() => dispatch({ type: 'SET_TYPE', payload: config.key })}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}