diff --git a/index.html b/index.html
index aca02e3..b059e65 100644
--- a/index.html
+++ b/index.html
@@ -25,57 +25,75 @@ <h1>Bookbinder JS</h1>
             <center style="font-family:monospace;
     padding-top: 0.75em;font-variant-caps: small-caps;">current version: %PACKAGE_VERSION%</center>
         </div>
-        <div class="section" id="settings">
-            <h2>Settings</h2>
-            <span class="row">
-                <button type="button" name="reset_settings" id="reset_settings">Reset</button>
-                The page is able to save and load your current settings via the site URL. Clicking this button will reset those to the default settings. 
-            </span>
-        </div>
         <form id="bookbinder" name="bookbinder">
             <div class="section" id="input">
                 <h2>File Info</h2>
                 <span class="row"><label>Input File: <input type="file" name="input_file" accept=".pdf"
                             id="input_file"></label></span>
                 <!-- <span class="row"><label>Page Size: <span id="page_size"></span></span> -->
-                <span class="row">Number of Pages: <span id="page_count"></span></span>
                 <!-- <span class="row">Page Ratio: <span id="input_ratio"></span></span> -->
-                <span class="row" style="padding: 10px;font-style: italic;">While some PDF viewers may display the first two pages as a spread, be aware that the first page, which is odd, will be on the right when printed. The first printed spread are pages 2 & 3 of your PDF document. Evens always on the left, odds always on the right.</span>
+                <span class="row" style="padding: 10px;font-style: italic;">While some PDF viewers display the first two pages as a spread, be aware the first page, which is odd, will be on the right when printed. The first printed spread are pages 2 & 3 of your PDF document. Evens always on the left, odds always on the right.</span>
+                <span class="row"><label for="print_file">Generated Files</label>
+                    <select name="print_file" id="print_file">
+                        <option value="aggregated">Aggregated File Only</option>
+                        <option value="both" selected>Both aggregated & per signature files</option>
+                        <option value="signatures">Signature Files Only</option>
+                    </select>
+                </span>
             </div>
 
             <div class="section" id="input">
                 <h2>Source Manipulation</h2>
