diff --git a/app/(homescreens)/layout.tsx b/app/(homescreens)/layout.tsx
index 24bebcd..d76b308 100644
--- a/app/(homescreens)/layout.tsx
+++ b/app/(homescreens)/layout.tsx
@@ -8,7 +8,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <div className={styles.childrenHeight}>{children}</div>
       <footer
         className={clsx(
-          `btm-nav btm-nav-lg text-base-content bg-base-200`,
+          `btm-nav btm-nav-lg text-base-content bg-base-300`,
           styles.bottomBarNavHeight
         )}
       >
diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
new file mode 100644
index 0000000..97fcf26
--- /dev/null
+++ b/app/card/card-detail-page.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import useAppState from '@/app/lib/app-state/app-state';
+import { Routes } from '@/app/lib/shared';
+import { Barcode } from '@/app/ui/barcode';
+import CompanyIcon from '@/app/ui/company-icon';
+import { MainMessage } from '@/app/ui/main-message';
+import PageTemplate from '@/app/ui/page-template';
+import { Qrcode } from '@/app/ui/qrcode';
+import { SecondaryHeader } from '@/app/ui/secondary-header';
+import { IconCards, IconEdit, IconTrash } from '@tabler/icons-react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+export function CardDetailPage() {
+  const searchParams = useSearchParams();
+  const id = searchParams.get('id');
+  const [state] = useAppState();
+  const card = state.cards.find(c => c.id === id);
+  if (!card) {
+    return (
+      <PageTemplate
+        header={<SecondaryHeader title="Card detail" href={Routes.MyCards} />}
+      >
+        <div className="flex h-2/3 w-full items-center justify-center">
+          <MainMessage
+            title="Card not found"
+            description={`Something went wrong. Found with id ${id} not found.`}
+          >
+            <Link href={Routes.MyCards} replace>
+              <button className="btn btn-primary">
+                <IconCards className="w-6 h-6" />
+                My cards
+              </button>
+            </Link>
+          </MainMessage>
+        </div>
+      </PageTemplate>
+    );
+  }
+  return (
+    <PageTemplate
+      header={
+        <SecondaryHeader
+          title={card!.name}
+          href={Routes.MyCards}
+          rightAction={
+            <div className="flex gap-2">
+              <Link href={Routes.MyCards} replace>
+                <button className="btn btn-square btn-ghost">
+                  <IconTrash />
+                </button>
+              </Link>
+              <Link href={Routes.MyCards} replace>
+                <button className="btn btn-square btn-ghost">
+                  <IconEdit />
+                </button>
+              </Link>
+            </div>
+          }
+        />
+      }
+    >
+      <div className="h-full w-full grid grid-col grid-rows-[1fr_auto]">
+        {card.codeFormat === 'QR' ? (
+          <Qrcode code={card.code} />
+        ) : (
+          <Barcode code={card.code} codeFormat={card.codeFormat} />
+        )}
+        <div
+          className="bg-base-300 p-6"
+          style={card.bgColor ? { backgroundColor: card.bgColor } : {}}
+        >
+          <div className="flex gap-6 items-center">
+            <CompanyIcon {...card} className="w-16 h-16" />
+            <label className="form-control flex-1">
+              <div className="label">
+                <span className="label-text">Card name</span>
+              </div>
+              <input
+                type="text"
+                disabled
+                value={card.name}
+                className="input input-bordered w-full"
+              />
+            </label>
+          </div>
+
+          <label className="form-control">
+            <div className="label">
+              <span className="label-text">Toggle note visibility</span>
+            </div>
+            <input type="checkbox" className="toggle" defaultChecked />
+          </label>
+          <label className="form-control">
+            <div className="label">
+              <span className="label-text">Card note</span>
+            </div>
+            <textarea
+              className="textarea textarea-bordered h-24"
+              value={card.note}
+              disabled
+            />
+          </label>
+        </div>
+      </div>
+    </PageTemplate>
+  );
+}
diff --git a/app/card/page.tsx b/app/card/page.tsx
index dda8869..18e0540 100644
--- a/app/card/page.tsx
+++ b/app/card/page.tsx
@@ -1,3 +1,11 @@
+import { CardDetailPage } from '@/app/card/card-detail-page';
+import Loading from '@/app/ui/loading';
+import { Suspense } from 'react';
+
 export default function CardPage() {
-  return <div>Card</div>;
+  return (
+    <Suspense fallback={<Loading />}>
+      <CardDetailPage />
+    </Suspense>
+  );
 }
