diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..b89e1b5
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,7 @@
+<template>
+  <v-app>
+    <v-main>
+      <slot />
+    </v-main>
+  </v-app>
+</template>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 54a9dd2..a57d680 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
@@ -10,6 +11,26 @@ export default defineNuxtConfig({
     '@nuxt/scripts',
     '@nuxt/test-utils',
     '@nuxt/ui',
-    '@pinia/nuxt'
-  ]
+    '@pinia/nuxt',
+    (_options, nuxt) => {
+      nuxt.hooks.hook('vite:extendConfig', (config) => {
+        // @ts-expect-error
+        config.plugins.push(vuetify({ autoImport: true }))
+      })
+    },
+    //...
+  ],
+   css: [
+    'vuetify/lib/styles/main.sass',
+    '@mdi/font/css/materialdesignicons.min.css',
+  ],
+  build: {
+    transpile: ['vuetify'],
+  },
+  app: {
+    head: {
+      viewport: 'width=device-width,initial-scale=1',
+      charset: 'utf-8'
+    }
+  }
 })
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 77ee4f3..1b577d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "vue-router": "^4.5.1"
       },
       "devDependencies": {
+        "sass-embedded": "^1.92.1",
         "vite-plugin-vuetify": "^2.1.2",
         "vuetify": "^3.9.7"
       }
@@ -489,6 +490,13 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.7.0.tgz",
+      "integrity": "sha512-qn6tAIZEw5i/wiESBF4nQxZkl86aY4KoO0IkUa2Lh+rya64oTOdJQFlZuMwI1Qz9VBJQrQC4QlSA2DNek5gCOA==",
+      "devOptional": true,
+      "license": "(Apache-2.0 AND BSD-3-Clause)"
+    },
     "node_modules/@capsizecss/metrics": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@capsizecss/metrics/-/metrics-3.5.0.tgz",
@@ -6466,6 +6474,13 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/buffer-builder": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
+      "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+      "devOptional": true,
+      "license": "MIT/X11"
+    },
     "node_modules/buffer-crc32": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz",
@@ -6967,6 +6982,13 @@
       "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
       "license": "MIT"
     },
+    "node_modules/colorjs.io": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
+      "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/colortranslator": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/colortranslator/-/colortranslator-5.0.0.tgz",
@@ -9698,6 +9720,13 @@
       "integrity": "sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==",
       "license": "MIT"
     },
+    "node_modules/immutable": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -14361,6 +14390,16 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -14381,6 +14420,392 @@
       ],
       "license": "MIT"
     },
+    "node_modules/sass": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.92.1.tgz",
+      "integrity": "sha512-ffmsdbwqb3XeyR8jJR6KelIXARM9bFQe8A6Q3W4Klmwy5Ckd5gz7jgUNHo4UOqutU5Sk1DtKLbpDP0nLCg1xqQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass-embedded": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.92.1.tgz",
+      "integrity": "sha512-28YwLnF5atAhogt3E4hXzz/NB9dwKffyw08a7DEasLh94P7+aELkG3ENSHYCWB9QFN14hYNLfwr9ozUsPDhcDQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bufbuild/protobuf": "^2.5.0",
+        "buffer-builder": "^0.2.0",
+        "colorjs.io": "^0.5.0",
+        "immutable": "^5.0.2",
+        "rxjs": "^7.4.0",
+        "supports-color": "^8.1.1",
+        "sync-child-process": "^1.0.2",
+        "varint": "^6.0.0"
+      },
+      "bin": {
+        "sass": "dist/bin/sass.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "optionalDependencies": {
+        "sass-embedded-all-unknown": "1.92.1",
+        "sass-embedded-android-arm": "1.92.1",
+        "sass-embedded-android-arm64": "1.92.1",
+        "sass-embedded-android-riscv64": "1.92.1",
+        "sass-embedded-android-x64": "1.92.1",
+        "sass-embedded-darwin-arm64": "1.92.1",
+        "sass-embedded-darwin-x64": "1.92.1",
+        "sass-embedded-linux-arm": "1.92.1",
+        "sass-embedded-linux-arm64": "1.92.1",
+        "sass-embedded-linux-musl-arm": "1.92.1",
+        "sass-embedded-linux-musl-arm64": "1.92.1",
+        "sass-embedded-linux-musl-riscv64": "1.92.1",
+        "sass-embedded-linux-musl-x64": "1.92.1",
+        "sass-embedded-linux-riscv64": "1.92.1",
+        "sass-embedded-linux-x64": "1.92.1",
+        "sass-embedded-unknown-all": "1.92.1",
+        "sass-embedded-win32-arm64": "1.92.1",
+        "sass-embedded-win32-x64": "1.92.1"
+      }
+    },
+    "node_modules/sass-embedded-all-unknown": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.92.1.tgz",
+      "integrity": "sha512-5t6/YZf+vhO3OY/49h8RCL6Cwo78luva0M+TnTM9gu9ASffRXAuOVLNKciSXa3loptyemDDS6IU5/dVH5w0KmA==",
+      "cpu": [
+        "!arm",
+        "!arm64",
+        "!riscv64",
+        "!x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "sass": "1.92.1"
+      }
+    },
+    "node_modules/sass-embedded-android-arm": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.92.1.tgz",
+      "integrity": "sha512-4EjpVVzuksERdgAd4BqeSXFnWtWN3DSRyEIUPJ7BhcS9sfDh2Gf6miI2kNTvIQLJ2XIJynDDcEQ8a1U9KwKUTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.92.1.tgz",
+      "integrity": "sha512-Q+UruGb7yKawHagVmVDRRKsnc4mJZvWMBnuRCu2coJo2FofyqBmXohVGXbxko97sYceA9TJTrUEx3WVKQUNCbQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-riscv64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.92.1.tgz",
+      "integrity": "sha512-nCY5btLlX7W7Jc6cCL6D2Yklpiu540EJ2G08YVGu12DrAMCBzqM347CSRf2ojp1H8jyhvmLkaFwnrJWzh+6S+w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-x64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.92.1.tgz",
+      "integrity": "sha512-qYWR3bftJ77aLYwYDFuzDI4dcwVVixxqQxlIQWNGkHRCexj614qGSSHemr18C2eVj3mjXAQxTQxU68U7pkGPAA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-arm64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.92.1.tgz",
+      "integrity": "sha512-g2yQ3txjMYLKMjL2cW1xRO9nnV3ijf95NbX/QShtV6tiVUETZNWDsRMDEwBNGYY6PTE/UZerjJL1R/2xpQg6WA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-x64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.92.1.tgz",
+      "integrity": "sha512-eH+fgxLQhTEPjZPCgPAVuX5e514Qp/4DMAUMtlNShv4cr4TD5qOp1XlsPYR/b7uE7p2cKFkUpUn/bHNqJ2ay4A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.92.1.tgz",
+      "integrity": "sha512-cT3w8yoQTqrtZvWLJeutEGmawITDTY4J6oSVQjeDcPnnoPt0gOFxem8YMznraACXvahw/2+KJDH33BTNgiPo0A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.92.1.tgz",
+      "integrity": "sha512-dNmlpGeZkry1BofhAdGFBXrpM69y9LlYuNnncf+HfsOOUtj8j0q1RwS+zb5asknhKFUOAG8GCGRY1df7Rwu35g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.92.1.tgz",
+      "integrity": "sha512-nPBos6lI31ef2zQhqTZhFOU7ar4impJbLIax0XsqS269YsiCwjhk11VmUloJTpFlJuKMiVXNo7dPx+katxhD/Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.92.1.tgz",
+      "integrity": "sha512-TfiEBkCyNzVoOhjHXUT+vZ6+p0ueDbvRw6f4jHdkvljZzXdXMby4wh7BU1odl69rgRTkSvYKhgbErRLDR/F7pQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-riscv64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.92.1.tgz",
+      "integrity": "sha512-R+RcJA4EYpJDE9JM1GgPYgZo7x94FlxZ6jPodOQkEaZ1S9kvXVCuP5X/0PXRPhu08KJOfeMsAElzfdAjUf7KJg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-x64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.92.1.tgz",
+      "integrity": "sha512-/HolYRGXJjx8nLw6oj5ZrkR7PFM7X/5kE4MYZaFMpDIPIcw3bqB2fUXLo/MYlRLsw7gBAT6hJAMBrNdKuTphfw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-riscv64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.92.1.tgz",
+      "integrity": "sha512-b9bxe0CMsbSsLx3nrR0cq8xpIkoAC6X36o4DGMITF3m2v3KsojC7ru9X0Gz+zUFr6rwpq/0lTNzFLNu6sPNo3w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-x64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.92.1.tgz",
+      "integrity": "sha512-xuiK5Jp5NldW4bvlC7AuX1Wf7o0gLZ3md/hNg+bkTvxtCDgnUHtfdo8Q+xWP11bD9QX31xXFWpmUB8UDLi6XQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-unknown-all": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.92.1.tgz",
+      "integrity": "sha512-AT9oXvtNY4N+Nd0wvoWqq9A5HjdH/X3aUH4boQUtXyaJ/9DUwnQmBpP5Gtn028ZS8exOGBdobmmWAuigv0k/OA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "!android",
+        "!darwin",
+        "!linux",
+        "!win32"
+      ],
+      "dependencies": {
+        "sass": "1.92.1"
+      }
+    },
+    "node_modules/sass-embedded-win32-arm64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.92.1.tgz",
+      "integrity": "sha512-KvmpQjY9yTBMtTYz4WBqetlv9bGaDW1aStcu7MSTbH7YiSybX/9fnxlCAEQv1WlIidQhcJAiyk0Eae+LGK7cIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-x64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.92.1.tgz",
+      "integrity": "sha512-B6Nz/GbH7Vkpb2TkQHsGcczWM5t+70VWopWF1x5V5yxLpA8ZzVQ7NTKKi+jDoVY2Efu6ZyzgT9n5KgG2kWliXA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
@@ -15155,6 +15580,29 @@
         "url": "https://opencollective.com/svgo"
       }
     },
