diff --git a/config.toml b/config.toml
index afb29b4..e961811 100644
--- a/config.toml
+++ b/config.toml
@@ -4,106 +4,109 @@ name        = "Leafee98"
 description = "Welcome to leafee98's site"
 canonical_link = "https://leafee98.com/"
 
-[social]
+[[section]]
 name = "Social"
 
-[[social.items]]
+[[section.items]]
 name        = "GitHub"
 permalink   = "https://github.com/leafee98"
+highlight   = true
 
-[[social.items]]
+[[section.items]]
 name        = "Email"
-description = "***REMOVED***"
+permalink   = "mailto:mail@example.org"
+hide        = true
 
-[[social.items]]
+[[section.items]]
 name        = "Matrix"
-description = "***REMOVED***"
+permalink   = "https://matrix.to/#/@matrix:example.org"
+hide        = true
 
+[[section]]
+name = "Sites"
 
-[service]
-name = "Service"
-
-[[service.items]]
+[[section.items]]
 name        = "Blog"
 permalink   = "https://blog.leafee98.com/"
 description = "I blog at here."
 highlight   = true
 
-[[service.items]]
+[[section.items]]
 name        = "Forgejo"
 permalink   = "https://git.leafee98.com/"
 description = "My own git server."
+highlight   = true
 
-[[service.items]]
+[[section.items]]
 name        = "Woodpecker"
 permalink   = "https://woodpecker.leafee98.com/"
 description = "My own CI/CD service."
 
-[[service.items]]
+[[section.items]]
 name        = "Dufs"
 permalink   = "https://dufs.leafee98.com/"
 description = "A simple webdav server, hosting some public available files."
 
-[[service.items]]
+[[section.items]]
 name        = "Uptime"
 permalink   = "https://uptime.leafee98.com/"
 description = "Service Monitor."
 
-[[service.items]]
+[[section.items]]
 name        = "Plik"
 permalink   = "https://plik.leafee98.com/"
 description = "Temperory file share utility."
 
-[[service.items]]
+[[section.items]]
 name        = "Pasty"
 permalink   = "https://paste.leafee98.com/"
 description = "Temperory text share utility."
 
-[[service.items]]
+[[section.items]]
 name        = "Ntfy"
 permalink   = "https://ntfy.leafee98.com/"
 description = "United Push implemention."
 
-# Personal Service
-[personal_service]
-name = "Personal Service"
-
-[[personal_service.items]]
-name        = "Miniflux"
-permalink   = "https://rss.leafee98.com/"
-description = "My RSS reader."
-
-[[personal_service.items]]
-name        = "Joplin"
-permalink   = "https://joplin.leafee98.com/"
-description = "My notebook sync server."
-
-[[personal_service.items]]
-name        = "Syncthing"
-permalink   = "https://syncthing.leafee98.com/"
-description = "My file syncing agent."
-
-[[personal_service.items]]
-name        = "Radicale"
-permalink   = "https://calendar.leafee98.com/"
-description = "Selfhost calender and task server."
-
-[[personal_service.items]]
-name        = "Matrix"
-permalink   = "https://matrix.leafee98.com/"
-description = "My matrix instance."
-
-[[personal_service.items]]
-name        = "Turn"
-permalink   = "https://turn.leafee98.com/"
-description = "Provide VoIP for matrix."
-
-[[personal_service.items]]
-name        = "Webdav"
-permalink   = "https://webdav.leafee98.com/"
-description = "Webdav endpoint for online storage, powered by apache httpd."
-
-[[personal_service.items]]
-name        = "FileBrowser"
-permalink   = "https://file.leafee98.com/"
-description = "File manager for my online storage."
+# # Personal Service
+# [personal_service]
+# name = "Personal Service"
+# 
+# [[personal_service.items]]
+# name        = "Miniflux"
+# permalink   = "https://rss.leafee98.com/"
+# description = "My RSS reader."
+# 
+# [[personal_service.items]]
+# name        = "Joplin"
+# permalink   = "https://joplin.leafee98.com/"
+# description = "My notebook sync server."
+# 
+# [[personal_service.items]]
+# name        = "Syncthing"
+# permalink   = "https://syncthing.leafee98.com/"
+# description = "My file syncing agent."
+# 
+# [[personal_service.items]]
+# name        = "Radicale"
+# permalink   = "https://calendar.leafee98.com/"
+# description = "Selfhost calender and task server."
+# 
+# [[personal_service.items]]
+# name        = "Matrix"
+# permalink   = "https://matrix.leafee98.com/"
+# description = "My matrix instance."
+# 
+# [[personal_service.items]]
+# name        = "Turn"
+# permalink   = "https://turn.leafee98.com/"
+# description = "Provide VoIP for matrix."
+# 
+# [[personal_service.items]]
+# name        = "Webdav"
+# permalink   = "https://webdav.leafee98.com/"
+# description = "Webdav endpoint for online storage, powered by apache httpd."
+# 
+# [[personal_service.items]]
+# name        = "FileBrowser"
+# permalink   = "https://file.leafee98.com/"
+# description = "File manager for my online storage."
diff --git a/template/index.html.njk b/template/index.html.njk
index 6143f91..cc9c412 100644
--- a/template/index.html.njk
+++ b/template/index.html.njk
@@ -24,31 +24,36 @@
 {% endmacro %}
 
 