-
-                <span class="row"><input type="radio" id="none" name="source_rotation" value="none" checked>
-                    <label for="none">no modification</label>
-                    <details style="padding-left:40px;"><summary> Details</summary><IMG SRC="/img/noRotationDiagram.png" width="100px"/></details>
-                </span>
-                <span class="row"><input type="radio" id="90cw" name="source_rotation" value="90cw">
-                    <label for="90cw">rotate all pages 90° clockwise</label>
-                    <details style="padding-left:40px;"><summary> Details</summary><IMG SRC="/img/90cwDiagram.png" width="100px"/></details>
-                </span>
-
-                <span class="row"><input type="radio" id="90ccw" name="source_rotation" value="90ccw">
-                    <label for="90ccw">rotate all pages 90° counter clockwise (anti clockwise)</label>
-                    <details style="padding-left:40px;"><summary> Details</summary><IMG SRC="/img/90ccwDiagram.png" width="100px"/></details>
-                </span>
-                <span class="row"><input type="radio" id="out_binding" name="source_rotation" value="out_binding">
-                    <label for="out_binding">Out binding </label>
-                       <details style="padding-left:40px;">
-                     <summary> Details</summary> 
-                     For books with the bound edge at the bottom of the page -- rotate all odd pages 90° clockwise, all even pages 90° anti-clockwise
-                     <BR/>
-                     <IMG SRC="/img/bottomBindingDiagram.png" width="100px"/>
-                    </details>
-                </span>
-                <span class="row"><input type="radio" id="in_binding" name="source_rotation" value="in_binding">
-                    <label for="in_binding">In Binding</label>
-                        <details style="padding-left:40px;">
-                     <summary> Details</summary> 
-                     For books with the bound edge at the top of the page -- rotate all odd pages 90° anti-clockwise, all even pages 90° clockwise <BR>
-                     <IMG SRC="/img/topBindingDiagram.png" width="100px">
-                     </details>
-                 </span>
+                <label for="source_rotation">Style </label>
+                <select name="source_rotation" id="source_rotation">
+                    <option id="none" value="none" selected="selected">no modification</option>
+                    <option id="90cw" value="90cw">rotate pages 90° clockwise</option>
+                    <option id="90ccw" value="90ccw">rotate pages 90° counter clockwise</option>
+                    <option id="out_binding" value="out_binding">odd pages 90° clockwise, even pages 90° anti-clockwise</option>
+                    <option id="in_binding" value="in_binding">odd pages 90° anti-clockwise, even pages 90° clockwise</option>
+                </select>
+                <div>
+                    <div id="none_example" class="row source_rotation_example">
+                        <IMG SRC="/img/noRotationDiagram.png" width="100px" class="float_left" />
+                        <p>
+                            </br>
+                            For books that read like a standard novel<br />
+                            no rotation of pages applied
+                        </p>
+                    </div>
+                    <div id="90cw_example" class="hidden source_rotation_example">
+                        <IMG SRC="/img/90cwDiagram.png" width="100px" class="float_left" />
+                        <p>
+                            </br>
+                            For books that turn pages like a calender<br />
+                            back to front, rotate all pages 90° clockwise
+                        </p>
+                    </div>
+                    <div id="90ccw_example" class="hidden source_rotation_example">
+                        <IMG SRC="/img/90ccwDiagram.png" width="100px" class="float_left" />
+                        <p>
+                            </br>
+                            For books that turn pages like a calender<br />
+                            front to back, rotate all pages 90° counter clockwise
+                        </p>
+                    </div>
+                    <div id="out_binding_example" class="hidden source_rotation_example row">
+                        <IMG SRC="/img/bottomBindingDiagram.png" width="100px" class="float_left" />
+                        <p>
+                            </br>
+                            For books with bound edge at bottom of the page<br />
+                            rotate all odd pages 90° clockwise, all even pages 90° anti-clockwise
+                        </p>
+                    </div>
+                    <div id="in_binding_example" class="hidden source_rotation_example">
+                        <IMG SRC="/img/topBindingDiagram.png" width="100px" class="float_left">
+                        <p>
+                            </br>
+                            For books with bound edge at top of the page<br />
+                            rotate all odd pages 90° anti-clockwise, all even pages 90° clockwise
+                        </p>
+                    </div>
+                </div>
             </div>
 
             <!-- <div class="section" id="units">
@@ -126,26 +144,26 @@ <h2>Printer</h2>
 
             <div class="section" id="book_size">
                 <h2>Page Layout</h2>