+    "node_modules/sync-child-process": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
+      "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "sync-message-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/sync-message-port": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz",
+      "integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/system-architecture": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/system-architecture/-/system-architecture-0.1.0.tgz",
@@ -16185,6 +16633,13 @@
         }
       }
     },
+    "node_modules/varint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+      "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/vaul-vue": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/vaul-vue/-/vaul-vue-0.4.1.tgz",
diff --git a/package.json b/package.json
index d1fce26..c7d9d0e 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,11 @@
     "pinia": "^3.0.3",
     "typescript": "^5.9.2",
     "vue": "^3.5.20",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.4.0"
   },
   "devDependencies": {
+    "sass-embedded": "^1.92.1",
     "vite-plugin-vuetify": "^2.1.2",
     "vuetify": "^3.9.7"
   }
diff --git a/pages/Home.vue b/pages/Home.vue
index 12e9c86..6f95b86 100644
--- a/pages/Home.vue
+++ b/pages/Home.vue
@@ -1,805 +1,775 @@
 <template>
-  <div class="main-container">
-    <div class="content-container">
-      <div class="header">
-        <div class="logo-group">
-          <div class="logo-circle bg-green">
-            <svg class="logo-icon text-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
-            </svg>
+  <div class="medical-payment-app">
+    <!-- Header -->
+    <v-container fluid class="pa-4">
+      <v-row justify="center" class="mb-6">
+        <v-col cols="12" md="8" lg="6">
+          <div class="text-center mb-4">
+            <div class="d-flex justify-center align-center flex-wrap mb-4">
+              <!-- Logos -->
+              <v-img
+                src="/api/placeholder/80/80"
+                width="80"
+                height="80"
+                class="ma-2"
+                contain
+              />
+              <v-img
+                src="/api/placeholder/80/80"
+                width="80"
+                height="80"
+                class="ma-2"
+                contain
+              />
+              <v-img
+                src="/api/placeholder/80/80"
+                width="80"
+                height="80"
+                class="ma-2"
+                contain
+              />
+              <v-img
+                src="/api/placeholder/80/80"
+                width="80"
+                height="80"
+                class="ma-2"
+                contain
+              />
+            </div>
+
+            <h1 class="display-1 mb-2">
+              <span class="text-orange">With Love </span>
+              <span class="text-dark">We Serve</span>
+            </h1>
+
+            <p class="subtitle-1 text-grey-darken-1">
+              Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
+            </p>
           </div>
-          <div class="logo-circle bg-pink">
-            <span class="logo-text text-pink">RSSA</span>
-          </div>
-          <div class="logo-circle bg-red">
-            <span class="logo-text text-red">QRIS</span>
-          </div>
-        </div>
-        <h1 class="main-title">
-          <span class="text-orange">With Love</span> We Serve
-        </h1>
-        <p class="subtitle">Kami Menyediakan Layanan Medis yang Dapat Anda Percayai</p>
-        <p class="institution-name">RSU Saiful Anwar Malang</p>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <!-- Main Content -->
+    <v-container>
+      <v-row justify="center">
+        <v-col cols="12" md="6" lg="7">
+          <v-card class="payment-card mx-auto" rounded="xl">
+            <!-- Step 1: Contact Info -->
+            <div v-if="paymentStore.currentStep === 1">
+    <v-card-text class="pa-4">
+      <div class="mb-6">
+        <v-img
+          src="https://scontent.fcgk22-2.fna.fbcdn.net/v/t39.30808-6/481267190_3904366386504845_1409667601717073976_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=110&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=1EijOtXRjUEQ7kNvwFf8ZY7&_nc_oc=Admd26Jbw1IeEOyHFjj4HiDEMtDA_PY83qxRWoy8hhdrfYe9yO6ZPv7pI4XJ79Vlb-I&_nc_zt=23&_nc_ht=scontent.fcgk22-2.fna&_nc_gid=tx2ZuC16d1ipgxGzCJ4SRw&oh=00_Afan6b2RW5WBSa9azzYS_sdYc781iAwqKv4dJjsC9MvAxw&oe=68C42CD8"
+          height="200"
+          class="rounded-lg"
+          cover
+        />
       </div>
