diff --git a/assets/img/teaser.jpg b/assets/img/teaser.jpg
new file mode 100644
index 0000000..98ad946
Binary files /dev/null and b/assets/img/teaser.jpg differ
diff --git a/css/index.scss b/css/index.scss
new file mode 100644
index 0000000..fbef5a5
--- /dev/null
+++ b/css/index.scss
@@ -0,0 +1,9 @@
+---
+---
+
+@charset "utf-8";
+
+.teaser {
+  width: 100%;
+  margin-bottom: 1em;
+}
diff --git a/images/teaser/banner.png b/images/teaser/banner.png
deleted file mode 100644
index 636434f..0000000
Binary files a/images/teaser/banner.png and /dev/null differ
diff --git a/index.css b/index.css
deleted file mode 100644
index ddfac2c..0000000
--- a/index.css
+++ /dev/null
@@ -1,8 +0,0 @@
-#main .teaser-workaround {
-  width: 100%;
-
-  margin: 0;
-  padding: 0;
-  background-image: none;
-  border: none;
-}
diff --git a/index.html b/index.html
index 435b78d..5c38e7c 100644
--- a/index.html
+++ b/index.html
@@ -1,32 +1,35 @@
 ---
 title: 日本 KDE ユーザ会
+layout: default
 ---
 
-<link rel="stylesheet" href="/index.css">
+<link rel="stylesheet" href="{{ '/css/index.css' | relative_url }}">
 
-<img src="/images/teaser/banner.png" class="teaser-workaround" decoding="async">
+<img src="/assets/img/teaser.jpg" class="teaser" decoding="async">
 
-<p>
-	日本 KDE ユーザ会 (JKUG: Japan KDE Users' Group) は、主に KDE/Qt のローカライズや、日本における
-	KDE のプロモーションなどを行っています。
-</p>
+<main class="navfix container" aria-label="Content">
+  <p>
+    日本 KDE ユーザ会 (JKUG: Japan KDE Users' Group) は、主に KDE/Qt のローカライズや、日本における
+    KDE のプロモーションなどを行っています。
+  </p>
 
-<h2>最新情報が欲しい</h2>
-<p>
-	<a href="https://twitter.com/KDE_Japan?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @KDE_Japan</a>
-</p>
+  <h2>最新情報が欲しい</h2>
+  <p>
+    <a href="https://twitter.com/KDE_Japan?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @KDE_Japan</a>
+  </p>
 
-<h2>質問したい、話したい</h2>
-<p>
-	<a href="https://jp.kde.org/community/whatiskdejp/communicate/">メーリングリスト</a> /
-	<a href="https://www.facebook.com/groups/kdejp/">Facebook Group</a> /
-	<a href="https://twitter.com/#!/search/realtime/%23kdejp">Twitter #kdejp ハッシュタグ</a>
-	<a href="https://twitter.com/intent/tweet?button_hashtag=kdejp&ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-show-count="false">Tweet #kdejp</a>
-</p>
+  <h2>質問したい、話したい</h2>
+  <p>
+    <a href="https://jp.kde.org/community/whatiskdejp/communicate/">メーリングリスト</a> /
+    <a href="https://www.facebook.com/groups/kdejp/">Facebook Group</a> /
+    <a href="https://twitter.com/#!/search/realtime/%23kdejp">Twitter #kdejp ハッシュタグ</a>
+    <a href="https://twitter.com/intent/tweet?button_hashtag=kdejp&ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-show-count="false">Tweet #kdejp</a>
+  </p>
 
-<h2>活動に参加したい</h2>
-<p>
-	<a href="/community/getinvolved/translation/">ソフトウェアの翻訳の情報</a>
-</p>
+  <h2>活動に参加したい</h2>
+  <p>
+    <a href="/community/getinvolved/translation/">ソフトウェアの翻訳の情報</a>
+  </p>
+</main>
 
 <script defer src="https://platform.twitter.com/widgets.js"></script>