diff --git a/app/assets/viewer_svgs/camera-bookmark.svg b/app/assets/viewer_svgs/camera-bookmark.svg
new file mode 100644
index 00000000..12a84538
--- /dev/null
+++ b/app/assets/viewer_svgs/camera-bookmark.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="svg"
+   version="1.1"
+   width="400"
+   height="400"
+   viewBox="0 0 400 400"
+   xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask id="cutout-mask">
+      <rect width="400" height="400" fill="white" />
+      <!-- Trou de l'objectif -->
+      <circle cx="175" cy="230" r="55" fill="black" />
+      <!-- Trou du Marque-page (Bookmark) en négatif -->
+      <path d="M 265,140 L 315,140 L 315,280 L 290,255 L 265,280 Z" fill="black" />
+    </mask>
+  </defs>
+  
+  <g fill="#131313">
+    <!-- Corps de la caméra massif qui sera découpé par le masque -->
+    <path d="M 100,140 C 80,140 60,160 60,180 L 60,300 C 60,320 80,340 100,340 L 320,340 C 340,340 360,320 360,300 L 360,180 C 360,160 340,140 320,140 L 260,140 L 240,100 L 160,100 L 140,140 Z" mask="url(#cutout-mask)" />
+    
+    <!-- Petit reflet/iris pour le détail de l'objectif -->
+    <circle cx="175" cy="230" r="22" />
+  </g>
+</svg>
diff --git a/app/components/ActionButton.vue b/app/components/ActionButton.vue
index 8cadbb69..807fccc1 100644
--- a/app/components/ActionButton.vue
+++ b/app/components/ActionButton.vue
@@ -25,6 +25,15 @@ const emit = defineEmits(["click"]);
     icon
     @click="emit('click', $event)"
   >
-    <v-icon :size="iconSize">{{ icon }}</v-icon>
+    <v-icon v-if="typeof icon === 'string' && icon.startsWith('mdi-')" :size="iconSize">{{
+      icon
+    }}</v-icon>
+    <v-img
+      v-else
+      :src="icon"
+      :height="iconSize"
+      :width="iconSize"
+      class="d-flex justify-center align-center"
+    />
   </v-btn>
 </template>
diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
new file mode 100644
index 00000000..7cfa49a9
--- /dev/null
+++ b/app/components/CameraManager.vue
@@ -0,0 +1,221 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+import { useCameraManagerStore } from "@ogw_front/stores/camera_manager";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const emit = defineEmits(["close"]);
+
+const { show_dialog, width } = defineProps({
+  show_dialog: { type: Boolean, required: true },
+  width: { type: Number, required: false, default: 450 },
+});
+
+const cameraManagerStore = useCameraManagerStore();
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const savedPositions = cameraManagerStore.refAllCameraPositions();
+const allObjects = dataStore.refAllItems();
+
+const newPositionName = ref("");
+const selectedObjectId = ref(undefined);
+
+const editingId = ref(undefined);
+const editingName = ref("");
+
+async function saveCurrentPosition() {
+  if (!newPositionName.value) {
+    return;
+  }
+  await cameraManagerStore.saveCameraPosition(
+    newPositionName.value,
+    toRaw(hybridViewerStore.camera_options),
+    selectedObjectId.value,
+  );
+  newPositionName.value = "";
+  selectedObjectId.value = undefined;
+}
+
+async function restorePosition(positionId) {
+  const position = await cameraManagerStore.getCameraPosition(positionId);
+  if (position) {
+    if (hybridViewerStore.genericRenderWindow) {
+      hybridViewerStore.setCamera(position.camera_options);
+    } else {
+      await cameraManagerStore.restoreCameraPosition(positionId);
+    }
+  }
+}
+
+async function deletePosition(positionId) {
+  await cameraManagerStore.deleteCameraPosition(positionId);
+}
+
+function startEditing(position) {
+  editingId.value = position.id;
+  editingName.value = position.name;
+}
+
+async function saveRename() {
+  if (editingName.value) {
+    await cameraManagerStore.renameCameraPosition(editingId.value, editingName.value);
+  }
+  editingId.value = undefined;
+}
+
+function getObjectName(objectId) {
+  if (!objectId) {
+    return "None";
+  }
+  const obj = allObjects.value.find((object) => object.id === objectId);
+  return obj ? obj.name : "Unknown";
+}
+</script>
+
+<template>
+  <GlassCard
+    v-if="show_dialog"
+    @click.stop
+    title="Camera Positions"
+    :width="width"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute elevation-24"
+    style="z-index: 2; top: 90px; right: 55px"
+  >
+    <v-card-text class="pa-0">
+      <!-- Save Current Position Section -->
+      <v-container class="pa-5 pb-2 bg-surface-variant-lighten-5">
+        <v-row dense>
+          <v-col cols="12">
+            <v-text-field
+              v-model="newPositionName"
+              label="Position Name"
+              placeholder="e.g. Front View"
+              density="compact"
+              variant="outlined"
+              hide-details
+              class="mb-3"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="8">
+            <v-select
+              v-model="selectedObjectId"
+              :items="allObjects"
+              item-title="name"
+              item-value="id"
+              label="Attach to Object"
+              placeholder="Optional"
+              density="compact"
+              variant="outlined"
+              hide-details
+              clearable
+            ></v-select>
+          </v-col>
+          <v-col cols="4" class="d-flex align-center">
+            <v-btn
+              color="primary"
+              variant="elevated"
+              block
+              :disabled="!newPositionName"
+              @click="saveCurrentPosition"
+              height="40"
+            >
+              Save
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+
+      <v-divider></v-divider>
+
+      <!-- Saved Positions List -->
+      <v-list v-if="savedPositions.length > 0" class="bg-transparent pa-2" lines="two">
+        <v-list-item
+          v-for="position in savedPositions"
+          :key="position.id"
+          class="rounded-lg mb-1"
+          :active="editingId === position.id"
+          active-color="primary"
+        >
+          <template #prepend>
+            <v-btn
+              icon
+              variant="tonal"
+              color="success"
+              size="small"
+              class="mr-2"
+              @click="restorePosition(position.id)"
+            >
+              <v-icon size="20">mdi-play</v-icon>
+              <v-tooltip activator="parent" location="top">Restore</v-tooltip>
+            </v-btn>
+          </template>
+
+          <v-list-item-title class="font-weight-bold">
+            <v-text-field
+              v-if="editingId === position.id"
+              v-model="editingName"
+              density="compact"
+              variant="underlined"
+              hide-details
+              autofocus
+              @keyup.enter="saveRename"
+              @blur="saveRename"
+            ></v-text-field>
+            <span v-else>{{ position.name }}</span>
+          </v-list-item-title>
+
+          <v-list-item-subtitle v-if="editingId !== position.id">
+            <v-icon size="14" class="mr-1">mdi-paperclip</v-icon>
+            {{ getObjectName(position.object_id) }}
+          </v-list-item-subtitle>
+
+          <template #append>
+            <div class="d-flex g-1">
+              <v-btn
+                icon
+                variant="text"
+                size="small"
+                color="grey-darken-1"
+                @click="startEditing(position)"
+              >
+                <v-icon size="18">mdi-pencil</v-icon>
+                <v-tooltip activator="parent" location="top">Rename</v-tooltip>
+              </v-btn>
+              <v-btn
+                icon
+                variant="text"
+                size="small"
+                color="error"
+                @click="deletePosition(position.id)"
+              >
+                <v-icon size="18">mdi-delete</v-icon>
+                <v-tooltip activator="parent" location="top">Delete</v-tooltip>
+              </v-btn>
+            </div>
+          </template>
+        </v-list-item>
+      </v-list>
+      <div v-else class="text-center text-grey-lighten-1 py-8 italic">
+        <v-icon size="48" class="mb-2 d-block mx-auto opacity-20">mdi-camera-off</v-icon>
+        No saved positions yet.
+      </div>
+    </v-card-text>
+
+    <v-divider></v-divider>
+
+    <v-card-actions class="pa-4">
+      <v-spacer></v-spacer>
+      <v-btn variant="text" color="grey-darken-1" @click="emit('close')">Close</v-btn>
+    </v-card-actions>
+  </GlassCard>
+</template>
+
+<style scoped>
+:deep(.v-list-item__prepend) {
+  margin-inline-end: 12px !important;
+}
+</style>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 96007773..e8c8b57f 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -1,17 +1,18 @@
 <script setup>
