diff --git a/client/src/components/Book.vue b/client/src/components/Book.vue
index b350d40..b1573c5 100644
--- a/client/src/components/Book.vue
+++ b/client/src/components/Book.vue
@@ -2,9 +2,9 @@
   <div class="book" v-if="grids && style && solutionStyle">
     <GridPaper v-for="(grid, i) in grids" :key="grid.id" :grid="grid" :style="style" :exportOptions="gridExport"
       :pagination="solutionStyle.pagination" :page="solutionStyle.pagination.startIdx + i" />
-    <IndexPaper :grids="grids" :solutionStyle="solutionStyle" :exportOptions="solutionExport"
+    <IndexPaper :grids="grids" :solutionStyle="solutionStyle" :format="style.paper" :exportOptions="solutionExport"
       :page="solutionStyle.pagination.startIdx + grids.length" @pageCount="evt => indexPages = evt" />
-    <SolutionPaper :grids="grids" :solutionStyle="solutionStyle" :exportOptions="solutionExport"
+    <SolutionPaper :grids="grids" :solutionStyle="solutionStyle" :format="style.paper" :exportOptions="solutionExport"
       :page="solutionStyle.pagination.startIdx + grids.length + indexPages" />
   </div>
 </template>
@@ -61,7 +61,7 @@ const solutionExport = computed(() => ({
     splits: false,
     spaces: false,
     definitions: false,
-    cellsBackground: false
+    cellsBackground: false,
   },
   ...props.exportOptions,
 }));
diff --git a/client/src/components/GridPaper.vue b/client/src/components/GridPaper.vue
index 82a2764..af2e8c8 100644
--- a/client/src/components/GridPaper.vue
+++ b/client/src/components/GridPaper.vue
@@ -1,19 +1,8 @@
 <template>
-  <Paper
-    :format="style.paper"
-    :showMargins="exportOptions.margins"
-    :showPagination="!!exportOptions.pagination"
-    :pagination="pagination"
-    :pageNumber="page"
-  >
-    <SVGGrid
-      v-if="grid && style"
-      :grid="grid"
-      :focus="nullCell"
-      dir="horizontal"
-      :style="style"
-      :export-options="exportOptions"
-    />
+  <Paper :format="style.paper" :showMargins="exportOptions.margins" :showPagination="!!exportOptions.pagination"
+    :pagination="pagination" :pageNumber="page" body-full-height>
+    <SVGGrid v-if="grid && style" :grid="grid" :focus="nullCell" dir="horizontal" :style="style"
+      :export-options="exportOptions" />
   </Paper>
 </template>
 