diff --git a/app/create-card/create-card-form.tsx b/app/create-card/create-card-form.tsx
index 361ffc5..7e4391d 100644
--- a/app/create-card/create-card-form.tsx
+++ b/app/create-card/create-card-form.tsx
@@ -9,6 +9,7 @@ import {
   CreateCardFormState,
 } from '@/app/create-card/createCardFormReducer';
 import useAppState from '@/app/lib/app-state/app-state';
+import { mapHtml5QrcodeFormatToJsbarcodeFormat } from '@/app/lib/app-state/codeFormat';
 import { predefinedCompanies } from '@/app/lib/predefined-companies';
 import {
   CardIcon,
@@ -26,7 +27,7 @@ import {
   IconRefresh,
   IconX,
 } from '@tabler/icons-react';
-import { Html5QrcodeResult, Html5QrcodeSupportedFormats } from 'html5-qrcode';
+import { Html5QrcodeResult } from 'html5-qrcode';
 import Image from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Reducer, useCallback, useEffect, useReducer, useRef } from 'react';
@@ -44,7 +45,7 @@ enum FormNames {
 type CreateCardForm = {
   [FormNames.Name]: string;
   [FormNames.Code]: string;
-  [FormNames.CodeFormat]: number;
+  [FormNames.CodeFormat]: string;
   [FormNames.Note]: string;
   [FormNames.Color]: string | null;
   [FormNames.Icon]: string | SvgProps;
@@ -63,11 +64,8 @@ export default function CreateCardForm() {
             [FormNames.Name]: predefinedCompany.name,
             [FormNames.Color]: null,
             [FormNames.Icon]: predefinedCompany.svg,
-            [FormNames.CodeFormat]: predefinedCompany.codeFormat,
           }
-        : {
-            [FormNames.CodeFormat]: Html5QrcodeSupportedFormats.EAN_13,
-          },
+        : {},
     });
   const [, appDispatch] = useAppState();
   const [{ devices, activeDevice, isModalVisible }, dispatch] = useReducer<