-import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
 import ActionButton from "@ogw_front/components/ActionButton.vue";
+import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
+import CameraManager from "@ogw_front/components/CameraManager";
 import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
-
+import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
 const take_screenshot = ref(false);
+const show_camera_manager = ref(false);
 const showCameraOrientation = ref(false);
 const showZScaling = ref(false);
 const grid_scale = ref(false);
@@ -44,6 +45,14 @@ const camera_options = [
       showCameraOrientation.value = !showCameraOrientation.value;
     },
   },
+  {
+    tooltip: "Manage camera positions",
+    icon: CameraBookmarkIcon,
+    iconSize: 34,
+    action: () => {
+      show_camera_manager.value = !show_camera_manager.value;
+    },
+  },
   {
     tooltip: "Take a screenshot",
     icon: "mdi-camera",
@@ -84,6 +93,7 @@ const camera_options = [
         <ActionButton
           :icon="camera_option.icon"
           :tooltip="camera_option.tooltip"
+          :icon-size="camera_option.iconSize"
           tooltip-location="left"
           @click.stop="camera_option.action"
         />
@@ -96,6 +106,7 @@ const camera_options = [
     @select="hybridViewerStore.setCameraOrientation"
   />
   <Screenshot v-model="take_screenshot" />
+  <CameraManager :show_dialog="show_camera_manager" @close="show_camera_manager = false" />
   <ZScaling
     v-model:show="showZScaling"
     v-model="zScale"
diff --git a/app/stores/camera_manager.js b/app/stores/camera_manager.js
new file mode 100644
index 00000000..4ef9e534
--- /dev/null
+++ b/app/stores/camera_manager.js
@@ -0,0 +1,57 @@
+// Third party imports
+import { liveQuery } from "dexie";
+import { useObservable } from "@vueuse/rxjs";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { database } from "@ogw_internal/database/database.js";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+export const useCameraManagerStore = defineStore("camera_manager", () => {
+  const viewerStore = useViewerStore();
+
+  function refAllCameraPositions() {
+    return useObservable(
+      liveQuery(() => database.camera_positions.toArray()),
+      { initialValue: [] },
+    );
+  }
+
+  async function getCameraPosition(id) {
+    return await database.camera_positions.get(id);
+  }
+
+  async function saveCameraPosition(name, camera_options, object_id = undefined) {
+    await database.camera_positions.put({
+      name,
+      object_id,
+      camera_options,
+    });
+  }
+
+  async function restoreCameraPosition(id) {
+    const position = await database.camera_positions.get(id);
+    if (position) {
+      await viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, {
+        camera_options: position.camera_options,
+      });
+    }
+  }
+
+  async function deleteCameraPosition(id) {
+    await database.camera_positions.delete(id);
+  }
+
+  async function renameCameraPosition(id, newName) {
+    await database.camera_positions.update(id, { name: newName });
+  }
+
+  return {
+    refAllCameraPositions,
+    getCameraPosition,
+    saveCameraPosition,
+    restoreCameraPosition,
+    deleteCameraPosition,
+    renameCameraPosition,
+  };
+});
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 94bc15dd..e6f68432 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -1,46 +1,41 @@
-import {
-  ORIENTATIONS,
-  animateCamera,
-  applyCameraOptions,
-  computeAverageBrightness,
-  getCameraOptions,
-} from "@ogw_front/utils/hybrid_viewer";
-import { dot } from "@kitware/vtk.js/Common/Core/Math";
-import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
-import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
-import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
-import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
-
 import {
   ACTOR_COLOR,
-  ALIGNMENT_THRESHOLD,
   BACKGROUND_COLOR,
-  BUMP_MULTIPLIER,
   EASE_EXPONENT,
-  LONG_ANIMATION_DURATION,
   SHORT_ANIMATION_DURATION,
   WHEEL_TIME_OUT_MS,
 } from "@ogw_front/utils/vtk/constants";
+import {
+  animateCamera,
+  applyCameraOptions,
+  computeAverageBrightness,
+  getCameraOptions,
+  performCameraOrientation,
+} from "@ogw_front/utils/hybrid_viewer";
 import { Status } from "@ogw_front/utils/status";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
+import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
+import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
+import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
+import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
 
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
   const hybridDb = reactive({});
-  const status = ref(Status.NOT_CREATED);
+  const viewerStore = useViewerStore();
   const camera_options = reactive({});
   const genericRenderWindow = reactive({});
+  const status = ref(Status.NOT_CREATED);
   const is_moving = ref(false);
+  const latestImage = ref(undefined);
   const zScale = ref(1);
-  let viewStream = undefined;
   let imageStyle = undefined;
+  let viewStream = undefined;
+  let wheelEventEndTimeout = undefined;
   const gridActor = undefined;
-
-  const latestImage = ref(undefined);
   const offscreenCanvas =
     typeof document === "undefined" ? undefined : document.createElement("canvas");
   const offscreenCtx = offscreenCanvas
@@ -56,12 +51,9 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       background: BACKGROUND_COLOR,
       listenWindowResize: false,
     });
