diff --git a/tomotopy/viewer/__main__.py b/tomotopy/viewer/__main__.py
index 7e0277c..591918a 100644
--- a/tomotopy/viewer/__main__.py
+++ b/tomotopy/viewer/__main__.py
@@ -3,12 +3,13 @@
 
 def main(args):
     model = tp.load_model(args.model)
-    open_viewer(model, args.host, args.port, args.browser_title, args.model + '.json', read_only=args.read_only)
+    open_viewer(model, args.host, args.port, args.root_path, args.browser_title, args.model + '.json', read_only=args.read_only)
 
 if __name__ == '__main__':
     import argparse
     parser = argparse.ArgumentParser()
     parser.add_argument('model')
+    parser.add_argument('--root-path', default='/')
     parser.add_argument('--browser-title')
     parser.add_argument('--host', default='localhost')
     parser.add_argument('-p', '--port', type=int, default=9999)
diff --git a/tomotopy/viewer/template.html b/tomotopy/viewer/template.html
index 1459f28..da002e6 100644
--- a/tomotopy/viewer/template.html
+++ b/tomotopy/viewer/template.html
@@ -61,23 +61,23 @@
       <main class="p-3">
         <ul class="nav nav-tabs" id="menu" role="tablist">
           <li class="nav-item" role="presentation">
-            <a class="nav-link {{"active" if action == "overview" else ""}}" id="overview-tab" href="/">Overview</a>
+            <a class="nav-link {{"active" if action == "overview" else ""}}" id="overview-tab" href="{{root_path}}">Overview</a>
           </li>
           <li class="nav-item" role="presentation">
-            <a class="nav-link {{"active" if action == "document" else ""}}" id="document-tab" href="/document">Document</a>
+            <a class="nav-link {{"active" if action == "document" else ""}}" id="document-tab" href="{{root_path}}document">Document</a>
           </li>
           <li class="nav-item" role="presentation">
-            <a class="nav-link {{"active" if action == "topic" else ""}}" id="topic-tab" href="/topic">Topic</a>
+            <a class="nav-link {{"active" if action == "topic" else ""}}" id="topic-tab" href="{{root_path}}topic">Topic</a>
           </li>
           <li class="nav-item" role="presentation">
-            <a class="nav-link {{"active" if action == "topic-rel" else ""}}" id="topic-rel-tab" href="/topic-rel">Topic Relation</a>
+            <a class="nav-link {{"active" if action == "topic-rel" else ""}}" id="topic-rel-tab" href="{{root_path}}topic-rel">Topic Relation</a>
           </li>
           {% if available.get('metadata') %}
           <li class="nav-item" role="presentation">
-            <a class="nav-link {{"active" if action == "metadata" else ""}}" id="metadata-tab" href="/metadata">Metadata</a>
+            <a class="nav-link {{"active" if action == "metadata" else ""}}" id="metadata-tab" href="{{root_path}}metadata">Metadata</a>
           </li>
           <li class="nav-item" role="presentation">
-            <a class="nav-link {{"active" if action == "tdf-map" else ""}}" id="tdf-map-tab" href="/tdf-map">TDF Map</a>
+            <a class="nav-link {{"active" if action == "tdf-map" else ""}}" id="tdf-map-tab" href="{{root_path}}tdf-map">TDF Map</a>
           </li>
           {% end %}
         </ul>
@@ -233,7 +233,7 @@ <h3>Filtered documents ({{filtered_docs}} / {{total_docs}})</h3>
           {% elif action == 'topic' %}
           <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
           <div class="tab-pane fade show active mx-1 my-3" id="topic-tab-pane" role="tabpanel" aria-labelledby="topic-tab">
-            <h3>Top words in each topic <a class="download-csv" href="/d/topic-words.csv?n=100"><svg><use href="#csv-icon" /></svg></a></h3>
+            <h3>Top words in each topic <a class="download-csv" href="{{root_path}}d/topic-words.csv?n=100"><svg><use href="#csv-icon" /></svg></a></h3>
             <ul class="topic-word-dist-container">
               {% for topic in topics %}
               <li name="topic-{{topic.topic_id}}">
@@ -260,12 +260,12 @@ <h4 class="topic-title topic-color-{{topic.topic_id % 40}}-050 p-1" data-id="{{t
               {% end %}
             </ul>
             <div class="d-grid gap-2">
-              <a href="/topic?top_n={{top_n + 10}}" class="btn btn-primary" role="button">More words...</a>
+              <a href="{{root_path}}topic?top_n={{top_n + 10}}" class="btn btn-primary" role="button">More words...</a>
             </div>
             <div class="row" style="margin-top: 1em;">
               {% set col = "col-md-6" if top1_topic_dist_by_metadata else "" %}
               <div class="chart-item {{col}}" style="height:45vh;">
-                <h3>Distribution of Document Top1 Topics <a class="download-csv" href="/d/document-top1-topic.csv"><svg><use href="#csv-icon" /></svg></a></h3>
+                <h3>Distribution of Document Top1 Topics <a class="download-csv" href="{{root_path}}d/document-top1-topic.csv"><svg><use href="#csv-icon" /></svg></a></h3>
                 <canvas id="chart-all"></canvas>
                 <script>
                   const topic_labels = {{get_all_topic_labels()}};
@@ -294,7 +294,7 @@ <h3>Distribution of Document Top1 Topics <a class="download-csv" href="/d/docume
               </div>
               {% if top1_topic_dist_by_metadata %}
               <div class="chart-item {{col}}" style="height:45vh;">