-                <span class="row"><input type="radio" id="folio" name="pagelayout" value="folio" checked>
-                    <label for="folio">Folio (two pages per side of sheet)</label></span>
-                <span class="row"><input type="radio" id="quarto" name="pagelayout" value="quarto">
-                    <label for="quarto">Quarto (four pages per side of sheet)</label></span>
-                <span class="row"><input type="radio" id="octavo" name="pagelayout" value="octavo">
-                    <label for="octavo">Octavo (eight pages per side of sheet)</label></span>
-                <span class="row"><input type="radio" id="sextodecimo" name="pagelayout" value="sextodecimo">
-                    <label for="sextodecimo">Sextodecimo (sixteen pages per side of sheet)</label></span>
-                
-                <span class="row"> <label>Add Foldlines <input type="checkbox" name="cropmarks"></label>
-                    <span data-balloon-length="medium" aria-label="Adds folding guidelines (ordered from thickest to thinnest)" data-balloon-pos="up">ℹ️</span>
-                </span> 
-                <span class="row"> <label>Add Cutlines <input type="checkbox" name="cutmarks"></label>
-                    <span data-balloon-length="medium" aria-label="Adds cutting guidelines" data-balloon-pos="up">ℹ️</span>
-                
-                </span>
-                <span class="row"> <label>Add PDF bounds indicators (spine) <input type="checkbox" name="pdf_edge_marks"></label>
-                    <span data-balloon-length="medium" aria-label="Puts small marks on the outermost folio of the signatures indicating the top and bottom of the PDF" data-balloon-pos="up">ℹ️</span>
-                </span> 
-
+                <label for="pagelayout">Style</label>
+                <select name="pagelayout" id="pagelayout">
+                    <option id="folio" value="folio">Folio - two pages per side of sheet</option>
+                    <option id="quarto" value="quarto" selected>Quarto - four pages per side of sheet</option>
+                    <option id="octavo" value="octavo">Octavo - eight pages per side of sheet</option>
+                    <option id="sextodecimo" value="sextodecimo">Sextodecimo - sixteen pages per side of sheet</option>
+                </select>
+                <div>
+                    <label>Add Foldlines <span data-balloon-length="medium"
+                            aria-label="Adds folding guidelines (ordered thickest to thinnest)" data-balloon-pos="up"> <input
+                                type="checkbox" name="cropmarks"></span></label>
+                    <span style="display:inline-block; width: 10px;"></span>
+                    <label>Add Cutlines <span data-balloon-length="medium" aria-label="Adds cutting guidelines"
+                            data-balloon-pos="up"><input type="checkbox" name="cutmarks"></span></label>
+                    <div>
+                        <label>Add PDF bounds indicators (spine) <span data-balloon-length="medium"
+                                aria-label="Puts small marks on the outermost folio of the signatures indicating the top and bottom of the PDF"
+                                data-balloon-pos="up"> <input type="checkbox" name="pdf_edge_marks"></span></label>
+                    </div>
+                </div>
                 <span class="row">
                     <details>
                         <summary>Folding instructions for quarto/octavo</summary>
@@ -213,24 +231,6 @@ <h2>Page Layout</h2>
                         <div class="pdf_layout_page stripes_pdf" id="pdf_on_page_layout_preview"></div>
                     </div>
                 </span>
-
-                <span class="row"><label for="print_file">Downloaded File(s)</label>
-                    <select name="print_file" id="print_file">
-                        <option value="aggregated">Aggregated File Only</option>
-                        <option value="both" selected>Both aggregated & per signature files</option>
-                        <option value="signatures">Signature Files Only</option>
-                    </select>
-                </span>
-
-
-            </div>
-
-            <div class="section" id="flyleaf_info">
-                <h2>Flyleafs</h2>
-                <span class="row"> <label>Add flyleafs <input type="number" name="flyleafs" value="1"></label>
-                    <span data-balloon-length="medium" aria-label="Extra blank pages at the start and end of the book" data-balloon-pos="up">ℹ️</span>
-                </span> 
-
             </div>
 
             <div class="section" id="sig_format">
@@ -364,23 +364,46 @@ <h3>Wacky Small Layouts</h3>
                         </p>
                     </details></span>
             </div>
-
+            <div class="section" id="flyleaf_info">
+                <h2>Flyleafs</h2>
+                <span class="row"> <label>Add flyleafs <input type="number" name="flyleafs" value="1"></label>
+                    <span data-balloon-length="medium" aria-label="Extra blank pages at the start and end of the book"
+                        data-balloon-pos="up">ℹ️</span>
+                </span>
+            </div>
             <div class="section" id="sig_info">
                 <h2>Signature Info</h2>
-
-                <button type="button" name="preview" id="preview" disabled>Preview Output</button>
-                <span data-balloon-length="medium" aria-label="Will not show previews if 'Signature Files Only' is selected. Only shows one side for 'Single Sided' printing. Not tested on all browsers (or any browsers other than Chrome really...)" data-balloon-pos="up">ℹ️</span>
+            
                 <center>
                     <iframe id="pdf" style="width: 100%; height: 10px;display:none;"></iframe>
                 </center>
