diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index fc6a627..31163c0 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -2,7 +2,8 @@
 
 import { useEffect, useState } from 'react';
 import QRCode from 'qrcode';
-import { supabase } from '~/lib/supabase';
+import { pb } from '~/lib/pocketbase';
+import { ImageOff } from 'lucide-react';
 
 export default function Dashboard() {
     const [name, setName] = useState('');
@@ -12,12 +13,15 @@ export default function Dashboard() {
     const [loading, setLoading] = useState(false);
 
     const fetchAssets = async () => {
-        const { data } = await supabase
-            .from('ar_assets')
-            .select('*')
-            .order('created_at', { ascending: false });
-
-        setAssets(data || []);
+        try {
+            const records = await pb.collection('ar_assets').getFullList({
+                sort: '-created',
+            });
+            setAssets(records);
+        } catch (err) {
+            console.error('Failed to fetch assets:', err);
+            setAssets([]);
+        }
     };
 
     useEffect(() => {
@@ -25,62 +29,45 @@ export default function Dashboard() {
     }, []);
 
     const createAsset = async () => {
-        if (!name || !glbUrl || !usdzUrl) {
-            alert('Fill all fields');
+        if (!name || !glbUrl) {
+            alert('Please provide a name and a GLB URL');
             return;
         }
 
         setLoading(true);
 
-        const { data, error } = await supabase
-            .from('ar_assets')
-            .insert({
+        try {
+            const record = await pb.collection('ar_assets').create({
                 name,
                 glb_url: glbUrl,
-                usdz_url: usdzUrl,
-            })
-            .select()
-            .single();
+                usdz_url: usdzUrl || '',
+            });
 
-        if (error || !data) {
-            alert(error?.message);
+            const qrUrl = `${import.meta.env.VITE_FRONTEND_URL}/ar/${record.id}`;
+
+            const qrImage = await QRCode.toDataURL(qrUrl, {
+                width: 512,
+                margin: 2,
+            });
+
+            const qrBlob = await (await fetch(qrImage)).blob();
+
+            const qrFormData = new FormData();
+            qrFormData.append('qr_url', qrUrl);
+            qrFormData.append('qr_image', new File([qrBlob], `${record.id}.png`, { type: 'image/png' }));
+
+            await pb.collection('ar_assets').update(record.id, qrFormData);
+
+            setName('');
+            setGlbUrl('');
+            setUsdzUrl('');
+
+            fetchAssets();
+        } catch (err: any) {
+            alert(err?.message || 'Failed to create asset');
+        } finally {
             setLoading(false);
-            return;
         }
-
-        // const qrUrl = `http://10.20.2.107:5173/ar/${data.id}`;
-        const qrUrl = `${window.location.origin}/ar/${data.id}`;
-
-        const qrImage = await QRCode.toDataURL(qrUrl, {
-            width: 512,
-            margin: 2,
-        });
-
-        const qrBlob = await (await fetch(qrImage)).blob();
-        const filePath = `${data.id}.png`;
-
-        await supabase.storage.from('qr-codes').upload(filePath, qrBlob, {
-            upsert: true,
-            contentType: 'image/png',
-        });
-
-        const { data: publicUrl } = supabase.storage
-            .from('qr-codes')
-            .getPublicUrl(filePath);
-
-        await supabase
-            .from('ar_assets')
-            .update({
-                qr_url: qrUrl,
-                qr_image_url: publicUrl.publicUrl,
-            })
-            .eq('id', data.id);
-
-        setName('');
-        setGlbUrl('');
-        setUsdzUrl('');
-        setLoading(false);
-        fetchAssets();
     };
 
     return (
@@ -101,24 +88,35 @@ export default function Dashboard() {
                     </h2>
 
                     <div className='grid gap-4 md:grid-cols-3 text-black'>
-                        <input
-                            className='rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
-                            placeholder='Asset name'
-                            value={name}
-                            onChange={(e) => setName(e.target.value)}
-                        />
-                        <input
-                            className='rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
-                            placeholder='GLB URL'
-                            value={glbUrl}
-                            onChange={(e) => setGlbUrl(e.target.value)}
-                        />
-                        <input
-                            className='rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
-                            placeholder='USDZ URL'
-                            value={usdzUrl}
-                            onChange={(e) => setUsdzUrl(e.target.value)}
-                        />
+                        <div className="space-y-1">
+                            <label className="text-xs font-semibold text-gray-600 ml-1">Asset Name</label>
+                            <input
+                                className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
+                                placeholder='Asset name'
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                            />
+                        </div>
+                        <div className="space-y-1">
+                            <label className="text-xs font-semibold text-gray-600 ml-1">GLB URL (Android/Web)</label>
+                            <input
+                                type="url"
+                                className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
+                                placeholder='https://example.com/model.glb'
+                                value={glbUrl}
+                                onChange={(e) => setGlbUrl(e.target.value)}
+                            />
+                        </div>
+                        <div className="space-y-1">
+                            <label className="text-xs font-semibold text-gray-600 ml-1">USDZ URL (iOS) - Optional</label>
+                            <input
+                                type="url"
+                                className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
+                                placeholder='USDZ URL'
+                                value={usdzUrl}
+                                onChange={(e) => setUsdzUrl(e.target.value)}
+                            />
+                        </div>
                     </div>
 
                     <button
@@ -150,15 +148,16 @@ export default function Dashboard() {
                                         {asset?.name}
                                     </h3>
 
-                                    {asset?.qr_image_url ? (
+                                    {asset?.qr_image ? (
                                         <img
-                                            src={asset?.qr_image_url}
+                                            src={pb.files.getURL(asset, asset.qr_image)}
                                             alt={asset?.name}
                                             className='mx-auto w-40 rounded-lg'
                                         />
                                     ) : (
-                                        <div className='flex h-40 items-center justify-center rounded-lg bg-gray-100 text-sm text-gray-400'>
-                                            No QR
+                                        <div className='mx-auto flex h-40 w-40 flex-col items-center justify-center space-y-2 rounded-lg bg-gray-50 text-gray-400'>
+                                            <ImageOff size={32} strokeWidth={1.5} />
+                                            <span className='text-xs font-medium'>No QR Image</span>
                                         </div>
                                     )}
                                 </div>
@@ -170,3 +169,4 @@ export default function Dashboard() {
         </div>
     );
 }
+