-{% macro render_item(name, permalink, description) %}
-{% if permalink is defined %}
-<dl>
-  <dt><a href="{{ permalink | safe }}">{{ name }}</a></dt>
-  {% if description is defined %}
-  <dd>{{ description }}</dd>
-  {% endif %}
-</dl>
-{% else %}
-<dl>
-  <dt><a href="/#">{{ name }}</a></dt>
-  {% if description is defined %}
-  <dd>{{ description }}</dd>
-  {% endif %}
-</dl>
+{% macro render_item(item) %}
+
+{% set class_str = "item" %}
+{% if item.highlight %}
+{% set class_str = class_str + " " + "highlight" %}
 {% endif %}
+
+{% set href ="/#" %}
+{% if item.permalink is defined %}
+{% set href = item.permalink %}
+{% endif %}
+
+<a class="{{ class_str }}" href="{{ href | safe }}">
+  <dl>
+    <dt>{{ item.name }}</dt>
+    {% if item.description is defined %}
+    <dd>{{ item.description }}</dd>
+    {% endif %}
+  </dl>
+</a>
+
 {% endmacro %}
 
-{% macro section(sect) %}
+{% macro render_section(sect) %}
 <section>
   <h2>{{ sect.name }}</h2>
 
   <div class="item_container">
     {% for item in sect.items %}
-    {{ render_item(item.name, item.permalink, item.description) }}
+    {{ render_item(item) }}
     {% endfor %}
   </div>
 </section>
@@ -71,14 +76,14 @@
 
   <body>
     <main>
-      <div>
+      <div class="big_title">
         <h1>{{ name }}</h1>
         <p>{{ description }}</p>
       </div>
 
-      {{ section(social) }}
-      {{ section(service) }}
-      {{ section(personal_service) }}
+      {% for s in section %}
+      {{ render_section(s) }}
+      {% endfor %}
 
     </main>
   </body>
diff --git a/template/style.css b/template/style.css
index 5f71e54..8270ec8 100644
--- a/template/style.css
+++ b/template/style.css
@@ -7,6 +7,45 @@
   font-size: 16px;
 }
 
+body {
+  background-color: var(--c-global-bg)
+}
+
+/* colors */
+:root {
+  --c-m-bg-0: #FFFFFF;
+  --c-m-bg-1: #F3F6FC;
+  --c-m-bg-2: #E5E9ED;
+  --c-m-bg-3: #C2E7FF;
+  --c-m-bg-4: #B8DBF0;
+
+  --c-m-ft: #1F1F1F;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --c-m-bg-0: #1F1F1F;
+    --c-m-bg-1: #2D2F31;
+    --c-m-bg-2: #383B3C;
+    --c-m-bg-3: #004A77;
+    --c-m-bg-4: #0F547D;
+
+    --c-m-ft: #E3E3E3;
+  }
+}
+
+:root {
+  --c-global-bg: var(--c-m-bg-1);
+  --c-item-bg: var(--c-m-bg-2);
+  --c-item-bg-hover: var(--c-m-bg-4);
+  --c-item-bg-hl: var(--c-m-bg-3);
+  --c-item-bg-hl-hover: var(--c-m-bg-4);
+}
+
+* {
+  color: var(--c-m-ft);
+}
+
 /* main panel */
 
 main {
@@ -16,9 +55,29 @@ main {
   flex-direction: column;
   width: 52rem;
   max-width: 100%;
-  padding: 1rem;
+  padding: 4rem 1rem 3rem 1rem;
 }
 
+/* big title */
+
+.big_title {
+  padding-bottom: 2.5rem;
+}
+
+.big_title h1 {
+  font-size: 2.5rem;
+  font-weight: bold;
+  margin-bottom: 1.5rem;
+}
+
+.big_title h1,
+.big_title p {
+  text-align: center;
+}
+
+h2 { font-size: 1.625rem; }
+
+
 /* section layout */
 
 section {
@@ -44,19 +103,26 @@ h2 {
   margin-bottom: 2rem;
 }
 
-/* item layout */
 
-dl {
+/* item layout */
+.item {
   width: 9rem;
-  border: 1px solid;
+  border: 1px solid var(--c-border);
+  border-radius: 0.5rem;
   padding: 0.5rem 0.25rem;
+
+  background-color: var(--c-item-bg);
 }
+.item.highlight       { background-color: var(--c-item-bg-hl); }
+.item.highlight:hover { background-color: var(--c-item-bg-hl-hover); }
+.item:hover           { background-color: var(--c-item-bg-hover); }
 
 /* item text */
-dt, dd {
-  text-align: center;
-}
+a { text-decoration: none; }
+dl * { line-height: 1.2; }
+dt { font-size: 1rem; font-weight: 500; }
+dd { font-size: 0.875rem; }
 
-dt {
-  margin-bottom: 0.5rem;
-}
+dt, dd { text-align: center; }
+
+dt { margin-bottom: 0.5rem; }