-                <span class="row">Total Pages: <span id="total_pages"></span></span>
-                <span class="row">Total Sheets: <span id="total_sheets"></span></span>
-                <span class="row">Number of Signatures: <span id="sig_count"></span></span>
-                <span class="row">Signature Arrangement: <span id="sig_arrange"></span></span>
-            </div>
+                <div class="space_out">
+                    <span>Total Pages: <span id="total_pages"></span></span>
+                    <span>Original PDF Pages: <span id="page_count"></span></span>
             
-            <button type="button" name="generate" id="generate" disabled>Generate Output</button>
-        </form>
+                </div>
+                <div class="space_out">
+                    <span>Total Sheets: <span id="total_sheets"></span></span>
+                    <span>Number of Signatures: <span id="sig_count"></span></span>
+                </div>
+                <div>
+                    <div style="text-align: center;">
+                        Signature Arrangement:
+                    </div>
+                    <div id="sig_arrange" style="text-align: center;"></div>
+                </div>
+            
+            </div>
+            <div class="space_out">
+                <button type="button" class="medium_btn" name="preview" id="preview" disabled data-balloon-length="medium"
+                    aria-label="Will not show previews if 'Signature Files Only' is selected. Only shows one side for 'Single Sided' printing. Not tested on all browsers (or any browsers other than Chrome really...)"
+                    data-balloon-pos="up">Preview PDF</button>
+                <button type="button" class="large_btn" name="generate" id="generate" disabled>Generate PDF Output</button>
+                <button type="button" class="medium_btn" name="reset_settings" id="reset_settings" data-balloon-length="medium"
+                    aria-label="The page is able to save and load your current settings via the site URL. Clicking this button will reset those to the default settings"
+                    data-balloon-pos="up">Reset Settings</button>
+            </div>
+    </form>
     </div>
 </body>
 
diff --git a/package.json b/package.json
index 1e88410..731a8b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bookbinder",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "An app to rearrange PDF pages for printing for bookbinding",
   "type": "module",
   "scripts": {
diff --git a/public/styles.css b/public/styles.css
index 97b70d6..5f4f275 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -46,6 +46,28 @@ body, .wrapper, #bookbinder {
     align-items: center;
 }
 
+button {
+    border: none;
+    border-radius: 2px;
+    padding: 4px;
+    text-align: center;
+    display: inline-block;
+    font-size: 16px;
+}
+
+.large_btn {
+    height: 48px;
+    font-size: 24px;
+
+}
+
+.medium_btn {
+    width: 90px;
+    height: 36px;
+    font-size: 12px;
+
+}
+
 .wrapper {
     max-width: 500px;
 }
@@ -61,8 +83,8 @@ body, .wrapper, #bookbinder {
     display: block;
 }
 
-#generate {
-    font-size: 1.5em;
+.hidden {
+    display: none;
 }
 
 .instruction-indent {
@@ -155,9 +177,12 @@ body, .wrapper, #bookbinder {
     vertical-align: top;
 }
 
+.float_left {
+    float: left;
+}
 
-#reset_settings {
-    margin: 1em;
-    margin-right:  1em;
-    float:  right;
+.space_out {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
 }
diff --git a/src/main.js b/src/main.js
index 59662a2..b1d1217 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,8 @@ window.addEventListener('DOMContentLoaded', () => {
     const bookbinderForm = document.getElementById('bookbinder');
     const fileInput = document.getElementById('input_file');
     const inputs = document.querySelectorAll('input, select');
+    const sourceRotation = document.getElementById('source_rotation');
+    const sourceRotationExamples = Array.from(document.getElementsByClassName('source_rotation_example'));
 
     // spin up a book to pass to listeners
     const book = new Book(configuration);
@@ -45,4 +47,10 @@ window.addEventListener('DOMContentLoaded', () => {
         console.log('Resetting settings...');
         handleResetSettingsClick(book);
     });
+    sourceRotation.addEventListener('change', (e) => { 
+        const selectedValue = e.target.value + '_example';
+        sourceRotationExamples.forEach((example) => {
+            example.style.display = (example.id === selectedValue ? 'block' : 'none');
+        });
+    });
 });
