diff --git a/assets/css/bootstrap-style.css b/assets/css/bootstrap-style.css
index 81dcd26..a444fe6 100644
--- a/assets/css/bootstrap-style.css
+++ b/assets/css/bootstrap-style.css
@@ -14183,6 +14183,7 @@ h6, .h6 {
   writing-mode: vertical-rl;
   text-orientation: upright;
   direction: rtl;
+  max-height: 90vh;
 }
 
 #loading-indicator {
diff --git a/assets/css/bootstrap-style.scss b/assets/css/bootstrap-style.scss
index 11002f3..34119e9 100644
--- a/assets/css/bootstrap-style.scss
+++ b/assets/css/bootstrap-style.scss
@@ -389,6 +389,7 @@ h6 {
   writing-mode: vertical-rl;
   text-orientation: upright;
   direction: rtl;
+  max-height: 90vh; /// limit height so that only horizontal scrolling is needed
 }
 
 /// Loading indicator for hx-requests
diff --git a/assets/views/novel.jet.html b/assets/views/novel.jet.html
index 4488967..a441bd0 100644
--- a/assets/views/novel.jet.html
+++ b/assets/views/novel.jet.html
@@ -204,50 +204,50 @@
   </noscript>
 
   <!-- NOTE: col-12 to always display at full width, may tune down in the future -->
-  <div class="col-12">
+  <div class="col-12 col-lg-11">
     <div class="custom-card">
       <div class="custom-card-body bg-charcoal-surface1 py-4 px-0">
         <!-- NOTE: mx-0 because the row element overflows the card horizontally without it -->
         <div class="row justify-content-center mx-0">
           <!-- NOTE: px-0 to undo the extra spacing caused by mx-0 -->
-          <div class="col-12 px-0">
-            <div class="d-flex flex-column align-items-center position-relative mx-4 mb-4 justify-content-center">
-              <div class="d-flex flex-column text-center">
-                <h2 class="mb-2">{{ .Novel.Title }}</h2>
-                <h3><a href="/users/{{ .User.ID }}" class="text-body-secondary text-decoration-none">{{ .User.Name }}</a></h3>
-                <p class="text-body-secondary small mb-0">
-                  <span>{{ .Novel.WordCount }} word(s)</span> &middot; <span>{{ floor: .Novel.ReadingTime / 60 }} mins</span>
-                </p>
+            <div class="col-12 px-0">
+              <div class="d-flex flex-column align-items-center position-relative mx-4 mb-4 justify-content-center">
+                <div class="d-flex flex-column text-center">
+                  <h2 class="mb-2">{{ .Novel.Title }}</h2>
+                  <h3><a href="/users/{{ .User.ID }}" class="text-body-secondary text-decoration-none">{{ .User.Name }}</a></h3>
+                  <p class="text-body-secondary small mb-0">
+                    <span>{{ .Novel.WordCount }} word(s)</span> &middot; <span>{{ floor: .Novel.ReadingTime / 60 }} mins</span>
+                  </p>
+                </div>
+
+                <!-- Options button that will stay on the side for larger screens but 'move' to the bottom for smaller screens -->
+                <button
+                  class="js-required custom-btn-secondary position-absolute top-50 end-0 translate-middle-y d-none d-lg-block"
+                  type="button"
+                  data-bs-toggle="modal"
+                  data-bs-target="#NovelOptionsModal">
+                  <i class="bi bi-gear me-2"></i>Options
+                </button>
+
+                <!-- The smaller version of the button for mobile that is displayed below the text -->
+                <button
+                  class="js-required custom-btn-secondary mt-3 d-lg-none"
+                  type="button"
+                  data-bs-toggle="modal"
+                  data-bs-target="#NovelOptionsModal">
+                  <i class="bi bi-gear me-2"></i>Options
+                </button>
               </div>
