diff --git a/backend/Dockerfile b/backend/Dockerfile
index af7fef5..42faeae 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -31,6 +31,7 @@ RUN addgroup -S drive && adduser -S drive -G drive
 WORKDIR /app
 
 COPY --from=builder /build/drive /app/drive
+COPY --from=builder /build/templates /app/templates
 
 # Create default directories
 RUN mkdir -p /app/data /storage && \
diff --git a/frontend/src/components/OfficeHome.tsx b/frontend/src/components/OfficeHome.tsx
index c7879c1..40bf695 100644
--- a/frontend/src/components/OfficeHome.tsx
+++ b/frontend/src/components/OfficeHome.tsx
@@ -77,7 +77,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank }: Office
     // Fetch pinned files
     api.listPinned()
       .then(data => {
-        const files: FileItem[] = data || [];
+        const files: FileItem[] = data.items || [];
         const filtered = files
           .filter(f => f.name.endsWith(ext) && !f.is_trashed)
           .sort((a, b) => new Date(b.mod_time).getTime() - new Date(a.mod_time).getTime());
@@ -216,7 +216,8 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank }: Office
         <button 
           onClick={() => !isRenaming && onFileSelect(file)}
           onContextMenu={(e) => handleContextMenu(e, file)}
-          className="w-full aspect-[1/1.4] bg-white dark:bg-[#1e1e1e] rounded-lg border border-gray-200 dark:border-gray-800 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative"
+          className="w-full aspect-[1/1.4] rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative"
+          style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
         >
           <Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />
         </button>
@@ -259,7 +260,8 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank }: Office
             <div className="flex flex-col gap-3">
               <button
                 onClick={handleCreateBlank}
-                className="w-40 h-52 bg-white dark:bg-[#1e1e1e] rounded-lg border border-gray-200 dark:border-gray-800 hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group"
+                className="w-40 h-52 rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group"
+                style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
               >
                 <Plus className="w-12 h-12 text-gray-300 group-hover:text-blue-500 transition-colors" />
               </button>
@@ -276,7 +278,8 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank }: Office
                         onCreateBlank(newFile);
                       } catch (err) { console.error("Failed to create template", err); }
                     }}
-                    className="w-40 h-52 bg-white dark:bg-[#1e1e1e] rounded-lg border border-gray-200 dark:border-gray-800 hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm relative overflow-hidden"
+                    className="w-40 h-52 rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm relative overflow-hidden"
+                    style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
                   >
                     <div className="absolute inset-x-0 top-0 h-16 bg-blue-50 border-b border-blue-100 flex items-center px-4">
                       <div className="w-1/2 h-2 bg-blue-200 rounded"></div>
@@ -298,7 +301,8 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank }: Office
                         onCreateBlank(newFile);
                       } catch (err) { console.error("Failed to create template", err); }
                     }}
-                    className="w-40 h-52 bg-white dark:bg-[#1e1e1e] rounded-lg border border-gray-200 dark:border-gray-800 hover:border-blue-500 transition-colors flex flex-col items-center justify-center shadow-sm relative overflow-hidden p-4"
+                    className="w-40 h-52 rounded-lg border hover:border-blue-500 transition-colors flex flex-col items-center justify-center shadow-sm relative overflow-hidden p-4"
+                    style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
                   >
                     <div className="w-12 h-12 bg-gray-200 rounded-full mb-4"></div>
                     <div className="w-full h-1.5 bg-gray-200 rounded mb-2"></div>
@@ -316,7 +320,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank }: Office
 
       {/* Pinned Documents */}
       {pinnedFiles.length > 0 && (
-        <div className="py-8 px-10 border-b border-gray-100 dark:border-gray-800">
+        <div className="py-8 px-10 border-b" style={{ borderColor: 'var(--color-border)' }}>
           <div className="max-w-6xl mx-auto">
             <h2 className="text-lg font-medium mb-6" style={{ color: 'var(--color-text-primary)' }}>Pinned {title.toLowerCase()}</h2>
             <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">