diff --git a/Codes.xml b/Codes.xml
index 4b2845c..705b19c 100644
--- a/Codes.xml
+++ b/Codes.xml
@@ -3285,8 +3285,8 @@
         <title lang="en-US">Customized display</title>
         <title lang="ja-JP">カスタマイズ表示</title>
         <author>sup39(サポミク)</author>
-        <version>0.2</version>
-        <date>Oct 15, 2022</date>
+        <version>0.3</version>
+        <date>Oct 30, 2022</date>
         <dependencies>drawText</dependencies>
         <description lang="en-US">
           Shows metadata at any given time.
@@ -3352,25 +3352,25 @@
           #### プレビュー
         </description>
         <source version="GMSJ01">
-          C6206734 817FA000
-          077FA000 00000084
-          4A83B229 806D98B8
-          C0230010 C0430014
-          C0630018 A1230096
-          C08300B0 C0A300A8
-          806D97E8 81430058
-          554A07BE 48000035
-          5820252E 30660A59
-          20252E30 660A5A20
-          252E3066 0A412025
-          68750A48 20252E32
-          660A5620 252E3266
-          0A514620 25750000
-          7D0802A6 38600010
-          388000C8 38A00012
-          38C0FFFF 7CC73378
-          4CC63242 4BFF61BD
-          4AA0C6B8 00000000
+          C62069D4 817FA000
+          077FA000 00000088
+          38610E90 4A83B225
+          806D98B8 C0230010
+          C0430014 C0630018
+          A1230096 C08300B0
+          C0A300A8 806D97E8
+          81430058 554A07BE
+          48000035 5820252E
+          30660A59 20252E30
+          660A5A20 252E3066
+          0A412025 68750A48
+          20252E32 660A5620
+          252E3266 0A514620
+          25750000 7D0802A6
+          38600010 388000C0
+          38A00012 38C0FFFF
+          7CC73378 4CC63242
+          4BFF61B9 4AA0C954
         </source>
         <source version="GMSJ0A">
           C61252A0 817FA000
@@ -3834,8 +3834,8 @@
         <title lang="en-US">Pattern Selector</title>
         <title lang="ja-JP">パターン選択</title>
         <author>sup39(サポミク)</author>
-        <version>0.2.2</version>
-        <date>Apr 25, 2022</date>
+        <version>0.3</version>
+        <date>Oct 30, 2022</date>
         <dependencies>drawText</dependencies>
         <description lang="en-US">
           Ⓑ is the cursor to select the pattern,
@@ -3851,6 +3851,8 @@
 
           When the cursor(Ⓑ) is not shown, you can press L+D-Pad Left/Right to make it appear.
 
