diff --git a/islands/DirList.tsx b/islands/DirList.tsx
index 340d9e2..a4a8496 100644
--- a/islands/DirList.tsx
+++ b/islands/DirList.tsx
@@ -4,6 +4,7 @@ import { extname, join } from "path/posix.ts";
 import { ComponentChild } from "preact";
 import UpList from "./UpList.tsx";
 import {extToIcon} from "../src/media.ts";
+import { encodePath } from "../util/util.ts";
 
 function ListItem(props:{
     href: string,
@@ -47,11 +48,11 @@ export function DirList(props: DirListProps) {
                     <img src={asset("/icon/sort-alpha-down.svg")} /> Sort Alphabet
                 </button>
             </li>
-            <ListItem key=".." href={`/dir/${join(data.path,"..")}`}
+            <ListItem key=".." href={`/dir/${encodePath(join(data.path,".."))}`}
                 icon="/icon/back.svg"
                 >...</ListItem>
           {files.map((file) => (
-            <ListItem key={file.name} href={`/dir/${join(data.path,file.name)}`}
+            <ListItem key={file.name} href={`/dir/${encodePath(join(data.path,file.name))}`}
             icon={file.isDirectory ? "/icon/folder.svg": extToIcon(extname(file.name))}
             >{file.name}</ListItem>
           ))}
diff --git a/islands/DocSearch.tsx b/islands/DocSearch.tsx
index df01048..b94e6af 100644
--- a/islands/DocSearch.tsx
+++ b/islands/DocSearch.tsx
@@ -1,6 +1,7 @@
 import { Doc } from "../src/collect.ts";
 import { useEffect, useState } from "preact/hooks";
 import { Index } from "../src/client_search.ts";
+import { encodePath } from "../util/util.ts";
 
 function SearchBar(props:{
     search?: string;
@@ -35,7 +36,7 @@ export default function DocSearch(props: {
             <ul class="mt-4">
                 {docs.map((doc) => (
                     <li class="mt-2">
-                        <a href={`/dir/${doc.path}`}> {doc.path}</a>
+                        <a href={`/dir/${encodePath(doc.path)}`}> {doc.path}</a>
                     </li>
                 ))}
             </ul>
diff --git a/islands/FileViewer.tsx b/islands/FileViewer.tsx
index e70fee8..35c3d70 100644
--- a/islands/FileViewer.tsx
+++ b/islands/FileViewer.tsx
@@ -1,10 +1,11 @@
 import RenderView from "./ContentRenderer.tsx";
 import UpList from "./UpList.tsx";
 import { extname } from "path/mod.ts";
+import { encodePath } from "../util/util.ts";
 
 export default function FileViewer(props: { path: string }) {
     const { path } = props;
-    const srcPath = `/fs/${path}`;
+    const srcPath = `/fs/${encodePath(path)}`;
     return (
         <div class="p-4 mx-auto max-w-screen-md">
             <UpList path={path} />
diff --git a/islands/UpList.tsx b/islands/UpList.tsx
index 75b5853..8dd5a76 100644
--- a/islands/UpList.tsx
+++ b/islands/UpList.tsx
@@ -1,6 +1,7 @@
 import { Head, asset } from "$fresh/runtime.ts";
 import { join } from "path/posix.ts";
 import { ComponentChild } from "preact";
+import { encodePath } from "../util/util.ts";
 
 
 function stairs(path: string){
@@ -28,7 +29,7 @@ export default function UpList(props:{path: string}) {
             uplist.map(([cur, up], i) => (
                 <>
                     <span class="p-2">/</span>
-                    <a class="flex flex-wrap p-2 hover:bg-gray-400 rounded-sm" href={`/dir/${cur}`}>
+                    <a class="flex flex-wrap p-2 hover:bg-gray-400 rounded-sm" href={`/dir/${encodePath(cur)}`}>
                         <img src={asset("/icon/folder.svg")} />
                         <span class="ml-1">{up}</span>
                     </a>
diff --git a/routes/index.tsx b/routes/index.tsx
index 3d51f33..b280231 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -15,7 +15,7 @@ export default function Home() {
         <p class="my-6">
           This is a simple file server. It serves files from the <code>CWD</code>.
         </p>
-        <a href="/dir/">Go To CWD</a>
+        <a href="/dir/">Go To CWD</a> | <a href="/doc/">Doc</a>
         <hr></hr>
         <a href="/login">Login</a> | <a href="/api/logout">Logout</a>
       </div>
diff --git a/util/util.ts b/util/util.ts
index 9c1a44e..ceb49fb 100644
--- a/util/util.ts
+++ b/util/util.ts
@@ -8,4 +8,8 @@ export function removePrefixFromPathname(pathname: string, prefix: string): stri
         ret = ".";
     }
     return ret;
+}
+
+export function encodePath(path: string): string {
+    return path.split("/").map(encodeURIComponent).join("/");
 }
\ No newline at end of file