-
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
-    imageStyle.transition = "opacity 0.1s ease-in";
-    imageStyle.zIndex = 1;
-
+    Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     await viewerStore.ws_connect();
     viewStream = viewerStore.client.getImageStream().createViewStream("-1");
     viewStream.onImageReady((event) => {
@@ -72,13 +64,11 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
     });
-
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    Object.assign(camera_options, getCameraOptions(camera));
     camera.onModified(() => {
       Object.assign(camera_options, getCameraOptions(camera));
     });
-
     status.value = Status.CREATED;
   }
 
@@ -86,14 +76,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     if (!genericRenderWindow.value) {
       return;
     }
-    const value = await dataStore.item(id);
     const reader = vtkXMLPolyDataReader();
-    const textEncoder = new TextEncoder();
-    await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));
-    const polydata = reader.getOutputData(0);
+    const value = await dataStore.item(id);
+    await reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable));
+    const actor = vtkActor();
     const mapper = vtkMapper();
+    const polydata = reader.getOutputData(0);
     mapper.setInputData(polydata);
-    const actor = vtkActor();
     actor.getProperty().setColor(ACTOR_COLOR);
     actor.setMapper(mapper);
     const renderer = genericRenderWindow.value.getRenderer();
@@ -109,8 +98,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     if (!hybridDb[id]) {
       return;
     }
-    const renderer = genericRenderWindow.value.getRenderer();
-    renderer.removeActor(hybridDb[id].actor);
+    genericRenderWindow.value.getRenderer().removeActor(hybridDb[id].actor);
     genericRenderWindow.value.getRenderWindow().render();
     delete hybridDb[id];
   }
@@ -120,14 +108,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       return;
     }
     hybridDb[id].actor.setVisibility(visibility);
-    const renderWindow = genericRenderWindow.value.getRenderWindow();
-    renderWindow.render();
+    genericRenderWindow.value.getRenderWindow().render();
   }