@@ -78,8 +76,11 @@ export default function CreateCardForm() {
   const handleCodeDetected = useCallback(
     (text: string, { result }: Html5QrcodeResult) => {
       setValue(FormNames.Code, text);
-      if (result.format?.format) {
-        setValue(FormNames.CodeFormat, result.format.format);
+      if (typeof result.format?.format === 'number') {
+        setValue(
+          FormNames.CodeFormat,
+          mapHtml5QrcodeFormatToJsbarcodeFormat(result.format.format)
+        );
       }
       cameraModalRef.current?.close();
     },
@@ -133,9 +134,7 @@ export default function CreateCardForm() {
               note: data[FormNames.Note] || undefined,
               bgColor: data[FormNames.Color] || null,
               icon: (data[FormNames.Icon] as CardIcon) || null,
-              codeFormat: data[
-                FormNames.CodeFormat
-              ] as Html5QrcodeSupportedFormats,
+              codeFormat: data[FormNames.CodeFormat],
             },
           });
           router.replace(Routes.MyCards);
diff --git a/app/create-card/scanner.tsx b/app/create-card/scanner.tsx
index 6eeccd6..54a486d 100644
--- a/app/create-card/scanner.tsx
+++ b/app/create-card/scanner.tsx
@@ -4,6 +4,7 @@ import {
   CreateCardFormActions,
   CreateCardFormActionTypes,
 } from '@/app/create-card/createCardFormReducer';
+import { MainMessage } from '@/app/ui/main-message';
 import {
   Html5Qrcode,
   Html5QrcodeResult,
@@ -112,16 +113,14 @@ export default function Scanner({
     >
       <div id="reader" className="max-h-full"></div>
       {!activeDevice && (
-        <div className="text-center">
-          <p className="text-xl py-4">Please grant camera permissions.</p>
-          <p className="text-sm text-gray-500 pb-4">
-            Without those permissions, it will be impossible to scan and save
-            your cards.
-          </p>
+        <MainMessage
+          title="Please grant camera permissions."
+          description="Without those permissions, it will be impossible to scan and save your cards."
+        >
           <button className="btn btn-primary" onClick={getCameraDevices}>
             Request devices
           </button>
-        </div>
+        </MainMessage>
       )}
     </div>
   );
diff --git a/app/lib/app-state/codeFormat.ts b/app/lib/app-state/codeFormat.ts
new file mode 100644
index 0000000..a846696
--- /dev/null
+++ b/app/lib/app-state/codeFormat.ts
@@ -0,0 +1,44 @@
+import { Html5QrcodeSupportedFormats } from 'html5-qrcode';
+
+/**
+ * @param codeFormat
+ * jsbarcode format docs:
+ * @link https://github.com/lindell/JsBarcode/wiki/Options#format
+ * @link https://github.com/lindell/JsBarcode/wiki#barcodes
+ * html5-code format docs:
+ * https://scanapp.org/html5-qrcode-docs/docs/supported_code_formats
+ */
+export function mapHtml5QrcodeFormatToJsbarcodeFormat(
+  codeFormat: Html5QrcodeSupportedFormats
+): string {
+  switch (codeFormat) {
+    case Html5QrcodeSupportedFormats.QR_CODE:
+      return 'QR';
+    case Html5QrcodeSupportedFormats.CODE_128:
+      return 'CODE128';
+    case Html5QrcodeSupportedFormats.EAN_13:
+      return 'EAN13';
+    case Html5QrcodeSupportedFormats.EAN_8:
+      return 'EAN8';
+    case Html5QrcodeSupportedFormats.UPC_A:
+    case Html5QrcodeSupportedFormats.UPC_E:
+    case Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION:
+      return 'UPC';
+    case Html5QrcodeSupportedFormats.ITF:
+      return 'ITF14'; // ITF format in jsbarcode is often represented as ITF14
+    case Html5QrcodeSupportedFormats.CODE_39:
+      return 'CODE39';
+    case Html5QrcodeSupportedFormats.CODE_93:
+      return 'CODE93';
+    case Html5QrcodeSupportedFormats.CODABAR:
+      return 'codebar';
+    case Html5QrcodeSupportedFormats.AZTEC:
+    case Html5QrcodeSupportedFormats.DATA_MATRIX:
+    case Html5QrcodeSupportedFormats.MAXICODE:
+    case Html5QrcodeSupportedFormats.PDF_417:
+    case Html5QrcodeSupportedFormats.RSS_14:
+    case Html5QrcodeSupportedFormats.RSS_EXPANDED:
+    default:
+      throw new Error(`Unsupported code format: ${codeFormat}`);
+  }
+}
diff --git a/app/lib/app-state/reducer.spec.ts b/app/lib/app-state/reducer.spec.ts
index 39cf599..0372ea0 100644
--- a/app/lib/app-state/reducer.spec.ts
+++ b/app/lib/app-state/reducer.spec.ts
@@ -1,3 +1,4 @@
+import { mapHtml5QrcodeFormatToJsbarcodeFormat } from '@/app/lib/app-state/codeFormat';
 import {
   AddCardAction,
   appReducer,
@@ -16,7 +17,9 @@ const dummyCard: Card = {
   code: '123adfa657SFV',
   bgColor: '#4523C9',
   icon: CardIcon.Retail,
-  codeFormat: Html5QrcodeSupportedFormats.QR_CODE,
+  codeFormat: mapHtml5QrcodeFormatToJsbarcodeFormat(
+    Html5QrcodeSupportedFormats.QR_CODE
+  ),
 };
 
 describe('appReducer', () => {
@@ -25,7 +28,9 @@ describe('appReducer', () => {
     const newCard: Omit<Card, 'id'> = {
       bgColor: '#4523C9',
       icon: CardIcon.Retail,
-      codeFormat: Html5QrcodeSupportedFormats.QR_CODE,
+      codeFormat: mapHtml5QrcodeFormatToJsbarcodeFormat(
+        Html5QrcodeSupportedFormats.QR_CODE
+      ),
       name: 'Test Card',
       code: 'ABC123',
     };
diff --git a/app/lib/app-state/reducer.ts b/app/lib/app-state/reducer.ts
index 2be0ff6..67aa8ff 100644
--- a/app/lib/app-state/reducer.ts
+++ b/app/lib/app-state/reducer.ts
@@ -1,5 +1,4 @@
 import { CardIcon, SvgProps } from '@/app/lib/shared';
-import { Html5QrcodeSupportedFormats } from 'html5-qrcode/src/core';
 import { v4 as uuid } from 'uuid';
 
 export type Card = {
@@ -10,7 +9,7 @@ export type Card = {
   bgColor: string | null;
   icon: CardIcon | null | SvgProps;
   favorite?: boolean;
-  codeFormat: Html5QrcodeSupportedFormats;
+  codeFormat: string;
 };
 
 export type AppState = {
diff --git a/app/lib/predefined-companies.ts b/app/lib/predefined-companies.ts
index f1c0891..ae57b18 100644
--- a/app/lib/predefined-companies.ts
+++ b/app/lib/predefined-companies.ts
@@ -1,10 +1,12 @@
 import { SvgProps } from '@/app/lib/shared';
-import { Html5QrcodeSupportedFormats } from 'html5-qrcode';
+
+/**
+ * @see https://worldvectorlogo.com/ for logos
+ */
 
 export const predefinedCompanies: {
   name: string;
   svg: SvgProps;
-  codeFormat: Html5QrcodeSupportedFormats;
 }[] = [
   {
     name: 'DM',
@@ -13,7 +15,6 @@ export const predefinedCompanies: {
       height: 1620,
       width: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Albert',
@@ -22,7 +23,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Bata',
@@ -31,7 +31,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Biedronka',
@@ -40,7 +39,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Fresh',
@@ -49,7 +47,6 @@ export const predefinedCompanies: {
       width: 510.5,
       height: 182.7,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Ikea',
@@ -58,7 +55,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Kaufland',
@@ -67,7 +63,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Lidl',
@@ -76,7 +71,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.QR_CODE,
   },
   {
     name: 'Billa',
@@ -85,7 +79,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'O2',
@@ -94,7 +87,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Rossmann',
@@ -103,7 +95,6 @@ export const predefinedCompanies: {
       width: 116.6,
       height: 14.3,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Tesco',
@@ -112,6 +103,5 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
 ];
diff --git a/app/ui/barcode.tsx b/app/ui/barcode.tsx
new file mode 100644
index 0000000..f4be21f
--- /dev/null
+++ b/app/ui/barcode.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import JsBarcode from 'jsbarcode';
+
+export function Barcode({
+  code,
+  codeFormat,
+}: {
+  code: string;
+  codeFormat: string;
+}) {
+  const barcodeRef = useRef(null);
+
+  useEffect(() => {
+    if (barcodeRef.current) {
+      try {
+        JsBarcode(barcodeRef.current, code, {
+          format: codeFormat,
+          lineColor: '#000000',
+          width: 2,
+          height: 100,
+          displayValue: true,
+        });
+      } catch (e) {
+        console.log('error', e);
+      }
+    }
+  }, [code, codeFormat]);
+
+  return (
+    <div>
+      <svg ref={barcodeRef} className="p-3 w-full" />
+    </div>
+  );
+}
diff --git a/app/ui/company-icon.tsx b/app/ui/company-icon.tsx
index 2b5b50e..14a5e9a 100644
--- a/app/ui/company-icon.tsx
+++ b/app/ui/company-icon.tsx
@@ -1,19 +1,28 @@
 import { Card } from '@/app/lib/app-state/reducer';
 import { iconsMap } from '@/app/lib/shared';
+import clsx from 'clsx';
 import Image from 'next/image';
 
-type CompanyIconProps = Pick<Card, 'icon' | 'name'>;
+type CompanyIconProps = Pick<Card, 'icon' | 'name'> & {
+  className?: string;
+};
 
-export default function CompanyIcon({ icon, name }: CompanyIconProps) {
+export default function CompanyIcon({
+  icon,
+  name,
+  className,
+}: CompanyIconProps) {
   if (typeof icon === 'string') {
     if (iconsMap[icon]) {
       const TheIcon = iconsMap[icon];
-      return <TheIcon name={name} className="w-10 h-10" />;
+      return <TheIcon name={name} className={clsx('w-10 h-10', className)} />;
     }
     return icon;
   }
   if (icon === null) {
     return null;
   }
-  return <Image {...icon} alt={name} className="w-10 h-10" />;
+  return (
+    <Image {...icon} alt={name} className={clsx('w-10 h-10', className)} />
+  );
 }
diff --git a/app/ui/main-message.tsx b/app/ui/main-message.tsx
new file mode 100644
index 0000000..0aa5ed0
--- /dev/null
+++ b/app/ui/main-message.tsx
@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+
+export function MainMessage({
+  className,
+  children,
+  title,
+  description,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className={clsx('text-center', className)}>
+      <p className="text-xl py-4">{title}</p>
+      <p className="text-sm text-gray-500 pb-4">{description}</p>
+      {children}
+    </div>
+  );
+}
diff --git a/app/ui/primary-header.tsx b/app/ui/primary-header.tsx
index 169cbb7..7c9d6f8 100644
--- a/app/ui/primary-header.tsx
+++ b/app/ui/primary-header.tsx
@@ -11,7 +11,7 @@ export function PrimaryHeader({
 }) {
   return (
     <header>
-      <div className="navbar bg-base-200">
+      <div className="navbar bg-base-300">
         <div className="navbar-start">
           <Image
             src="/logo.svg"
diff --git a/app/ui/qrcode.tsx b/app/ui/qrcode.tsx
new file mode 100644
index 0000000..c613442
--- /dev/null
+++ b/app/ui/qrcode.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import qrcode from 'qrcode';
+
+export function Qrcode({ code }: { code: string }) {
+  const [dataUrl, setDataUrl] = useState('');
+  console.log('code:', code);
+  useEffect(() => {
+    qrcode
+      .toDataURL(code, {
+        errorCorrectionLevel: 'H',
+      })
+      .then(url => {
+        console.log(url);
+        setDataUrl(url);
+      })
+      .catch(e => {
+        console.log(e);
+        // todo: handle failures while rendering qr codes
+      });
+  });
+  return (
+    <div className="flex justify-center items-center">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src={dataUrl} className="w-full max-w-44 h-auto" alt={code} />
+    </div>
+  );
+}
diff --git a/app/ui/secondary-header.tsx b/app/ui/secondary-header.tsx
index 462bd86..8316f09 100644
--- a/app/ui/secondary-header.tsx
+++ b/app/ui/secondary-header.tsx
@@ -11,13 +11,15 @@ export function SecondaryHeader({
   href: LinkProps['href'];
 }) {
   return (
-    <header className="navbar bg-base-200">
+    <header className="navbar bg-base-300">
       <div className="navbar-start">
         <Link className="btn btn-square btn-ghost" href={href} replace>
           <IconArrowLeft />
         </Link>
       </div>
-      <div className="navbar-center">{title}</div>
+      <div className="navbar-center">
+        <span className="font-bold text-lg">{title}</span>
+      </div>
       <div className="navbar-end">{rightAction}</div>
     </header>
   );
diff --git a/package-lock.json b/package-lock.json
index 530936d..1502f0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,10 @@
         "@tabler/icons-react": "^3.19.0",
         "clsx": "^2.1.1",
         "html5-qrcode": "^2.3.8",
+        "jsbarcode": "^3.11.6",
         "next": "14.2.15",
         "next-pwa": "^5.6.0",
+        "qrcode": "^1.5.4",
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.53.1",
@@ -25,6 +27,7 @@
         "@testing-library/react": "^16.0.1",
         "@types/jest": "^29.5.14",
         "@types/node": "^20",
+        "@types/qrcode": "^1.5.5",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "daisyui": "^4.12.13",
@@ -3580,6 +3583,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz",
+      "integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.3.11",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
@@ -4843,7 +4856,6 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5434,6 +5446,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -5694,6 +5715,12 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -6928,7 +6955,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
@@ -8838,6 +8864,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbarcode": {
+      "version": "3.11.6",
+      "resolved": "https://registry.npmjs.org/jsbarcode/-/jsbarcode-3.11.6.tgz",
+      "integrity": "sha512-G5TKGyKY1zJo0ZQKFM1IIMfy0nF2rs92BLlCz+cU4/TazIc4ZH+X1GYeDRt7TKjrYqmPfTjwTBkU/QnQlsYiuA==",
+      "license": "MIT"
+    },
     "node_modules/jsdom": {
       "version": "20.0.3",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
@@ -10018,6 +10050,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -10322,6 +10363,161 @@
       ],
       "license": "MIT"
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -10555,7 +10751,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10570,6 +10765,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -10920,6 +11121,12 @@
       "integrity": "sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==",
       "license": "ISC"
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -12467,6 +12674,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
diff --git a/package.json b/package.json
index e48e667..e166727 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "@tabler/icons-react": "^3.19.0",
     "clsx": "^2.1.1",
     "html5-qrcode": "^2.3.8",
+    "jsbarcode": "^3.11.6",
     "next": "14.2.15",
     "next-pwa": "^5.6.0",
+    "qrcode": "^1.5.4",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.53.1",
@@ -31,6 +33,7 @@
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^20",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "daisyui": "^4.12.13",
diff --git a/plan.md b/plan.md
index 8508392..9d1420b 100644
--- a/plan.md
+++ b/plan.md
@@ -35,6 +35,7 @@ Features:
 - [ ] **Create card page**
   - [x] **implement form**
   - [x] _implement navigation to scan code page_
+  - [ ] _display scanned code_
   - [ ] implement color picker
   - [x] **implement creation of card (add it to other cards in local storage (); navigate to my cards page)**
 - [x] **My cards page**
@@ -44,8 +45,8 @@ Features:
   - [ ] filter collection based on favorites
   - [ ] _implement (un) mark favorite_
   - [x] **implement navigation to card detail**
-- [ ] **Card detail page**
-  - [ ] **display page with bar / qr code**
+- [x] **Card detail page**
+  - [x] **display page with bar / qr code**
   - [ ] implement switch note visibility
   - [ ] _implement delete card dialog + remove card from local storage_
   - [ ] _implement navigation to edit card page_