diff --git a/islands/DirList.tsx b/islands/DirList.tsx
index f6d8007..7e8fc5c 100644
--- a/islands/DirList.tsx
+++ b/islands/DirList.tsx
@@ -14,7 +14,7 @@ function ListItem(props: {
   return (
     <li class="p-1 hover:bg-gray-400 transition-colors">
       <a class="flex gap-2" href={props.href}>
-        <img src={asset(props.icon)} />
+        <div class="bg-black dark:bg-white w-4 h-4" style={`mask: url(${asset(props.icon)})`}></div>  
         <p class="">{props.children}</p>
       </a>
     </li>
diff --git a/islands/Login.tsx b/islands/Login.tsx
index 3a56038..a183590 100644
--- a/islands/Login.tsx
+++ b/islands/Login.tsx
@@ -1,3 +1,22 @@
+import { ComponentChildren } from "preact";
+
+function InputBox(props: {
+  label: string;
+  labelChildren?: ComponentChildren;
+  type: string;
+}){
+  const { label, labelChildren, type } = props;
+  return <div class="flex items-center flex-1">
+  <label for={label} class="w-20">{labelChildren}</label>
+  <input
+    type={type}
+    name={label}
+    id={label}
+    class="border-b-2 focus:border-green-500 transition-colors flex-1 focus:outline-none"
+  />
+</div>
+}
+
 export default function LoginForm({
   redirect = "/",
   failed = false,
@@ -19,24 +38,8 @@ export default function LoginForm({
         class="flex flex-col gap-2 items-stretch"
       >
         <div class="flex gap-2 flex-wrap">
-          <div class="basis-40 flex items-center flex-1">
-            <label for="username" class="w-20">Username</label>
-            <input
-              type="text"
-              name="username"
-              id="username"
-              class="border-b-2 focus:border-green-500 transition-colors flex-1"
-            />
-          </div>
-          <div class="flex items-center flex-1">
-            <label for="password" class="w-20">Password</label>
-            <input
-              type="password"
-              name="password"
-              id="password"
-              class="border-b-2 focus:border-green-500 transition-colors flex-1"
-            />
-          </div>
+          <InputBox label="username" labelChildren={"Username"} type="text"/>
+          <InputBox label="password" labelChildren={"Password"} type="password"/>
         </div>
         <button
           type="submit"
diff --git a/routes/_404.tsx b/routes/_404.tsx
index 4d11ee3..18ec26b 100644
--- a/routes/_404.tsx
+++ b/routes/_404.tsx
@@ -1,10 +1,11 @@
-import { Head } from "$fresh/runtime.ts";
+import { Head, asset } from "$fresh/runtime.ts";
 
 export default function Page404() {
   return (
     <>
       <Head>
         <title>Simple file server - 404 Not Found</title>
+        <link rel="stylesheet" href={asset("/base.css")} />
       </Head>
       <div class="p-4 mx-auto max-w-screen-md">
         <img
diff --git a/routes/dir/[...path].tsx b/routes/dir/[...path].tsx
index b812506..aa55b55 100644
--- a/routes/dir/[...path].tsx
+++ b/routes/dir/[...path].tsx
@@ -203,6 +203,7 @@ export default function DirLists(props: PageProps<DirOrFileProps>) {
       <Head>
         <title>Simple file server : {data.path}</title>
         <link rel="stylesheet" href={asset("/github-markdown.css")} />
+        <link rel="stylesheet" href={asset("/base.css")} />
       </Head>
       <div class="p-4 mx-auto max-w-screen-md">
         {data.type === "dir"
diff --git a/routes/index.tsx b/routes/index.tsx
index b3b5ff3..18d6cc4 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,10 +1,12 @@
-import { Head } from "$fresh/runtime.ts";
+import { asset, Head } from "$fresh/runtime.ts";
+
 
 export default function Home() {
   return (
     <>
       <Head>
         <title>Simple file server</title>
+        <link rel="stylesheet" href={asset("/base.css")} />
       </Head>
       <div class="p-4 mx-auto max-w-screen-md">
         <img
diff --git a/routes/login.tsx b/routes/login.tsx
index 173b20c..fe5e4c2 100644
--- a/routes/login.tsx
+++ b/routes/login.tsx
@@ -1,4 +1,4 @@
-import { Head } from "$fresh/runtime.ts";
+import { Head, asset } from "$fresh/runtime.ts";
 import { HandlerContext, PageProps } from "$fresh/server.ts";
 import { setCookie } from "http/cookie.ts";
 import { Status } from "http/http_status.ts";
@@ -85,6 +85,7 @@ export default function Login(props: PageProps) {
     <>
       <Head>
         <title>Simple file server - Login</title>
+        <link rel="stylesheet" href={asset("/base.css")} />
       </Head>
       <div class="">
         <LoginForm redirect={redirect ?? "/"} failed={failed} />
diff --git a/static/base.css b/static/base.css
new file mode 100644
index 0000000..57a8c69
--- /dev/null
+++ b/static/base.css
@@ -0,0 +1,14 @@
+@media (prefers-color-scheme: dark) {
+    body{
+        color-scheme: dark;
+        background-color: #1E1E1E;
+        color: #D4D4D4;
+    }
+}
+@media (prefers-color-scheme: light) {
+    body{
+        color-scheme: light;
+        background-color: #ffffff;
+        color: #000000;
+    }
+}
\ No newline at end of file
diff --git a/static/github-markdown.css b/static/github-markdown.css
index 7d4baf9..2711908 100644
--- a/static/github-markdown.css
+++ b/static/github-markdown.css
@@ -31,14 +31,14 @@
         --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
         --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
         --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
-        --color-fg-default: #c9d1d9;
-        --color-fg-muted: #8b949e;
-        --color-fg-subtle: #484f58;
-        --color-canvas-default: #0d1117;
-        --color-canvas-subtle: #161b22;
-        --color-border-default: #30363d;
-        --color-border-muted: #21262d;
-        --color-neutral-muted: rgba(110, 118, 129, 0.4);
+        --color-fg-default: #D4D4D4;
+        --color-fg-muted: #949494;
+        --color-fg-subtle: #4f4f4f;
+        --color-canvas-default: #1E1E1E;
+        --color-canvas-subtle: #131313;
+        --color-border-default: #363636;
+        --color-border-muted: #262626;
+        --color-neutral-muted: rgba(120, 120, 120, 0.4);
         --color-accent-fg: #58a6ff;
         --color-accent-emphasis: #1f6feb;
         --color-attention-subtle: rgba(187, 128, 9, 0.15);
diff --git a/test_data/f/SUMMARY.md b/test_data/f/SUMMARY.md
index 7acbf84..cbef688 100644
--- a/test_data/f/SUMMARY.md
+++ b/test_data/f/SUMMARY.md
@@ -15,3 +15,5 @@ tags: ["한글", "테스트"]
 - b
 - c
 - d
+
+Key: <kbd>Ctrl+C</kbd>
\ No newline at end of file
diff --git a/test_data/sample/README.md b/test_data/sample/README.md
new file mode 100644
index 0000000..2024cd2
--- /dev/null
+++ b/test_data/sample/README.md
@@ -0,0 +1,247 @@
+---
+title: asdf
+---
+__Advertisement :)__
+
+- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
+  resize in browser.
+- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
+  i18n with plurals support and easy syntax.
+
+You will like those projects!
+
+---
+
+# h1 Heading 8-)
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+
+## Horizontal Rules
+
+___
+
+---
+
+***
+
+
+## Typographic replacements
+
+Enable typographer option to see result.
+
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+test.. test... test..... test?..... test!....
+
+!!!!!! ???? ,,  -- ---
+
+"Smartypants, double quotes" and 'single quotes'
+
+
+## Emphasis
+
+**This is bold text**
+
+__This is bold text__
+
+*This is italic text*
+
+_This is italic text_
+
+~~Strikethrough~~
+
+
+## Blockquotes
+
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+
+
+## Lists
+
+Unordered
+
++ Create a list by starting a line with `+`, `-`, or `*`
++ Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    * Ac tristique libero volutpat at
+    + Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
++ Very easy!
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+
+1. You can use sequential numbers...
+1. ...or keep all the numbers as `1.`
+
+Start numbering with offset:
+
+57. foo
+1. bar
+
+
+## Code
+
+Inline `code`
+
+Indented code
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+
+Block code "fences"
+
+```
+Sample text here...
+```
+
+Syntax highlighting
+
+``` js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+```
+
+## Tables
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+Right aligned columns
+
+| Option | Description |
+| ------:| -----------:|
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+Like links, Images also have a footnote style syntax
+
+![Alt text][id]
+
+With a reference later in the document defining the URL location:
+
+[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
+
+
+## Plugins
+
+The killer feature of `markdown-it` is very effective support of
+[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
+
+
+### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
+
+> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
+>
+> Shortcuts (emoticons): :-) :-( 8-) ;)
+
+see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
+
+
+### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
+
+- 19^th^
+- H~2~O
+
+
+### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
+
+++Inserted text++
+
+
+### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
+
+==Marked text==
+
+
+### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
+
+Footnote 1 link[^first].
+
+Footnote 2 link[^second].
+
+Inline footnote^[Text of inline footnote] definition.
+
+Duplicated footnote reference[^second].
+
+[^first]: Footnote **can have markup**
+
+    and multiple paragraphs.
+
+[^second]: Footnote text.
+
+
+### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
+
+Term 1
+
+:   Definition 1
+with lazy continuation.
+
+Term 2 with *inline markup*
+
+:   Definition 2
+
+        { some code, part of Definition 2 }
+
+    Third paragraph of definition 2.
+
+_Compact style:_
+
+Term 1
+  ~ Definition 1
+
+Term 2
+  ~ Definition 2a
+  ~ Definition 2b
+
+
+### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
+
+This is HTML abbreviation example.
+
+It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+*[HTML]: Hyper Text Markup Language
+
+### [Custom containers](https://github.com/markdown-it/markdown-it-container)
+
+::: warning
+*here be dragons*
+:::
