diff --git a/app/components.d.ts b/app/components.d.ts
index cbadf24..571e7aa 100644
--- a/app/components.d.ts
+++ b/app/components.d.ts
@@ -29,12 +29,15 @@ declare module 'vue' {
     NDialog: typeof import('naive-ui')['NDialog']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
+    NImagePreview: typeof import('naive-ui')['NImagePreview']
     NImg: typeof import('naive-ui')['NImg']
     NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
     NInput: typeof import('naive-ui')['NInput']
@@ -58,6 +61,7 @@ declare module 'vue' {
     NTag: typeof import('naive-ui')['NTag']
     NTextarea: typeof import('naive-ui')['NTextarea']
     NThemeEditor: typeof import('naive-ui')['NThemeEditor']
+    NTooltip: typeof import('naive-ui')['NTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
@@ -82,12 +86,15 @@ declare global {
   const NDialog: typeof import('naive-ui')['NDialog']
   const NDialogProvider: typeof import('naive-ui')['NDialogProvider']
   const NDivider: typeof import('naive-ui')['NDivider']
+  const NDrawer: typeof import('naive-ui')['NDrawer']
+  const NDrawerContent: typeof import('naive-ui')['NDrawerContent']
   const NDropdown: typeof import('naive-ui')['NDropdown']
   const NEmpty: typeof import('naive-ui')['NEmpty']
   const NForm: typeof import('naive-ui')['NForm']
   const NFormItem: typeof import('naive-ui')['NFormItem']
   const NIcon: typeof import('naive-ui')['NIcon']
   const NImage: typeof import('naive-ui')['NImage']
+  const NImagePreview: typeof import('naive-ui')['NImagePreview']
   const NImg: typeof import('naive-ui')['NImg']
   const NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
   const NInput: typeof import('naive-ui')['NInput']
@@ -111,6 +118,7 @@ declare global {
   const NTag: typeof import('naive-ui')['NTag']
   const NTextarea: typeof import('naive-ui')['NTextarea']
   const NThemeEditor: typeof import('naive-ui')['NThemeEditor']
+  const NTooltip: typeof import('naive-ui')['NTooltip']
   const RouterLink: typeof import('vue-router')['RouterLink']
   const RouterView: typeof import('vue-router')['RouterView']
 }
\ No newline at end of file
diff --git a/app/pages/files/[id].vue b/app/pages/files/[id].vue
index f26488b..824d06b 100644
--- a/app/pages/files/[id].vue
+++ b/app/pages/files/[id].vue
@@ -1,91 +1,65 @@
 <template>
-  <div class="lightbox-container">
+  <div class="lightbox-container h-compact-layout">
     <!-- Top Toolbar -->
-    <v-app-bar v-if="fileInfo" class="top-toolbar" flat height="56">
-      <v-container fluid>
-        <v-row align="center" class="pa-2">
-          <v-col cols="12" md="4">
-            <div class="d-flex align-center gap-2">
-              <v-tooltip location="bottom" :text="fileInfo.mimeType">
-                <template #activator="{ props }">
-                  <v-icon v-bind="props" :icon="fileIcon"></v-icon>
-                </template>
-              </v-tooltip>
-              <v-tooltip location="bottom" :text="fileInfo.name || 'File'">
-                <template #activator="{ props }">
-                  <span class="line-clamp-1" v-bind="props">
-                    {{ fileInfo.name || "File" }}
-                  </span>
-                </template>
-              </v-tooltip>
-              <!-- Action buttons on mobile -->
-              <div class="d-flex d-md-none gap-2 ml-auto">
-                <v-btn
-                  icon
-                  size="small"
-                  density="compact"
-                  @click="handleDownload"
-                >
-                  <v-icon>mdi-download</v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  size="small"
-                  density="compact"
-                  @click="infoDialog = true"
-                >
-                  <v-icon>mdi-information</v-icon>
-                </v-btn>
-              </div>
+    <header v-if="fileInfo" class="top-toolbar bg-neutral-900/50 text-white">
+      <div class="container mx-auto px-4 h-full">
+        <div class="flex items-center h-full">
+          <div class="flex items-center gap-2 w-full md:w-1/3">
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-icon :component="fileIcon" />
+              </template>
+              {{ fileInfo.mimeType }}
+            </n-tooltip>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <span class="line-clamp-1">
+                  {{ fileInfo.name || "File" }}
+                </span>
+              </template>
+              {{ fileInfo.name || "File" }}
+            </n-tooltip>
+            <!-- Action buttons on mobile -->
+            <div class="flex md:hidden gap-2 ml-auto">
+              <n-button text style="font-size: 20px" @click="handleDownload">
+                <n-icon :component="Download" />
+              </n-button>
+              <n-button text style="font-size: 20px" @click="infoDialog = true">
+                <n-icon :component="Info" />
+              </n-button>
             </div>
-          </v-col>
-          <v-col cols="12" md="8" class="d-none d-md-block">
-            <div class="d-flex align-center justify-end gap-4">
-              <span>{{ formatBytes(fileInfo.size) }}</span>
-              <span>{{ new Date(fileInfo.createdAt).toLocaleString() }}</span>
-              <v-btn
-                icon
-                size="small"
-                density="compact"
-                @click="handleDownload"
-              >
-                <v-icon>mdi-download</v-icon>
-              </v-btn>
-              <v-btn
-                icon
-                size="small"
-                density="compact"
-                @click="infoDialog = true"
-              >
-                <v-icon>mdi-information</v-icon>
-              </v-btn>
-            </div>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-app-bar>
+          </div>
+          <div class="hidden md:flex items-center justify-end gap-4 w-2/3">
+            <span>{{ formatBytes(fileInfo.size) }}</span>
+            <span>{{ new Date(fileInfo.createdAt).toLocaleString() }}</span>
+            <n-button text style="font-size: 20px" @click="handleDownload">
+              <n-icon :component="Download" />
+            </n-button>
+            <n-button text style="font-size: 20px" @click="infoDialog = true">
+              <n-icon :component="Info" />
+            </n-button>
+          </div>
+        </div>
+      </div>
+    </header>
 
     <!-- Main Content - File Preview -->
     <div class="preview-container">
-      <v-progress-circular
-        v-if="!fileInfo && !error"
-        indeterminate
-        size="64"
-        class="loading-spinner"
-      ></v-progress-circular>
-      <v-alert
+      <n-spin v-if="!fileInfo && !error" size="large" />
+      <n-alert
         v-else-if="error"
         type="error"
         title="No file was found"
-        :text="error"
-        class="error-alert"
-      ></v-alert>
+        class="max-w-md"
+      >
+        {{ error }}
+      </n-alert>
       <div v-else class="preview-content">
-        <div v-if="fileInfo?.isEncrypted" class="encrypted-notice">
-          <v-alert type="info" title="Encrypted file" class="mb-4">
+        <div v-if="fileInfo?.isEncrypted" class="max-w-md">
+          <n-alert type="info" title="Encrypted file" class="mb-4">
             The file has been encrypted. Preview not available. Please enter the
             password to download it.
-          </v-alert>
+          </n-alert>
         </div>
         <div
           v-else
@@ -96,11 +70,12 @@
           @touchend="handleTouchEnd"
           @dblclick="handleDoubleClick"
         >
-          <v-img
+          <img
             v-if="fileType === 'image'"
             :src="fileSource"
             class="preview-image"
             :style="{ transform: `scale(${zoomLevel})` }"
+            alt="Image preview"
           />
           <video
             v-else-if="fileType === 'video'"
@@ -114,102 +89,113 @@
             controls
             class="preview-audio"
           />
-          <v-alert
+          <n-alert
             v-else
             type="warning"
             title="Preview Unavailable"
-            text="How can you preview this file?"
-            class="preview-unavailable"
-          />
+            class="max-w-md"
+          >
+            A preview for this file type is not available.
+          </n-alert>
         </div>
       </div>
     </div>
 
     <!-- Password Dialog -->
-    <v-dialog v-model="secretDialog" max-width="400">
-      <v-card>
-        <v-card-title>
-          <v-icon left>mdi-lock</v-icon>
-          Enter Password
-        </v-card-title>
-        <v-card-text>
-          <v-text-field
-            v-model="dialogPassword"
-            label="Password"
-            type="password"
-            variant="outlined"
-            autofocus
-            @keyup.enter="confirmDownload"
-          />
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn @click="secretDialog = false">Cancel</v-btn>
-          <v-btn color="primary" @click="confirmDownload">Download</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <n-modal v-model:show="secretDialog">
+      <n-card
+        style="width: 400px"
+        title="Enter Password"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        <n-input
+          v-model:value="dialogPassword"
+          type="password"
+          show-password-on="click"
+          placeholder="Password"
+          autofocus
+          @keyup.enter="confirmDownload"
+        />
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <n-button @click="secretDialog = false">Cancel</n-button>
+            <n-button type="primary" @click="confirmDownload"
+              >Download</n-button
+            >
+          </div>
+        </template>
+      </n-card>
+    </n-modal>
 
     <!-- Technical Details Dialog -->
-    <v-dialog v-model="infoDialog" max-width="640">
-      <v-card title="File Information" prepend-icon="mdi-information">
-        <v-card-text>
-          <v-row>
-            <v-col cols="12" md="6">
-              <div class="mb-4">
-                <strong>File ID</strong>
-                <div class="text-xs">#{{ fileInfo?.id }}</div>
-              </div>
-              <div class="mb-4">
-                <strong>File Name</strong>
-                <div class="text-xs">{{ fileInfo?.name || "N/A" }}</div>
-              </div>
-              <div class="mb-4">
-                <strong>MIME Type</strong>
-                <div class="text-xs">{{ fileInfo?.mimeType || "N/A" }}</div>
-              </div>
-              <div class="mb-4">
-                <strong>File Size</strong>
-                <div class="text-xs">
-                  {{ fileInfo?.size ? formatBytes(fileInfo.size) : "N/A" }}
-                </div>
-              </div>
-            </v-col>
-            <v-col cols="12" md="6">
-              <div class="mb-4">
-                <strong>Created At</strong>
-                <div class="text-xs">
-                  {{
-                    fileInfo?.createdAt
-                      ? new Date(fileInfo.createdAt).toLocaleString()
-                      : "N/A"
-                  }}
-                </div>
-              </div>
-              <div class="mb-4">
-                <strong>Encrypted</strong>
-                <div class="text-xs">
-                  {{ fileInfo?.isEncrypted ? "Yes" : "No" }}
-                </div>
-              </div>
-            </v-col>
-          </v-row>
-          <div class="mb-4">
-            <strong>Metadata:</strong>
+    <n-drawer
+      v-model:show="infoDialog"
+      :width="breakpoints.isGreaterOrEqual('md') ? '40vw' : '100vw'"
+    >
+      <n-drawer-content>
+        <template #header>
+          <div class="flex items-center justify-between gap-2">
+            <div>File Information</div>
+            <n-button text size="small" @click="infoDialog = false">
+              <template #icon>
+                <n-icon :component="XIcon" />
+              </template>
+            </n-button>
           </div>
-          <v-card variant="outlined" class="pa-2">
-            <pre
-              class="overflow-x-auto"
-              style="font-size: 14px"
-            ><code>{{ JSON.stringify(fileInfo?.fileMeta, null, 2) }}</code></pre>
-          </v-card>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn @click="infoDialog = false">Close</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+        </template>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+          <div class="flex flex-col gap-4">
+            <div>
+              <strong class="font-semibold">File ID</strong>
+              <div class="opacity-80">#{{ fileInfo?.id }}</div>
+            </div>
+            <div>
+              <strong class="font-semibold">File Name</strong>
+              <div class="opacity-80">{{ fileInfo?.name || "N/A" }}</div>
+            </div>
+            <div>
+              <strong class="font-semibold">MIME Type</strong>
+              <div class="opacity-80">{{ fileInfo?.mimeType || "N/A" }}</div>
+            </div>
+            <div>
+              <strong class="font-semibold">File Size</strong>
+              <div class="opacity-80">
+                {{ fileInfo?.size ? formatBytes(fileInfo.size) : "N/A" }}
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col gap-4">
+            <div>
+              <strong class="font-semibold">Created At</strong>
+              <div class="opacity-80">
+                {{
+                  fileInfo?.createdAt
+                    ? new Date(fileInfo.createdAt).toLocaleString()
+                    : "N/A"
+                }}
+              </div>
+            </div>
+            <div>
+              <strong class="font-semibold">Encrypted</strong>
+              <div class="opacity-80">
+                {{ fileInfo?.isEncrypted ? "Yes" : "No" }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="mt-4">
+          <strong class="font-semibold">Metadata:</strong>
+        </div>
+        <n-card :bordered="true" class="mt-2">
+          <pre
+            class="overflow-x-auto text-xs"
+          ><code>{{ JSON.stringify(fileInfo?.fileMeta, null, 2) }}</code></pre>
+        </n-card>
+      </n-drawer-content>
+    </n-drawer>
 
     <!-- View Transition Overlay -->
     <div
@@ -228,11 +214,24 @@
 
 <script setup lang="ts">
 import { useRoute } from "vue-router"
-import { computed, onMounted, ref } from "vue"
-
+import { computed, onMounted, ref, type Component } from "vue"
+import {
+  Download,
+  Info,
+  Lock,
+  File,
+  FileImage,
+  FileVideo,
+  FileMusic,
+  FileText,
+  FileCode,
+  FileArchive,
+  XIcon
+} from "lucide-vue-next"
 import { downloadAndDecryptFile } from "./secure"
 import { formatBytes } from "./format"
 import type { SnCloudFile } from "~/types/api/post"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 
 const route = useRoute()
 
@@ -289,7 +288,6 @@ function checkForTransition() {
       isTransitioning.value = true
       transitionImage.value = data.src
 
-      // Calculate final position (centered in viewport)
       const viewportWidth = window.innerWidth
       const viewportHeight = window.innerHeight
       const finalWidth = Math.min(
@@ -300,7 +298,6 @@ function checkForTransition() {
       const finalX = (viewportWidth - finalWidth) / 2
       const finalY = (viewportHeight - finalHeight) / 2
 
-      // Set initial position (from original image location)
       transitionStyle.value = {
         position: "fixed",
         top: `${data.y}px`,
@@ -311,7 +308,6 @@ function checkForTransition() {
         transition: "all 0.3s ease-out"
       }
 
-      // Animate to final position
       requestAnimationFrame(() => {
         transitionStyle.value = {
           ...transitionStyle.value,
@@ -320,8 +316,6 @@ function checkForTransition() {
           width: `${finalWidth}px`,
           height: `${finalHeight}px`
         }
-
-        // Hide transition after animation
         setTimeout(() => {
           isTransitioning.value = false
           sessionStorage.removeItem("imageTransition")
@@ -345,38 +339,38 @@ const fileType = computed(() => {
   if (!fileInfo.value) return "unknown"
   return fileInfo.value.mimeType?.split("/")[0] || "unknown"
 })
-const fileIcon = computed(() => {
-  if (!fileInfo.value?.mimeType) return "mdi-file"
+const fileIcon = computed<Component>(() => {
+  if (!fileInfo.value?.mimeType) return File
 
   const mime = fileInfo.value.mimeType.toLowerCase()
 
-  if (mime.startsWith("image/")) return "mdi-file-image"
-  if (mime.startsWith("video/")) return "mdi-file-video"
-  if (mime.startsWith("audio/")) return "mdi-file-music"
-  if (mime === "application/pdf") return "mdi-file-pdf"
+  if (mime.startsWith("image/")) return FileImage
+  if (mime.startsWith("video/")) return FileVideo
+  if (mime.startsWith("audio/")) return FileMusic
+  if (mime === "application/pdf") return FileText
   if (
     mime.startsWith("text/") ||
     mime.includes("javascript") ||
     mime.includes("json") ||
     mime.includes("xml")
   )
-    return "mdi-file-code"
+    return FileCode
   if (mime.includes("zip") || mime.includes("rar") || mime.includes("tar"))
-    return "mdi-zip-box"
+    return FileArchive
   if (
     mime.includes("document") ||
     mime.includes("word") ||
     mime.includes("excel") ||
     mime.includes("powerpoint")
   )
-    return "mdi-file-document"
+    return FileText
 
-  return "mdi-file"
+  return File
 })
 const fileSource = computed(() => {
   let url = `${apiBase}/drive/files/${fileId}?original=true`
   if (passcode) {
-    url += `?passcode=${passcode}`
+    url += `&passcode=${passcode}`
   }
   return url
 })
@@ -436,7 +430,7 @@ function handleTouchMove(event: TouchEvent) {
   )
 
   const scale = currentDistance / initialDistance.value
-  zoomLevel.value = Math.max(0.1, Math.min(5, scale))
+  zoomLevel.value = Math.max(0.1, Math.min(5, zoomLevel.value * scale))
 }
 
 function handleTouchEnd(_event: TouchEvent) {
@@ -451,7 +445,14 @@ function handleDoubleClick() {
   zoomLevel.value = zoomLevel.value > 1 ? 1 : 2
 }
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const message = useMessage()
+
 async function performDownload(password: string) {
+  const progressMessage = message.loading("Downloading file...", {
+    duration: 0
+  })
+
   if (fileInfo.value!.isEncrypted) {
     downloadAndDecryptFile(
       fileSource.value,
@@ -503,6 +504,9 @@ async function performDownload(password: string) {
     a.click()
     a.remove()
     window.URL.revokeObjectURL(blobUrl)
+
+    progressMessage.destroy()
+    message.success("File has been downloaded successfully.")
   }
 }
 
@@ -513,11 +517,7 @@ definePageMeta({
 
 <style scoped>
 .lightbox-container {
-  position: fixed;
-  top: 0;
-  left: 0;
   width: 100vw;
-  height: 100vh;
   background: rgba(0, 0, 0, 0.9);
   display: flex;
   flex-direction: column;
@@ -525,6 +525,7 @@ definePageMeta({
 }
 
 .top-toolbar {
+  height: 56px;
   position: relative;
   z-index: 1001;
 }
@@ -536,6 +537,7 @@ definePageMeta({
   justify-content: center;
   padding: 20px;
   overflow: auto;
+  min-height: 0;
 }
 
 .preview-content {
@@ -549,21 +551,17 @@ definePageMeta({
 .file-preview {
   width: 100%;
   height: 100%;
-  max-width: calc(100vw - 40px);
-  max-height: calc(
-    100vh - 88px
-  ); /* Account for top toolbar (48px) + padding (40px) */
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .preview-image {
-  width: 100%;
-  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
   object-fit: contain;
-  transition: all 0.3s ease-in-out;
-  will-change: contents;
+  transition: transform 0.2s ease-out;
+  will-change: transform;
 }
 
 .preview-video,
@@ -572,27 +570,6 @@ definePageMeta({
   max-height: 100%;
 }
 
-.preview-unavailable {
-  max-width: 500px;
-}
-
-.loading-spinner {
-  color: white;
-}
-
-.error-alert {
-  max-width: 500px;
-}
-
-.encrypted-notice {
-  max-width: 500px;
-}
-
-/* Ensure toolbar doesn't interfere with content */
-.top-toolbar :deep(.v-app-bar__content) {
-  padding: 0;
-}
-
 /* View transition styles */
 .transition-overlay {
   pointer-events: none;
diff --git a/app/pages/orders/[id].vue b/app/pages/orders/[id].vue
index 2d2f34e..4efe8f6 100644
--- a/app/pages/orders/[id].vue
+++ b/app/pages/orders/[id].vue
@@ -1,68 +1,63 @@
 <template>
-  <div class="d-flex align-center justify-center fill-height">
-    <v-card
-      max-width="400"
-      title="Order Payment"
-      prepend-icon="mdi-cash"
-      class="pa-2"
-    >
-      <v-card-text>
-        <v-alert v-if="done" type="success" class="mb-4">
-          The order has been paid successfully. Now you can close this tab and
-          back to the Solar Network!
-        </v-alert>
-        <v-alert
-          v-else-if="!!error"
-          type="error"
-          title="Something went wrong"
-          class="mb-4"
-          >{{ error }}</v-alert
-        >
-        <div v-else-if="!!order">
-          <p class="mb-2">
-            Order for {{ order.productIdentifier ?? "unknown" }}
-          </p>
-          <div class="d-flex align-center gap-2 mb-2">
-            <v-icon size="18">mdi-tag</v-icon>
-            <strong>{{ order.remarks }}</strong>
-          </div>
-          <div class="d-flex align-center gap-2 mb-2">
-            <v-icon size="18">mdi-cash</v-icon>
-            <span>Amount</span>
-            <strong>{{ order.amount }} {{ order.currency }}</strong>
-          </div>
-          <div v-if="order.expiredAt" class="d-flex align-center gap-2 mb-4">
-            <v-icon size="18">mdi-calendar</v-icon>
-            <span>Until</span>
-            <strong>{{ new Date(order.expiredAt).toLocaleString() }}</strong>
-          </div>
-          <div class="mt-4">
-            <v-otp-input
-              v-model="pinCode"
-              label="Pin Code"
-              length="6"
-              type="password"
-              density="comfortable"
-            ></v-otp-input>
-            <v-btn
-              color="primary"
-              :loading="submitting"
-              class="mt-4"
-              @click="pay"
-            >
-              <v-icon left>mdi-check</v-icon>
-              Pay
-            </v-btn>
-          </div>
+  <div class="flex items-center justify-center min-h-screen">
+    <n-card title="Order Payment" class="max-w-sm">
+      <template #header-icon>
+        <n-icon :component="Wallet" />
+      </template>
+      <n-alert v-if="done" type="success" class="mb-4">
+        The order has been paid successfully. You can now close this tab and
+        return to Solar Network!
+      </n-alert>
+      <n-alert
+        v-else-if="!!error"
+        type="error"
+        title="Something went wrong"
+        class="mb-4"
+      >
+        {{ error }}
+      </n-alert>
+      <div v-else-if="!!order" class="flex flex-col gap-2">
+        <p>Order for {{ order.productIdentifier ?? "unknown" }}</p>
+        <div class="flex items-center gap-2">
+          <n-icon :component="Tag" />
+          <strong>{{ order.remarks }}</strong>
         </div>
-        <v-progress-circular
-          v-else
-          indeterminate
-          size="32"
-          class="mt-4"
-        ></v-progress-circular>
-      </v-card-text>
-    </v-card>
+        <div class="flex items-center gap-2">
+          <n-icon :component="CircleDollarSign" />
+          <span>Amount</span>
+          <strong>{{ order.amount }} {{ order.currency }}</strong>
+        </div>
+        <div v-if="order.expiredAt" class="flex items-center gap-2">
+          <n-icon :component="Calendar" />
+          <span>Until</span>
+          <strong>{{ new Date(order.expiredAt).toLocaleString() }}</strong>
+        </div>
+        <div class="mt-4">
+          <n-input
+            v-model:value="pinCode"
+            type="password"
+            show-password-on="click"
+            placeholder="6-digit PIN"
+            maxlength="6"
+            :input-props="{ autocomplete: 'one-time-code' }"
+          />
+          <n-button
+            type="primary"
+            :loading="submitting"
+            class="mt-4 w-full"
+            @click="pay"
+          >
+            <template #icon>
+              <n-icon :component="Check" />
+            </template>
+            Pay
+          </n-button>
+        </div>
+      </div>
+      <div v-else class="flex justify-center p-8">
+        <n-spin size="medium" />
+      </div>
+    </n-card>
   </div>
 </template>
 
@@ -70,6 +65,13 @@
 import { onMounted, ref } from "vue"
 import { useRoute } from "vue-router"
 import type { SnWalletOrder } from "~/types/api/order"
+import {
+  Wallet,
+  Tag,
+  CircleDollarSign,
+  Calendar,
+  Check
+} from "lucide-vue-next"
 
 const route = useRoute()
 
@@ -99,6 +101,7 @@ async function fetchOrder() {
 }
 
 async function pay() {
+  if (submitting.value) return
   submitting.value = true
   try {
     await api(`/id/orders/${encodeURIComponent(orderId)}/pay`, {
@@ -109,6 +112,8 @@ async function pay() {
     done.value = true
   } catch (err: unknown) {
     error.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    submitting.value = false
   }
 }
 
@@ -118,5 +123,4 @@ definePageMeta({
   middleware: ["auth"],
   title: "Solarpay"
 })
-</script>
-
+</script>
\ No newline at end of file