diff --git a/template/index.html b/template/index.html
index aa4ad2a..9109ce3 100644
--- a/template/index.html
+++ b/template/index.html
@@ -167,6 +167,39 @@
                 <button class="toolbar-item" @click="getReadable(itemSelectedDetails)">
                     <span class="icon">{% inline "book-open.svg" %}</span>
                 </button>
+                <button class="toolbar-item" id="content-customize">
+                    <span class="icon">{% inline "sliders.svg" %}</span>
+                </button>
+                <b-popover target="content-customize" triggers="click" placement="bottom">
+                    <div class="p-1" style="width: 200px;">
+                        <div class="d-flex">
+                            <label class="themepicker">
+                                <input type="radio" name="settingsFont" value="light" v-model="theme">
+                                <div class="themepicker-label appearance-option"></div>
+                            </label>
+                            <label class="themepicker">
+                                <input type="radio" name="settingsFont" value="sepia" v-model="theme">
+                                <div class="themepicker-label appearance-option"></div>
+                            </label>
+                            <label class="themepicker">
+                                <input type="radio" name="settingsFont" value="night" v-model="theme">
+                                <div class="themepicker-label appearance-option"></div>
+                            </label>
+                        </div>
+                        <div class="mt-2">
+                            <label class="selectgroup" v-for="font in ['', 'serif', 'sans-serif']">
+                                <input type="radio" name="feedToAdd" :value="font" v-model="font">
+                                <div class="selectgroup-label appearance-option">
+                                    <div :style="{'font-family': font}">{{ font || 'System' }}</div>
+                                </div>
+                            </label>
+                        </div>
+                        <div class="btn-group d-flex mt-2">
+                            <button class="btn btn-outline appearance-option" style="font-size: 0.8rem">A</button>
+                            <button class="btn btn-outline appearance-option" style="font-size: 1.2rem">A</button>
+                        </div>
+                    </div>
+                </b-popover>
             </div>
             <div v-if="itemSelected" class="px-4 pt-3 pb-5 border-top overflow-auto">
                 <h3>{{itemSelectedDetails.title}}</h3>
diff --git a/template/static/images/sliders.svg b/template/static/images/sliders.svg
new file mode 100644
index 0000000..19c9385
--- /dev/null
+++ b/template/static/images/sliders.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sliders"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
\ No newline at end of file
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index b2bf5ee..6b7a3a4 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -136,6 +136,8 @@ var vm = new Vue({
         'items': false,
       },
       'feedStats': {},
+      'font': 'sans-serif',
+      'theme': 'light',
     }
   },
   computed: {
diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css
index 55fa62a..778d13e 100644
--- a/template/static/stylesheets/app.css
+++ b/template/static/stylesheets/app.css
@@ -119,6 +119,10 @@ select.form-control:not([multiple]):not([size]) {
   outline: none;
 }
 
+.popover:focus {
+  outline: none;
+}
+
 /* custom elements */
 
 .icon {
@@ -245,6 +249,15 @@ select.form-control:not([multiple]):not([size]) {
   border-color: var(--color-primary);
 }
 
+.btn-outline {
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+}
+
+.btn-outline:hover {
+  background-color: #f8f9fa;
+}
+
 .list-row {
   padding-left: .5rem;
   padding-right: .5rem;
@@ -349,6 +362,64 @@ select.form-control:not([multiple]):not([size]) {
   transition: background-color .1s ease-out;
 }
 
+.themepicker {
+  position: relative;
+  background: none;
+  border: none;
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.themepicker input {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+  top: 0; left: 0;
+}
+
+.themepicker-label {
+  height: 1.75rem;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.themepicker input:checked + .themepicker-label {
+  box-shadow: inset 0 0 0px 1px #017bfe;
+  border-color: #017bfe !important;
+}
+
+.themepicker-label:hover {
+  box-shadow: inset 0 0 0px 1px rgb(1, 123, 254, .6);
+  border-color: rgb(1, 123, 254, .6) !important;
+}
+
+.themepicker input[value=light] + .themepicker-label {
+  background: #fff;
+  border-color: #dee2e6;
+}
+
+.themepicker input[value=sepia] + .themepicker-label {
+  background: yellow;
+  border-color: yellow;
+}
+
+.themepicker input[value=night] + .themepicker-label {
+  background: #111;
+  border-color: #111;
+}
+
+.themepicker + .themepicker {
+  margin-left: .5rem;
+}
+
+.appearance-option {
+  height: 2rem;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  line-height: 2rem;
+}
+
 /* content */
 
 .content {