-      <div class="status-card-container">
-        <div class="status-card">
-          <div class="status-header">
-            <div class="status-info">
-              <div :class="loketStatusClass" class="status-indicator"></div>
-              <h2 class="status-title">
-                Status Loket: {{ loket.name || 'Mengidentifikasi...' }}
-              </h2>
-            </div>
-            <button @click="refreshLoketInfo" :disabled="loading" class="refresh-button">
-              <svg class="refresh-icon" :class="{ 'animate-spin': loading }" fill="none" viewBox="0 0 24 24">
-                <circle v-if="loading" class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path v-if="loading" class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-              </svg>
-            </button>
-          </div>
-          <div class="status-grid">
-            <div class="status-item">
-              <span class="status-label">IP Address:</span>
-              <span class="status-value">{{ loket.ipAddress || 'Detecting...' }}</span>
-            </div>
-            <div class="status-item">
-              <span class="status-label">Status Koneksi:</span>
-              <span :class="connectionStatusClass" class="status-value-color">
-                {{ connectionStatus }}
-              </span>
-            </div>
-            <div class="status-item">
-              <span class="status-label">Backend:</span>
-              <span :class="backendStatusClass" class="status-value-color">
-                {{ backendStatus }}
-              </span>
-            </div>
-            <div class="status-item">
-              <span class="status-label">QRIS Ready:</span>
-              <span :class="qrisStatusClass" class="status-value-color">
-                {{ qrisStatus }}
-              </span>
-            </div>
-          </div>
-        </div>
+
+      <h2 class="text-h5 mb-6 text-center font-weight-bold">Hubungi Kami</h2>
+
+      <v-row>
+        <v-col cols="12" sm="6">
+          <v-btn
+            block
+            size="large"
+            color="orange"
+            variant="flat"
+            rounded="xl"
+            class="mb-4 text-no-wrap"
+            prepend-icon="mdi-whatsapp"
+          >
+            +62 815-5560-6668
+          </v-btn>
+        </v-col>
+
+        <v-col cols="12" sm="6">
+          <v-btn
+            block
+            size="large"
+            color="orange"
+            variant="flat"
+            rounded="xl"
+            class="mb-4 text-no-wrap"
+            prepend-icon="mdi-phone"
+          >
+            0341-362101
+          </v-btn>
+        </v-col>
+
+        <v-col cols="12">
+          <v-btn
+            block
+            size="large"
+            color="orange"
+            variant="flat"
+            rounded="xl"
+            class="mb-4 text-no-wrap"
+            prepend-icon="mdi-instagram"
+          >
+            rssaifulanwar
+          </v-btn>
+        </v-col>
+
+        <v-col cols="12">
+          <v-btn
+            block
+            size="large"
+            color="orange"
+            variant="flat"
+            rounded="xl"
+            class="mb-4 text-no-wrap"
+            prepend-icon="mdi-web"
+          >
+            rsusaifulanwar.jatimprov.go.id
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <div class="text-center mt-6">
+        <v-btn
+          color="primary"
+          size="large"
+          variant="flat"
+          rounded="xl"
+          @click="paymentStore.nextStep"
+        >
+          Lanjut ke Pembayaran
+        </v-btn>
       </div>
-      <div class="main-content-container">
-        <div v-if="!isSystemReady" class="standby-card">
-          <div class="standby-icon-circle">
-            <svg class="standby-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-          </div>
-          <h2 class="standby-title">Sistem Standby</h2>
-          <p class="standby-message">Menunggu setup pembayaran dari backend...</p>
-          <div class="standby-status-list">
-            <div class="status-item-list">
-              <div :class="loket.ipAddress ? 'bg-green' : 'bg-gray'" class="status-indicator-sm"></div>
-              <span class="status-text-sm">Identifikasi Loket</span>
+    </v-card-text>
+  </div>
+            <!-- Step 2: QR Code Payment -->
+            <div v-else-if="paymentStore.currentStep === 2">
+              <v-card-text class="pa-8 text-center">
+                <div class="mb-4">
+                  <v-img
+                    src="/api/placeholder/60/30"
+                    width="60"
+                    height="30"
+                    class="mx-auto mb-2"
+                    contain
+                  />
+                  <v-img
+                    src="/api/placeholder/100/30"
+                    width="100"
+                    height="30"
+                    class="mx-auto"
+                    contain
+                  />
+                </div>
+
+                <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2>
+
+                <!-- QR Code -->
+                <div class="qr-container mb-6">
+                  <v-card
+                    class="qr-code mx-auto"
+                    width="280"
+                    height="280"
+                    elevation="0"
+                  >
+                    <div class="qr-pattern">
+                      <!-- Simplified QR pattern -->
+                      <svg viewBox="0 0 280 280" class="qr-svg">
+                        <!-- Corner markers -->
+                        <rect
+                          x="10"
+                          y="10"
+                          width="60"
+                          height="60"
+                          fill="black"
+                        />
+                        <rect
+                          x="20"
+                          y="20"
+                          width="40"
+                          height="40"
+                          fill="white"
+                        />
+                        <rect
+                          x="30"
+                          y="30"
+                          width="20"
+                          height="20"
+                          fill="black"
+                        />
+
+                        <rect
+                          x="210"
+                          y="10"
+                          width="60"
+                          height="60"
+                          fill="black"
+                        />
+                        <rect
+                          x="220"
+                          y="20"
+                          width="40"
+                          height="40"
+                          fill="white"
+                        />
+                        <rect
+                          x="230"
+                          y="30"
+                          width="20"
+                          height="20"
+                          fill="black"
+                        />
+
+                        <rect
+                          x="10"
+                          y="210"
+                          width="60"
+                          height="60"
+                          fill="black"
+                        />
+                        <rect
+                          x="20"
+                          y="220"
+                          width="40"
+                          height="40"
+                          fill="white"
+                        />
+                        <rect
+                          x="30"
+                          y="230"
+                          width="20"
+                          height="20"
+                          fill="black"
+                        />
+
+                        <!-- Random data pattern -->
+                        <g class="data-pattern">
+                          <rect
+                            x="90"
+                            y="90"
+                            width="10"
+                            height="10"
+                            fill="black"
+                          />
+                          <rect
+                            x="110"
+                            y="90"
+                            width="10"
+                            height="10"
+                            fill="black"
+                          />
+                          <rect
+                            x="130"
+                            y="90"
+                            width="10"
+                            height="10"
+                            fill="black"
+                          />
+                          <rect
+                            x="90"
+                            y="110"
+                            width="10"
+                            height="10"
+                            fill="black"
+                          />
+                          <rect
+                            x="130"
+                            y="110"
+                            width="10"
+                            height="10"
+                            fill="black"
+                          />
+                          <rect
+                            x="150"
+                            y="110"
+                            width="10"
+                            height="10"
+                            fill="black"
+                          />
+                          <rect
+                            x="170"
+                            y="110"
+                            width="10"
+                            height="10"
+                            fill="black"
+                          />
+                          <rect
+                            x="90"
+                            y="130"
+                            width="10"
+                            height="10"
+                            fill="black"
+                          />
+                          <rect
+                            x="110"
+                            y="130"
+                            width="10"
+                            height="10"
+                            fill="black"
+                          />
+                          <rect
+                            x="150"
+                            y="130"
+                            width="10"
+                            height="10"
+                            fill="black"
+                          />
+                        </g>
+                      </svg>
+                    </div>
+                    <div class="qr-label">
+                      <small class="text-grey-darken-1">QRIS</small>
+                    </div>
+                  </v-card>
+                </div>
+
+                <!-- Payment Details -->
+                <div class="payment-details">
+                  <v-row dense class="mb-2">
+                    <v-col cols="5" class="text-left">
+                      <strong>NAMA PASIEN:</strong>
+                    </v-col>
+                    <v-col cols="7" class="text-left">
+                      {{ paymentStore.patientInfo.name }}
+                    </v-col>
+                  </v-row>
+
+                  <v-row dense class="mb-2">
+                    <v-col cols="5" class="text-left">
+                      <strong>NOMINAL:</strong>
+                    </v-col>
+                    <v-col cols="7" class="text-left">
+                      {{ paymentStore.patientInfo.amount }}
+                    </v-col>
+                  </v-row>
+
+                  <v-row dense class="mb-4">
+                    <v-col cols="5" class="text-left">
+                      <strong>BERLAKU SAMPAI:</strong>
+                    </v-col>
+                    <v-col cols="7" class="text-left text-red">
+                      {{ paymentStore.patientInfo.expiry }}
+                    </v-col>
+                  </v-row>
+                </div>
+
+                <div class="d-flex gap-2 justify-center">
+                  <v-btn
+                    color="grey"
+                    variant="outlined"
+                    @click="paymentStore.prevStep"
+                  >
+                    Kembali
+                  </v-btn>
+                  <v-btn
+                    color="primary"
+                    variant="flat"
+                    @click="paymentStore.nextStep"
+                  >
+                    Simulasi Pembayaran
+                  </v-btn>
+                </div>
+              </v-card-text>
             </div>