-                <h3>Distribution of Document Top1 Topics by Metadata <a class="download-csv" href="/d/document-top1-topic.csv?m=1"><svg><use href="#csv-icon" /></svg></a></h3>
+                <h3>Distribution of Document Top1 Topics by Metadata <a class="download-csv" href="{{root_path}}d/document-top1-topic.csv?m=1"><svg><use href="#csv-icon" /></svg></a></h3>
                 <canvas id="chart-metadata"></canvas>
                 <script>
                   (function(){
@@ -534,12 +534,12 @@ <h3>{{get_topic_label(topic, prefix="Topic ", id_suffix=True)}}: <small>{{", ".j
             <h3>Topic Distribution Function Map</h3>
             <div class="row">
               <div class="text-center">
-                <img src="/d/tdf-map-legend.png?x={{x_axis}}&y={{y_axis}}&w=800&h=40&s={{contour_interval}}" style="border: 1px solid #333; max-width:800px; width:100%;">
+                <img src="{{root_path}}d/tdf-map-legend.png?x={{x_axis}}&y={{y_axis}}&w=800&h=40&s={{contour_interval}}" style="border: 1px solid #333; max-width:800px; width:100%;">
               </div>
               {% for topic in range(model.k) %}
               <div class="col-md-4 col-sm-6">
                 <h4>{{get_topic_label(topic, prefix="Topic ", id_suffix=True)}}</h4>
-                <img src="/d/tdf-map-{{topic}}.png?x={{x_axis}}&y={{y_axis}}&w={{width}}&h={{height}}&s={{contour_interval}}&smooth={{int(smooth)}}" class="img-fluid" alt="Map for {{get_topic_label(topic, prefix="Topic ", id_suffix=True)}}">
+                <img src="{{root_path}}d/tdf-map-{{topic}}.png?x={{x_axis}}&y={{y_axis}}&w={{width}}&h={{height}}&s={{contour_interval}}&smooth={{int(smooth)}}" class="img-fluid" alt="Map for {{get_topic_label(topic, prefix="Topic ", id_suffix=True)}}">
               </div>
               {% end %}
             </div>
@@ -576,7 +576,7 @@ <h4>{{get_topic_label(topic, prefix="Topic ", id_suffix=True)}}</h4>
         document.getElementById('document-content').style.display = 'block';
         document.getElementById('document-list').classList.add('d-none');
 
-        fetch(`/api/document/${doc_id}`).then((res) => res.text()).then((html) => {
+        fetch(`{{root_path}}api/document/${doc_id}`).then((res) => res.text()).then((html) => {
           document.getElementById('document-content-body').innerHTML = html;
           const tooltip_list = [...document.querySelectorAll('#document-content-body [data-bs-toggle="tooltip"]')].map(e => new bootstrap.Tooltip(e));
           document.querySelectorAll('#document-content-body meta').forEach((el) => {
@@ -685,7 +685,7 @@ <h4>{{get_topic_label(topic, prefix="Topic ", id_suffix=True)}}</h4>
             label.style.display = '';
             input.style.display = 'none';
             label.textContent = input.value;
-            fetch(`/api/topic/${topic_id}/label`, {
+            fetch(`{{root_path}}api/topic/${topic_id}/label`, {
               method: 'POST',
               headers: {
                 'Content-Type': 'application/json',
@@ -753,7 +753,7 @@ <h4>{{get_topic_label(topic, prefix="Topic ", id_suffix=True)}}</h4>
           return;
         }
 
-        fetch(`/api/conf-interval/${cid}/${p}`).then((res) => res.json()).then((json) => {
+        fetch(`{{root_path}}api/conf-interval/${cid}/${p}`).then((res) => res.json()).then((json) => {
           const cid = json.data.cid;
           const p = json.data.p;
           const lbs = json.data.lbs;
diff --git a/tomotopy/viewer/viewer_server.py b/tomotopy/viewer/viewer_server.py
index 6e62f14..be98d6f 100644
--- a/tomotopy/viewer/viewer_server.py
+++ b/tomotopy/viewer/viewer_server.py
@@ -263,6 +263,10 @@ def title(self):
     def model(self):
         return self.server.model
     
+    @property
+    def root_path(self):
+        return self.server.root_path
+
     @property
     def model_hash(self):
         hex_chr = hex(self.model.get_hash())[2:]
@@ -879,7 +883,7 @@ def _prepare_template():
     compiled_template = compile('\n'.join(codes), 'template.html', 'exec')
     return compiled_template
 
-def open_viewer(model, host='localhost', port=80, title=None, user_config_file=None, read_only=False):
+def open_viewer(model, host='localhost', port=80, root_path='/', title=None, user_config_file=None, read_only=False):
     '''
 Run a server for topic model viewer
 
@@ -891,6 +895,8 @@ def open_viewer(model, host='localhost', port=80, title=None, user_config_file=N
     The host name to bind the server. Default is 'localhost'.
 port: int
     The port number to bind the server. Default is 80.
+root_path: str
+    The root path of the viewer. Default is '/'.
 title: str
     The title of the viewer in a web browser. Default is the class name of the model.
 user_config_file: str
@@ -915,6 +921,7 @@ def open_viewer(model, host='localhost', port=80, title=None, user_config_file=N
     with http.server.ThreadingHTTPServer((host, port), ViewerHandler) as httpd:
         httpd.title = title
         httpd.model = model
+        httpd.root_path = root_path
         httpd.template = template
         httpd.user_config_file = user_config_file
         httpd.user_config = None