diff --git a/renderer/src/components/AudioRecorder/components/ReferenceSelector.js b/renderer/src/components/AudioRecorder/components/ReferenceSelector.js
index be9e05d6b..2268d8382 100644
--- a/renderer/src/components/AudioRecorder/components/ReferenceSelector.js
+++ b/renderer/src/components/AudioRecorder/components/ReferenceSelector.js
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 
 const AudioWaveform = dynamic(() => import('./WaveForm'), { ssr: false });
 
-export default function ReferenceSelector({ data, versepath, verse }) {
+export default function ReferenceSelector({
+ data, versepath, verse, font, fontSize,
+}) {
   const path = require('path');
   return (
     <div className="bg-white col-span-3 m-3 rounded-md shadow overflow-hidden">
@@ -21,7 +23,14 @@ export default function ReferenceSelector({ data, versepath, verse }) {
                   {story.verseNumber}
                 </div>
               </div>
-              <p className="text-sm text-gray-600 leading-relaxed">
+              <p
+                className="text-sm text-gray-600 leading-relaxed"
+                style={{
+                fontFamily: font || 'sans-serif',
+                fontSize: `${fontSize}rem`,
+                lineHeight: (fontSize > 1.3) ? 1.5 : '',
+              }}
+              >
                 {story.verseText}
               </p>
             </div>
diff --git a/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js b/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js
index ab236fddc..376ddb769 100644
--- a/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js
+++ b/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js
@@ -18,14 +18,15 @@ const style = {
     fontStyle: 'italic',
   },
 };
-const ReferenceObs = ({ stories, font, title }) => {
+const ReferenceObs = ({
+ stories, font, title, fontSize,
+}) => {
   const [isLoading, setIsLoading] = useState(true);
   const [direction, setDirection] = useState('ltr');
   const [networkState, setNetworkState] = useState({ online: true });
   const {
  state: {
     selectedStory,
-    fontSize,
   },
   actions: {
     setSelectedStory,
diff --git a/renderer/src/components/EditorPage/ObsEditor/WebReferenceObs.js b/renderer/src/components/EditorPage/ObsEditor/WebReferenceObs.js
index 9135e95c4..88700360a 100644
--- a/renderer/src/components/EditorPage/ObsEditor/WebReferenceObs.js
+++ b/renderer/src/components/EditorPage/ObsEditor/WebReferenceObs.js
@@ -26,7 +26,7 @@ const ReferenceObs = ({ stories }) => {
  state: {
     selectedStory,
     selectedFont,
-    fontSize,
+    fontSize1: fontSize,
   },
   actions: {
     setSelectedStory,
diff --git a/renderer/src/components/EditorPage/Reference/ReferenceCard.js b/renderer/src/components/EditorPage/Reference/ReferenceCard.js
index c3de35bb1..e3b93af7e 100644
--- a/renderer/src/components/EditorPage/Reference/ReferenceCard.js
+++ b/renderer/src/components/EditorPage/Reference/ReferenceCard.js
@@ -15,6 +15,7 @@ const ReferenceCard = ({
   font,
   setResetTrigger,
   resetTrigger,
+  fontSize,
 }) => {
   const {
     state: {
@@ -43,7 +44,12 @@ const ReferenceCard = ({
         setItemIndex={setItemIndex}
       />
     )}
-      <div style={{ fontFamily: font || 'sans-serif' }}>
+      <div style={{
+          fontFamily: font || 'sans-serif',
+          fontSize: `${fontSize}rem`,
+          lineHeight: (fontSize > 1.3) ? 1.5 : '',
+        }}
+      >
         <CardContent
           item={item}
           items={items}
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelps.js b/renderer/src/components/EditorPage/Reference/TranslationHelps.js
index fcbac2c0f..08c15df1e 100644
--- a/renderer/src/components/EditorPage/Reference/TranslationHelps.js
+++ b/renderer/src/components/EditorPage/Reference/TranslationHelps.js
@@ -7,7 +7,7 @@ import ObsTnCard from './OBS/ObsTn';
 import ObsTwlCard from './OBS/ObsTwlCard';
 
 const TranslationHelps = ({
- selectedResource, languageId, refName, bookId, chapter, verse, owner, story, offlineResource, font,
+ selectedResource, languageId, refName, bookId, chapter, verse, owner, story, offlineResource, font, fontSize,
 }) => {
   const {
     state: {
@@ -40,6 +40,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'twl':
@@ -56,6 +57,7 @@ const TranslationHelps = ({
               owner="test_org"
               server="https://git.door43.org"
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'twlm':
@@ -72,6 +74,7 @@ const TranslationHelps = ({
               owner={owner}
               server="https://git.door43.org"
               font={font}
+              fontSize={fontSize}
             />
             );
         case 'tq':
@@ -90,6 +93,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'tw':
@@ -106,6 +110,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
             );
         case 'ta':
@@ -123,6 +128,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
             );
         case 'bible':
@@ -135,6 +141,7 @@ const TranslationHelps = ({
               chapter={chapter}
               verse={verse}
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'obs':
@@ -147,6 +154,7 @@ const TranslationHelps = ({
               chapter={chapter}
               verse={verse}
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'obs-tn':
@@ -163,6 +171,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'obs-tq':
@@ -179,6 +188,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
           );
           case 'obs-twlm':
@@ -195,6 +205,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
           );
         default:
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js b/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
index 1b15f9323..425db8547 100644
--- a/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
+++ b/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
@@ -32,6 +32,7 @@ export default function TranslationHelpsCard({
   viewMode,
   offlineResource,
   font,
+  fontSize,
 }) {
   const [offlineItems, setOfflineItems] = useState([]);
   const [offlineItemsDisable, setOfflineItemsDisable] = useState(false);
@@ -271,6 +272,7 @@ export default function TranslationHelpsCard({
           selectedQuote={selectedQuote}
           setQuote={setQuote}
           font={font}
+          fontSize={fontSize}
           setResetTrigger={setResetTrigger}
           resetTrigger={resetTrigger}
         />
diff --git a/renderer/src/components/context/ReferenceContext.js b/renderer/src/components/context/ReferenceContext.js
index 22a1183aa..a55cc39f5 100644
--- a/renderer/src/components/context/ReferenceContext.js
+++ b/renderer/src/components/context/ReferenceContext.js
@@ -37,7 +37,11 @@ export default function ReferenceContextProvider({ children }) {
   const [font2, setFont2] = useState('sans-serif');
   const [font3, setFont3] = useState('sans-serif');
   const [font4, setFont4] = useState('sans-serif');
-  const [fontSize, setFontsize] = React.useState(1);
+  const [editorFontSize, setEditorFontSize] = React.useState(1);
+  const [fontSize1, setFontsize1] = React.useState(1);
+  const [fontSize2, setFontsize2] = React.useState(1);
+  const [fontSize3, setFontsize3] = React.useState(1);
+  const [fontSize4, setFontsize4] = React.useState(1);
   const [layout, setLayout] = useState(0);
   const [row, setRow] = useState(0);
   const [refernceLoading, setRefernceLoading] = useState({
@@ -196,7 +200,11 @@ export default function ReferenceContextProvider({ children }) {
       font2,
       font3,
       font4,
-      fontSize,
+      fontSize1,
+      fontSize2,
+      fontSize3,
+      fontSize4,
+      editorFontSize,
       layout,
       row,
       refernceLoading,
@@ -244,7 +252,11 @@ export default function ReferenceContextProvider({ children }) {
       setFont2,
       setFont3,
       setFont4,
-      setFontsize,
+      setEditorFontSize,
+      setFontsize1,
+      setFontsize2,
+      setFontsize3,
+      setFontsize4,
       setLayout,
       setRow,
       setRefernceLoading,