+          You can change the position and color of the text [here](#PatternSelector-config).
+
           ### Chain Chomp (PV4)
 
           Use the [1st digit]{.emph} to select the pattern. The 2nd and 3rd are ignored.
@@ -3888,6 +3890,8 @@
 
           カーソル(Ⓑ)が表示されない時、L+十字キー左/右を押せば出てきます。
 
+          [ここ](#PatternSelector-config)で文字の位置や色を変えることができます。
+
           ### ワンワン(PV4)
 
           [1桁目]{.emph}でパターンを選択します。2桁目と3桁目は無視されます。
@@ -3912,194 +3916,122 @@
           %object[]{data="/img/PatternSelector/PV1-3.svg"}
         </description>
         <source version="GMSJ01">
-          0424F324 7FE6FB78
-          0420675C 495F2A59
-          0424F32C 495A9D6D
-          077F9000 000002C5
-          3D208040 A1290D50
-          7C091800 4CA20020
-          3D008180 394892C8
-          A10892C8 7D294079
-          4D820020 892A0002
-          7C892214 548407BE
-          988A0002 4E800020
-          3D208040 A1490D50
-          7C0A1800 4CA20020
-          3D008180 392892C8
-          A10892C8 7D4A4079
-          4D820020 89490002
-          2C0A0003 40A2000C
-          39400000 99490002
-          89490002 7D295214
-          89490004 7D4A2214
-          38800005 7C8A23D6
-          1C840005 7C845050
-          98890004 4E800020
-          81460000 3D20803E
-          392987C0 7C0A4800
-          40A2008C 81260004
-          89290013 28090031
-          4182005C 28090032
-          41820034 28090030
-          40A20044 2C040021
-          3D208180 890992CD
-          418200C4 2C040026
-          418200C4 2C04001D
-          40A20024 39200004
-          48000068 2C04001D
-          3D208180 890992CC
-          4182008C 2C040021
-          4182008C 38C0FFFF
-          4AA67114 2C040002
-          3D208180 890992CE
-          4182008C 2C040008
-          40A2FFE4 39200005
-          48000028 3D20803E
-          3929A9C0 7C0A4800
-          4082FFCC 2C05FFFF
-          4082FFC4 3D208180
-          890992CC 39200007
-          2C080000 41A2FFB0
-          3D408180 5529103A
-          394A92A5 7D2A4A14
-          7D294214 8929FFFF
-          7D290774 2C09FFFF
-          41A2FF8C 7D234B78
-          4E800020 39200001
-          4BFFFFC8 39200000
-          4BFFFFC0 39200003
-          4BFFFFB8 39200002
-          4BFFFFB0 39200006
-          4BFFFFA8 9421FFE0
-          7C0802A6 90010024
-          BFC10018 7C7F1B78
-          4A83C061 38800001
-          38600042 3FC08180
-          4BFFFE29 38800003
-          38600041 4BFFFE1D
-          38800001 38600048
-          4BFFFE49 38800004
-          38600044 4BFFFE3D
-          391E92C8 89480002
-          3D202320 61292020
-          38600010 214A0003
-          38E0FFFF 554A1838
-          38C0FFFF 5D29503E
-          89480006 38A00014
-          38800140 91410014
-          552A063E 91410010
-          89480005 9141000C
-          552AC63E 91410008
-          5529863E 89480004
-          3D008180 39089290
-          4CC63182 4BFF6FD5
-          3D208040 A1290D50
-          7FE3FB78 80010024
-          B13E92C8 83E1001C
-          7C0803A6 83C10018
-          38210020 4A83BF9C
-          50617474 65726E20
-          25632558 25632558
-          25632558 00452020
-          FFFF621C FF502525
-          25FF4520 20FFFF62
-          1C510707 FFFF3601
-          FF1E6E20 FF000000
+          0424F32C 495A9CD5
+          042069DC 495F26B8
+          077F9000 000001AF
+          801F0000 3D00817F
+          61089167 3D40817F
+          614A0024 3D80803D
+          618CA9C0 7C006040
+          41820048 3D80803D
+          618C87C0 7C006040
+          40820034 819F0004
+          898C0013 508C442E
+          39280031 88080007
+          7CEA00AE A0080005
+          7C006040 41820024
+          39080007 7C084840
+          4180FFE4 4AA671C0
+          2C05FFFF 4082FFF8
+          88EA0000 39080031
+          7CE73B79 4182FFE8
+          7C0838AE 280000FF
+          4182FFDC 7C030378
+          4E800020 38610E90
+          4A83C191 3C808040
+          A4040D82 3C60817F
+          84A30024 70000040
+          41A20050 88840019
+          548007FE 7CA02850
+          5480FFFE 7CA50214
+          54A507BE 5480F7BF
+          41A20030 28050003
+          41A00008 38A00000
+          5480EFFE 5080077A
+          7D8328AE 7D8C0214
+          280C0005 41A00008
+          398CFFFB 7D8329AE
+          98A30003 3821FFF0
+          3D00817F 6108919D
+          3C002020 60002023
+          54AC183E 5C00603E
+          98080008 540CC63E
+          9988000B 540C863E
+          9988000E 89230000
+          89430001 89630002
+          91610008 38600010
+          38800140 38A00014
+          38C0FFFF 38E0FFFF
+          4CC63182 4BFF70DD
+          38210010 4AA0D87C
+          452020FF 213200FF
+          621CFF1D 32005025
+          25252630 01FF4520
+          20213001 FFFF621C
+          1D300151 0707FF08
+          3102FF36 01FF0231
+          021E6E20 FF506174
+          7465726E 203E2558
+          3E25583E 25580000
         </source>
         <source version="GMSJ0A">
-          040278F8 7FE6FB78
-          041252C8 496D3EED
-          04027900 497D1799
-          077F9000 000002C5
-          3D20803F A1295428
-          7C091800 4CA20020
-          3D008180 394892C8
-          A10892C8 7D294079
-          4D820020 892A0002
-          7C892214 548407BE
-          988A0002 4E800020
-          3D20803F A1495428
-          7C0A1800 4CA20020
-          3D008180 392892C8
-          A10892C8 7D4A4079
-          4D820020 89490002
-          2C0A0003 40A2000C
-          39400000 99490002
-          89490002 7D295214
-          89490004 7D4A2214
-          38800005 7C8A23D6
-          1C840005 7C845050
-          98890004 4E800020
-          81460000 3D20803A
-          39294B80 7C0A4800
-          40A2008C 81260004
-          89290013 28090031
-          4182005C 28090032
-          41820034 28090030
-          40A20044 2C040021
-          3D208180 890992CD
-          418200C4 2C040026
-          418200C4 2C04001D
-          40A20024 39200004
-          48000068 2C04001D
-          3D208180 890992CC
-          4182008C 2C040021
-          4182008C 38C0FFFF
-          4A83F574 2C040002
-          3D208180 890992CE
-          4182008C 2C040008
-          40A2FFE4 39200005
-          48000028 3D20803A
-          39296D70 7C0A4800
-          4082FFCC 2C05FFFF
-          4082FFC4 3D208180
-          890992CC 39200007
-          2C080000 41A2FFB0
-          3D408180 5529103A
-          394A92A5 7D2A4A14
-          7D294214 8929FFFF
-          7D290774 2C09FFFF
-          41A2FF8C 7D234B78
-          4E800020 39200001
-          4BFFFFC8 39200000
-          4BFFFFC0 39200003
-          4BFFFFB8 39200002
-          4BFFFFB0 39200006
-          4BFFFFA8 9421FFE0
-          7C0802A6 90010024
-          BFC10018 7C7F1B78
-          4AAD1D05 38800001
-          38600042 3FC08180
-          4BFFFE29 38800003
-          38600041 4BFFFE1D
-          38800001 38600048
-          4BFFFE49 38800004
-          38600044 4BFFFE3D
-          391E92C8 89480002
-          3D202320 61292020
-          38600010 214A0003
-          38E0FFFF 554A1838
-          38C0FFFF 5D29503E
-          89480006 38A00014
-          38800140 91410014
-          552A063E 91410010
-          89480005 9141000C
-          552AC63E 91410008
-          5529863E 89480004
-          3D008180 39089290
-          4CC63182 4BFF6FD5
-          3D20803F A1295428
-          7FE3FB78 80010024
-          B13E92C8 83E1001C
-          7C0803A6 83C10018
-          38210020 4AAD1C40
-          50617474 65726E20
-          25632558 25632558
-          25632558 00452020
-          FFFF621C FF502525
-          25FF4520 20FFFF62
-          1C510707 FFFF3601
-          FF1E6E20 FF000000
+          04027900 497D1701
+          04125548 496D3B4C
+          077F9000 000001AF
+          801F0000 3D00817F
+          61089167 3D40817F
+          614A0024 3D80803A
+          618C6D70 7C006040
+          41820048 3D80803A
+          618C4B80 7C006040
+          40820034 819F0004
+          898C0013 508C442E
+          39280031 88080007
+          7CEA00AE A0080005
+          7C006040 41820024
+          39080007 7C084840
+          4180FFE4 4A83F620
+          2C05FFFF 4082FFF8
+          88EA0000 39080031
+          7CE73B79 4182FFE8
+          7C0838AE 280000FF
+          4182FFDC 7C030378
+          4E800020 38610E90
+          4AAD1E35 3C80803F
+          A404545A 3C60817F
+          84A30024 70000040
+          41A20050 88840019
+          548007FE 7CA02850
+          5480FFFE 7CA50214
+          54A507BE 5480F7BF
+          41A20030 28050003
+          41A00008 38A00000
+          5480EFFE 5080077A
+          7D8328AE 7D8C0214
+          280C0005 41A00008
+          398CFFFB 7D8329AE
+          98A30003 3821FFF0
+          3D00817F 6108919D
+          3C002020 60002023
+          54AC183E 5C00603E
+          98080008 540CC63E
+          9988000B 540C863E
+          9988000E 89230000
+          89430001 89630002
+          91610008 38600010
+          38800140 38A00014
+          38C0FFFF 38E0FFFF
+          4CC63182 4BFF70DD
+          38210010 4A92C3E8
+          452020FF 213200FF
+          621CFF1D 32005025
+          25252630 01FF4520
+          20213001 FFFF621C
+          1D300151 0707FF08
+          3102FF36 01FF0231
+          021E6E20 FF506174
+          7465726E 203E2558
+          3E25583E 25580000
         </source>
     </code>
     <code>
diff --git a/changelog.md b/changelog.md
index c8c980d..45654c5 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,4 +1,8 @@
 # Changelog
+## Oct 30, 2022
+- Make PatternSelector shorter and make its appearance customizable (v0.3)
+- Render CustomizedDisplay later than water/juice (v0.3)
+
 ## Oct 17, 2022
 - Fix FastForward code (wrong button value)
 
diff --git a/package.json b/package.json
index ef160e5..0edf689 100644
--- a/package.json
+++ b/package.json
@@ -1,41 +1,41 @@
-{
-  "name": "gctgenerator",
-  "version": "3.0.1",
-  "description": "Super Mario Sunshine Practice File Generator",
-  "main": "index.js",
-  "authors": {
-    "name": "Matteias Collet",
-    "email": "matteias.collet@bluewin.ch"
-  },
-  "repository": "https://github.com/BitPatty/gctGenerator/gctGenerator",
-  "scripts": {
-    "dev": "npm run codes:inject && npm run translations:compare && vuepress dev site",
-    "build": "node ./scripts/inject_codes.js && npm run translations:compare && vuepress build site",
-    "format": "prettier --write ./site/**/*{.md,.js,.json}",
-    "translations:compare": "node ./scripts/compare_translations.js",
-    "codes:inject": "node ./scripts/inject_codes.js && npm run format",
-    "codes:clean": "node ./scripts/clean_codes.js && npm run format",
-    "precommit": "npm run codes:clean && git add .",
-    "serve": "serve ./site/.vuepress/dist"
-  },
-  "license": "Apache-2.0",
-  "devDependencies": {
-    "@sup39/markdown-it-attr": "1.2.2",
-    "@sup39/markdown-it-inline-tag": "1.0.1",
-    "@types/encoding-japanese": "^2.0.1",
-    "@vuepress/plugin-back-to-top": "1.9.7",
-    "@vuepress/plugin-medium-zoom": "1.9.7",
-    "encoding-japanese": "^2.0.0",
-    "jsdom": "20.0.1",
-    "pre-commit": "1.2.2",
-    "prettier": "2.7.1",
-    "serve": "14.0.1",
-    "vuepress": "1.9.7"
-  },
-  "dependencies": {
-    "vuedraggable": "2.24.3"
-  },
-  "pre-commit": [
-    "precommit"
-  ]
-}
+{
+  "name": "gctgenerator",
+  "version": "3.0.1",
+  "description": "Super Mario Sunshine Practice File Generator",
+  "main": "index.js",
+  "authors": {
+    "name": "Matteias Collet",
+    "email": "matteias.collet@bluewin.ch"
+  },
+  "repository": "https://github.com/BitPatty/gctGenerator/gctGenerator",
+  "scripts": {
+    "dev": "npm run codes:inject && npm run translations:compare && vuepress dev site",
+    "build": "node ./scripts/inject_codes.js && npm run translations:compare && vuepress build site",
+    "format": "prettier --write ./site/**/*{.md,.js,.json}",
+    "translations:compare": "node ./scripts/compare_translations.js",
+    "codes:inject": "node ./scripts/inject_codes.js && npm run format",
+    "codes:clean": "node ./scripts/clean_codes.js && npm run format",
+    "precommit": "npm run codes:clean && git add .",
+    "serve": "serve ./site/.vuepress/dist"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@sup39/markdown-it-attr": "1.2.2",
+    "@sup39/markdown-it-inline-tag": "1.0.1",
+    "@types/encoding-japanese": "^2.0.1",
+    "@vuepress/plugin-back-to-top": "1.9.7",
+    "@vuepress/plugin-medium-zoom": "1.9.7",
+    "encoding-japanese": "^2.0.0",
+    "jsdom": "20.0.1",
+    "pre-commit": "1.2.2",
+    "prettier": "2.7.1",
+    "serve": "14.0.1",
+    "vuepress": "1.9.7"
+  },
+  "dependencies": {
+    "vuedraggable": "2.24.3"
+  },
+  "pre-commit": [
+    "precommit"
+  ]
+}
diff --git a/site/.vuepress/components/Generator.vue b/site/.vuepress/components/Generator.vue
index f192cc7..8de2526 100644
--- a/site/.vuepress/components/Generator.vue
+++ b/site/.vuepress/components/Generator.vue
@@ -114,6 +114,7 @@ import { translate } from '../i18n/localeHelper';
 // Code Configs
 import {getConfig as getConfigQFT} from './codes/qft/codegen';
 import {getConfig as getConfigCD} from './codes/CustomizedDisplay/codegen';
+import {getConfig as getConfigPS} from './codes/PatternSelector/codegen';
 
 export default {
   data() {
@@ -134,7 +135,7 @@ export default {
   created() {
     this.codeConfigs = {
       qft: getConfigQFT(),
-      PatternSelector: {},
+      PatternSelector: getConfigPS(),
       SpeedDisplay: {},
       PASDisplay: {},
       CustomizedDisplay: getConfigCD(this.version),
diff --git a/site/.vuepress/components/Preview.vue b/site/.vuepress/components/Preview.vue
index 6823900..8a52383 100644
--- a/site/.vuepress/components/Preview.vue
+++ b/site/.vuepress/components/Preview.vue
@@ -9,7 +9,7 @@
         <PreviewString v-for="mdp,i in mdps" :key="i"
           :x="mdp.x" :y="mdp.y" :size="mdp.fontSize" :color="mdp.color" :text="mdp.text" />
       </div>
-      <PreviewString v-if="config.PatternSelector" :x="16" :y="320" :size="20" :color="'#fff'" text="Pattern #0 0 0" />
+      <PreviewString v-if="ps" :x="ps.x" :y="ps.y" :size="ps.fontSize" :color="ps.color" :text="ps.text" />
     </div>
   </div>
 </template>
@@ -61,6 +61,16 @@ export default {
         },
       };
     },
+    ps() {
+      const {config: {PatternSelector: ps}} = this;
+      if (ps == null) return;
+      const {x, y, fontSize, fgRGB, fgA, fgRGB2, fgA2, label} = ps;
+      return {
+        x, y, fontSize,
+        color: fg2Style(fgRGB, fgA, fgRGB2, fgA2),
+        text: label+'#0 0 0',
+      };
+    },
   },
 }
 </script>
diff --git a/site/.vuepress/components/codes/CustomizedDisplay/codegen.js b/site/.vuepress/components/codes/CustomizedDisplay/codegen.js
index 59d9803..cc86b6c 100644
--- a/site/.vuepress/components/codes/CustomizedDisplay/codegen.js
+++ b/site/.vuepress/components/codes/CustomizedDisplay/codegen.js
@@ -1,11 +1,11 @@
 import { parseJSON } from '../codegen.js';
-import { ASM, makeInst, liDX, str2inst, makeProgram, inst2gecko } from './asm.js';
+import { ASM, makeInst, liDX, str2inst, makeProgram, inst2gecko } from '../asm.js';
 export const lskey = 'config/CustomizedDisplay';
 
 export const defaultConfig = [
   {
     x: 16,
-    y: 200,
+    y: 192,
     fontSize: 18,
     fgRGB: 0xffffff,
     fgA: 0xff,
@@ -355,10 +355,10 @@ export function format2previewText(input, version, f = null) {
 }
 
 const addrsOrig = {
-  GMSJ01: 0x80206734,
-  GMSJ0A: 0x801252a0,
-  GMSE01: 0x80143f14,
-  GMSP01: 0x80138b50,
+  GMSJ01: 0x80206a00 - 0x2c,
+  GMSJ0A: 0x8012556c - 0x2c,
+  GMSE01: 0x801441e0 - 0x2c,
+  GMSP01: 0x80138e1c - 0x2c,
 };
 const addrsSetup2D = {
   GMSJ01: 0x80035228,
@@ -396,6 +396,8 @@ export default function codegen(version) {
 
   // program
   const program = makeProgram(addrDst);
+  // addi r3, r1, 0xE90
+  program.push(ASM.addi(3, 1, 0xe90));
   // addi r1, r1, -spOff
   if (spOff) program.push(ASM.addi(1, 1, -spOff));
   // bl setup
@@ -407,10 +409,6 @@ export default function codegen(version) {
   }
   // addi r1, r1, spOff
   if (spOff) program.push(ASM.addi(1, 1, spOff));
-  // addi r3, r1, 0xE90
-  program.push(ASM.addi(3, 1, 0xe90));
-  // bl setup
-  program.bl(addrSetup2D);
   // b orig+4
   program.b(addrOrig + 4);
 
diff --git a/site/.vuepress/components/codes/PatternSelector/code/GMSJ01.js b/site/.vuepress/components/codes/PatternSelector/code/GMSJ01.js
new file mode 100644
index 0000000..922a009
--- /dev/null
+++ b/site/.vuepress/components/codes/PatternSelector/code/GMSJ01.js
@@ -0,0 +1,59 @@
+export const addrDraw2D = 0x802069dc;
+export const code04 = `
+0424F32C 495A9CD5
+042069DC 495F26B8
+`;
+export const codes = [
+  /* 077F9000 000001AF */ `
+3D40817F
+614A0024 3D80803D
+618CA9C0 7C006040
+41820048 3D80803D
+618C87C0 7C006040
+40820034 819F0004
+898C0013 508C442E
+39280031 88080007
+7CEA00AE A0080005
+7C006040 41820024
+39080007 7C084840
+4180FFE4 4AA671C0
+2C05FFFF 4082FFF8
+88EA0000 39080031
+7CE73B79 4182FFE8
+7C0838AE 280000FF
+4182FFDC 7C030378
+4E800020 38610E90
+4A83C191 3C808040
+A4040D82 3C60817F
+84A30024 70000040
+41A20050 88840019
+548007FE 7CA02850
+5480FFFE 7CA50214
+54A507BE 5480F7BF
+41A20030 28050003
+41A00008 38A00000
+5480EFFE 5080077A
+7D8328AE 7D8C0214
+280C0005 41A00008
+398CFFFB 7D8329AE
+98A30003 3821FFF0
+`,
+  /* li r8 */ `
+3C002020 60002023
+54AC183E 5C00603E
+`,
+  /* stb r0, fmtCS0+fmtCSD*i(r8) */ `
+89230000
+89430001 89630002
+91610008
+`,
+  /* li r3~r7, drawText, b */ `
+452020FF 213200FF
+621CFF1D 32005025
+25252630 01FF4520
+20213001 FFFF621C
+1D300151 0707FF08
+3102FF36 01FF0231
+021E6E20 FF
+` /* fmt */,
+];
diff --git a/site/.vuepress/components/codes/PatternSelector/code/GMSJ0A.js b/site/.vuepress/components/codes/PatternSelector/code/GMSJ0A.js
new file mode 100644
index 0000000..fffcd85
--- /dev/null
+++ b/site/.vuepress/components/codes/PatternSelector/code/GMSJ0A.js
@@ -0,0 +1,60 @@
+export const addrDraw2D = 0x80125548;
+export const code04 = `
+04027900 497D1701
+04125548 496D3B4C
+`;
+
+export const codes = [
+  `
+3D40817F
+614A0024 3D80803A
+618C6D70 7C006040
+41820048 3D80803A
+618C4B80 7C006040
+40820034 819F0004
+898C0013 508C442E
+39280031 88080007
+7CEA00AE A0080005
+7C006040 41820024
+39080007 7C084840
+4180FFE4 4A83F620
+2C05FFFF 4082FFF8
+88EA0000 39080031
+7CE73B79 4182FFE8
+7C0838AE 280000FF
+4182FFDC 7C030378
+4E800020 38610E90
+4AAD1E35 3C80803F
+A404545A 3C60817F
+84A30024 70000040
+41A20050 88840019
+548007FE 7CA02850
+5480FFFE 7CA50214
+54A507BE 5480F7BF
+41A20030 28050003
+41A00008 38A00000
+5480EFFE 5080077A
+7D8328AE 7D8C0214
+280C0005 41A00008
+398CFFFB 7D8329AE
+98A30003 3821FFF0
+`,
+  `
+3C002020 60002023
+54AC183E 5C00603E
+`,
+  `
+89230000
+89430001 89630002
+91610008
+`,
+  `
+452020FF 213200FF
+621CFF1D 32005025
+25252630 01FF4520
+20213001 FFFF621C
+1D300151 0707FF08
+3102FF36 01FF0231
+021E6E20 FF
+`,
+];
diff --git a/site/.vuepress/components/codes/PatternSelector/codegen.js b/site/.vuepress/components/codes/PatternSelector/codegen.js
new file mode 100644
index 0000000..7e227c0
--- /dev/null
+++ b/site/.vuepress/components/codes/PatternSelector/codegen.js
@@ -0,0 +1,109 @@
+import { parseJSON } from '../codegen.js';
+import { ASM, liDX, strlen, str2inst, inst2gecko } from '../asm.js';
+export const lskey = 'config/PatternSelector';
+
+import * as GMSJ01 from './code/GMSJ01.js';
+import * as GMSJ0A from './code/GMSJ0A.js';
+// import * as GMSE01 from './code/GMSE01.js';
+// import * as GMSP01 from './code/GMSP01.js';
+const codes = { GMSJ01, GMSJ0A };
+
+export const defaultConfig = {
+  x: 16,
+  y: 320,
+  fontSize: 20,
+  fgRGB: 0xffffff,
+  fgA: 0xff,
+  fgRGB2: null,
+  fgA2: null,
+  label: 'Pattern ',
+};
+/** @returns {typeof defaultConfig} */
+export function getConfig() {
+  const config =
+    (typeof localStorage !== 'undefined' && parseJSON(localStorage.getItem(lskey))) || {};
+  return { ...defaultConfig, ...config };
+}
+
+const addrDrawText = 0x817f0238;
+const addrCodeBase = 0x817f9000;
+const addrPV1Data1 = 0x817f9167;
+const addrFmt0 = 0x817f919d;
+
+/** @param {keyof typeof codes} version */
+export default function codegen(version) {
+  const { x, y, fontSize, fgRGB, fgA, fgRGB2, fgA2, label } = getConfig();
+  const colorTop = (fgRGB << 8) | fgA;
+  const colorBot = fgRGB2 == null || fgA2 == null ? colorTop : (fgRGB2 << 8) | fgA;
+  const text = label + '>%X>%X>%X';
+  const fmtCS0 = strlen(label);
+  const fmtCSD = 3;
+
+  const { code04, addrDraw2D, codes: cs0 } = codes[version];
+  const cs = cs0.map((e) => e.replace(/\s+/g, ''));
+  const params = [
+    liDX(3, x),
+    liDX(4, y),
+    liDX(5, fontSize),
+    liDX(6, colorTop),
+    colorTop === colorBot ? ASM.mr(7, 6) : liDX(7, colorBot),
+  ].flatMap((e) => e);
+  const extraOffset = (params.length - 5) << 2; // default: 5 inst
+  let pc;
+  // 07
+  let code07 = '801F0000';
+  /* li32 rEntry, .data.patterns.PV1-1 */
+  code07 += liDX(8, addrPV1Data1 + extraOffset)
+    .map(inst2gecko)
+    .join('');
+  code07 += cs[0];
+  /* li r8 */
+  code07 += liDX(8, addrFmt0 + extraOffset)
+    .map(inst2gecko)
+    .join('');
+  code07 += cs[1];
+  /* stb r0/12/12, fmtCS0+fmtCSD*i(r8) */
+  code07 += [
+    ASM.stb(0, 8, fmtCS0),
+    0x540cc63e,
+    ASM.stb(12, 8, fmtCS0 + fmtCSD),
+    0x540c863e,
+    ASM.stb(12, 8, fmtCS0 + fmtCSD * 2),
+  ]
+    .flatMap((e) => e)
+    .map(inst2gecko)
+    .join('');
+  /* (code) */
+  code07 += cs[2];
+  /* r3~r7 */
+  code07 += params.map(inst2gecko).join('');
+  code07 += '4CC63182'; // crclr 6
+  /* bl drawText */
+  pc = addrCodeBase + (code07.length >> 1);
+  code07 += ASM.b(addrDrawText - pc, true)
+    .map(inst2gecko)
+    .join('');
+  /* addi */
+  code07 += '38210010';
+  /* b 4+$b$.draw2d */
+  pc = addrCodeBase + (code07.length >> 1);
+  code07 += ASM.b(4 + addrDraw2D - pc, false)
+    .map(inst2gecko)
+    .join('');
+  /* (code) */
+  code07 += cs[3];
+  /* fmt */
+  // prepend 1 dummy char as 'FF' in code
+  code07 += str2inst('.' + text)
+    .map(inst2gecko)
+    .join('')
+    .slice(2);
+
+  const head07 = [0x06000000 | (addrCodeBase & 0x1ffffff), code07.length >> 1]
+    .map(inst2gecko)
+    .join('');
+  // align code 07 (8 digit = 4 byte)
+  if (code07.length & 8) code07 += '00000000';
+
+  return (code04 + head07 + code07).replace(/\s+/g, '');
+}
diff --git a/site/.vuepress/components/codes/PatternSelector/config.vue b/site/.vuepress/components/codes/PatternSelector/config.vue
new file mode 100644
index 0000000..086e2d5
--- /dev/null
+++ b/site/.vuepress/components/codes/PatternSelector/config.vue
@@ -0,0 +1,69 @@
+<template>
+  <section>
+    <h3 id="PatternSelector-config">{{l.appearance}}</h3>
+    <Preview :config="previewConfig" />
+    <div class="config-spacer" />
+    <TextConfig v-model="textConfig" />
+    <div>
+      {{l.label}} <input v-model="label">
+    </div>
+  </section>
+</template>
+
+<script>
+import {getConfig, lskey} from './codegen.js';
+import labels from './labels.json';
+import TextConfig from '../TextConfig.vue';
+
+function updateConfig() {
+  const {x, y, fontSize, fgRGB, fgA, fgRGB2, fgA2, label} = this;
+  const config = {
+    x, y, fontSize, fgRGB, fgA, fgRGB2, fgA2, label,
+  };
+  localStorage.setItem(lskey, JSON.stringify(config));
+  this.$emit('config', config);
+}
+
+export default {
+  components: {
+    TextConfig,
+  },
+  props: {
+    version: {type: String},
+    previewConfig: {type: Object},
+  },
+  data() {
+    const config = getConfig();
+    return {...config};
+  },
+  methods: {
+    updateConfig,
+  },
+  computed: {
+    l() {
+      return labels[this.$lang] ?? labels['en-US'];
+    },
+    textConfig: {
+      get() {
+        return this;
+      },
+      set(value) {
+        Object.assign(this, value);
+        this.updateConfig();
+      },
+    },
+  },
+  watch: {
+    label: updateConfig,
+  },
+};
+</script>
+
+<style scoped>
+div.config-spacer {
+  height: 1em;
+}
+input {
+  width: 6em;
+}
+</style>
diff --git a/site/.vuepress/components/codes/PatternSelector/labels.json b/site/.vuepress/components/codes/PatternSelector/labels.json
new file mode 100644
index 0000000..a199c72
--- /dev/null
+++ b/site/.vuepress/components/codes/PatternSelector/labels.json
@@ -0,0 +1,10 @@
+{
+  "ja-JP": {
+    "appearance": "見た目",
+    "label": "ラベル："
+  },
+  "en-US": {
+    "appearance": "Appearance",
+    "label": "Label:"
+  }
+}
diff --git a/site/.vuepress/components/codes/CustomizedDisplay/asm.js b/site/.vuepress/components/codes/asm.js
similarity index 96%
rename from site/.vuepress/components/codes/CustomizedDisplay/asm.js
rename to site/.vuepress/components/codes/asm.js
index 3f18841..6117066 100644
--- a/site/.vuepress/components/codes/CustomizedDisplay/asm.js
+++ b/site/.vuepress/components/codes/asm.js
@@ -173,6 +173,12 @@ export function liDX(rT, D) {
   }
 }
 
+/** @param {string} s */
+export function strlen(s) {
+  const fmtbuf = Encoding.convert(Encoding.stringToCode(s), 'SJIS');
+  return fmtbuf.length; // not NUL terminated
+}
+
 /** @param {string} s */
 export function str2inst(s) {
   const fmtbuf = Encoding.convert(Encoding.stringToCode(s), 'SJIS');
diff --git a/site/.vuepress/components/codes/codegen.js b/site/.vuepress/components/codes/codegen.js
index 9aec920..f98a2e0 100644
--- a/site/.vuepress/components/codes/codegen.js
+++ b/site/.vuepress/components/codes/codegen.js
@@ -1,11 +1,13 @@
 import InstantRestart from './InstantRestart/codegen.js';
 import qft from './qft/codegen.js';
 import CustomizedDisplay from './CustomizedDisplay/codegen.js';
+import PatternSelector from './PatternSelector/codegen.js';
 
 export default {
   InstantRestart,
   qft,
   CustomizedDisplay,
+  PatternSelector,
 };
 
 /**
diff --git a/site/.vuepress/components/codes/ui.js b/site/.vuepress/components/codes/ui.js
index f137d7f..e9e7419 100644
--- a/site/.vuepress/components/codes/ui.js
+++ b/site/.vuepress/components/codes/ui.js
@@ -1,9 +1,11 @@
 import InstantRestart from './InstantRestart/config.vue';
 import CustomizedDisplay from './CustomizedDisplay/config.vue';
+import PatternSelector from './PatternSelector/config.vue';
 import qft from './qft/config.vue';
 
 export default {
   InstantRestart,
   CustomizedDisplay,
+  PatternSelector,
   qft,
 };