-            <div class="status-item-list">
-              <div :class="connectionStatus === 'Terhubung' ? 'bg-green' : 'bg-gray'" class="status-indicator-sm"></div>
-              <span class="status-text-sm">Koneksi Backend</span>
+
+            <!-- Step 3: Success -->
+            <div v-else-if="paymentStore.currentStep === 3">
+              <v-card-text class="pa-8 text-center">
+                <div class="success-container">
+                  <v-icon
+                    icon="mdi-check-circle"
+                    size="80"
+                    color="orange"
+                    class="mb-4"
+                  />
+
+                  <h2 class="text-h4 mb-4 font-weight-bold">
+                    Pembayaran Berhasil
+                  </h2>
+
+                  <p class="text-h6 text-grey-darken-1 mb-6">
+                    Silahkan Menunggu Bukti<br />Pembayaran
+                  </p>
+
+                  <v-btn
+                    color="primary"
+                    size="large"
+                    variant="flat"
+                    rounded="xl"
+                    @click="paymentStore.reset"
+                  >
+                    Kembali ke Awal
+                  </v-btn>
+                </div>
+              </v-card-text>
             </div>
-            <div class="status-item-list">
-              <div :class="qrisStatus === 'Siap' ? 'bg-green' : 'bg-gray'" class="status-indicator-sm"></div>
-              <span class="status-text-sm">Integrasi QRIS</span>
-            </div>
-          </div>
-          <button @click="checkSystemStatus" :disabled="loading" class="check-status-button">
-            <span v-if="loading">Checking...</span>
-            <span v-else>Periksa Status</span>
-          </button>
-        </div>
-        <div v-else class="payment-form-card">
-          <h2 class="payment-form-title">
-            Setup Pembayaran QRIS
-          </h2>
-          <div v-if="error" class="error-message">
-            {{ error }}
-          </div>
-          <form @submit.prevent="submitPayment">
-            <div class="form-group">
-              <label class="form-label">Nama Pasien *</label>
-              <input
-                v-model="form.patientName"
-                type="text"
-                required
-                class="form-input"
-                placeholder="Masukkan nama pasien"
-              >
-            </div>
-            <div class="form-group">
-              <label class="form-label">Nominal Pembayaran *</label>
-              <div class="relative-input">
-                <span class="currency-symbol">Rp</span>
-                <input
-                  v-model="form.amount"
-                  type="number"
-                  required
-                  min="1000"
-                  step="1000"
-                  class="form-input-amount"
-                  placeholder="0"
-                >
-              </div>
-              <p class="input-hint">Minimum: Rp 1.000</p>
-            </div>
-            <div class="form-group">
-              <label class="form-label">Keterangan Pembayaran</label>
-              <textarea
-                v-model="form.description"
-                rows="3"
-                class="form-textarea"
-                placeholder="Pembayaran layanan kesehatan, obat, konsultasi, dll..."
-              ></textarea>
-            </div>
-            <button
-              type="submit"
-              :disabled="loading || !form.patientName || !form.amount || form.amount < 1000"
-              class="submit-button"
-            >
-              <span v-if="loading" class="submit-loading">
-                <svg class="spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
-                Membuat QR Code...
-              </span>
-              <span v-else class="submit-text">
-                <svg class="submit-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11a9 9 0 11-18 0 9 9 0 0118 0zm-9 0a1 1 0 100-2 1 1 0 000 2z"></path>
-                </svg>
-                Buat QR Code Pembayaran
-              </span>
-            </button>
-          </form>
-        </div>
-      </div>
-      <div class="footer-container">
-        <div class="footer-card">
-          <h3 class="footer-title">Hubungi Kami</h3>
-          <div class="footer-grid">
-            <div class="contact-item">
-              <svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
-              </svg>
-              <p class="contact-text">+62 815-5560-6668</p>
-            </div>
-            <div class="contact-item">
-              <svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9m0 9c-5 0-9-4-9-9s4-9 9-9"></path>
-              </svg>
-              <p class="contact-text">rsusaifulanwar.jatimprov.go.id</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
-<script setup lang="ts">
-// Meta tags
-useSeoMeta({
-  title: 'QRIS Payment System - RSU Saiful Anwar',
-  description: 'Sistem Pembayaran QRIS RSU Saiful Anwar Malang'
-})
+<script setup>
+import { usePaymentStore } from "~/stores/payment";
 
-// Composables
-const payment = usePayment()
-const router = useRouter()
+const paymentStore = usePaymentStore();
 
