diff --git a/comic/templates/base.html b/comic/templates/base.html
index f006497..131495d 100644
--- a/comic/templates/base.html
+++ b/comic/templates/base.html
@@ -50,7 +50,13 @@
         </div><!--/.nav-collapse -->
       </div>
     </nav>
-
+    <ol class="breadcrumb">
+        {% block breadcrumb %}
+            <li><a href="#">Home</a></li>
+            <li><a href="#">Library</a></li>
+            <li class="active">Data</li>
+        {% endblock %}
+    </ol>
     <div class="container">
         {% block content %}{% endblock %}
     </div>
diff --git a/comic/templates/comic/index.html b/comic/templates/comic/index.html
index 8dbdf20..f028242 100644
--- a/comic/templates/comic/index.html
+++ b/comic/templates/comic/index.html
@@ -1,11 +1,22 @@
 {% extends "base.html" %}
 {% block title %}My amazing blog{% endblock %}
+
+{% block breadcrumb %}
+    {% for crumb in breadcrumbs %}
+        <li><a href="{{ crumb.url }}"{% if forloop.last %} class="active"{% endif %}>{{ crumb.name }}</a></li>
+    {% endfor %}
+{% endblock %}
 {% block content %}
     <h2 class="center">Comics</h2>
     <div class="list-group">
     {% if file_list %}
         {% for file in file_list %}
-            <a href="/comic/file/0/{{ file }}/" class="list-group-item">{{ file }}</a>
+            {% if file.isdir %}
+                <a href="/comic/{{ file.location }}/" class="glyphicon {{ file.icon }} list-group-item"> {{ file }}</a>
+            {% endif %}
+            {% if file.iscb %}
+                <a href="/comic/read/{{ file.location }}/0/" class="glyphicon {{ file.icon }} list-group-item"> {{ file }}</a>
+            {% endif %}
         {% endfor %}
     {% else %}
         <p class="list-group-item">No comics.</p>
diff --git a/comic/templates/comic/read_comic.html b/comic/templates/comic/read_comic.html
index 428a8ff..bf0bfdf 100644
--- a/comic/templates/comic/read_comic.html
+++ b/comic/templates/comic/read_comic.html
@@ -2,12 +2,12 @@
 {% block content %}
 <center>
 <br/>
-    <a href="/comic/file/{{ nav.next }}/{{ file_name }}/">
-        <img src="/comic/file/{{ nav.cur }}/{{ file_name }}/img" height="900"></img>
+    <a href="/comic/read/{{ file_name }}/{{ nav.next }}/">
+        <img src="/comic/read/{{ file_name }}/{{ nav.cur }}/img" height="900" class="img-rounded"></img>
     </a>
 <br/>
 
-<a href="/comic/file/{{ nav.prev }}/{{ file_name }}/">Prev</a>
+<a href="/comic/read/{{ file_name }}/{{ nav.prev }}/">Prev</a>
 {% if pages %}
     <select>
     {% for file in pages %}
@@ -17,6 +17,6 @@
 {% else %}
     <p>No comics.</p>
 {% endif %}
-<a href="/comic/file/{{ nav.next }}/{{ file_name }}/">Next</a>
+<a href="/comic/read/{{ file_name }}/{{ nav.next }}/">Next</a>
 </center>
 {% endblock %}
\ No newline at end of file
diff --git a/comic/urls.py b/comic/urls.py
index a3d5262..a103f59 100644
--- a/comic/urls.py
+++ b/comic/urls.py
@@ -4,6 +4,9 @@ from . import views
 
 urlpatterns = [
     url(r'^$', views.index, name='index'),
+    url(r'^(?P<comic_path>[\w=]+)\/$', views.index, name='index'),
+    url(r'^read\/(?P<comic_path>[\w=]+)\/(?P<page>[0-9]+)\/$', views.read_comic, name='read_comic'),
+    url(r'^read\/(?P<comic_path>[\w=]+)\/(?P<page>[0-9]+)\/img$', views.get_image, name='get_image'),
     url(r"^file\/(?P<page>[0-9]+)\/(?P<file_name>[\w.\s'\(\)\-]+)\/$", views.read_comic, name='read_comic'),
     url(r"^file\/(?P<page>[0-9]+)\/(?P<file_name>[\w.\s'\(\)\-]+)\/img$", views.get_image, name='get_image'),
 ]
\ No newline at end of file
diff --git a/comic/views.py b/comic/views.py
index 010478f..bdc3431 100644
--- a/comic/views.py
+++ b/comic/views.py
@@ -1,10 +1,13 @@
 from django.http import HttpResponse
 from django.template import RequestContext, loader
