diff --git a/internal/view/css/archive.css b/internal/view/css/archive.css
index 3529559..2e67a2d 100644
--- a/internal/view/css/archive.css
+++ b/internal/view/css/archive.css
@@ -1 +1 @@
-:root{--main:#F44336;--border:#E5E5E5;--colorLink:#999;--archiveHeaderBg:rgba(255,255,255,0.95)}@media (prefers-color-scheme:dark){:root{--border:#191919;--archiveHeaderBg:rgba(41,41,41,0.95)}}#shiori-archive-header{top:0;left:0;right:0;height:60px;position:fixed;padding:0 16px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-align:center;align-items:center;font-size:16px;border-bottom:1px solid var(--border);background-color:var(--archiveHeaderBg);z-index:9999999999}#shiori-archive-header *{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0}#shiori-archive-header>*:not(:last-child){margin-right:8px}#shiori-archive-header>.spacer{-webkit-box-flex:1;flex:1}#shiori-archive-header #shiori-logo{font-size:2em;font-weight:100;color:var(--main)}#shiori-archive-header #shiori-logo span{margin-right:8px}#shiori-archive-header a{display:block;color:var(--colorLink);text-decoration:underline}#shiori-archive-header a:hover,#shiori-archive-header a:focus{color:var(--main)}@media (max-width:600px){#shiori-archive-header{font-size:14px;height:50px}#shiori-archive-header #shiori-logo{font-size:1.5em}}
\ No newline at end of file
+:root{--main:#f44336;--border:#e5e5e5;--colorLink:#999;--archiveHeaderBg:hsla(0,0%,100%,.95)}@media (prefers-color-scheme:dark){:root{--border:#191919;--archiveHeaderBg:rgba(41,41,41,.95)}}#shiori-archive-header{align-items:center;background-color:var(--archiveHeaderBg);border-bottom:1px solid var(--border);box-sizing:border-box;display:flex;flex-flow:row wrap;font-size:16px;height:60px;left:0;padding:0 16px;position:fixed;right:0;top:0;z-index:9999999999}#shiori-archive-header *{border-width:0;box-sizing:border-box;font-family:Source Sans Pro,sans-serif;margin:0;padding:0}#shiori-archive-header>:not(:last-child){margin-right:8px}#shiori-archive-header>.spacer{flex:1}#shiori-archive-header #shiori-logo{color:var(--main);font-size:2em;font-weight:100}#shiori-archive-header #shiori-logo span{margin-right:8px}#shiori-archive-header a{color:var(--colorLink);display:block;text-decoration:underline}#shiori-archive-header a:focus,#shiori-archive-header a:hover{color:var(--main)}@media (max-width:600px){#shiori-archive-header{font-size:14px;height:50px}#shiori-archive-header #shiori-logo{font-size:1.5em}}body{margin-top:60px!important}@media (max-width:600px){body{margin-top:50px!important}}
diff --git a/internal/view/less/archive.less b/internal/view/less/archive.less
index 599a521..d16edf1 100644
--- a/internal/view/less/archive.less
+++ b/internal/view/less/archive.less
@@ -10,11 +10,16 @@
 	}
 }
 
+@header-height: 60px;
+@screen-sm-max: 600px;
+@screen-sm-header-hight: 50px;
+
 #shiori-archive-header {
 	top             : 0;
 	left            : 0;
 	right           : 0;
-	height          : 60px;
+	height          : @header-height;
+	box-sizing      : border-box;
 	position        : fixed;
 	padding         : 0 16px;
 	display         : flex;
@@ -62,12 +67,20 @@
 		}
 	}
 
-	@media (max-width: 600px) {
+	@media (max-width: @screen-sm-max) {
 		font-size: 14px;
-		height   : 50px;
+		height   : @screen-sm-header-hight;
 
 		#shiori-logo {
 			font-size: 1.5em;
 		}
 	}
-}
\ No newline at end of file
+}
+
+body {
+	margin-top: @header-height !important;
+
+	@media (max-width: @screen-sm-max) {
+		margin-top: @screen-sm-header-hight !important;
+	}
+}