diff --git a/app/chapter/[chapterNumber]/(chapter)/chapter-page.tsx b/app/chapter/[chapterNumber]/(chapter)/chapter-page.tsx
index 69ec567..81f7e1c 100644
--- a/app/chapter/[chapterNumber]/(chapter)/chapter-page.tsx
+++ b/app/chapter/[chapterNumber]/(chapter)/chapter-page.tsx
@@ -42,7 +42,12 @@ export default function ChapterPage({
     : filteredVerses?.slice(0).reverse();
 
   return (
-    <div>
+    <div
+      className={classNames(
+        "font-inter dark:bg-dark-bg",
+        `bg-${styles.backgroundColor}`
+      )}
+    >
       <div className="absolute max-w-5xl font-inter left-0 right-0 mx-auto text-center">
         <SvgChapterBackground className="relative text-gray-300 w-full lg:w-min dark:text-black text-opacity-25 dark:text-opacity-25 rounded-full m-auto left-0 right-0 bottom-0 lg:top-12" />
       </div>
diff --git a/components/Shared/Settings.tsx b/components/Shared/Settings.tsx
index 6b1e2bb..6eaf492 100644
--- a/components/Shared/Settings.tsx
+++ b/components/Shared/Settings.tsx
@@ -71,7 +71,7 @@ const Settings = ({ settingsIsOpen, closeSettingsModal }: Props) => {
                     className={classNames(
                       " text-gray-500 dark:text-gray-200",
                       appearenceSettings?.fontSize === "small"
-                        ? "text-md"
+                        ? "text-base"
                         : "text-xl",
                       appearenceSettings?.spacing === "large"
                         ? "leading-loose"
diff --git a/components/Verse/Commentary.tsx b/components/Verse/Commentary.tsx
index b02736b..7dbd99e 100644
--- a/components/Verse/Commentary.tsx
+++ b/components/Verse/Commentary.tsx
@@ -17,7 +17,8 @@ export default function Commentary({ commentaryData }: Props) {
       <h1
         className={classNames(
           "font-extrabold dark:text-gray-50",
-          styles.fontSize.heading
+          styles.fontSize.heading,
+          styles.lineHeight
         )}
       >
         Commentary
@@ -28,7 +29,8 @@ export default function Commentary({ commentaryData }: Props) {
             key={paragraph}
             className={classNames(
               "mt-6 mx-auto text-justify dark:text-gray-50 whitespace-pre-wrap",
-              styles.fontSize.para
+              styles.fontSize.para,
+              styles.lineHeight
             )}
           >
             {paragraph}
diff --git a/components/Verse/Translation.tsx b/components/Verse/Translation.tsx
index aed8764..d23d5dd 100644
--- a/components/Verse/Translation.tsx
+++ b/components/Verse/Translation.tsx
@@ -14,7 +14,8 @@ export default function Translation({ translationData }: Props) {
       <h1
         className={classNames(
           "font-extrabold dark:text-gray-50",
-          styles.fontSize.heading
+          styles.fontSize.heading,
+          styles.lineHeight
         )}
       >
         Translation
@@ -23,7 +24,8 @@ export default function Translation({ translationData }: Props) {
         <p
           className={classNames(
             "mt-6 mx-auto text-justify dark:text-gray-50 ",
-            styles.fontSize.para
+            styles.fontSize.para,
+            styles.lineHeight
           )}
         >
           {translationData[0].description}
diff --git a/components/Verse/Verse.tsx b/components/Verse/Verse.tsx
index 3a76abc..3e2c6a9 100644
--- a/components/Verse/Verse.tsx
+++ b/components/Verse/Verse.tsx
@@ -49,7 +49,8 @@ export const Verse: FC<VerseProps> = ({
         <h1
           className={classNames(
             "font-extrabold dark:text-gray-50",
-            styles.fontSize.heading
+            styles.fontSize.heading,
+            styles.lineHeight
           )}
         >
           BG {chapter_number}.{verse_number}
@@ -59,7 +60,8 @@ export const Verse: FC<VerseProps> = ({
             <p
               className={classNames(
                 "font-dev text-my-orange mt-8 max-w-md mx-auto",
-                styles.fontSize.subHeading1
+                styles.fontSize.subHeading1,
+                styles.lineHeight
               )}
             >
               {text}
@@ -75,7 +77,8 @@ export const Verse: FC<VerseProps> = ({
           <p
             className={classNames(
               "mt-6 max-w-md mx-auto dark:text-gray-50",
-              styles.fontSize.subHeading2
+              styles.fontSize.subHeading2,
+              styles.lineHeight
             )}
           >
             {transliteration}
@@ -86,7 +89,8 @@ export const Verse: FC<VerseProps> = ({
             <p
               className={classNames(
                 "mt-6 mx-auto dark:text-gray-50",
-                styles.fontSize.subHeading2
+                styles.fontSize.subHeading2,
+                styles.lineHeight
               )}
             >
               {word_meanings}
diff --git a/hooks/useMyStyles.ts b/hooks/useMyStyles.ts
index 705ac4d..f9bd2ba 100644
--- a/hooks/useMyStyles.ts
+++ b/hooks/useMyStyles.ts
@@ -24,7 +24,7 @@ function useMyStyles() {
           fontSize: {
             heading: "text-4xl",
             subHeading1: "text-intro",
-            subHeading2: "text-paragraph",
+            subHeading2: "text-xl",
             para: "text-paragraph",
           },
         };
@@ -37,8 +37,8 @@ function useMyStyles() {
           fontSize: {
             heading: "text-3xl",
             subHeading1: "text-2xl",
-            subHeading2: "text-xl",
-            para: "text-md",
+            subHeading2: "text-paragraph",
+            para: "text-base",
           },
         };
       });
diff --git a/redux/reducers/settings.ts b/redux/reducers/settings.ts
index 3460707..89012c4 100644
--- a/redux/reducers/settings.ts
+++ b/redux/reducers/settings.ts
@@ -27,7 +27,7 @@ const initialState = {
   loading: false,
   fontSize: "large", //small, large todo: change to exact values
   fontFamily: "proxima", //Tisa Pro, Georgia, Avenir, Proxima Nova
-  spacing: "large", //small, medium, large todo: change to exact values
+  spacing: "medium", //small, medium, large todo: change to exact values
   bg: "bg-light-bg", //bg-light-bg, bg-yellow-bg, bg-dark-bg
   currentVerse: initialVerse,
 };