diff --git a/assets/css/style-dark.css b/assets/css/style-dark.css
index 39a8062..bfdacd7 100644
--- a/assets/css/style-dark.css
+++ b/assets/css/style-dark.css
@@ -54,7 +54,7 @@ mark {
   background-color: #222020;
 }
 
-#contentsList hr.separator {
+.bloglist hr.separator {
   border: solid 1px #363636;
 }
 
diff --git a/assets/css/style.css b/assets/css/style.css
index 9ec5bde..a7e727f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -13,7 +13,7 @@ body {
   text-align: center;
   font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   line-height: 1.5;
-  font-size: 1.1rem;
+  font-size: 1rem;
   word-wrap: break-word;
 }
 
@@ -48,7 +48,8 @@ a:active {
 /* Topbar Header */
 
 .header-top {
-  padding: 20px;
+  font-size: 0.9em;
+  padding: 0.25rem;
   color: black;
   background-color: #f2f2f2;
   border-bottom: 1px solid #979797;
@@ -77,10 +78,6 @@ a:active {
   width: 350px;
 }
 
-.header-top .h-card .u-photo {
-  height: 100px;
-}
-
 @media (max-width: 550px) {
   .header-top {
     padding-left: 20px;
@@ -89,6 +86,7 @@ a:active {
   .header-flex { flex-direction: column; }
   .header-top .h-card {
     flex-direction: column-reverse;
+    width: auto;
   }
 }
 
@@ -198,7 +196,6 @@ mark {
 ** TAGS
 */
 #tags ul {
-  max-width: 600px;
   margin: 0 auto;
   display: flex;
   padding: 0;
@@ -212,8 +209,9 @@ mark {
   height: 24px;
   margin: 5px;
   padding: 0 5px;
+  padding-bottom: 5px;
   border-radius: 5px;
-  font-size: 14px;
+  font-size: 1.25rem;
   border: 1px solid #888a8a;
   text-decoration: none;
 }
@@ -227,14 +225,29 @@ mark {
 /*
 ** BLOG LIST PAGE
 */
-#contentsList {
+
+.bloglist-teaser {
+  font-size: 2.25rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 650px;
+}
+
+.bloglist-date {
+  font-size: 1.75rem;
+  font-style: italic; 
+  color: #005c00;
+}
+
+.bloglist {
+  font-size: 1.5rem;
   padding: 20px 0;
 }
 
-#contentsList hr.separator {
+.bloglist hr.separator {
   width: 10px;
   margin: 30px auto;
-  border: solid 1px #c9c9c9;
+  border: solid 2 px #c9c9c9;
 }
 
 /*
@@ -261,8 +274,9 @@ mark {
 ** STANDARD PAGE
 */
 main {
+  font-size: 1.25em;
   padding: 20px 10px;
-  max-width: 800px;
+  max-width: 1000px;
   margin: 0 auto;
   min-height: calc(100vh - 250px);
 }
@@ -277,7 +291,7 @@ main .e-content {
 
 main .e-content h2 {
   padding-bottom: .3em;
-  font-size: 1.5em;
+  /* font-size: 1.5em; */
   border-bottom: 1px solid #c9c9c9;
 }
 
@@ -324,7 +338,7 @@ footer {
   background-color: #363636;
   color: #ededed;
   min-height: 100%;
-  font-size: 12px;
+  font-size: 1rem;
   box-sizing:border-box;
 }
 footer a:link {
@@ -332,7 +346,6 @@ footer a:link {
 }
 
 .footer-navs {
-  font-size: 1rem;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index 81e4ff5..ef72395 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -9,23 +9,24 @@
   {{ $postCount := len $posts }}
   {{ range last 1 $posts }}
     {{ $tags := .Site.Taxonomies.tags }}
-    <div style="font-size: 1.5rem; max-width: 30rem; margin-left: auto; margin-right: auto;">
+    <div class='bloglist-teaser'>
     Hello! This page contains <strong>{{ $postCount | lang.NumFmt 0 }} posts</strong>
     written in the past <strong>{{ div (sub now.Unix .Date.Unix) 31536000 }} years</strong>
-    spanning {{ len $tags }} topics within the dropdown above.
+    spanning 
+    {{ len $tags }} topics within the dropdown above.
     </div>
   {{ end }}
 
 
 
   <!-- contents -->
-  <div id="contentsList">
+  <div class="bloglist">
     {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
     {{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
       {{ if (ne $index 0) }}
         <hr class="separator">
       {{ end }}
-      <p class="date">{{ .Key }}</p>
+      <p class="bloglist-date">{{ .Key }}</p>
       {{ range .Pages }}
         <p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
       {{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c6acb69..4e1cc6b 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -26,7 +26,7 @@
   <div class="h-card p-author">
     <h2 class="p-name"><a class="author u-url" rel="me" href="{{ .Site.BaseURL }}">{{ .Site.Params.Author }}</a></h2>
     {{ $profile_image := resources.Get (printf "img/%s" .Site.Params.avatar) }}
-    {{ $profile_width := 100 }}
+    {{ $profile_width := 75 }}
     {{ $profile_image := $profile_image.Resize (printf "%dx" $profile_width) }}
     <img class="avatarMask u-photo" width="{{ $profile_width }}" src="{{ $profile_image.RelPermalink }}" alt="Photo of {{ .Site.Params.Author }}" />
     <div style="display: none">
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
index 9258f6a..0ae7226 100644
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -4,7 +4,7 @@
   {{ partial "search.html" . }}
   {{ partial "tags/all.html" . }}
   <!-- contents -->
-  <div id="contentsList">
+  <div class="bloglist">
     {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
     {{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
     {{ if (ne $index 0) }}