diff --git a/packages/client/assets/style/code.css b/packages/client/assets/style/code.css
index 28eeb5cda..613cf902b 100644
--- a/packages/client/assets/style/code.css
+++ b/packages/client/assets/style/code.css
@@ -8,7 +8,7 @@ pre {
   background: var(--color-white);
   border-radius: 10px;
   min-width: 50%;
-  max-width: 90%;
+  max-width: 70%;
   width: auto;
 }
 
diff --git a/packages/client/assets/style/common.css b/packages/client/assets/style/common.css
index c5c043fd5..76dce057e 100644
--- a/packages/client/assets/style/common.css
+++ b/packages/client/assets/style/common.css
@@ -64,6 +64,7 @@ p {
 
 ul {
   margin: 0 auto;
+  width: fit-content;
 }
 
 li {
diff --git a/packages/client/assets/style/customize.css b/packages/client/assets/style/customize.css
index 954113b38..0e90cf602 100644
--- a/packages/client/assets/style/customize.css
+++ b/packages/client/assets/style/customize.css
@@ -21,6 +21,7 @@
 .swiper-container {
   background: #f5f5f5;
   height: 100vh;
+  width: 100%;
 }
 
 .swiper-slide {
diff --git a/packages/client/src/components/Assistant.js b/packages/client/src/components/Assistant.js
index 91a444131..a39907e02 100644
--- a/packages/client/src/components/Assistant.js
+++ b/packages/client/src/components/Assistant.js
@@ -104,7 +104,7 @@ export const Assistant = () => (
             <A url="https://webslides.tv/demos/components#slide=2">Others</A>
             <hr style={hrCss} />
             <SmallTitle>Fusuma</SmallTitle>
-            <code>{`<!-- sectionTitle -->`}</code>:
+            <code>{`<!-- section-title -->`}</code>:
             <A url="https://hiroppy.github.io/fusuma/intro/#slide=16">
               <code>.section-title</code>
             </A>
@@ -148,11 +148,11 @@ export const Assistant = () => (
                 },
                 {
                   title: 'Adding Title to Sidebar',
-                  content: <code>{`sectionTitle: title`}</code>,
+                  content: <code>{`section-title: title`}</code>,
                   url: 'https://hiroppy.github.io/fusuma/intro/#slide=16',
                 },
                 {
-                  title: 'Adding Agenda UI via SectionTitle',
+                  title: 'Adding Agenda UI via section-title',
                   content: <code>contents</code>,
                   url: 'https://hiroppy.github.io/fusuma/intro/#slide=17',
                 },
diff --git a/packages/client/src/components/SlideCore.js b/packages/client/src/components/SlideCore.js
index c02b50b72..a904e4bbd 100644
--- a/packages/client/src/components/SlideCore.js
+++ b/packages/client/src/components/SlideCore.js
@@ -27,6 +27,7 @@ if (process.env.UI.PAGINATION) {
 }
 
 if (process.env.UI.EFFECT === 'fade') {
+  console.log('zzzz');
   swiperComponents.push(EffectFade);
   import('swiper/components/effect-fade/effect-fade.min.css');
 } else if (process.env.UI.EFFECT === 'cube') {
diff --git a/packages/fusuma/src/configs/fusumarc.js b/packages/fusuma/src/configs/fusumarc.js
index 3c9ebaa2c..80e587ff9 100644
--- a/packages/fusuma/src/configs/fusumarc.js
+++ b/packages/fusuma/src/configs/fusumarc.js
@@ -61,7 +61,7 @@ async function init(baseDir) {
 
   // scaffold
   await mkdirAsync(join(baseDir, 'slides'));
-  info('init', 'Created slides directory');
+  info('init', 'Created /slides');
 
   {
     const data = await readFileAsync(join(__dirname, 'templates', '0-title.md'), 'utf8');
diff --git a/packages/fusuma/src/configs/templates/0-title.md b/packages/fusuma/src/configs/templates/0-title.md
index 082121942..8312136da 100644
--- a/packages/fusuma/src/configs/templates/0-title.md
+++ b/packages/fusuma/src/configs/templates/0-title.md
@@ -1,3 +1,9 @@
 <!-- classes: title -->
 
 # Hello😃
+
+---
+
+<!-- section-title: Bye👋 -->
+
+## Bye👋
diff --git a/packages/fusuma/src/configs/templates/fusumarc.yml b/packages/fusuma/src/configs/templates/fusumarc.yml
index 3be2b8342..348115b9c 100644
--- a/packages/fusuma/src/configs/templates/fusumarc.yml
+++ b/packages/fusuma/src/configs/templates/fusumarc.yml
@@ -11,5 +11,10 @@ slide:
     pagination: # bullets | progressbar | fraction
     effect: # fade | cube | flip
   code:
+    languages:
+      - javascript
+      - html
+      - css
+      - markdown
     plugins: []
     theme: default
diff --git a/packages/mdx-loader/__tests__/__snapshots__/index.js.snap b/packages/mdx-loader/__tests__/__snapshots__/index.js.snap
index 7cfa63d0d..62d65eaab 100644
--- a/packages/mdx-loader/__tests__/__snapshots__/index.js.snap
+++ b/packages/mdx-loader/__tests__/__snapshots__/index.js.snap
@@ -71,7 +71,7 @@ export const slides = [props => <>
 export const fusumaProps = [{
   note: 'This is Note!',
   classes: 'class!',
-  sectionTitle: 'sectionTitle!',
+  sectionTitle: 'section-title!',
   screen: 'true'
 }];
 
@@ -93,7 +93,7 @@ export default function MDXContent({
       /* classes: class! */
     }
     {
-      /* sectionTitle: sectionTitle! */
+      /* section-title: section-title! */
     }
     <h1>{\`Hello\`}</h1>
     {
diff --git a/packages/mdx-loader/__tests__/index.js b/packages/mdx-loader/__tests__/index.js
index 45de6b2ff..839151fd9 100644
--- a/packages/mdx-loader/__tests__/index.js
+++ b/packages/mdx-loader/__tests__/index.js
@@ -53,7 +53,7 @@ const Sample = () => <div>sample</div>;
 This is Note!
 -->
 <!-- classes: class! -->
-<!-- sectionTitle: sectionTitle! -->
+<!-- section-title: section-title! -->
 # Hello
 <!-- content -->
 <!-- screen -->
diff --git a/packages/mdx-loader/src/mdxPlugin.js b/packages/mdx-loader/src/mdxPlugin.js
index 2aae571e2..44020cf7a 100644
--- a/packages/mdx-loader/src/mdxPlugin.js
+++ b/packages/mdx-loader/src/mdxPlugin.js
@@ -35,7 +35,7 @@ function mdxPlugin() {
         const prefix = p.split('\n')[0];
         const attr = rest.map((r) => r.trim());
 
-        if (prefix === 'sectionTitle') {
+        if (prefix === 'section-title') {
           props.sectionTitle = attr.join('');
           return;
         }
diff --git a/samples/advanced/slides/01-chart.md b/samples/advanced/slides/01-chart.md
index aac0a1846..b6feed757 100644
--- a/samples/advanced/slides/01-chart.md
+++ b/samples/advanced/slides/01-chart.md
@@ -1,4 +1,4 @@
-<!-- sectionTitle: Charts -->
+<!-- section-title: Charts -->
 
 ## Charts
 
diff --git a/samples/advanced/slides/02-math.md b/samples/advanced/slides/02-math.md
index 9036c7269..647c64f1b 100644
--- a/samples/advanced/slides/02-math.md
+++ b/samples/advanced/slides/02-math.md
@@ -1,4 +1,4 @@
-<!-- sectionTitle: Math -->
+<!-- section-title: Math -->
 
 ## Math
 
diff --git a/samples/debug/slides/01-many-pages.md b/samples/debug/slides/01-many-pages.md
index c57f14745..c18ebca50 100644
--- a/samples/debug/slides/01-many-pages.md
+++ b/samples/debug/slides/01-many-pages.md
@@ -1,4 +1,4 @@
-<!-- sectionTitle: many pages -->
+<!-- section-title: many pages -->
 
 <a href="https://github.com/hiroppy/fusuma/issues/110" rel="noopener" aria-label="issue110">
   https://github.com/hiroppy/fusuma/issues/110
diff --git a/samples/debug/style.css b/samples/debug/style.css
index ef9a427e8..12eca8ce9 100644
--- a/samples/debug/style.css
+++ b/samples/debug/style.css
@@ -1,5 +1,5 @@
-@import '../../packages/client/assets/style/themes/default.css';
-/* @import '../../packages/client/assets/style/themes/webpack.css'; */
+/* @import '../../packages/client/assets/style/themes/default.css'; */
+@import '../../packages/client/assets/style/themes/webpack.css';
 /* @import '../../packages/client/assets/style/themes/babel.css'; */
 /* @import '../../packages/client/assets/style/themes/node.css'; */
 
diff --git a/samples/intro/slides/02-fusuma.md b/samples/intro/slides/02-fusuma.md
index 76cbca382..36e01c698 100644
--- a/samples/intro/slides/02-fusuma.md
+++ b/samples/intro/slides/02-fusuma.md
@@ -1,4 +1,4 @@
-<!-- sectionTitle: What is fusuma? -->
+<!-- section-title: What is fusuma? -->
 
 ## What is Fusuma?
 
diff --git a/samples/intro/slides/04-slide.md b/samples/intro/slides/04-slide.md
index 1af4d7180..d06310c74 100644
--- a/samples/intro/slides/04-slide.md
+++ b/samples/intro/slides/04-slide.md
@@ -1,4 +1,4 @@
-<!-- sectionTitle: Syntax Provided by Fusuma -->
+<!-- section-title: Syntax Provided by Fusuma -->
 
 ## Syntaxes Provided by Fusuma
 
@@ -101,7 +101,7 @@ The class name of `<!-- block-start -->` isn't mandatory.
 ## Declare Section Title
 
 ```md
-<!-- sectionTitle: this is the second slide! -->
+<!-- section-title: this is the second slide! -->
 
 ## ✌️
 ```
@@ -131,7 +131,7 @@ In addition, it is also added to sidebar's list.
 
 <br />
 
-Converts the page number and title name specified by `sectionTitle` into a list component.
+Converts the page number and title name specified by `section-title` into a list component.
 
 ---
 
diff --git a/samples/intro/slides/05-mdx.mdx b/samples/intro/slides/05-mdx.mdx
index b2f50cc52..e9785b7a7 100644
--- a/samples/intro/slides/05-mdx.mdx
+++ b/samples/intro/slides/05-mdx.mdx
@@ -1,4 +1,4 @@
-<!-- sectionTitle: mdx -->
+<!-- section-title: mdx -->
 
 ## mdx
 
diff --git a/samples/intro/slides/06-themes.mdx b/samples/intro/slides/06-themes.mdx
index 1dcfc53f0..4b2080e69 100644
--- a/samples/intro/slides/06-themes.mdx
+++ b/samples/intro/slides/06-themes.mdx
@@ -1,4 +1,4 @@
-<!-- sectionTitle: Themes -->
+<!-- section-title: Themes -->
 
 ## Themes
 
diff --git a/samples/intro/slides/07-presenter-mode.mdx b/samples/intro/slides/07-presenter-mode.mdx
index 2c44ae0b0..9a5e04fdb 100644
--- a/samples/intro/slides/07-presenter-mode.mdx
+++ b/samples/intro/slides/07-presenter-mode.mdx
@@ -1,4 +1,4 @@
-<!-- sectionTitle: Presenter Mode -->
+<!-- section-title: Presenter Mode -->
 
 ## Presenter Mode
 
diff --git a/site/docs/guides/slide-syntax.md b/site/docs/guides/slide-syntax.md
index 4ff17b7f1..469788039 100644
--- a/site/docs/guides/slide-syntax.md
+++ b/site/docs/guides/slide-syntax.md
@@ -31,7 +31,7 @@ Makes explicit declarations to create a table of contents. and it is also added
 
 ```md
 <!-- slide.md -->
-<!-- sectionTitle: This is the first slide! -->
+<!-- section-title: This is the first slide! -->
 
 ## Hello
 ```
@@ -49,7 +49,7 @@ Makes explicit declarations to create a table of contents. and it is also added
 
 ## Generating Table of Contents
 
-Insert titles written as `sectionTitle` to ToC component automatically.
+Insert titles written as `section-title` to ToC component automatically.
 
 ```md
 <!-- toc.md -->