diff --git a/src/utils/clickHandlers.js b/src/utils/clickHandlers.js
index fe0c99d..2d515d3 100644
--- a/src/utils/clickHandlers.js
+++ b/src/utils/clickHandlers.js
@@ -7,6 +7,7 @@ import { updateAddOrRemoveCustomPaperOption, updatePaperSelectOptionsUnits } fro
 
 export function handleGenerateClick(generateEl, book) {
 	generateEl.setAttribute('disabled', true);
+	generateEl.style.fontSize = "13px";
 	generateEl.innerText = 'Generating, this may take a little while...';
 	console.log('The whole Book model:', book);
 	const result = book.createoutputfiles(false);
@@ -19,13 +20,14 @@ export function handleGenerateClick(generateEl, book) {
 		})
 		.finally((_) => {
 			generateEl.removeAttribute('disabled');
-			generateEl.innerText = 'Generate Output';
+			generateEl.style.fontSize = "24px";
+			generateEl.innerText = 'Generate PDF Output';
 		});
 }
 
 export function handlePreviewClick(previewEl, book) {
 	previewEl.setAttribute('disabled', true);
-	previewEl.innerText = 'Generating Preview, please wait....';
+	previewEl.innerText = 'Generating Preview...';
 	const result = book.createoutputfiles(true);
 	result
 		.then((_) => {
@@ -45,4 +47,4 @@ export function handleResetSettingsClick(book) {
 		book.update(defaultConfiguration);
     updateAddOrRemoveCustomPaperOption();
     updatePaperSelectOptionsUnits();
-}
\ No newline at end of file
+}
diff --git a/src/utils/renderUtils.js b/src/utils/renderUtils.js
index ab16737..efebef4 100644
--- a/src/utils/renderUtils.js
+++ b/src/utils/renderUtils.js
@@ -176,10 +176,8 @@ export function renderFormFromSettings(configuration) {
     }
 
     // Set radio options
-    document.querySelector(`input[name="pagelayout"][value="${configuration.pageLayout}"]`).checked = true;
     document.querySelector(`input[name="sig_format"][value="${configuration.sigFormat}"]`).checked = true;
     document.querySelector(`input[name="wacky_spacing"][value="${configuration.wackySpacing}"]`).checked = true;
-    document.querySelector(`input[name="source_rotation"][value="${configuration.sourceRotation}"]`).checked = true;
 
     // Set freeform inputs
     document.querySelector('input[name="main_fore_edge_padding_pt"]').value = configuration.mainForeEdgePaddingPt;
@@ -190,6 +188,8 @@ export function renderFormFromSettings(configuration) {
     document.querySelector('input[name="flyleafs"]').value = configuration.flyleafs;
 
     // Set select options
+    document.querySelector('select[name="source_rotation"]').value = configuration.sourceRotation;
+    document.querySelector('select[name="pagelayout"]').value = configuration.pageLayout;
     document.querySelector('select[name="page_scaling"]').value = configuration.pageScaling;
     document.querySelector('select[name="page_positioning"]').value = configuration.pagePositioning;
     document.querySelector('select[name="print_file"]').value = configuration.printFile;
@@ -211,4 +211,11 @@ export function renderFormFromSettings(configuration) {
     } else {
         document.querySelector("input[name='sig_length']").value = configuration.sigLength;
     }
+
+    // Hide and show elements based on configuration
+    let sourceRotationExamples = Array.from(document.getElementsByClassName('source_rotation_example'));
+    const selectedValue = configuration.sourceRotation + '_example';
+    sourceRotationExamples.forEach((example) => {
+        example.style.display = (example.id === selectedValue ? 'block' : 'none');
+    });
 }