-
-              <!-- Options button that will stay on the side for larger screens but 'move' to the bottom for smaller screens -->
-              <button
-                class="js-required custom-btn-secondary position-absolute top-50 end-0 translate-middle-y d-none d-lg-block"
-                type="button"
-                data-bs-toggle="modal"
-                data-bs-target="#NovelOptionsModal">
-                <i class="bi bi-gear-fill me-2"></i>Options
-              </button>
-
-              <!-- The smaller version of the button for mobile that is displayed below the text -->
-              <button
-                class="js-required custom-btn-secondary mt-3 d-lg-none"
-                type="button"
-                data-bs-toggle="modal"
-                data-bs-target="#NovelOptionsModal">
-                <i class="bi bi-gear"></i> Options
-              </button>
             </div>
 
             <!-- The actual novel itself -->
             <!-- TODO: make background color configurable (need to update backend source files etc) -->
             <!-- NOTE: mb-4 so that the parent card doesn't cut off suddenly right after the novel content -->
-            <div id="content" class="card-body bg-off-white text-dark overflow-x-scroll mb-4 p-5">
-              <p class="fs-5 lh-lg" data-font="{{ .FontType }}" data-lang="{{ .Language }}" data-view="{{ .ViewMode }}">
-                {{- raw: renderNovel(.Novel.Content) }}
-              </p>
+            <div class="col-12 px-0 mb-4">
+            <div id="content" class="fs-5 lh-lg card-body bg-off-white text-dark overflow-x-scroll h-100 w-100 mb-4 p-5" data-font="{{ .FontType }}" data-lang="{{ .Language }}" data-view="{{ .ViewMode }}">
+              {{- raw: renderNovel(.Novel.Content) }}>
+            </div>
             </div>
-          </div>
 
           <!-- Series navigation, if present -->
           {{- if .Novel.SeriesNavData }}
diff --git a/core/novel.go b/core/novel.go
index 23ace0b..731f964 100644
--- a/core/novel.go
+++ b/core/novel.go
@@ -177,13 +177,27 @@ func GetNovelByID(r *http.Request, id string) (Novel, error) {
 
 		// make [pixivimage:illustid-index] jump to anchor
 		link := fmt.Sprintf("/artworks/%s", strings.ReplaceAll(illustid, "-", "#"))
-		return fmt.Sprintf(`<a href="%s" target="_blank"><img src=%s alt="%s"/></a>`, link, url, s)
+
+		imgClass := "img-fluid w-100"
+		if novel.Settings.ViewMode == 1 {
+			imgClass = "img-fluid h-50 w-50 rounded"
+		}
+
+		return fmt.Sprintf(`<a href="%s" target="_blank"><img src=%s alt="%s" class="%s"/></a>`, link, url, s, imgClass)
 	})
 
 	novel.Content = re_u.ReplaceAllStringFunc(novel.Content, func(s string) string {
 		imageId := re_id.FindString(s)
 		if val, ok := novel.TextEmbeddedImages[imageId]; ok {
-			return fmt.Sprintf(`<img src=%s alt="%s"/>`, val.Urls.Original, s)
+			// Styling for horizontal text
+			imgClass := "img-fluid h-50 w-50 rounded"
+			wrapperClass := "d-flex justify-content-start w-100 my-3"
+			// Styling for vertical text
+			if novel.Settings.ViewMode == 2 {
+				imgClass = "img-fluid h-100 w-100 rounded"
+				wrapperClass = "d-flex justify-content-start h-100 ms-3 me-3"
+			}
+			return fmt.Sprintf(`<div class="%s"><img src=%s alt="%s" class="%s"/></div>`, wrapperClass, val.Urls.Original, s, imgClass)
 		}
 		return s
 	})
diff --git a/i18n/locale/en/template.json b/i18n/locale/en/template.json
index cfb059b..6c362e1 100644
--- a/i18n/locale/en/template.json
+++ b/i18n/locale/en/template.json
@@ -163,6 +163,7 @@
   "assets/views/novel.jet.html:fwJjmTkfPFo": "{{ seriesWorks }} works in this series",
   "assets/views/novel.jet.html:kZv9k39fa4s": "·",
   "assets/views/novel.jet.html:nu2CR4aefnc": "Options",
+  "assets/views/novel.jet.html:uq0P-PyMGRE": "{{- raw: renderNovel(.Novel.Content) }}&gt;",
   "assets/views/novel.jet.html:y6pXNsQLNSg": "Forces the text to be displayed horizontally, left-to-right. This is common for most languages and easier to read on smaller screens or for those more accustomed to Western text layouts.",
   "assets/views/novelDiscovery.jet.html:6A6XAFPz7qQ": "Refresh",
   "assets/views/novelDiscovery.jet.html:ifjfMyvWvyA": "Discovery",