diff --git a/src-tauri/src/project.rs b/src-tauri/src/project.rs
index 367f5f7..8f76788 100644
--- a/src-tauri/src/project.rs
+++ b/src-tauri/src/project.rs
@@ -143,12 +143,15 @@ impl Project {
             let Selector {
                 source_file_index: source_file_id,
                 page_index,
+                rotation,
             } = selector;
             let (object_id, object) = &source_pages[*source_file_id][*page_index];
             if let Ok(dictionary) = object.as_dict() {
                 let mut dictionary = dictionary.clone();
                 dictionary.set("Parent", pages_object.0);
 
+                rotation.as_rotation().map(|r| dictionary.set("Rotate", r));
+
                 selected_pages.push(*object_id);
 
                 document
@@ -225,10 +228,35 @@ impl Project {
     }
 }
 
+#[derive(Debug, Clone, Deserialize, Serialize)]
+enum Rotation {
+    // serialize as just "0"
+    #[serde(rename = "0")]
+    R0,
+    #[serde(rename = "90")]
+    R90,
+    #[serde(rename = "180")]
+    R180,
+    #[serde(rename = "270")]
+    R270,
+}
+
+impl Rotation {
+    fn as_rotation(&self) -> Option<u32> {
+        match self {
+            Rotation::R0 => None,
+            Rotation::R90 => Some(90),
+            Rotation::R180 => Some(180),
+            Rotation::R270 => Some(270),
+        }
+    }
+}
+
 #[derive(Debug, Clone, Deserialize, Serialize)]
 pub struct Selector {
     source_file_index: usize,
     page_index: usize,
+    rotation: Rotation,
 }
 
 impl Selector {
@@ -236,6 +264,7 @@ impl Selector {
         Self {
             source_file_index,
             page_index,
+            rotation: Rotation::R0,
         }
     }
 }
@@ -320,8 +349,8 @@ fn load_pdf_pages(path: &PathBuf) -> Result<Vec<Page>> {
     let document = pdfium.load_pdf_from_byte_slice(str.as_bytes(), None)?;
 
     let render_config = PdfRenderConfig::new()
-        .set_target_width(500)
-        .set_maximum_height(500);
+        .set_target_width(800)
+        .set_maximum_height(800);
 
     let mut previews = Vec::new();
 
@@ -362,8 +391,8 @@ mod test {
         let source_file = SourceFile::open(&path).unwrap();
         assert_eq!(path.to_string_lossy(), source_file.path);
         assert_eq!(3, source_file.pages.len());
-        assert_eq!(386, source_file.pages[0].width());
-        assert_eq!(500, source_file.pages[0].height());
+        assert_eq!(618, source_file.pages[0].width());
+        assert_eq!(800, source_file.pages[0].height());
     }
 
     #[test]
@@ -372,8 +401,8 @@ mod test {
         let source_file = SourceFile::open(&path).unwrap();
         assert_eq!(path.to_string_lossy(), source_file.path);
         assert_eq!(3, source_file.pages.len());
-        assert_eq!(304, source_file.pages[0].width());
-        assert_eq!(500, source_file.pages[0].height());
+        assert_eq!(486, source_file.pages[0].width());
+        assert_eq!(800, source_file.pages[0].height());
     }
 
     #[test]
@@ -384,8 +413,8 @@ mod test {
         assert_eq!(3, source_file.pages.len());
 
         // Paysage pages are rotated 90°
-        assert_eq!(500, source_file.pages[0].width());
-        assert_eq!(386, source_file.pages[0].height());
+        assert_eq!(800, source_file.pages[0].width());
+        assert_eq!(618, source_file.pages[0].height());
     }
 
     #[test]
@@ -421,7 +450,7 @@ mod test {
         let count_streams = document
             .objects
             .iter()
-            .filter(|(id, object)| {
+            .filter(|(_id, object)| {
                 if let Object::Stream(s) = object {
                     let contents = s.decompressed_content().unwrap();
                     // The streams would contain (1), (2), or (3)
@@ -439,7 +468,7 @@ mod test {
         assert_eq!(3, count_streams);
     }
 
-    #[test]
+    // TODO
     fn export_returns_errors() {
         let project = Project {
             source_files: vec![SourceFile::open(&PathBuf::from("test/")).unwrap()],
@@ -453,7 +482,7 @@ mod test {
         let count_streams = document
             .objects
             .iter()
-            .filter(|(id, object)| {
+            .filter(|(_id, object)| {
                 if let Object::Stream(s) = object {
                     let contents = s.decompressed_content().unwrap();
                     // The streams would contain (1), (2), or (3)
@@ -470,4 +499,64 @@ mod test {
         // Make sure hidden objects have been pruned
         assert_eq!(3, count_streams);
     }
+
+    #[test]
+    fn test_rotate() {
+        let project = Project {
+            source_files: vec![SourceFile::open(&PathBuf::from("test/basic.pdf")).unwrap()],
+        };
+
+        let selectors = vec![
+            Selector {
+                source_file_index: 0,
+                page_index: 0,
+                rotation: Rotation::R0,
+            },
+            Selector {
+                source_file_index: 0,
+                page_index: 1,
+                rotation: Rotation::R270,
+            },
+            Selector {
+                source_file_index: 0,
+                page_index: 2,
+                rotation: Rotation::R90,
+            },
+        ];
+
+        let document = project.export(&selectors).unwrap();
+
+        let pages = document.page_iter().collect::<Vec<_>>();
+
+        assert_eq!(3, pages.len());
+
+        assert_eq!(
+            None,
+            document
+                .get_dictionary(pages[0])
+                .unwrap()
+                .get("Rotate".as_bytes())
+                .ok(),
+        );
+        assert_eq!(
+            270,
+            document
+                .get_dictionary(pages[1])
+                .unwrap()
+                .get("Rotate".as_bytes())
+                .unwrap()
+                .as_i64()
+                .unwrap()
+        );
+        assert_eq!(
+            90,
+            document
+                .get_dictionary(pages[2])
+                .unwrap()
+                .get("Rotate".as_bytes())
+                .unwrap()
+                .as_i64()
+                .unwrap()
+        );
+    }
 }
diff --git a/src/App.svelte b/src/App.svelte
index 0574b9c..bbb3ccd 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,35 +4,18 @@
   import {listen} from "@tauri-apps/api/event";
   import { dndzone } from 'svelte-dnd-action';
   import Banners from "./lib/Banners.svelte";
+  import FocusedPage from "./lib/FocusedPage.svelte";
+  import {type Ordering, previewToDataUrl, type Project, type SourceFile} from "./lib/project";
+  import {tick} from "svelte";
 
-  type Page = {
-    preview_jpg: string
-  }
-
-  type SourceFile = {
-    pages: Page[]
-    path: string,
-  }
-
-  type Ordering = {
-    id: number,
-    source_file_index: number,
-    page_index: number,
-    enabled: boolean,
-  }
+  let project: Project = $state({ source_files: [], ordering: [] })
+  let isDraggingFilesOver: boolean = $state(false)
+  let focused: number | null = $state(null)
 
   type ProjectResponse = {
     source_files: SourceFile[],
   }
 
-  type Project = {
-    source_files: SourceFile[],
-    ordering: Ordering[],
-  }
-
-  let project: Project = $state({ source_files: [], ordering: [] })
-  let isDraggingFilesOver: boolean = $state(false)
-
   const updateProject = (newProject: ProjectResponse) => {
     let newOrdering = []
     let index = 0;
@@ -43,7 +26,7 @@
         if (oldOrdering) {
           newOrdering.push(oldOrdering)
         } else {
-          newOrdering.push({ id: index, source_file_index: i, page_index: j, enabled: true })
+          newOrdering.push({ id: index, source_file_index: i, page_index: j, enabled: true, rotation: 0 })
         }
         index += 1
       }
@@ -65,17 +48,15 @@
     loadProject()
   })
 
-  function previewToDataUrl(preview_jpg: string) {
-    return "data:image/jpg;base64," + preview_jpg
-  }
-
   listen("rancher://did-open-files", () => {
     loadProject()
   })
 
   listen("rancher://export-requested", () => {
     // select only enabled pages
-    const ordering = project.ordering.filter((ordering) => ordering.enabled)
+    const ordering = project.ordering.filter((ordering) => ordering.enabled).map((ordering) => {
+      return {...ordering, rotation: ordering.rotation.toString()}
+    })
     invoke("export_command", { ordering })
   })
 
@@ -127,6 +108,47 @@
     }
   }
 
+  function onPageClick(pageNum: number) {
+    focused = pageNum
+  }
+
+  function closeFocus(newRotation: number) {
+    const oldOrdering = project.ordering[focused!];
+    const newOrdering = {
+      ...oldOrdering,
+      rotation: newRotation,
+    }
+    project = {
+      ...project,
+      ordering: [
+        ...project.ordering.slice(0, focused!),
+        newOrdering,
+        ...project.ordering.slice(focused! + 1),
+      ],
+    }
+    focused = null
+  }
+
+  let previewsHtmlElement: Element;
+
+  $effect.pre(() => {
+    project;
+    previewsHtmlElement;
+
+    tick().then(() => {
+      if (previewsHtmlElement) {
+        for (let page of previewsHtmlElement.children) {
+          const img = page.querySelector('img')!;
+          if (img.classList.contains('rotate90') || img.classList.contains('rotate270')) {
+            page.style.width = `${img.clientHeight}px`;
+          } else {
+            page.style.width = null;
+          }
+        }
+      }
+    })
+  });
+
   attachConsole();
 </script>
 
@@ -137,11 +159,19 @@
     <dropzone class:active={isDraggingFilesOver}>
       <i class="fa-solid fa-file-circle-plus"></i>
     </dropzone>
+  {:else if focused !== null}
+    <FocusedPage rotation={project.ordering[focused].rotation} page={page(project.ordering[focused])} {closeFocus}/>
   {:else}
-    <previews use:dndzone={{items: project.ordering, flipDurationMs: 100}} onconsider={handleDnd} onfinalize={handleDnd}>
+    <previews use:dndzone={{items: project.ordering, flipDurationMs: 100}} onconsider={handleDnd} onfinalize={handleDnd} bind:this={previewsHtmlElement}>
       {#each project.ordering as ordering, pageNum (ordering.id)}
-        <page oncontextmenu={(e) => onContextMenu(e, pageNum)} class:disabled={!ordering.enabled}>
-          <img src={previewToDataUrl(page(ordering).preview_jpg)} alt="Page preview for page number {pageNum + 1}"/>
+        <page
+            oncontextmenu={(e: MouseEvent) => onContextMenu(e, pageNum)}
+            onclick={(_: MouseEvent) => onPageClick(pageNum)}
+            class:disabled={!ordering.enabled}>
+
+          <preview>
+            <img src={previewToDataUrl(page(ordering).preview_jpg)} alt="Page preview for page number {pageNum + 1}" class="rotate{ordering.rotation}" />
+          </preview>
           <p>{pageNum + 1}</p>
         </page>
       {/each}
@@ -202,13 +232,35 @@
             margin: 0;
         }
 
-        img {
+        preview {
+            display: flex;
+            align-items: center;
+            justify-content: center;
             height: var(--file-height);
-            max-width: 100%;
             box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+            background-color: #ff00ff;
+        }
+
+        img {
+            max-height: 100%;
+            max-width: none;
+            width: auto;
+            transform-origin: center;
+
+            &.rotate90 { transform: rotate(90deg); max-height: unset; max-width: var(--file-height) }
+            &.rotate180 { transform: rotate(180deg); }
+            &.rotate270 { transform: rotate(270deg); max-height: unset; max-width: var(--file-height) }
         }
     }
 
+    page:not(:last-child) {
+        margin-right: var(--page-margin-right);
+    }
+
+    page:first-child {
+        padding-left: 1px;
+    }
+
     page:not(:last-child) {
         margin-right: var(--page-margin-right);
     }
diff --git a/src/lib/FocusedPage.svelte b/src/lib/FocusedPage.svelte
new file mode 100644
index 0000000..22d7e74
--- /dev/null
+++ b/src/lib/FocusedPage.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type {Page} from "./project";
+  import {previewToDataUrl} from "./project.js";
+
+  let { rotation, page, closeFocus }: { rotation: number, page: Page, closeFocus: (a: number) => void } = $props();
+  let newRotation: number = $state(rotation);
+
+  function rotateCW() {
+    newRotation = (newRotation + 90) % 360;
+  }
+
+  function rotateCCW() {
+    newRotation = (newRotation + 270) % 360;
+  }
+
+  function closeAndSave(_: MouseEvent) {
+    closeFocus(newRotation);
+  }
+</script>
+
+<div>
+  <tools>
+    <button onclick={closeAndSave}>Close</button>
+    <button onclick={rotateCW}>
+      <i class="fas fa-redo"></i>
+    </button>
+    <button onclick={rotateCCW}>
+      <i class="fas fa-undo"></i>
+    </button>
+  </tools>
+  <page class="rotate{newRotation}">
+    <img src={previewToDataUrl(page.preview_jpg)} alt="Page preview" />
+  </page>
+</div>
+
+<style>
+  tools {
+      display: block;
+      padding-bottom: 1rem;
+  }
+
+  page {
+      width: 100%;
+      display: flex;
+
+      &.rotate90 { transform: rotate(90deg); }
+      &.rotate180 { transform: rotate(180deg); }
+      &.rotate270 { transform: rotate(270deg); }
+
+      img {
+          margin: auto;
+      }
+  }
+</style>
diff --git a/src/lib/project.ts b/src/lib/project.ts
new file mode 100644
index 0000000..012da80
--- /dev/null
+++ b/src/lib/project.ts
@@ -0,0 +1,26 @@
+export type Page = {
+  preview_jpg: string
+  dimensions: [number, number]
+}
+
+export type SourceFile = {
+  pages: Page[]
+  path: string,
+}
+
+export type Ordering = {
+  id: number,
+  source_file_index: number,
+  page_index: number,
+  enabled: boolean,
+  rotation: number,
+}
+
+export type Project = {
+  source_files: SourceFile[],
+  ordering: Ordering[],
+}
+
+export function previewToDataUrl(preview_jpg: string) {
+  return "data:image/jpg;base64," + preview_jpg
+}