+
   async function setZScaling(z_scale) {
     zScale.value = z_scale;
     const renderer = genericRenderWindow.value.getRenderer();
-    const actors = renderer.getActors();
-    for (const actor of actors) {
+    for (const actor of renderer.getActors()) {
       if (actor !== gridActor) {
         const scale = actor.getScale();
         actor.setScale(scale[0], scale[1], z_scale);
@@ -136,70 +123,76 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     renderer.resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
     const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling;
-    if (!schema) {
-      return;
+    if (schema) {
+      await viewerStore.request(schema, { z_scale });
     }
-    await viewerStore.request(schema, {
-      z_scale,
-    });
     remoteRender();
   }
 
   function resetCamera() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    renderer.resetCamera();
+    genericRenderWindow.value.getRenderer().resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
     syncRemoteCamera();
   }
 
-  function setCameraOrientation(orientation) {
-    const config = ORIENTATIONS[orientation.toLowerCase()];
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
+  function setCamera(new_camera_options) {
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
     const startState = getCameraOptions(camera);
-
-    applyCameraOptions(camera, {
-      ...config,
-      focal_point: [0, 0, 0],
-    });
-    renderer.resetCamera();
-    const targetState = getCameraOptions(camera);
-
-    applyCameraOptions(camera, startState);
-
-    const alignment = dot(camera.getDirectionOfProjection(), config.position);
-    const duration =
-      alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
     is_moving.value = true;
-    imageStyle.opacity = 0;
-
+    if (imageStyle) {
+      imageStyle.opacity = 0;
+    }
     animateCamera({
       camera,
       startState,
-      targetState,
-      duration,
-      bumpMultiplier: BUMP_MULTIPLIER,
+      targetState: new_camera_options,
+      duration: SHORT_ANIMATION_DURATION,
+      bumpMultiplier: 0,
       easeExponent: EASE_EXPONENT,
       onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
       onEnd: () => {
+        applyCameraOptions(camera, new_camera_options);
+        genericRenderWindow.value.getRenderWindow().render();
         is_moving.value = false;
         syncRemoteCamera();
       },
     });
   }
 
-  function syncRemoteCamera() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
-    const params = { camera_options: getCameraOptions(camera) };
-    viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, params, {
-      response_function: () => {
-        remoteRender();
-        Object.assign(camera_options, params.camera_options);
+  function setCameraOrientation(orientation) {
+    performCameraOrientation({
+      orientation,
+      camera: genericRenderWindow.value.getRenderer().getActiveCamera(),
+      renderer: genericRenderWindow.value.getRenderer(),
+      renderWindow: genericRenderWindow.value.getRenderWindow(),
+      onStart: () => {
+        is_moving.value = true;
+        if (imageStyle) {
+          imageStyle.opacity = 0;
+        }
+      },
+      onEnd: () => {
+        is_moving.value = false;
+        syncRemoteCamera();
       },
     });
   }
 
+  function syncRemoteCamera() {
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    const options = getCameraOptions(camera);
+    viewerStore.request(
+      viewer_schemas.opengeodeweb_viewer.viewer.update_camera,
+      { camera_options: options },
+      {
+        response_function: () => {
+          remoteRender();
+          Object.assign(camera_options, options);
+        },
+      },
+    );
+  }
+
   function remoteRender() {
     return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render);
   }
@@ -212,32 +205,31 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     webGLRenderWindow.setUseBackgroundImage(true);
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
-    imageStyle.transition = "opacity 0.1s ease-in";
-    imageStyle.zIndex = 1;
+    Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
-
     useMousePressed({
       target: container,
       onPressed: (event) => {
         if (event.button === 0) {
           is_moving.value = true;
           event.stopPropagation();
-          imageStyle.opacity = 0;
+          if (imageStyle) {
+            imageStyle.opacity = 0;
+          }
         }
       },
       onReleased: () => {
-        if (!is_moving.value) {
-          return;
+        if (is_moving.value) {
+          is_moving.value = false;
+          syncRemoteCamera();
         }
-        is_moving.value = false;
-        syncRemoteCamera();
       },
     });
-
-    let wheelEventEndTimeout = undefined;
     useEventListener(container, "wheel", () => {
       is_moving.value = true;
-      imageStyle.opacity = 0;
+      if (imageStyle) {
+        imageStyle.opacity = 0;
+      }
       clearTimeout(wheelEventEndTimeout);
       wheelEventEndTimeout = setTimeout(() => {
         is_moving.value = false;
@@ -257,8 +249,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     await nextTick();
     webGLRenderWindow.setSize(width, height);
     viewStream.setSize(width, height);
-    const renderWindow = genericRenderWindow.value.getRenderWindow();
-    renderWindow.render();
+    genericRenderWindow.value.getRenderWindow().render();
     remoteRender();
   }
 
@@ -272,25 +263,22 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function exportStores() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
-    const cameraSnapshot = getCameraOptions(camera) || camera_options;
-    return { zScale: zScale.value, camera_options: cameraSnapshot };
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    return { zScale: zScale.value, camera_options: getCameraOptions(camera) || camera_options };
   }
 
   async function importStores(snapshot) {
     if (!snapshot) {
       return;
     }
-    const z_scale = snapshot.zScale;
-    if (typeof z_scale === "number") {
-      await setZScaling(z_scale);
+    if (typeof snapshot.zScale === "number") {
+      await setZScaling(snapshot.zScale);
     }
-
-    const { camera_options: snapshot_camera_options } = snapshot;
-    if (snapshot_camera_options) {
-      const renderer = genericRenderWindow.value.getRenderer();
-      applyCameraOptions(renderer.getActiveCamera(), snapshot_camera_options);
+    if (snapshot.camera_options) {
+      applyCameraOptions(
+        genericRenderWindow.value.getRenderer().getActiveCamera(),
+        snapshot.camera_options,
+      );
       genericRenderWindow.value.getRenderWindow().render();
       syncRemoteCamera();
     }
@@ -298,8 +286,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
 
   function clear() {
     const renderer = genericRenderWindow.value.getRenderer();
-    const actors = renderer.getActors();
-    for (const actor of actors) {
+    for (const actor of renderer.getActors()) {
       renderer.removeActor(actor);
     }
     genericRenderWindow.value.getRenderWindow().render();
@@ -316,6 +303,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     setVisibility,
     setZScaling,
     syncRemoteCamera,
+    setCamera,
     initHybridViewer,
     remoteRender,
     resize,
diff --git a/app/utils/hybrid_viewer.js b/app/utils/hybrid_viewer.js
index dbd00d8b..a01546a4 100644
--- a/app/utils/hybrid_viewer.js
+++ b/app/utils/hybrid_viewer.js
@@ -1,4 +1,12 @@
-import { SHORT_ANIMATION_DURATION } from "@ogw_front/utils/vtk/constants";
+import {
+  ALIGNMENT_THRESHOLD,
+  BUMP_MULTIPLIER,
+  EASE_EXPONENT,
+  LONG_ANIMATION_DURATION,
+  SHORT_ANIMATION_DURATION,
+} from "@ogw_front/utils/vtk/constants";
+import { dot } from "@kitware/vtk.js/Common/Core/Math";
+
 const RGB_MAX = 255;
 const BACKGROUND_GREY_VALUE = 180;
 const SAMPLE_SIZE = 10;
@@ -56,17 +64,13 @@ function computeAverageBrightness(rect, options) {
   if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
-
   const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
   if (!canvas) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
-
   const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
-
   offscreenCanvas.width = SAMPLE_SIZE;
   offscreenCanvas.height = SAMPLE_SIZE;
-
   try {
     offscreenCtx.drawImage(
       latestImage,
@@ -80,7 +84,6 @@ function computeAverageBrightness(rect, options) {
       SAMPLE_SIZE,
     );
     const { data } = offscreenCtx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
-
     let minBrightness = 1;
     for (let i = 0; i < TOTAL_CHANNELS; i += RGBA_CHANNELS) {
       const brightness = (data[i] + data[i + 1] + data[i + 2]) / (3 * RGB_MAX);
@@ -88,7 +91,6 @@ function computeAverageBrightness(rect, options) {
         minBrightness = brightness;
       }
     }
-
     return minBrightness;
   } catch {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
@@ -107,7 +109,6 @@ function animateCamera(options) {
     onEnd,
   } = options;
   const startTime = performance.now();
-
   function animate(currentTime) {
     const progress = Math.min((currentTime - startTime) / duration, 1);
     const ease =
@@ -115,7 +116,6 @@ function animateCamera(options) {
         ? 1 - (1 - progress) ** easeExponent
         : progress * (2 - progress);
     const bump = bumpMultiplier * Math.sin(Math.PI * progress);
-
     camera.set({
       position: startState.position.map(
         (startValue, index) =>
@@ -128,9 +128,7 @@ function animateCamera(options) {
         (startValue, index) => startValue + (targetState.focal_point[index] - startValue) * ease,
       ),
     });
-
     onUpdate();
-
     if (progress < 1) {
       requestAnimationFrame(animate);
     } else {
@@ -140,10 +138,35 @@ function animateCamera(options) {
   requestAnimationFrame(animate);
 }
 
+function performCameraOrientation(options) {
+  const { orientation, camera, renderer, renderWindow, onStart, onEnd } = options;
+  const config = ORIENTATIONS[orientation.toLowerCase()];
+  const startState = getCameraOptions(camera);
+  applyCameraOptions(camera, { ...config, focal_point: [0, 0, 0] });
+  renderer.resetCamera();
+  const targetState = getCameraOptions(camera);
+  applyCameraOptions(camera, startState);
+  const alignment = dot(camera.getDirectionOfProjection(), config.position);
+  const duration =
+    alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
+  onStart();
+  animateCamera({
+    camera,
+    startState,
+    targetState,
+    duration,
+    bumpMultiplier: BUMP_MULTIPLIER,
+    easeExponent: EASE_EXPONENT,
+    onUpdate: () => renderWindow.render(),
+    onEnd,
+  });
+}
+
 export {
   ORIENTATIONS,
   animateCamera,
   applyCameraOptions,
   computeAverageBrightness,
   getCameraOptions,
+  performCameraOrientation,
 };
diff --git a/internal/database/base_database.js b/internal/database/base_database.js
index a61c9f29..4b537bda 100644
--- a/internal/database/base_database.js
+++ b/internal/database/base_database.js
@@ -1,4 +1,5 @@
 import { Dexie } from "dexie";
+import { cameraPositionsTable } from "./tables/camera_positions";
 import { dataStyleTable } from "./tables/data_style";
 import { dataTable } from "./tables/data";
 import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
@@ -15,6 +16,7 @@ export class BaseDatabase extends Dexie {
       [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
       [modelComponentTypeDataStyleTable.name]: modelComponentTypeDataStyleTable.schema,
       [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
+      [cameraPositionsTable.name]: cameraPositionsTable.schema,
       treeview_config: "id",
     };
   }
diff --git a/internal/database/database.js b/internal/database/database.js
index 760ac001..0d0735c8 100644
--- a/internal/database/database.js
+++ b/internal/database/database.js
@@ -6,7 +6,7 @@ class Database extends BaseDatabase {
   constructor() {
     super("Database");
 
-    this.version(1).stores(BaseDatabase.initialStores);
+    this.version(3).stores(BaseDatabase.initialStores);
   }
 
   static async addTable(tableName, schemaDefinition) {
diff --git a/internal/database/tables/camera_positions.js b/internal/database/tables/camera_positions.js
new file mode 100644
index 00000000..799a8ce0
--- /dev/null
+++ b/internal/database/tables/camera_positions.js
@@ -0,0 +1,4 @@
+export const cameraPositionsTable = {
+  name: "camera_positions",
+  schema: "++id, name, object_id",
+};