@@ -44,5 +33,4 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="less">
-</style>
+<style lang="less"></style>
diff --git a/client/src/components/Paper.vue b/client/src/components/Paper.vue
index e88ee00..3a3f440 100644
--- a/client/src/components/Paper.vue
+++ b/client/src/components/Paper.vue
@@ -49,6 +49,10 @@ const props = defineProps<{
    * Class to add to the body
    */
   bodyClass?: string;
+  /**
+   * Wether body takes full height or not
+   */
+  bodyFullHeight?: boolean;
   pageNumber?: number;
   showPagination: boolean;
   pagination?: PaginationStyle;
@@ -96,6 +100,25 @@ const padding = computed(() => {
   const { top, left, right, bottom } = props.format.margin;
   return [top, right, bottom, left].map((m) => `${m}cm`).join(" ");
 });
+const maxHeight = computed(() => {
+  const p = props.pagination;
+  const mb = p ? p.margin.bottom : 'null';
+  const ms = p ? p.size : 'null';
+  const { top, bottom } = props.format.margin;
+  const toRemove = [
+    `${top}cm`,
+    `${bottom}cm`,
+    `${mb}`,
+    `${ms}`
+  ]
+    .filter(e => e !== 'null')
+    .join(' - ');
+  return `calc(${pageHeight.value} - ${toRemove})`;
+});
+const height = computed(() => {
+  return props.bodyFullHeight ? maxHeight.value : "unset";
+
+});
 const formatStyle = computed(() => {
   if (!props.format) return "";
   return `${props.format.width}cm ${props.format.height}cm`;
@@ -138,7 +161,8 @@ body {
       flex-direction: column;
       align-items: center;
       justify-content: space-around;
-      height: 100%;
+      max-height: v-bind(maxHeight);
+      height: v-bind(height);
       width: 100%;
     }
 
diff --git a/client/src/components/Solutions.vue b/client/src/components/Solutions.vue
index 367bbb5..42034d1 100644
--- a/client/src/components/Solutions.vue
+++ b/client/src/components/Solutions.vue
@@ -1,13 +1,14 @@
 <template>
   <div v-if="grids && solutionStyle">
     <FontLoader :value="solutionStyle.grids.gridN" />
-    <Paper v-for="(gs, i) in gridsPerPage" :key="i" :format="solutionStyle.paper" :showMargins="exportOptions.margins"
-      :page-number="page + i" :showPagination="exportOptions.pagination" :pagination="solutionStyle.pagination">
+    <Paper v-for="(gs, i) in gridsPerPage" :key="i" :format="printFormat" :showMargins="exportOptions.margins"
+      :page-number="page + i" :showPagination="exportOptions.pagination" body-full-height
+      :pagination="solutionStyle.pagination">
       <div class="grids">
         <div v-for="(grid, j) in gs" :key="j" class="grid-c">
           <span class="gridN">{{ j + solutionStyle.pagination.startIdx }}</span>
-          <SVGGrid :grid="grid" :focus="nullCell" dir="horizontal" :style="solutionStyle" :export-options="exportOptions"
-            :export-style="exportOptions" />
+          <SVGGrid :grid="grid" :focus="nullCell" dir="horizontal" :style="solutionStyle"
+            :export-options="exportOptions" :export-style="exportOptions" />
         </div>
       </div>
     </Paper>
@@ -19,7 +20,7 @@ import { defineProps, defineEmits } from "vue";
 import SVGGrid from "./svg-renderer/Grid.vue";
 import Paper from "./Paper.vue";
 import FontLoader from "./fonts/FontLoader.vue";
-import { Grid, nullCell, SolutionStyle } from "grid";
+import { Format, Grid, nullCell, SolutionStyle } from "grid";
 import { computed } from "vue";
 import { ExportOptions } from "../types";
 import { getFont } from "../js/useFont";
@@ -44,18 +45,25 @@ const props = defineProps<{
    * What to export
    */
   exportOptions: ExportOptions;
+
+  format?: Format;
   /**
    * number of the first page
    */
   page: number;
 }>();
+const printFormat = computed(() => props.format || props.solutionStyle.paper);
 const rows = computed(() => {
   if (!props.solutionStyle) return "";
-  return `repeat(${props.solutionStyle.grids.rows},0)`;
+  const r = props.solutionStyle.grids.rows;
+  const percent = Math.floor(100 / r);
+  return `repeat(${r}, ${percent}%)`;
 });
 const cols = computed(() => {
   if (!props.solutionStyle) return "";
-  return `repeat(${props.solutionStyle.grids.cols},0)`;
+  const r = props.solutionStyle.grids.cols;
+  const percent = Math.floor(100 / r);
+  return `repeat(${r}, ${percent}%)`;
 });
 const gridNFont = computed(() => getFont(props.solutionStyle.grids.gridN));
 const gridNColor = computed(() => {
diff --git a/client/src/components/WordsIndex.vue b/client/src/components/WordsIndex.vue
index 58a5b1c..a4010a3 100644
--- a/client/src/components/WordsIndex.vue
+++ b/client/src/components/WordsIndex.vue
@@ -1,19 +1,21 @@
 <template>
   <div v-if="grids && solutionStyle">
-
+    <!-- <button @click="refresh"> Refresh</button> -->
     <FontLoader :value="solutionStyle.grids.gridN" />
     <FontLoader :value="solutionStyle.words" />
-    <Paper v-for="(words, i) in layout.wordsPerPage" :key="i" :format="solutionStyle.paper"
-      :showMargins="exportOptions.margins" :showPagination="exportOptions.pagination" :pageNumber="page + i"
-      :pagination="solutionStyle.pagination" bodyClass="body-index">
-      <span class="words" ref="wordsContainer">
+    <Paper v-for="(words, i) in layout.wordsPerPage" :key="i" :format="printFormat" :showMargins="exportOptions.margins"
+      :showPagination="exportOptions.pagination" :pageNumber="page + i" :pagination="solutionStyle.pagination"
+      bodyClass="body-index">
+      <span class="words" ref="wordsContainer"
+        :style="i === layout.wordsPerPage.length - 1 ? { height: `${layout.lastPageHeight}px` } : null">
         <span v-for="(word, j) in words" :class="typeof word === 'number' ? 'size' : 'word'" :key="word">
           {{ word }}
         </span>
       </span>
     </Paper>
     <Teleport to="#outside">
-      <Paper class="paper ruler" :format="solutionStyle.paper" :showMargins="true" :showPagination="true" :pageNumber="1">
+      <Paper class="paper ruler" :format="solutionStyle.paper" :showMargins="true" :showPagination="true"
+        :pageNumber="1" :pagination="solutionStyle.pagination">
         <span class="words ruler" ref="ruler"> </span>
       </Paper>
     </Teleport>
@@ -22,7 +24,7 @@
 
 <script setup lang="ts">
 import { defineProps, ref, defineEmits, watch } from "vue";
-import { Grid, getAllWords, SolutionStyle } from "grid";
+import { Grid, getAllWords, SolutionStyle, Format } from "grid";
 import { computed } from "vue";
 import Paper from "./Paper.vue";
 import FontLoader from "./fonts/FontLoader.vue";
@@ -47,20 +49,20 @@ const props = defineProps<{
    * The styles to render list
    */
   solutionStyle: SolutionStyle;
+  format?: Format;
   page: number;
 }>();
 
 const emit = defineEmits<{
   (event: "pageCount", value: number): void;
 }>();
-
+const printFormat = computed(() => props.format || props.solutionStyle.paper);
 const wordFont = computed(() => getFont(props.solutionStyle.words));
 const wordsColor = computed(() => props.solutionStyle.words.color);
 const sizeFont = computed(() => getFont(props.solutionStyle.size));
 const sizeColor = computed(() => props.solutionStyle.size.color);
-const layout = ref<{ wordsPerPage: (number | string)[][]; heights: string[]; }>({
+const layout = ref<{ wordsPerPage: (number | string)[][]; lastPageHeight?: number; }>({
   wordsPerPage: [],
-  heights: [],
 });
 const columnGap = 10;
 const gap = computed(() => `${columnGap}px`);
@@ -80,9 +82,29 @@ function nodesBSStart(
   return start;
 }
 
+function findHeightLastPage(ruler: HTMLDivElement, maxWidth: number,) {
+  let start = 0;
+  let end = ruler.getBoundingClientRect().height;
+  const lastChild = ruler.lastElementChild as HTMLDivElement;
+  while (start <= end) {
+    const middle = (start + end) >>> 1;
+    ruler.style.height = `${middle}px`;
+    const { x, width } = lastChild.getBoundingClientRect();
+    const right = x + width;
+    if (right < maxWidth) {
+      end = middle - 1;
+    }
+    else {
+      start = middle + 1;
+    }
+  }
+  ruler.style.height = ``;
+  return start;
+}
+
 function refresh() {
   if (!props.grids || !ruler.value) {
-    layout.value = { wordsPerPage: [], heights: [] };
+    layout.value = { wordsPerPage: [] };
     return;
   }
   const words = Array.from(getAllWords(props.grids))
@@ -118,24 +140,23 @@ function refresh() {
         allTexts.push(word);
       });
     });
-
-  // find the first node outside boundaries: 
-  const nodes = Array.from(r.children) as HTMLDivElement[];
-  const maxX = nodes[nodes.length - 1].getBoundingClientRect().x;
-  const pages = Math.ceil(maxX / W);
-  const indexes = [0];
   const wordsPerPage = [];
-  for (let i = 0; i < pages; i++) {
-    indexes.push(nodesBSStart(nodes, 0, nodes.length - 1, startX + (i + 1) * W - tolerance));
-    wordsPerPage.push(allTexts.slice(indexes[i], indexes[i + 1]));
-  }
-  if (indexes[indexes.length - 1] < allTexts.length - 1) {
-    wordsPerPage.push(wordsPerPage.slice(indexes.length - 1));
+  let offset = 0;
+  let lastPageHeight = 0;
+  while (r.children.length) {
+    const nodes = Array.from(r.children) as HTMLDivElement[];
+    const lastIndex = nodesBSStart(nodes, 0, nodes.length - 1, startX + W - tolerance);
+    wordsPerPage.push(allTexts.slice(offset, offset + lastIndex));
+    if (lastIndex === nodes.length) {
+      lastPageHeight = findHeightLastPage(r, startX + W - tolerance);
+    }
+    offset += lastIndex;
+    nodes.slice(0, lastIndex).forEach(n => r.removeChild(n));
   }
-  // r.innerHTML = "";
+  r.innerHTML = "";
   layout.value = {
     wordsPerPage,
-    heights: ['100%']
+    lastPageHeight
   };
   emit('pageCount', wordsPerPage.length);
 }
@@ -188,8 +209,6 @@ props.exportOptions], () => {
   z-index: 1000;
 }
 
-.words.ruler {}
-
 .size {
   font: v-bind(sizeFont);
   color: v-bind(sizeColor);
diff --git a/client/src/components/forms/FormatPicker.vue b/client/src/components/forms/FormatPicker.vue
index 170074c..53727fa 100644
--- a/client/src/components/forms/FormatPicker.vue
+++ b/client/src/components/forms/FormatPicker.vue
@@ -1,12 +1,12 @@
 <template>
   <span class="formatpicker">
     <h3>{{ $t("forms.format") }}</h3>
-    <n-form-item :label="$t('forms.format')" path="fomat.name">
+    <n-form-item :label="$t('forms.format')" path="format.name">
       <n-select v-model:value="format" :options="options" />
     </n-form-item>
-    <!-- <n-form-item label="Orientation" path="fomat.orientation">
-        <n-select v-model:value="value.orientation" :options="orientations" />
-      </n-form-item> -->
+    <n-form-item :label="$t('forms.orientation')" path="format.orientation">
+      <n-select v-model:value="orientation" :options="orientations" />
+    </n-form-item>
     <n-form-item :label="$t('forms.width')" path="format.width">
       <n-input-number role="format-width" v-model:value="value.width" />
     </n-form-item>
@@ -19,14 +19,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, defineEmits, computed, watchEffect } from "vue";
+import { ref, defineProps, defineEmits, computed, watchEffect, toRaw, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { useModel } from "../../js/useModel";
 import { Format } from "grid";
 import MarginForm from "./MarginForm.vue";
 /**
  * Form to edit paper format and margins
  */
-
 const props = defineProps<{
   /** The format to edit */
   modelValue: Format;
@@ -37,7 +37,7 @@ const emit = defineEmits<{
    */
   (event: "update:modelValue", value: Format): void;
 }>();
-
+const i18n = useI18n();
 const options = ref([
   {
     label: "A5",
@@ -59,17 +59,23 @@ const options = ref([
 
 const orientations = ref([
   {
-    label: "Portrait",
+    label: i18n.t('forms.portrait'),
     value: "portrait",
   },
   {
-    label: "Paysage",
-    value: "paysage",
+    label: i18n.t('forms.landscape'),
+    value: "landscape",
   },
 ]);
 
-function decompose(format: string) {
-  return format.split("x").map((e) => +e);
+
+function getWH(format: string, orientation: string) {
+  if (format === "custom") return [props.modelValue.height, props.modelValue.width];
+  const [w, h] = format.split("x").map((e) => +e);
+  if (orientation === "portrait") {
+    return [Math.min(w, h), Math.max(w, h)];
+  }
+  return [Math.max(w, h), Math.min(w, h)];
 }
 /**
  * The format selected
@@ -80,7 +86,7 @@ const format = computed({
     const height = props.modelValue.height;
     const option =
       options.value.find((o) => {
-        const [h, w] = decompose(o.value);
+        const [w, h] = getWH(o.value, orientation.value);
         if (w === width && h === height) return true;
       }) ||
       (options.value.find((o) => o.value === "custom") as {
@@ -90,18 +96,30 @@ const format = computed({
     return option.value;
   },
   set: (format) => {
-    const lengths =
-      format === "custom"
-        ? [props.modelValue.height, props.modelValue.width]
-        : decompose(format);
-    if (format === "portrait") {
-      lengths.sort((a, b) => a - b);
-    } else if (format === "paysage") {
-      lengths.sort((a, b) => b - a);
-    }
-    const [height, width] = lengths;
+    console.log("Set", format, orientation.value);
+    const [width, height] = getWH(format, orientation.value);
     emit("update:modelValue", {
-      ...props.modelValue,
+      ...toRaw(props.modelValue),
+      width,
+      height,
+    });
+  },
+});
+
+const orientation = computed({
+  get: () => {
+    const width = props.modelValue.width;
+    const height = props.modelValue.height;
+    return width > height ? "landscape" : "portrait";
+  },
+  set: (orientation) => {
+    const w = props.modelValue.width;
+    const h = props.modelValue.height;
+    const width = orientation === "portrait" ? Math.min(w, h) : Math.max(w, h);
+    const height = orientation === "portrait" ? Math.max(w, h) : Math.min(w, h);
+
+    emit("update:modelValue", {
+      ...toRaw(props.modelValue),
       width,
       height,
     });
@@ -115,6 +133,7 @@ const value = useModel<Format>(props, emit);
 .sizeinput {
   display: flex;
 }
+
 .n-base-selection-label {
   min-width: 72px;
 }
diff --git a/client/src/components/modals/GridCopyModal.vue b/client/src/components/modals/GridCopyModal.vue
index e91156f..86a0964 100644
--- a/client/src/components/modals/GridCopyModal.vue
+++ b/client/src/components/modals/GridCopyModal.vue
@@ -13,8 +13,8 @@
           <InfoPopup>
             <div class="gridcopyinfo">
               <span v-for="action in actions" :key="action"><b>{{ $t(`forms.${action}`) }}</b>: {{
-                $t(`help.${action}grid`)
-              }}<br /></span>
+    $t(`help.${action}grid`)
+  }}<br /></span>
             </div>
           </InfoPopup>
         </n-form-item>
diff --git a/client/src/i18n/languages/en-en.ts b/client/src/i18n/languages/en-en.ts
index e935a16..22e574b 100644
--- a/client/src/i18n/languages/en-en.ts
+++ b/client/src/i18n/languages/en-en.ts
@@ -114,6 +114,9 @@ export const lang = {
     mode: 'Mode',
     target: "Target Book",
     addWords: 'Add words',
+    orientation: "Orientation",
+    portrait: "Portrait",
+    landscape: "Landscape",
   },
   tooltips: {
     incomplete: "is incomplete",
diff --git a/client/src/i18n/languages/es-es.ts b/client/src/i18n/languages/es-es.ts
index 7504938..20b0b62 100644
--- a/client/src/i18n/languages/es-es.ts
+++ b/client/src/i18n/languages/es-es.ts
@@ -114,6 +114,9 @@ export const lang = {
         mode: 'Modo',
         target: "Objetivo Cuadrícula",
         addWords: 'Añadir palabras',
+        orientation: "Orientación",
+        portrait: "Vertical",
+        landscape: "Horizontal",
     },
     tooltips: {
         incomplete: "esta incompleto",
diff --git a/client/src/i18n/languages/fr-fr.ts b/client/src/i18n/languages/fr-fr.ts
index eb9d211..15ae8b7 100644
--- a/client/src/i18n/languages/fr-fr.ts
+++ b/client/src/i18n/languages/fr-fr.ts
@@ -115,6 +115,9 @@ export const lang = {
         mode: 'Mode',
         target: "Livre Cible",
         addWords: 'Ajouter des mots',
+        orientation: "Orientation",
+        portrait: "Portrait",
+        landscape: "Paysage",
     },
     tooltips: {
         incomplete: "est incomplet",
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index ea1a105..388bf52 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -26,7 +26,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('../views/Books.vue')
   },
   {
-    path: '/grid/:id',
+    path: '/grid/:id/:style',
     name: 'grid',
     component: () => import('../views/editors/GridEditor.vue')
   },
diff --git a/client/src/views/Book.vue b/client/src/views/Book.vue
index f7945df..c951703 100644
--- a/client/src/views/Book.vue
+++ b/client/src/views/Book.vue
@@ -1,6 +1,6 @@
 <template>
   <Layout v-if="style && solutionsStyle" :eltList="grids" :onCreate="createGrid" :onDelete="onDelete"
-    :getLink="(grid) => `/grid/${grid.id}`" @select="(s) => (selected = s)" :has-create-button="true"
+    :getLink="(grid) => `/grid/${grid.id}/${style.id}`" @select="(s) => (selected = s)" :has-create-button="true"
     :has-delete-button="true">
     <template v-slot:left-panel>
       <BookButtons v-if="isBook && book" :style="style" :solutionsStyle="solutionsStyle" :selected="selectedIds"
@@ -60,7 +60,16 @@ const solutionsStyle = ref<SolutionStyle>();
 const selected = ref<Grid[]>([]);
 const thumbnails = ref<string[]>([]);
 const exportQuery = computed(() => {
-  const res = { ids: selected.value.map((s) => s.id).join(",") };
+  const ids = (selected.value.length ? selected.value : grids.value)
+    .map(g => g.id)
+    .join(',');
+  const style = book.value ? book.value.style : 'default';
+  const solution = book.value ? book.value.solutionStyle : 'solution';
+  const res = {
+    ids,
+    style,
+    solution
+  };
   return res;
 });
 const isBook = computed(() => route.name === 'book');
diff --git a/client/src/views/editors/GridEditor.vue b/client/src/views/editors/GridEditor.vue
index 0062caa..f94461f 100644
--- a/client/src/views/editors/GridEditor.vue
+++ b/client/src/views/editors/GridEditor.vue
@@ -23,7 +23,7 @@ function fetch() {
     .getGrid(route.params.id as string)
     .then((g) => {
       grid.value = g!;
-      return api.db.getStyle(grid.value!.styleId);
+      return api.db.getStyle(route.params.style as string || 'default');
     })
     .then((opts) => {
       style.value = opts;
diff --git a/client/src/views/print/Book.vue b/client/src/views/print/Book.vue
index 6241b7b..9fd4022 100644
--- a/client/src/views/print/Book.vue
+++ b/client/src/views/print/Book.vue
@@ -42,12 +42,14 @@ function fetch() {
     : api.getGrids().then((gs) => {
       grids.value = gs;
     });
+  const solutionId = route.query.solution as string || 'solution';
+  const styleId = route.query.style as string || 'default';
   return promise
-    .then(() => api.db.getStyle("solution"))
+    .then(() => api.db.getStyle(solutionId))
     .then((solutions) => {
       solutionStyle.value = solutions as SolutionStyle;
     })
-    .then(() => api.db.getStyle("default"))
+    .then(() => api.db.getStyle(styleId))
     .then((s) => {
       style.value = s as GridStyle;
     })
@@ -97,4 +99,3 @@ onUnmounted(() => {
   top: 20px;
 }
 </style>
-