diff --git a/src/painter/Image.ts b/src/painter/Image.ts
new file mode 100644
index 0000000..6f2783a
--- /dev/null
+++ b/src/painter/Image.ts
@@ -0,0 +1 @@
+export default class Image {}
diff --git a/src/painter/index.ts b/src/painter/index.ts
index f183e18..c359617 100644
--- a/src/painter/index.ts
+++ b/src/painter/index.ts
@@ -1,7 +1,12 @@
 import Component, { IComponentOptions } from '../share/Component'
+import stripIndent from 'licia/stripIndent'
+import $ from 'licia/$'
 
+/** IOptions. */
 export interface IOptions extends IComponentOptions {
+  /** Canvas width. */
   width?: number
+  /** Canvas height. */
   height?: number
 }
 
@@ -13,9 +18,32 @@ export interface IOptions extends IComponentOptions {
  * const painer = new LunaPainter(container)
  */
 export default class Painter extends Component<IOptions> {
-  constructor(container: HTMLElement, options: IOptions) {
-    super(container, { compName: 'painer' }, options)
+  private $viewport: $.$
+  constructor(container: HTMLElement, options: IOptions = {}) {
+    super(container, { compName: 'painter' }, options)
 
-    this.initOptions(options, {})
+    this.initOptions(options, {
+      width: 800,
+      height: 600,
+    })
+
+    this.initTpl()
+
+    this.$viewport = this.find('.viewport')
+  }
+  private initTpl() {
+    const { width, height } = this.options
+
+    this.$container.html(
+      this.c(stripIndent`
+        <div class="viewport">
+          <div class="canvas-wrapper">
+            <div class="canvas-container">
+              <canvas width="${width}" height="${height}"></canvas>
+            </div>
+          </div>
+        </div>
+      `)
+    )
   }
 }
diff --git a/src/painter/story.js b/src/painter/story.js
index 6b12546..1e49012 100644
--- a/src/painter/story.js
+++ b/src/painter/story.js
@@ -1,12 +1,23 @@
-import 'luna-painter'
+import 'luna-painter.css'
 import Painter from 'luna-painter.js'
 import story from '../share/story'
 import readme from './README.md'
+import $ from 'licia/$'
 
 const def = story(
   'painter',
   (container) => {
-    const painter = new Painter(container)
+    $(container).css({
+      width: '100%',
+      maxWidth: 1200,
+      height: 600,
+      margin: '0 auto',
+    })
+
+    const painter = new Painter(container, {
+      width: 512,
+      height: 512,
+    })
 
     return painter
   },
diff --git a/src/painter/style.scss b/src/painter/style.scss
index e69de29..30c4802 100644
--- a/src/painter/style.scss
+++ b/src/painter/style.scss
@@ -0,0 +1,25 @@
+@import '../share/mixin';
+
+.luna-painter {
+  @include component();
+}
+
+.viewport {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: #2b2b2b;
+  display: flex;
+}
+
+.canvas-wrapper {
+  margin: auto;
+}
+
+.canvas-container {
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.theme-dark {
+  color-scheme: dark;
+}