+from django.utils.http import urlsafe_base64_decode, urlsafe_base64_encode
+
 from comic.models import Setting
 
 from unrar import rarfile
 from zipfile import ZipFile
 import os
+from os import path
 
 class Comic:
     def __init__(self):
@@ -15,25 +18,56 @@ class Navigation:
         self.next = 0
         self.prev = 0
         self.cur = 0
+class DirFile:
+    def __init__(self):
+        self.name = ''
+        self.isdir = False
+        self.icon = ''
+        self.iscb = False
+        self.location = ''
+
+    def __str__(self):
+        return self.name
+
+
 # Create your views here.
-def index(request):
+def index(request, comic_path=''):
     base_dir = Setting.objects.get(name='BASE_DIR')
-    files = os.listdir(base_dir.value)
+    comic_path = urlsafe_base64_decode(comic_path)
+    breadcrumbs = generate_breadcrumbs(comic_path)
+
+
+    #list and classify files
+    files = []
+    for fn in os.listdir(path.join(base_dir.value, comic_path)):
+        df = DirFile()
+        df.name = fn
+        if path.isdir(path.join(base_dir.value, comic_path, fn)):
+            df.isdir = True
+            df.icon = 'glyphicon-folder-open'
+            df.location = urlsafe_base64_encode(path.join(comic_path, fn))
+        elif fn.lower().endswith('cbz') or fn.lower().endswith('cbr'):
+            df.iscb = True
+            df.icon = 'glyphicon-book'
+            df.location = urlsafe_base64_encode(path.join(comic_path, fn))
+        files.append(df)
     template = loader.get_template('comic/index.html')
     context = RequestContext(request, {
         'file_list': files,
+        'breadcrumbs': breadcrumbs,
     })
-
     return HttpResponse(template.render(context))
 
 
-def read_comic(request, file_name, page):
+def read_comic(request, comic_path, page):
+    encoded = comic_path
+    comic_path = urlsafe_base64_decode(comic_path)
     base_dir = Setting.objects.get(name='BASE_DIR')
     template = loader.get_template('comic/read_comic.html')
-    if file_name.lower().endswith('cbr'):
-        cbx = rarfile.RarFile(os.path.join(base_dir.value, file_name))
-    elif file_name.lower().endswith('cbz'):
-        cbx = ZipFile(os.path.join(base_dir.value, file_name))
+    if comic_path.lower().endswith('cbr'):
+        cbx = rarfile.RarFile(path.join(base_dir.value, comic_path))
+    elif comic_path.lower().endswith('cbz'):
+        cbx = ZipFile(path.join(base_dir.value, comic_path))
     nav = Navigation()
     page = int(page)
     nav.cur = page
@@ -46,21 +80,20 @@ def read_comic(request, file_name, page):
         comic.index = idx
         pages.append(comic)
 
-    img_src = '/comic/file/0/' + file_name + '/img'
     context = RequestContext(request, {
         'pages': pages,
-        'file_name': file_name,
-        'img_src': img_src,
+        'file_name': encoded,
         'nav': nav,
     })
     return HttpResponse(template.render(context))
 
-def get_image(request, file_name, page):
+def get_image(request, comic_path, page):
     base_dir = Setting.objects.get(name='BASE_DIR')
-    if file_name.lower().endswith('cbr'):
-        cbx = rarfile.RarFile(os.path.join(base_dir.value, file_name))
-    elif file_name.lower().endswith('cbz'):
-        cbx = ZipFile(os.path.join(base_dir.value, file_name))
+    comic_path = urlsafe_base64_decode(comic_path)
+    if comic_path.lower().endswith('cbr'):
+        cbx = rarfile.RarFile(path.join(base_dir.value, comic_path))
+    elif comic_path.lower().endswith('cbz'):
+        cbx = ZipFile(path.join(base_dir.value, comic_path))
     page = int(page)
     page_file = cbx.namelist()[page]
     file_name = str(page_file).lower()
@@ -79,3 +112,26 @@ def get_image(request, file_name, page):
     except KeyError:
         img = cbx.open(page_file)
     return HttpResponse(img.read(), content_type=content)
+
+class Breadcrumb:
+    def __init__(self):
+        self.name = 'Home'
+        self.url = '/comic/'
+
+    def __str__(self):
+        return self.name
+def generate_breadcrumbs(comic_path):
+    output = [Breadcrumb()]
+    prefix = '/comic/'
+    last = ''
+    comic_path = path.normpath(comic_path)
+    folders = comic_path.split(os.sep)
+    for item in folders:
+        if item == '.':
+            continue
+        bc = Breadcrumb()
+        bc.name = item
+        bc.url = prefix + urlsafe_base64_encode(item)
+        output.append(bc)
+        last = path.join(last, item)
+    return output
\ No newline at end of file