-// Destructure from payment store
-const { 
-  loket, 
-  loading, 
-  error, 
-  isSystemReady, 
-  fetchLoketInfo, 
-  generatePayment,
-  formatCurrency 
-} = payment
-
-// Local state
-const form = ref({
-  patientName: '',
-  amount: '',
-  description: ''
-})
-
-// System status check interval
-let systemStatusCheck: NodeJS.Timeout | null = null
-
-// Computed properties
-const loketStatusClass = computed(() => {
-  return loket.value.id ? 'bg-green animate-pulse' : 'bg-gray'
-})
-
-const connectionStatus = computed(() => {
-  return loket.value.id ? 'Terhubung' : 'Menghubungkan...'
-})
-const connectionStatusClass = computed(() => {
-  return loket.value.id ? 'text-green' : 'text-yellow'
-})
-
-const backendStatus = computed(() => {
-  return loket.value.id ? 'Online' : 'Checking...'
-})
-const backendStatusClass = computed(() => {
-  return loket.value.id ? 'text-green' : 'text-yellow'
-})
-
-const qrisStatus = computed(() => {
-  return loket.value.id ? 'Siap' : 'Standby'
-})
-const qrisStatusClass = computed(() => {
-  return loket.value.id ? 'text-green' : 'text-gray'
-})
-
-// Methods
-const initializeSystem = async () => {
-  try {
-    await fetchLoketInfo()
-  } catch (error) {
-    console.error('Failed to initialize system:', error)
-  }
-}
-
-const refreshLoketInfo = async () => {
-  try {
-    await fetchLoketInfo()
-  } catch (error) {
-    console.error('Failed to refresh loket info:', error)
-  }
-}
-
-const checkSystemStatus = async () => {
-  await refreshLoketInfo()
-}
-
-const submitPayment = async () => {
-  if (!form.value.patientName || !form.value.amount || Number(form.value.amount) < 1000) {
-    return
-  }
-  try {
-    const paymentData = {
-      patient_name: form.value.patientName,
-      amount: Number(form.value.amount),
-      description: form.value.description || `Pembayaran layanan kesehatan - ${form.value.patientName}`,
-      loket_id: loket.value.id!,
-      loket_ip: loket.value.ipAddress
+// Auto advance simulation
+onMounted(() => {
+  // Simulate QR code scanning after 10 seconds on QR step
+  const autoAdvance = () => {
+    if (paymentStore.currentStep === 2) {
+      setTimeout(() => {
+        if (paymentStore.currentStep === 2) {
+          paymentStore.nextStep();
+        }
+      }, 10000);
     }
-    await generatePayment(paymentData)
-    
-    // Reset form
-    form.value = {
-      patientName: '',
-      amount: '',
-      description: ''
-    }
-    
-    // Navigate to QR code page
-    await router.push('/qr-code')
-  } catch (error) {
-    console.error('Payment generation failed:', error)
-  }
-}
+  };
 
-// Lifecycle
-onMounted(async () => {
-  await initializeSystem()
-  
-  // Auto check system status setiap 30 detik
-  systemStatusCheck = setInterval(() => {
-    checkSystemStatus()
-  }, 30000)
-})
-
-onBeforeUnmount(() => {
-  if (systemStatusCheck) {
-    clearInterval(systemStatusCheck)
-  }
-})
+  watch(() => paymentStore.currentStep, autoAdvance, { immediate: true });
+});
 </script>
 
 <style scoped>
-/*
-  =====================================
-  General Styles
-  =====================================
-*/
-.main-container {
+.medical-payment-app {
   min-height: 100vh;
-  background-color: #fffaf0; /* from-orange-50 */
-  background-image: linear-gradient(to bottom right, #fffaf0, #fff7ed); /* to-orange-100 */
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
 }
 
-.content-container {
-  max-width: 960px; /* equivalent to container mx-auto */
-  margin-left: auto;
-  margin-right: auto;
-  padding: 32px 16px; /* px-4 py-8 */
+/* Step 1 - Modern Landing Page Styles */
+.main-content {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
-/*
-  =====================================
-  Header
-  =====================================
-*/
-.header {
+.content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 2rem 1rem;
+}
+
+.header-section {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.logo-item {
+  transition: transform 0.3s ease;
+}
+
+.logo-item:hover {
+  transform: scale(1.1);
+}
+
+.hero-section {
   text-align: center;
-  margin-bottom: 32px; /* mb-8 */
+  max-width: 900px;
+  margin: 0 auto;
+  padding-top: 100px;
 }
 
-.logo-group {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 24px; /* mb-6 */
-  gap: 24px; /* space-x-6 */
+.hero-title {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-weight: 700;
+  margin-bottom: 1rem;
+  line-height: 1.2;
 }
 
-.logo-circle {
-  width: 64px; /* w-16 */
-  height: 64px; /* h-16 */
-  border-radius: 9999px; /* rounded-full */
+.hero-subtitle {
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  color: #64748b;
+  margin-bottom: 3rem;
+  font-weight: 400;
+}
+
+.media-banner {
+  margin-bottom: 3rem;
+}
+
+.banner-card {
+  background: white;
+  overflow: hidden;
+}
+
+.banner-content {
+  padding: 1rem;
+}
+
+.banner-image {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.banner-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 152, 0, 0.8) 0%,
+    rgba(255, 193, 7, 0.8) 100%
+  );
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.logo-icon {
-  width: 32px; /* w-8 */
-  height: 32px; /* h-8 */
+.overlay-content {
+  text-align: center;
+  padding: 2rem;
 }
 
-.logo-text {
-  font-weight: bold; /* font-bold */
-  font-size: 12px; /* text-xs */
+.info-cards {
+  margin-top: 1.5rem;
 }
 
-.bg-green {
-  background-color: #d1fae5; /* bg-green-100 */
+.info-card {
+  transition: all 0.3s ease;
+  height: 100%;
 }
 
-.bg-pink {
-  background-color: #fce7f3; /* bg-pink-100 */
+.info-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }
 
-.bg-red {
-  background-color: #fee2e2; /* bg-red-100 */
+.cta-section {
+  margin-bottom: 2rem;
 }
 
-.text-green {
-  color: #059669; /* text-green-600 */
+.cta-button {
+  padding: 1rem 3rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
 }
 
-.text-pink {
-  color: #db2777; /* text-pink-600 */
+.cta-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
 }
 
-.text-red {
-  color: #dc2626; /* text-red-600 */
+.footer-section {
+  background: white;
+  border-top: 1px solid #e2e8f0;
+  padding: 2rem 0;
+  margin-top: auto;
 }
 
-.main-title {
-  font-size: 36px; /* text-4xl */
-  font-weight: bold; /* font-bold */
-  color: #1f2937; /* text-gray-800 */
-  margin-bottom: 8px; /* mb-2 */
+.contact-footer {
+  text-align: center;
+}
+
+.contact-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 2rem;
+}
+
+.contact-card {
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  height: 100%;
+  min-height: 100px;
+}
+
+.contact-card .v-card-text {
+  padding: 12px 8px !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.contact-card:hover {
+  border-color: #ff9800;
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(255, 152, 0, 0.2);
+}
+
+/* Step 2 & 3 - Payment and Success Styles */
+.payment-card {
+  background: white;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+}
+
+.qr-container {
+  padding: 20px;
+  background: white;
+  border-radius: 16px;
+  display: inline-block;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.qr-code {
+  position: relative;
+  background: white;
+  padding: 20px;
+}
+
+.qr-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.qr-label {
+  position: absolute;
+  bottom: 5px;
+  right: 10px;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.payment-details {
+  max-width: 350px;
+  margin: 0 auto;
+}
+
+.success-container {
+  padding: 40px 20px;
 }
 
 .text-orange {
-  color: #f97316; /* text-orange-500 */
+  color: #ff9800 !important;
 }
 
-.subtitle {
-  font-size: 18px; /* text-lg */
-  color: #4b5563; /* text-gray-600 */
-  margin-bottom: 16px; /* mb-4 */
+.text-dark {
+  color: #424242 !important;
 }
 
-.institution-name {
-  font-size: 14px; /* text-sm */
-  color: #6b7280; /* text-gray-500 */
-}
-
-/*
-  =====================================
-  Status Card
-  =====================================
-*/
-.status-card-container {
-  max-width: 768px; /* max-w-2xl */
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 32px; /* mb-8 */
-}
-
-.status-card {
-  background-color: #ffffff; /* bg-white */
-  border-radius: 8px; /* rounded-lg */
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-lg */
-  padding: 24px; /* p-6 */
-}
-
-.status-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px; /* mb-4 */
-}
-
-.status-info {
-  display: flex;
-  align-items: center;
-  gap: 12px; /* space-x-3 */
-}
-
-.status-indicator {
-  width: 16px; /* w-4 */
-  height: 16px; /* h-4 */
-  border-radius: 9999px; /* rounded-full */
-}
-
-.bg-green {
-  background-color: #22c55e;
-}
-
-.bg-gray {
-  background-color: #9ca3af;
-}
-
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: .5; }
-}
-
-.status-title {
-  font-size: 20px; /* text-xl */
-  font-weight: 600; /* font-semibold */
-  color: #1f2937; /* text-gray-800 */
-}
-
-.refresh-button {
-  color: #2563eb; /* text-blue-600 */
-}
-
-.refresh-button:hover {
-  color: #1e40af; /* hover:text-blue-800 */
-}
-
-.refresh-icon {
-  width: 20px; /* w-5 */
-  height: 20px; /* h-5 */
-}
-
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.status-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px; /* gap-4 */
-  font-size: 14px; /* text-sm */
-}
-
-.status-label {
-  color: #4b5563; /* text-gray-600 */
-}
-
-.status-value {
-  font-family: monospace; /* font-mono */
-  margin-left: 8px; /* ml-2 */
-}
-
-.status-value-color {
-  margin-left: 8px; /* ml-2 */
-  font-weight: 500; /* font-medium */
-}
-
-.text-green {
-  color: #22c55e; /* text-green-600 */
-}
-
-.text-yellow {
-  color: #ca8a04; /* text-yellow-600 */
-}
-
-.text-gray {
-  color: #6b7280; /* text-gray-500 */
-}
-
-/*
-  =====================================
-  Standby & Payment Form
-  =====================================
-*/
-.main-content-container {
-  max-width: 512px; /* max-w-md */
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.standby-card, .payment-form-card {
-  background-color: #ffffff; /* bg-white */
-  border-radius: 8px; /* rounded-lg */
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-lg */
-  padding: 32px; /* p-8 */
-  text-align: center;
-}
-
-.standby-icon-circle {
-  width: 80px; /* w-20 */
-  height: 80px; /* h-20 */
-  background-color: #ffedd5; /* bg-orange-100 */
-  border-radius: 9999px; /* rounded-full */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 24px; /* mb-6 */
-}
-
-.standby-icon {
-  width: 40px; /* w-10 */
-  height: 40px; /* h-10 */
-  color: #ea580c; /* text-orange-600 */
-}
+/* Tablet Landscape Optimizations */
+@media (orientation: landscape) and (min-width: 768px) {
+  .medical-payment-app {
+    height: 100vh;
+    overflow-y: auto;
+  }
 
-.standby-title {
-  font-size: 24px; /* text-2xl */
-  font-weight: bold; /* font-bold */
-  color: #1f2937; /* text-gray-800 */
-  margin-bottom: 16px; /* mb-4 */
-}
+  .content-wrapper {
+    padding: 1rem;
+    justify-content: flex-start;
+  }
 
-.standby-message {
-  color: #4b5563; /* text-gray-600 */
-  margin-bottom: 24px; /* mb-6 */
-}
+  .hero-section {
+    padding-top: 80px;
+  }
 
-.standby-status-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px; /* space-y-3 */
-  text-align: left;
-}
+  .hero-title {
+    font-size: 2.5rem;
+    margin-bottom: 0.75rem;
+  }
 
-.status-item-list {
-  display: flex;
-  align-items: center;
-  gap: 12px; /* space-x-3 */
-}
+  .hero-subtitle {
+    font-size: 1rem;
+    margin-bottom: 2rem;
+  }
 
-.status-indicator-sm {
-  width: 12px; /* w-3 */
-  height: 12px; /* h-3 */
-  border-radius: 9999px; /* rounded-full */
-}
+  .media-banner {
+    margin-bottom: 2rem;
+  }
 
-.status-text-sm {
-  font-size: 14px; /* text-sm */
-}
+  .banner-content .v-img {
+    height: 220px !important;
+  }
 
-.check-status-button {
-  margin-top: 24px; /* mt-6 */
-  background-color: #ea580c; /* bg-orange-600 */
-  color: white;
-  font-weight: 500; /* font-medium */
-  padding: 8px 24px; /* py-2 px-6 */
-  border-radius: 8px; /* rounded-lg */
-  transition-property: background-color;
-  transition-duration: 200ms;
-}
+  .footer-section {
+    padding: 1.5rem 0;
+  }
 
-.check-status-button:hover {
-  background-color: #c2410c; /* hover:bg-orange-700 */
-}
+  .contact-title {
+    font-size: 1.25rem;
+    margin-bottom: 1.5rem;
+  }
 
-.check-status-button:disabled {
-  background-color: #9ca3af; /* disabled:bg-gray-400 */
-  cursor: not-allowed;
-}
+  .logo-container {
+    gap: 1.5rem;
+  }
 
-.payment-form-card {
-  padding: 24px; /* p-6 */
-}
+  .logo-item .v-img {
+    width: 50px !important;
+    height: 50px !important;
+  }
 
-.payment-form-title {
-  font-size: 20px; /* text-xl */
-  font-weight: 600; /* font-semibold */
-  color: #1f2937; /* text-gray-800 */
-  margin-bottom: 24px; /* mb-6 */
-  text-align: center;
-}
+  /* Smaller QR code for landscape */
+  .qr-code {
+    width: 240px !important;
+    height: 240px !important;
+  }
 
-.error-message {
-  margin-bottom: 16px; /* mb-4 */
-  padding: 12px; /* p-3 */
-  background-color: #fef2f2; /* bg-red-100 */
-  border: 1px solid #fca5a5; /* border-red-400 */
-  color: #b91c1c; /* text-red-700 */
-  border-radius: 4px; /* rounded */
+  .payment-card {
+    max-width: flex;
+  }
 }
 
-.form-group {
-  margin-bottom: 16px; /* mb-4 */
-}
+/* Small tablet adjustments */
+@media (max-width: 900px) and (orientation: landscape) {
+  .hero-title {
+    font-size: 2rem;
+  }
 
-.form-label {
-  display: block;
-  color: #374151; /* text-gray-700 */
-  font-size: 14px; /* text-sm */
-  font-weight: 500; /* font-medium */
-  margin-bottom: 8px; /* mb-2 */
-}
+  .banner-content .v-img {
+    height: 180px !important;
+  }
 
-.form-input {
-  width: 100%;
-  padding: 8px 12px; /* px-3 py-2 */
-  border: 1px solid #d1d5db; /* border-gray-300 */
-  border-radius: 8px; /* rounded-lg */
-  outline: none;
-}
+  .info-cards .v-col {
+    padding: 4px;
+  }
 
-.form-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #f97316; /* focus:ring-2 focus:ring-orange-500 */
+  .contact-footer .v-col {
+    margin-bottom: 8px;
+  }
 }
 
-.relative-input {
-  position: relative;
-}
-
-.currency-symbol {
-  position: absolute;
-  left: 12px; /* left-3 */
-  top: 8px; /* top-2 */
-  color: #6b7280; /* text-gray-500 */
-}
+/* Very small tablet landscape */
+@media (max-width: 768px) and (orientation: landscape) {
+  .hero-section {
+    padding-top: 60px;
+  }
 
-.form-input-amount {
-  width: 100%;
-  padding: 8px 12px 8px 40px; /* pl-10 pr-3 py-2 */
-  border: 1px solid #d1d5db; /* border-gray-300 */
-  border-radius: 8px; /* rounded-lg */
-  outline: none;
-}
+  .logo-container {
+    gap: 1rem;
+  }
 
-.form-input-amount:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #f97316; /* focus:ring-2 focus:ring-orange-500 */
-}
-
-.input-hint {
-  font-size: 12px; /* text-xs */
-  color: #6b7280; /* text-gray-500 */
-  margin-top: 4px; /* mt-1 */
-}
-
-.form-textarea {
-  width: 100%;
-  padding: 8px 12px; /* px-3 py-2 */
-  border: 1px solid #d1d5db; /* border-gray-300 */
-  border-radius: 8px; /* rounded-lg */
-  outline: none;
-}
-
-.form-textarea:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #f97316; /* focus:ring-2 focus:ring-orange-500 */
-}
-
-.submit-button {
-  width: 100%;
-  background-color: #ea580c; /* bg-orange-600 */
-  color: white;
-  font-weight: 500; /* font-medium */
-  padding: 12px 16px; /* py-3 px-4 */
-  border-radius: 8px; /* rounded-lg */
-  transition-property: background-color;
-  transition-duration: 200ms;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.submit-button:hover {
-  background-color: #c2410c; /* hover:bg-orange-700 */
-}
-
-.submit-button:disabled {
-  background-color: #9ca3af; /* disabled:bg-gray-400 */
-  cursor: not-allowed;
-}
-
-.submit-loading {
-  display: flex;
-  align-items: center;
-}
-
-.spinner {
-  animation: spin 1s linear infinite;
-  width: 20px; /* w-5 */
-  height: 20px; /* h-5 */
-  margin-right: 12px; /* mr-3 */
-  margin-left: -4px; /* -ml-1 */
-}
-
-.submit-text {
-  display: flex;
-  align-items: center;
-}
-
-.submit-icon {
-  width: 20px; /* w-5 */
-  height: 20px; /* h-5 */
-  margin-right: 8px; /* mr-2 */
-}
-
-/*
-  =====================================
-  Footer
-  =====================================
-*/
-.footer-container {
-  max-width: 768px; /* max-w-2xl */
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 32px; /* mt-8 */
-}
-
-.footer-card {
-  background-color: #ffffff; /* bg-white */
-  border-radius: 8px; /* rounded-lg */
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow */
-  padding: 16px; /* p-4 */
-  text-align: center;
-}
-
-.footer-title {
-  font-weight: bold; /* font-bold */
-  color: #1f2937; /* text-gray-800 */
-  margin-bottom: 8px; /* mb-2 */
-}
-
-.footer-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px; /* gap-4 */
-  font-size: 14px; /* text-sm */
-}
-
-.contact-item {
-  background-color: #fff7ed; /* bg-orange-100 */
-  border-radius: 8px; /* rounded-lg */
-  padding: 12px; /* p-3 */
-}
-
-.contact-icon {
-  width: 20px; /* w-5 */
-  height: 20px; /* h-5 */
-  color: #ea580c; /* text-orange-600 */
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 4px; /* mb-1 */
-}
-
-.contact-text {
-  font-weight: 500; /* font-medium */
-}
-</style>
\ No newline at end of file
+  .logo-item .v-img {
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  .banner-content .v-img {
+    height: 150px !important;
+  }
+
+  .hero-title {
+    font-size: 1.75rem;
+  }
+
+  .contact-footer .v-row .v-col {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+}
+</style>
diff --git a/pages/figma.vue b/pages/figma.vue
new file mode 100644
index 0000000..284dd75
--- /dev/null
+++ b/pages/figma.vue
@@ -0,0 +1,119 @@
+<template>
+  <v-container fluid class="pa-0">
+    <div class="rotated-container">
+      <div class="header-container">
+        <v-sheet
+          class="orange-bar"
+          color="orange-lighten-1"
+          position="absolute"
+        ></v-sheet>
+
+        <v-row no-gutters align="center" class="content-row">
+          <v-col cols="auto" class="rotated-text-container">
+            <div class="text-h3 font-weight-bold rotated-text text-orange-darken-1">With Love We Serve</div>
+            <div class="text-body-1 font-weight-medium rotated-text">Kami Menyediakan Layanan Medis yang Dapat Anda Percayai</div>
+          </v-col>
+
+          <v-spacer></v-spacer>
+
+          <v-col cols="auto" class="rotated-text-container text-white">
+            <div class="text-h6 font-weight-bold rotated-text">rsusaifulanwar.jatimprov.go.id</div>
+          </v-col>
+
+          <v-col cols="auto" class="d-flex flex-column align-center justify-center">
+            <v-avatar size="40" rounded="0" class="mb-1">
+              <v-img src="https://placehold.co/40x40"></v-img>
+            </v-avatar>
+          </v-col>
+
+          <v-col cols="auto" class="rotated-text-container text-white">
+            <div class="text-h6 font-weight-bold rotated-text">0341-362101</div>
+          </v-col>
+
+          <v-col cols="auto" class="rotated-text-container text-white">
+            <div class="text-h6 font-weight-bold rotated-text">rssasaifulanwar</div>
+          </v-col>
+
+          <v-col cols="auto" class="rotated-text-container text-white">
+            <div class="text-h6 font-weight-bold rotated-text">+62 815-5560-6668</div>
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </v-container>
+</template>
+
+<script setup>
+// No script logic needed for this static layout
+</script>
+
+<style scoped>
+.rotated-container {
+  width: 1133px;
+  height: 744px;
+  position: relative;
+  /* Rotate the entire container 90 degrees clockwise */
+  transform: rotate(90deg) translateX(0);
+  transform-origin: top left;
+  background: white;
+  overflow: hidden;
+}
+
+.header-container {
+  position: absolute;
+  left: 46px;
+  top: 9px;
+  /* Use flexbox for spacing as per the original design */
+  display: flex;
+  align-items: center;
+  gap: 40px;
+}
+
+.content-row {
+  width: 100%;
+}
+
+.orange-bar {
+  width: 1041px;
+  height: 72px;
+  left: 0;
+  top: -9px;
+  border-top-left-radius: 60px;
+  border-top-right-radius: 60px;
+  z-index: 1; /* Ensure it's behind the text */
+}
+
+.rotated-text-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.rotated-text {
+  /* Rotate the text 90 degrees counter-clockwise to appear upright in the rotated container */
+  transform: rotate(-90deg);
+  transform-origin: top left;
+  white-space: nowrap; /* Prevent text from wrapping */
+}
+
+.rotated-text-container:nth-child(1) .rotated-text:nth-child(1) {
+  height: 32px; /* Adjusted to fit the original size */
+}
+
+.rotated-text-container:nth-child(3) .rotated-text {
+  height: 272px; /* Match original height */
+}
+
+.rotated-text-container:nth-child(5) .rotated-text {
+  height: 123px; /* Match original height */
+}
+
+.rotated-text-container:nth-child(6) .rotated-text {
+  height: 144px; /* Match original height */
+}
+
+.rotated-text-container:nth-child(7) .rotated-text {
+  height: 181px; /* Match original height */
+}
+</style>
\ No newline at end of file
diff --git a/plugins/vuetify.ts b/plugins/vuetify.ts
new file mode 100644
index 0000000..fc6a9fd
--- /dev/null
+++ b/plugins/vuetify.ts
@@ -0,0 +1,27 @@
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+export default defineNuxtPlugin((app) => {
+  const vuetify = createVuetify({
+    components,
+    directives,
+    theme: {
+      defaultTheme: 'light',
+      themes: {
+        light: {
+          colors: {
+            primary: '#FF9800',
+            secondary: '#FFC107',
+            accent: '#FF5722',
+            error: '#F44336',
+            warning: '#FF9800',
+            info: '#2196F3',
+            success: '#4CAF50'
+          }
+        }
+      }
+    }
+  })
+  app.vueApp.use(vuetify)
+})
\ No newline at end of file
diff --git a/stores/payment.ts b/stores/payment.ts
index 36e1c7b..f12c6ab 100644
--- a/stores/payment.ts
+++ b/stores/payment.ts
@@ -1,171 +1,31 @@
-// stores/payment.ts
 import { defineStore } from 'pinia'
 
-// Define a type for the store's state
-export interface PaymentState {
-  payment: {
-    id: string | null
-    amount: number
-    description: string
-    patientName: string
-    qrCode: string
-    status: 'pending' | 'success' | 'failed' | 'expired'
-    expiryTime: string | null
-  }
-  loket: {
-    id: number | null
-    name: string
-    ipAddress: string
-    location: string
-    isActive: boolean
-  }
-  loading: boolean
-  error: string | null
-}
-
 export const usePaymentStore = defineStore('payment', {
-  state: (): PaymentState => ({
-    payment: {
-      id: null,
-      amount: 0,
-      description: '',
-      patientName: '',
-      qrCode: '',
-      status: 'pending',
-      expiryTime: null,
+  state: () => ({
+    currentStep: 1, // 1: info, 2: qr, 3: success
+    patientInfo: {
+      name: 'ALDY GUSTINARA',
+      amount: 'Rp 1.520.000',
+      expiry: '2025-08-24 12:30:00'
     },
-    loket: {
-      id: null,
-      name: '',
-      ipAddress: '',
-      location: '',
-      isActive: false,
-    },
-    loading: false,
-    error: null,
+    qrCode: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNmZmYiLz48L3N2Zz4='
   }),
-
-  getters: {
-    isSystemReady: (state) => {
-      return state.loket.id && state.loket.isActive
-    },
-    paymentExpired: (state) => {
-      if (!state.payment.expiryTime) return false
-      return new Date() > new Date(state.payment.expiryTime)
-    },
-  },
-
+  
   actions: {
-    setLoading(loading: boolean) {
-      this.loading = loading
-    },
-
-    setError(error: string | null) {
-      this.error = error
-    },
-
-    clearError() {
-      this.error = null
-    },
-
-    setPaymentData(data: Partial<PaymentState['payment']>) {
-      this.payment = { ...this.payment, ...data }
-    },
-
-    setLoketInfo(data: Partial<PaymentState['loket']>) {
-      this.loket = { ...this.loket, ...data }
-    },
-
-    resetPayment() {
-      this.payment = {
-        id: null,
-        amount: 0,
-        description: '',
-        patientName: '',
-        qrCode: '',
-        status: 'pending',
-        expiryTime: null,
+    nextStep() {
+      if (this.currentStep < 3) {
+        this.currentStep++
       }
     },
-
-    // Actions for API calls
-    async fetchLoketInfo() {
-      try {
-        this.setLoading(true)
-        this.clearError()
-
-        const { data } = await $fetch('/api/loket/info', {
-          headers: {
-            'X-Client-IP': await this.getClientIP(),
-          },
-        })
-
-        this.setLoketInfo(data)
-        return data
-      } catch (error: any) {
-        const errorMessage = error.data?.message || 'Gagal mengambil info loket'
-        this.setError(errorMessage)
-        throw error
-      } finally {
-        this.setLoading(false)
+    
+    prevStep() {
+      if (this.currentStep > 1) {
+        this.currentStep--
       }
     },
-
-    async generatePayment(paymentData: {
-      patient_name: string
-      amount: number
-      description: string
-      loket_id: number
-      loket_ip: string
-    }) {
-      try {
-        this.setLoading(true)
-        this.clearError()
-
-        const { data } = await $fetch('/api/payment/generate', {
-          method: 'POST',
-          body: paymentData,
-          headers: {
-            'X-Client-IP': await this.getClientIP(),
-          },
-        })
-
-        this.setPaymentData(data)
-        return data
-      } catch (error: any) {
-        const errorMessage = error.data?.message || 'Gagal generate pembayaran'
-        this.setError(errorMessage)
-        throw error
-      } finally {
-        this.setLoading(false)
-      }
-    },
-
-    async checkPaymentStatus(paymentId: string) {
-      try {
-        const { data } = await $fetch(`/api/payment/status/${paymentId}`)
-        this.setPaymentData({ status: data.status })
-        return data
-      } catch (error) {
-        console.error('Error checking payment status:', error)
-        throw error
-      }
-    },
-
-    // Helper method to get client IP
-    async getClientIP(): Promise<string> {
-      if (process.client) {
-        try {
-          const response = await fetch('https://api.ipify.org?format=json')
-          const data = await response.json()
-          return data.ip
-        } catch {
-          return window.location.hostname === 'localhost'
-            ? '127.0.0.1'
-            : window.location.hostname
-        }
-      }
-      return 'server-side'
-    },
-  },
+    
+    reset() {
+      this.currentStep = 1
+    }
+  }
 })
\ No newline at end of file