diff --git a/app/assets/main.css b/app/assets/main.css
new file mode 100644
index 0000000..00d8ba6
--- /dev/null
+++ b/app/assets/main.css
@@ -0,0 +1,6 @@
+summary::marker {
+  display: none;
+}
+summary::-webkit-details-marker {
+  display: none;
+}
\ No newline at end of file
diff --git a/app/components/MineBlock.vue b/app/components/MineBlock.vue
index 216a6ba..ee952c7 100644
--- a/app/components/MineBlock.vue
+++ b/app/components/MineBlock.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MineSweeperOptions } from './mine'
+import type { MineSweeperOptions } from './types'
 import { watch } from 'vue'
 
 const { options } = defineProps<{
@@ -172,11 +172,11 @@ watch(
     <div
       v-show="block.isTurned && block.isMine"
       ref="bombImg"
-      class="i-material-symbols-bomb"
+      class="i-mdi-bomb"
     />
     <div
       v-show="block.isFlag && !block.isTurned"
-      class="i-material-symbols-flag-outline"
+      class="i-mdi-flag-outline"
     />
   </div>
 </template>
diff --git a/app/components/MineSweeper.vue b/app/components/MineSweeper.vue
index f7ffb0b..3b91f93 100644
--- a/app/components/MineSweeper.vue
+++ b/app/components/MineSweeper.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MineSweeperOptions } from './mine'
+import type { MineSweeperOptions } from './types'
 
 const { options } = defineProps<{
   options: MineSweeperOptions
diff --git a/app/components/mine.ts b/app/components/mine.ts
deleted file mode 100644
index 6847837..0000000
--- a/app/components/mine.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface MineSweeperOptions {
-  width: number
-  height: number
-  bombProb: number
-}
diff --git a/app/components/types.ts b/app/components/types.ts
new file mode 100644
index 0000000..d8ab870
--- /dev/null
+++ b/app/components/types.ts
@@ -0,0 +1,12 @@
+export interface MineSweeperOptions {
+  width: number
+  height: number
+  bombProb: number
+}
+
+export interface MineBlockType {
+  faceup: boolean
+  clickable: 'ok' | 'flag'
+  type: 'normal' | 'bomb'
+  bombsAround: number
+}
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 3f32df1..44b8cf3 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MineSweeperOptions } from '~/components/mine'
+import type { MineSweeperOptions } from '~/components/types'
 
 const mineSweeper = useTemplateRef('mineSweeper')
 const options = reactive<MineSweeperOptions>({
@@ -10,20 +10,56 @@ const options = reactive<MineSweeperOptions>({
 function onReset() {
   mineSweeper.value?.init()
 }
+
+const help = useTemplateRef('help')
+const show = ref(false)
+onClickOutside(help, () => show.value = false)
 </script>
 
 <template>
-  <div all="c-gray-7 font-mono" flex flex-col items-center gap-y-2xl pt-3xl>
-    <div font-size-8>
-      minesweeper
-    </div>
+  <div flex="~ col items-center gap-y-2xl" pt-3xl c-gray-7 font-mono>
+    <h2 flex="~ items-center gap-x-4">
+      <p font-size-8>
+        minesweeper
+      </p>
+
+      <div ref="help" relative>
+        <button aspect-ratio-square h-auto w-auto rounded-full p-2 btn-outline @click="show = !show">
+          <div i-mdi-help text-lg />
+        </button>
+
+        <Transition
+          enter-active-class="transition"
+          leave-active-class="transition"
+          enter-from-class="op-0 translate-y-lg"
+          leave-to-class="op-0 translate-y-lg"
+        >
+          <section v-show="show" w="[max-content]" absolute mt-4 rounded-md bg-white p-4 shadow>
+            <div flex>
+              <div i-mdi-mouse-left-click-outline />
+              /
+              <div i-mdi-gesture-tap />
+            </div>
+            Left click/Tap to check
+
+            <div mt-4 flex>
+              <div i-mdi-mouse-right-click-outline />
+              /
+              <div i-mdi-gesture-tap-hold />
+            </div>
+            Right click/Hold to flag
+          </section>
+        </Transition>
+      </div>
+    </h2>
+
     <div w-full flex flex-wrap items-center justify-center gap-x-4 gap-y-4>
       <div>
         x length:
         <input
           v-model="options.width"
           placeholder="input x length..."
-          w-xm h-6
+          input
           type="number"
         >
       </div>
@@ -32,7 +68,7 @@ function onReset() {
         <input
           v-model="options.height"
           placeholder="input y length..."
-          w-xm h-6
+          input
           type="number"
         >
       </div>
@@ -41,17 +77,16 @@ function onReset() {
         <input
           v-model="options.bombProb"
           placeholder="input bomb probability..."
-          max="1"
-          min="0"
-          step="0.05"
-          type="number"
-          w-xm h-6
+          max="1" min="0" step="0.05" type="number"
+          input
         >
       </div>
     </div>
-    <button h-8 w-20 font-size-4 transition-100 btn @click="onReset">
+
+    <button btn @click="onReset">
       reset
     </button>
+
     <div flex="~ col gap-y-1" mb-6xl select-none @contextmenu.prevent>
       <MineSweeper ref="mineSweeper" :options />
     </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 449ae96..c18a5b8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,6 +3,10 @@ export default defineNuxtConfig({
   app: {
     baseURL: '/minesweeper/',
   },
+  css: [
+    '@unocss/reset/tailwind-compat.css',
+    './app/assets/main.css',
+  ],
   compatibilityDate: '2024-10-28',
   devtools: { enabled: true },
   modules: [
diff --git a/package.json b/package.json
index 3fa68b0..280fac5 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
-    "@iconify-json/material-symbols": "^1.2.5",
+    "@iconify-json/mdi": "^1.2.1",
     "@unocss/eslint-plugin": "^0.63.6",
     "@unocss/nuxt": "^0.63.6",
     "@vueuse/core": "^11.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 243d5aa..5c1b4bb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,9 +24,9 @@ importers:
       '@antfu/eslint-config':
         specifier: ^3.8.0
         version: 3.8.0(@typescript-eslint/utils@8.11.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(@unocss/eslint-plugin@0.63.6(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(@vue/compiler-sfc@3.5.12)(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      '@iconify-json/material-symbols':
-        specifier: ^1.2.5
-        version: 1.2.5
+      '@iconify-json/mdi':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@unocss/eslint-plugin':
         specifier: ^0.63.6
         version: 0.63.6(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
@@ -914,8 +914,8 @@ packages:
     resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
     engines: {node: '>=18.18'}
 
-  '@iconify-json/material-symbols@1.2.5':
-    resolution: {integrity: sha512-CXG4noUsqBrbr0npZVldxlf8XGUW3LF3VEGvgk/2k+A3GQt/DM/04PsbjkO2wOI/ORP8rcaHz2pw8F2TPL+CKA==}
+  '@iconify-json/mdi@1.2.1':
+    resolution: {integrity: sha512-dSkQU78gsZV6Yxnq78+LuX7jzeFC/5NAmz7O3rh558GimGFcwMVY/OtqRowIzjqJBmMmWZft7wkFV4TrwRXjlg==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -5398,7 +5398,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.3.1': {}
 
-  '@iconify-json/material-symbols@1.2.5':
+  '@iconify-json/mdi@1.2.1':
     dependencies:
       '@iconify/types': 2.0.0
 
diff --git a/uno.config.ts b/uno.config.ts
index d53e96c..a473f43 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -10,10 +10,11 @@ import {
 
 export default defineConfig({
   shortcuts: [
-    [
-      'btn',
-      'b-0 shadow-md rounded cursor-pointer bg-gray-2 transition-100 hover:shadow-lg hover:bg-gray-1 active:bg-gray-3',
-    ],
+    ['btn', 'font-medium inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm transition-colors focus-visible:outline-none px-4 py-2 shadow c-#fafafa disabled:pointer-events-none bg-#18181b hover:bg-#18181b/90 disabled:opacity-50'],
+
+    ['btn-outline', 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-(1 solid #e4e4e7) bg-transparent shadow-sm hover:bg-#f4f4f5 hover:text-#18181b h-9 px-4 py-2'],
+
+    ['input', 'b-(1 solid #e4e4e7) p-(x-3 y-2) rounded-md focus:outline-none focus:ring-(2 #18181b offset-2) disabled:cursor-not-allowed disabled:opacity-50'],
   ],
   presets: [
     presetUno(),