diff --git a/cps/static/css/main.css b/cps/static/css/main.css
index 03cb0a01..cee8ab9f 100644
--- a/cps/static/css/main.css
+++ b/cps/static/css/main.css
@@ -551,7 +551,7 @@ input:-moz-placeholder { color: #454545; }
   position: relative;
   border-radius: 3px;
   margin: 0 auto;
-  height: 320px;
+  /* height: 320px; */
 }
 
 .md-content > div {
diff --git a/cps/static/css/reader.css b/cps/static/css/reader.css
index ec8054ca..7229a6e3 100644
--- a/cps/static/css/reader.css
+++ b/cps/static/css/reader.css
@@ -27,3 +27,21 @@
     border: none;
     outline: none;
 }
+
+.item {
+    font-size: 20px;
+    font-weight: 400;
+    font-family: Open Sans;
+    padding-right: 10px;
+    color: white;
+}
+
+.item~button {
+    display: inline-block;
+    border: none;
+    text-align: center;
+    text-decoration: none;
+    margin-top: 5%;
+    margin-right: 1%;
+    font-size: 16px;
+}
\ No newline at end of file
diff --git a/cps/templates/read.html b/cps/templates/read.html
index 46f54e95..372959d4 100644
--- a/cps/templates/read.html
+++ b/cps/templates/read.html
@@ -99,8 +99,21 @@
                 <div class="slider">
                     <label for="fader">{{ _('Font Sizes') }}</label>
                     <input type="range" min="75" max="200" value="100" id="fontSizeFader" step="25">
-                </div>
+                </div>            
             </div>
+              <div class="font" id="font">
+                <label class="item">{{_('Font')}}:</label>
+                <button type="button" id="default" onclick="selectFont(this.id)"><span>✓</span>{{_('Default')}}</button> 
+                <button type="button" id="Yahei" onclick="selectFont(this.id)"><span></span>{{_('Yahei')}}</button>
+                <button type="button" id="SimSun" onclick="selectFont(this.id)"><span></span>{{_('SimSun')}}</button>
+                <button type="button" id="KaiTi" onclick="selectFont(this.id)"><span></span>{{_('KaiTi')}}</button>
+                <button type="button" id="Arial" onclick="selectFont(this.id)"><span></span>{{_('Arial')}}</button>
+              </div>
+              <div class="layou" id="layout">
+                <label class="item">{{ _('Spread') }}:</label>
+                <button type="button" id="spread" onclick="spread(this.id)"><span>✓</span>{{_('Two columns')}}</button>
+                <button type="button" id="nonespread" onclick="spread(this.id)"><span></span>{{_('One column')}}</button>
+              </div>            
             <div class="closer icon-cancel-circled"></div>
         </div>
     </div>
@@ -139,7 +152,7 @@
         };
 
         function selectTheme (id) {
-            var tickSpans = document.getElementById("themes").querySelectorAll("span");
+            let tickSpans = document.getElementById("themes").querySelectorAll("span");
 
             // Remove tick mark from all theme buttons
             tickSpans.forEach(function (tickSpan) {
@@ -164,10 +177,38 @@
         fontSizeFader.addEventListener("change", function () {
             reader.rendition.themes.fontSize(`${this.value}%`);
         });
-    </script>
-    <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/reading/epub.js') }}"></script>
-</body>
 
+        let defaultFont;
+
+        function selectFont(id) {
+          if (!defaultFont) {
+            defaultFont = reader.rendition.getContents()[0]?.css('font-family');
+          }
+
+          spans = document.getElementById("font").querySelectorAll("span");
+          for(var i = 0; i < spans.length; i++) {
+            spans[i].textContent = "";
+          }
+          document.getElementById(id).querySelector("span").textContent = "✓";
+          
+          if (id == 'default') {
+            reader.rendition.themes.font(defaultFont);
+            return;
+          }
+          reader.rendition.themes.font(id);
+        }
+
+        function spread(id) {
+          spans = document.getElementById("layout").querySelectorAll("span");
+          for(var i = 0; i < spans.length; i++) {
+            spans[i].textContent = "";
+          }
+          document.getElementById(id).querySelector("span").textContent = "✓";
+          reader.rendition.spread(id==='spread'?true:'none');
+        }
+      </script>
+      <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
+      <script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>
+      <script src="{{ url_for('static', filename='js/reading/epub.js') }}"></script>
+    </body>
 </html>